Jump to content



Photo

CSS formatting

css div

  • Please log in to reply
13 replies to this topic

#1 sathenzar

sathenzar

    Neowinian

  • Joined: 12-June 06

Posted 01 June 2013 - 16:14

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.


#2 Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 01 June 2013 - 16:33

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!

#3 OP sathenzar

sathenzar

    Neowinian

  • Joined: 12-June 06

Posted 01 June 2013 - 16:53

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.

#4 ashpowell

ashpowell

    Neowinian

  • Joined: 13-November 06
  • Location: UK
  • OS: Windows 8.1
  • Phone: Nexus 5

Posted 01 June 2013 - 17:07

Could you post an example? Float right should make it stick to the right

#5 primexx

primexx

    Neowinian Senior

  • Tech Issues Solved: 6
  • Joined: 24-April 05

Posted 01 June 2013 - 17:14

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

#6 OP sathenzar

sathenzar

    Neowinian

  • Joined: 12-June 06

Posted 01 June 2013 - 18:00

<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.00}", gsDef.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))
                </div>
                <div id="xGSAddrIfoOptsDiv">
                    <a href="#" data-id="@Html.Raw(gsDef.GarageSaleId)" data-lat="@gsDef.GarageSaleCoordsLat" data-lng="@gsDef.GarageSaleCoordsLong">Focus on @Html.Raw(gsDef.GarageSaleName)</a>
                </div>
            </div>
        </div>
        <div class="cDiv"></div>
    </div>

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.

#7 OP sathenzar

sathenzar

    Neowinian

  • Joined: 12-June 06

Posted 01 June 2013 - 18:11

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.

#8 ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 01 June 2013 - 19:38

You should be using Class and not ID

#9 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 23
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 01 June 2013 - 20:39

Something like this?
http://jsfiddle.net/r8tUK/2/

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).

#10 fobban

fobban

    Neowinian

  • Joined: 15-September 03

Posted 01 June 2013 - 20:56

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.

#11 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 23
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 02 June 2013 - 11:10

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

#12 AndroidOS

AndroidOS

    Neowinian

  • Joined: 07-August 12
  • Location: UK
  • OS: Windows 8 Pro
  • Phone: Nexus 4 (Rooted)

Posted 02 June 2013 - 11:14

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.

#13 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 23
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 02 June 2013 - 12:32

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.

#14 OP sathenzar

sathenzar

    Neowinian

  • Joined: 12-June 06

Posted 02 June 2013 - 16:58

I finally got it to work with the help of you guys. Plus I forgot to clear the floating of divs where I needed to so that was creating problems as well :)