• 0

CSS formatting


Question

Hey guys, I've always hated front end design of web sites. I've always loved the back end logic. But I figured it would really help to master it and I have to say I love WPF positioning a heck of a lot more then div positioning. Is there a book out there that provides good examples on how to format divs to get the display you want? The data part is fine but like for example I just want to have one div box float:left and then another div float:right and always hug the right side of the container div. Well the right div just floats to the right as much as the left div takes up space. It never truly "floats" right and hugs the right side of the parent div, which I want it to do. I'm good with back-end logic and C# desktop apps and such. I've just always hated trying to work with divs. It takes WAY too much time then it should. Hopefully that'll improve after reading a book on it.

Link to comment
https://www.neowin.net/forum/topic/1156024-css-formatting/
Share on other sites

13 answers to this question

Recommended Posts

  • 0

Well the front end stuff requires a logical mind too and there are always more than one way to achieve a single thing. I'd say that the best way to learn is to do what I did. Lots of trial and error! Lot's a googling too - you end up at places like stack overflow and w3 schools and more often than know someones usually asked the same question as you have!

Either way, best of luck in your learning :)

Edit: You mention reading a book - I'd personally go through the W3schools tutorials as you can put things into practice as you go along!

  • 0

Ok thanks. Well I know the basics of CSS formatting. I just don't know the tricks to get it to float right and hug the side. That is the main thing at the moment I'm trying to learn (without using gimmicky javascript to achieve it I technically could use jQuery to apply resizing to get what I want but I don't want to cheat). But there are many things like that I could learn that would be useful.

  • 0

css is very powerful but there's a lot of non-optimal ways of doing stuff out there. once you dig through enough google results you'll get a sense of which tutorial/article is higher quality than others.

nothing wrong with googling the end result you want to achive and seeing how different people arrive at that result, that's probably the more effective way of learning the less commonly used CSS properties/selectors/etc

  • 0

<div id="xGSListItmDefDiv" style="margin-bottom:5px;">
        <div id="xHdrDiv">
            <div id="xGSTitleDiv">
                @Html.Raw(gsDef.GarageSaleName)
            </div>
            <div id="xGSDistDiv">
                @Html.Raw(string.Format("{0:0.00sDef.GarageSaleDistance)) mi
            </div>
            <div id="xGSUNameDiv">
                @Html.ActionLink(gsDef.GarageSaleUserName, @UrlHelper.GenerateContentUrl(string.Format("/GetUserProfile/{0}", gsDef.GarageSaleUserId), this.Context))
            </div>
            <div id="xGSTagsDiv">
                Tags (ex. Starwars, Legos, Picklage, Test 1, Test 2, Test 3, Other)
            </div>
            <div id="xGSAddBtnDiv">
                <input id="xAddGSBtn_@Html.Raw(gsDef.GarageSaleId)" type="button" value="Add" />
            </div>
            <div id="xGSRatingDiv">
                * * * * *
            </div>
        </div>
        <div id="xGSBodyDiv">
            <div id="xGSDescDiv">
                Description: @Html.Raw(gsDef.GarageSaleShortDesc)
            </div>
            <div id="xGSAddrOptDiv">
                <div id="xGSAddrDiv">
                    @Html.Raw(string.Format("{0}<br;{1}, {2} {3}", gsDef.GarageSaleStreet, gsDef.GarageSaleCity, gsDef.GarageSaleStateCode, gsDef.GarageSaleZipCode))
                &lt;/div&gt;
                &lt;div id="xGSAddrIfoOptsDiv"&gt;
                    &lt;a href="#" data-id="@Html.Raw(gsDef.GarageSaleId)" data-lat="@gsDef.GarageSaleCoordsLat" data-lng="@gsDef.GarageSaleCoordsLong"&gt;Focus on @Html.Raw(gsDef.GarageSaleName)</a>;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="cDiv"&gt;&lt;/div&gt;
    &lt;/div&gt;

CSS

#xGSListItmDefDiv
{
    width:955px;
    background-color:#CCCCCC;
}

#xGSTitleDiv
{
    min-width:35%;
    max-width:45%;
    float:left;
    margin-right:8px;
}

#xGSDistDiv
{
    float:left;
    margin-right:10px;
    max-width:60px;
    min-width:45px;
}

#xGSUNameDiv
{
    float:left;
    margin-right:8px;
}

#xGSTagsDiv
{
    float:left;
    margin-right:10px;
}

#xGSRatingDiv
{
    float: right;
    max-width:100px;
    margin-right:8px;
}

#xGSAddBtnDiv
{
    float:right;
    max-width:50px;
}

#xGSBodyDiv
{
    display:table-cell;
    width:100%;
}

#xGSDescDiv
{
    float:left;
    width:60%;
}

#xGSAddrOptDiv
{
    float:right;
    width:40%;
}

#xGSAddrDiv
{
    display:inline-block;
    float:right;
    min-width:350px;
    vertical-align:top;
    text-align:left;
}

xGSAddrIfoOptsDiv
{
    display:inline-block;
    float:right;
}

I'm trying to make the address div float to the right and huge the side. However it just sits next to the description div and only extends as far as the left div does :( I've even tried setting percentages for widths because I want the layout to be fluid.

  • 0

Apparently it has to do with the fact I'm setting the xGSBody as table-cell. But I have to do that to get the vertical alignment to top on the text so I don't know what my options are there. I mean it's 2013 we really should have a simple valign:top option at this point and have it float with the way the industry is shifting towards tablets things should naturally expand unless specified otherwise. Not sure what the resolution is though.

  • 0

Something like this?

http://jsfiddle.net/r8tUK/2/

  On 01/06/2013 at 19:38, ACTIONpack said:

You should be using Class and not ID

depends on what's the content, if you submit content you have to use ids in most cases since js, php, asp etc work easier with ids then classes as example js hasn't a document class function but it has a id function (class exists but that works only in modern browsers so not ie8 and lower which makes it troublesome).

  • 0
  On 01/06/2013 at 20:56, fobban said:

Look up css3 flexbox, it makes layouts much easier. Of course it won't work very well with any version of IE (IE10 supports a quite old draft).

One of the easiest way to get good layouts that is cross-browser might be to use an existing framework, e.g. Twitter bootstrap.

yeah flexbox is also a good idea but it would require a jquery/js fallback for IE indeed ^^

So that's why i used inline-box which works even in IE8

  • 0
  On 01/06/2013 at 16:14, sathenzar said:

Hey guys, I've always hated front end design of web sites. I've always loved the back end logic.

If you like logical things, you should try lessCSS - it brings a little bit of logic into CSS, making it quicker to write lots of CSS code.

  • 0
  On 02/06/2013 at 11:14, AndroidOS said:

If you like logical things, you should try lessCSS - it brings a little bit of logic into CSS, making it quicker to write lots of CSS code.

Yeah I love less myself too but it doesn't support calculations like:

width: (total.parent.width - total.previous.child.width);

If that becomes possible in less I'll be the happiest guy on earth :D

But less is indeed very great with support for variables and threading and simple calculations.

This topic is now closed to further replies.
  • Posts

    • Review: LincPlus enters the traditional NAS space with the 6-bay LincStation S1 by Steven Parker I have reviewed a couple of NAS units for LincPlus, the LincStation N1 and N2, which can only take SSDs (2.5-inch and NVMe. Now LincPlus is back with a more traditional 6-bay NAS that takes four HDDs and two NVMe. Yes, they call this a 6-bay NAS, probably because there is no limitation on how you can use the NVMe slots. The LincStation S1 started life on Kickstarter, but is now available for purchase on the official website. The specs of it are below: LincPlus LincStation S1 CPU: Intel Alder Lake-N N97, 4 cores 4 threads, up to 3.6 GHz TDP 12W Graphics: Intel UHD Graphics 24 EUs Memory: 8 GB LPDDR5 3200MT/s (replaceable) Disk Capacity: 112 TB (4x 24 TB SATA, 2x 8 TB NVMe) RAID Level RAID0, RAID1, RAID10, RAID5, RAID6 Network: 2x RJ-45 2.5 GbE (10/100/1000/2.5 GbE) Internal storage: 1x 128 GB eMMC (USB boot drive) 4x SATA 3.0 2x 2280 NVMe USB Ports (Front) 1x USB 3.2 Gen 2 Type-A (10 Gbps) 1x USB 3.2 Gen 2 Type-C (10 Gbps) USB Ports (Rear) 1x USB 3.2 Gen 2 Type-A (10 Gbps) 1x USB 3.2 Gen 2 Type-C (10 Gbps) 2x USB 2.0 Type-A HDMI 1x (HDMI 2.0) Hardware Transcoding: H.264, H.265, MPEG-4, VC-1 Maximum resolution: 4K (4096 x 2160); Maximum FPS: 60 LED: Light strip (right side) Size (H/W/D): 231x195x156mm Weight: 2.9kg Power: 20V 7A DC (External PSU) Price: $599.99 As you can see from the specs, this is no slouch; it comes with an Intel N97, which was introduced in Q1 of 2023. This means that it now supports AV1 decoding, it can also decode H.264, VP8, VP9, H.265 (8 bit), and H.265 (10 bit). Processor E-cores L3-cache Turbo clock GPU GPU-clock TDP Intel N355 8 6 MB 3.9 GHz 32 EUs 1.35 GHz 9-15 W Intel Core i3-N305 3.8 GHz 1.25 GHz Intel N350 3.9 GHz 1.35 GHz 7 W Intel Core i3-N300 3.8 GHz 1.25 GHz Intel N250 4 3.8 GHz 1.25 GHz 6 W Intel Processor N200 3.7 GHz 0.75 GHz Intel N150 3.6 GHz 24 EUs 1 GHz Intel N97 1.2 GHz 12 W Intel Processor N100 3.4 GHz 0.75 GHz 6 W The CPU is part of the Alder Lake offering and sits just above Intel's entry-level mobile processor, albeit with an impressive TDP for the features it offers. As before, we are seeing another NAS with an acceptable, if not great, amount of RAM. As a reminder, up until a couple of years ago, it was commonplace to only get 2 or 4GB max on a flagship Synology or QNAP home NAS. Ever since the likes of TerraMaster and more have entered the market with ample RAM sizes included in their NAS offerings, it has gone a long way in forcing the hands of the traditional makers to up their game a bit. First impressions The S1 (as I will be calling it) came in a big cardboard box that protected the inner cardboard box with the fancy decals. In the box LincPlus LincStation S1 Power adapter User Manual [full online guide] Unraid Starter License Card Accessories Pack (10x Screws, 1x Screwdriver and 8xHDD tray labels) Design It actually looks good. The S1 is made up of metal and plastic and is quite heavy at 2.9kg (without HDDs installed). The design looks more like something you'd proudly show off in an office rather than hiding it in a meter cabinet or storage room. In addition, each side, along with the top and bottom, serves a purpose that I will get into in more detail later. There is also a light strip on the side that is set to orange. There is no instruction in the booklet or online documentation on how this this can be changed, but from previous experience with the N1, and N2 I tried pointing to tower.local:50000 in a browser and I did get the light strip configuration page (which is in Chinese, but I auto-translated to English), however changing any of these options did not result in the light strip changing mode, brightness, or color. I have reported this to my contact at LincPlus and was told that the page does not configure the light strip on the side. This page is still public, so it does not require login credentials to configure the LED control test. On the front, and the left of the unit from top to bottom, there is a 1.77 inch touchscreen, LED indicators for network status, 4x HDD and 2x SSDs, below that there is a plastic cover that can be opened to the right to reveal the USB 3.2 Gen 2 Type C and Type A ports, and then under that is the Power Button. Around the back, from left to right, there is a barrel port, two 2.5 GbE ports, an HDMI 2.0 port, a USB 3.2 Type C (10Gbps) port, two USB 2.0 ports and a Type A USB 3.2 10Gbps port. Above that, there is a 3-stage toggle switch for LED lighting (Upper position—the front light is on, Center position—all lights are off, Lower position—the side LED strip is on). Finally, the other toggle switch controls whether the front touch-screen is on or off. There's still no Kensington Security Slot present, which is a bit of a shame, considering it's a data storage device. Left side Right side On the left side, you have the magnetic cover, which, when removed, reveals the NVMe heatsink, single SODIMM memory slot, USB flash drive, and battery (see image below). On the right, there is another array of LED indicators that does the same thing as the front one. NVMe slots USB Flash drive Upon removing the heatsink, which is kept in place by a pull spring clip system, you can find the two NVMe slots. One thing I like about these slots is that they do not use a screw or bolt to hold the drives in place. It is a pull spring clip system. So you pull the clip to the side, add the drive and let go, which clamps it into place. However, this system only works for 2280 lengths. TEAMGROUP supplied us with the MP44Q 4TB NVMe SSD that I am using here, my colleague, Chris White gifted me the 250 GB 970 Evo Plus many moons ago when he shipped me the Synology DS720+ that he reviewed for Neowin back in 2020! The USB Flash drive can be accessed rather easily, but it is real fiddly to put back in! Populating the LincStation S1 As can be seen above, this is a top-loading system of four HDDs. The sleds are toolless. The sled itself is quite innovative. On the right side, you can "pull out" the plastic side housing that clips the HDD into the sled. The second image shows how much it can be pulled to the side, just enough for the two plastic protrusions that double for screws to shift out of the way (you can see these in the third image, and what is on the left side of the HDD sled). Once you place the HDD at a 45-degree angle to the left, press down and then clip it in from the right, and it is secured. That's all there is to it! Touchscreen The touchscreen on the front of the S1 can show four different pieces of information: Product info and serial number, the system status, storage summary of all six bays, and the network status by swiping left or right on the screen. Documentation The documentation booklet's 30 pages in English, German, or French, included in the box, is quite clear on how to populate the S1, with instructions on how to activate the Unraid Basic key (with the activation code card that is included), along with how to set up a disk array and basic getting started tips. Setup BIOS The Aptio BIOS can also be accessed during boot on the S1 by mashing the DEL key. One thing to note, however, on booting, you only have a few seconds to change the boot options, for the choice to run Memtest86+, or other Unraid-related boot options. If you're too slow, then the S1 will boot to Unraid, which is the default choice. Initial Setup After pointing your web browser to http://tower.local/you are required to set a password for root. The LincStation S1 comes preinstalled with Unraid on the internal flash disk, so all you need to do is set your user account and set up a disk array. Unraid defaults to a RAID5-style array, which is perfectly fine for our use. The BASIC (or trial) license of Unraid supports up to six storage devices, which can make things a bit difficult when wanting to transfer data from an external disk to a fully populated array. A Plus license costs $59, so you would have to decide if that's worth the extra expense. The main dashboard of Unraid After logging in, you are presented with the main dashboard of Unraid, which was on version 6.12.10. I was offered to update to 7.1.4 and after checking the release notes and known issues before upgrading, and aside from ZFS storage pools not being downgradable back to 6.x (once migrated) it seemed like a painless update. For my testing, I assigned two 6TB HDDs to the array, along with the 250GB SSD for a cache device. After troubleshooting the inability to access the SMB shares, I was finally able to access the share I created on my LAN by typing \\TOWER\public in File Explorer, which enabled its visibility by clicking within Network to TOWER. The internal array check (of two disks) reported an average speed of 296 MB/sec, which is pretty decent for traditional HDDs. The OS is written to the internal flash drive, but in order to install apps, an array must be present since the /appdata/ folder is saved on the disk array. I ran a CrystalDiskMark test on a mapped network drive from within a Windows 11 24H2 PC connected over a 10 GbE hub (S1 is limited to 2.5 GbE), and as you can see, the HDD array is performing well within expected speeds. Heat As far as heat goes, the large 140mm fan is doing its work, even during and after building the array, the HDDs reported a max temp of 43C, and as I am writing now with the S1 in idle state it is reporting a max HDD temp of 38C. Unraid comes with a community app store that contains tens of thousands of apps. In some cases, there are multiple flavors of the same app, such as Plex, so do look out for the OFFICIAL stamped in the top right corner of the app to be sure you are installing the intended version, or maybe you prefer a different take on the app, it's up to you! I installed Plex, and all I had to do was assign a temp directory for Plex Transcode and add a path for my media. After copying some media files over and accessing the new Plex server from my Google TV, I could start streaming immediately. Conclusion The ups Things I like about the S1 include the newer and more efficient Alder Lake CPU, with support for AV1 decoding and dual 2.5 GbE connectivity. You are also not locked into Unraid. If you want, you can remove the eMMC flash drive, located in the left NVMe bay, and flash it with something else, like TrueNAS, Xpenology, or some other NAS OS. However, be warned that Unraid (once activated) locks to the GUID of the eMMC flash drive, so it's best to ensure you have a backup image of the flash drive's contents, and be careful not to misplace it should you opt to replace it with a different flash drive. The downs While the build is really good compared to, say, the 2023 released TerraMaster F4-423, which is a mostly plastic exterior, the S1 is still $100 more expensive with a slightly better CPU. Is it worth it? Depending on your use case, this is still a good NAS that is not locked into an OS or even the hardware that you may populate it with. If you are looking to get up and going quickly, then this ticks the boxes; however, I do question why this more expensive model went with 2.5 GbE when the cheaper (all SSD) LincStation N2 has 10 GbE. There is also a lot of community support regarding the apps you can install in Unraid on the LincStation S1, so you won't have to look far and wide to get yourself up and running. So it ain't all bad. I'd argue that this is still great value for money. Purchase options As of writing, you can get this for $559.99, which is $40 off its slightly higher MSRP pricing of $599.99. You can save an additional 5% off when you enter the coupon code NEOWIN during checkout. It is not yet available on the official LincPlus Amazon page. According to the User Manual, the LincStation S1 has a domestic warranty period of 12 months (from the date of purchase), which is not extendable and covers the basics such as build workmanship and breakdowns during normal use. As an Amazon Associat,e we earn from qualifying purchases.
    • How does having no RBG a Con? That should automatically be a Pro
    • Shocking that 7600/7200mhz ram is faster than 6000mhz ram in some cases. I am pretty sure in real world usage no one could even tell a difference. This review reads like a paid ad.
    • Well, yeah. "beginner" isn't really a word. You can start with any distro. There's no "starting" distro that makes using Linux "easy".
    • Instagram has a weird bug that doesn't allow sharing Reels with some, but there is a fix by Usama Jawad I am not a particularly active user of Instagram in the conventional sense, but I do use it heavily to share Reels with my wife and siblings. For me, Reels are the lifeblood of Instagram, and just the ability to share my own photos or see someone else's photos isn't enough to convince me to use the app on a daily basis. As such, me and the Mrs. ran into a major problem yesterday when she realized that while she could see Reels and share them with some of her other friends, she was unable to share them with me. My profile wouldn't appear in the share dialog even though it's usually at the top and it wasn't surfaced even when she manually tried through the search bar. Interestingly, I could still share Reels with her and we could see each other's previously shared content in the chats on our respective phones. We also realized that the camera icon in our chats had changed; usually it's a pink background with a white camera icon in it, but now, it was a blue background with a black camera outline. For the past day or so, we looked for solutions to this problem which was only affecting our chats, everything else within the app seemed fine, but these efforts were in futile. Just now, the Mrs. noticed that when she pressed on the Share button rather than using the share dialog directly, and then navigated to Instagram Messages, my name finally popped up, but it had "AI" written below it. Now that we had another clue about what to search for, so we headed to Google and added this piece of the puzzle to our search query. And lo and behold, there are several other people on Reddit who have been experiencing this issue in the past couple of days too. There is a dedicated thread on the topic with a couple of hundred upvotes and a few dozen comments. Scrolling through the comments frantically as if we were searching for the Holy Grail, me and the Mrs. finally came across recommendations to fix the problem. Apparently, all you need to do is log out and then log in again. We did just that and hallelujah, we can finally share Reels with each other again without a hitch. It's interesting that there is no media coverage on the topic even though the problem has garnered a decent amount of attention on Reddit. That said, the impact and root cause is currently unknown, we have reached out to Meta for further information and will update this article if the company responds. But for now, if you do experience the bug, just log out and then back in again.
  • Recent Achievements

    • Dedicated
      John Volks earned a badge
      Dedicated
    • One Month Later
      KenKay earned a badge
      One Month Later
    • Week One Done
      KenKay earned a badge
      Week One Done
    • Dedicated
      Amadou earned a badge
      Dedicated
    • One Month Later
      TheRingmaster earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      641
    2. 2
      ATLien_0
      244
    3. 3
      Xenon
      180
    4. 4
      neufuse
      154
    5. 5
      +FloatingFatMan
      123
  • Tell a friend

    Love Neowin? Tell a friend!