Forum:

HTML Pages with CSS and JavaScript

Understanding CSS layout practices.

Mark Spritzler

ranger

Posts: 17347

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I am still having issues getting my head around position, display css attributes, I think there was a third one, ah float. But basically, I think in the block model.

So if I have a <section> I can think of that whole section of html to be in one block and I have created a nice box with curved corners. But now I want to place the sections to different areas of a page, but I know not to use <table> for placement, to use CSS.

I can do a two column thing with float:left, float:right, well three columns float:right. But I want more control. I have about 6 boxes to display account information and I want to try different layouts to see what looks best. I was thinking of creating tabs, but will wait on that after I test out all 6 boxes displayed at once. Each box might be about 300px height and 100px width.

I am also placing these boxes in my <div id="content"> area which I have a height set at 600px. But I have a footer underneath it and when I currently place all six boxes vertically, the last three boxes overlap the footer instead of pushing the footer down. Which is odd, because I had had this other use case where i got a long list and as I added stuff to the list in the content, it would push the footer down.

Here is some css that I have, and I think in a couple places I got some of it figured out, but it has been a couple weeks since I been back in css and forgot what I did to make it work.

I know that this is css3 101 stuff, but until I can fully grasp it an know it note for note I still can never say I am a web HTML UI coder. (Like you guys didn't already know that)

Thanks

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Mark Spritzler

ranger

Posts: 17347

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I think I found a good online tutorial but it is written in 2008

http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/

This one is 2010
http://www.roundrobinstudios.com/blog/mastering-and-understanding-css-positioning

Thanks, any others you recommend using CSS3

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Eric Pascarello

author

Posts: 15385

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Look into CSS grids.

Eric

Mark Spritzler

ranger

Posts: 17347

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I understand what I am reading, I just can't seem to put it into practice from a standpoint of wanting it to look a particular way, then going into the css and making it happen.

So my big issue I have is I have a header and a footer section. I have a middle section and I want the middle section's height to be exactly the height needed to display everything in the middle section. However, the elements in the middle section are laid out relative to the middle section position. Here is the html and css I have.

Html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link href="css/layout.css" rel="stylesheet">
    <title></title>
</head>
<body>
    <section id="header">Header stuff here</section>
    <section id="lists">Lists here
        <section id="friends">
            <h1>friends</h1>
            <ul>
                <li>
                    <h2>John Doe</h2>
                    <h2><a href="http://twitter.com/johndoe" rel="nofollow">@johndoe</a></h2>
                </li>
                <li>
                    <h2>Bill Warren</h2>
                    <h2><a href="http://twitter.com/blurb" rel="nofollow">@blurb</a></h2>
               </li>
            </ul>
        </section>
        <section id="otherFriends">
        <h1>other friends</h1>
            <ul>
                <li>
                    <h2>Jill Smith</h2>
                    <h2><a href="http://twitter.com/bytor99999" rel="nofollow">@bytor99999</a></h2>
                </li>
                <li>
                    <h2>Frank Wilson</h2>
                    <h2><a href="http://twitter.com/lowcarbrd" rel="nofollow">@lowcarbrd</a></h2>
               </li>
            </ul>
        </section>
        <section id="events">
            <h1>events</h1>
            <ul>
                <li>
                    <h2>USC Game</h2>
                    <h2><a href="http://twitter.com/bytor99999" rel="nofollow">@bytor99999</a></h2>
                </li>
                <li>
                    <h2>Lakers Game</h2>
                    <h2><a href="http://twitter.com/lowcarbrd" rel="nofollow">@lowcarbrd</a></h2>
               </li>
            </ul>
        </section>
    </section>
    <section id="footer">
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
    </section>
</body>
</html>

The stuff in the footer is so It would make a scroll bar on the right of the browser.

CSS

I have tried so many things to footer, to lists, to try and get the footer to move down after the lists section. but the lists sections overlays the footer section. It should be so easy to figure this out, but I am lost.

Thanks

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Mark Spritzler

ranger

Posts: 17347

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eric Pascarello wrote:Look into CSS grids.

Eric

Thanks, but funny thing at this point, is I can understand horizontal positioning, but the vertical positioning is where I seem to now have the most problems.

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Eric Pascarello

author

Posts: 15385

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hint CSS clear

Mark Spritzler

ranger

Posts: 17347

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eric Pascarello wrote:Hint CSS clear

Thanks, but it is weird nothing seems to work for me. I even added radius to the border and that isn't showing either.

I put

clear: both;

basically in all the css selectors tried a bunch of different combinations permentations and still no Footer moving down to allow all the sections to be in the middle.

I will do more google search on clear to see if that will help me.

Thanks

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Mark Spritzler

ranger

Posts: 17347

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I think clear won't work because the position for the lists section is relative and the sections inside the lists section is absolute. Or at least based on my trying it out it didn't work.

Thanks

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Mark Spritzler

ranger

Posts: 17347

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

With those sections being absolute, unless I specify exact height or location for the footer section, nothing will work, those absulute sections will automatically go wherever, and not make another element move because of it.

I thought with an outer element set to relative and the inner elements absolute being absolute relative to the outer element, would allow the outer element to know how high or wide the section with its elements are actually taking up and therefore be able to set the footer at a location below that size. But alas, it doesn't look like CSS will allow me to have a more dynamic feel to it.

I mean there is some combination of stuff that I would be able to have it look and act like that is how it is working, but requires to much concrete values.

Thanks

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Eric Pascarello

author

Posts: 15385

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Why are you using position absolute? I figured you were just floating them.

Eric

Mark Spritzler

ranger

Posts: 17347

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eric Pascarello wrote:Why are you using position absolute? I figured you were just floating them.

Eric

I am floating them now, but while that moves the Footer down, now I can't get those sections placed where I wanted them, which for my experiment were odd places.

The issue I have with float is that there is only left and right.

Whereas if it is a bit more than just left and right, position absolute with parent being position relative was the only way to make the point system for top and left to be in context to the containing element, which in my head is easier to picture. Or you have to make divs/sections and sub divs and sub sections just to get three boxes in the correct place.

Basically, it is like I want to find something that I can position relative to the parent element via px numbers but still have that element register in the flow. I don't think CSS has that.

Thanks for you help Eric. I see now that what I want, I ain't gonna get. ;)

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Mark Spritzler

ranger

Posts: 17347

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

OK, so the whole trick is to hack it as much as possible in various combinations that no one after you are done will figure out, or better yet, will try to change and really mess up the layout beyond repair. Here is what I ended up with and got the final results I had tried for. Please kids, don't try this at home, only at work is this allowed.

Here is the new Html, very much like what I had before but added a section around the first two lists, but not around the third. So for the thirds position, I have to move the top left based relative to where the element would have been.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <link href="css/layout.css" rel="stylesheet">
    <title></title>
</head>
<body>
    <div id="header">Header stuff here</div>
    <section id="lists">Lists here
        <section id="groupme">
            <section id="friends">
                <h1>friends</h1>
                <ul>
                    <li>  
                        <h2>John Doe</h2>  
                        <h2><a href="http://twitter.com/johndoe" rel="nofollow">@johndoe</a></h2>  
                    </li>  
                    <li>  
                        <h2>Bill Warren</h2>  
                        <h2><a href="http://twitter.com/blurb" rel="nofollow">@blurb</a></h2>  
                   </li> 
                </ul>
            </section>
            <section id="otherFriends">
            <h1>other friends</h1>
                <ul>
                    <li>  
                        <h2>Jill Smith</h2>  
                        <h2><a href="http://twitter.com/oops" rel="nofollow">@oops</a></h2>  
                    </li>  
                    <li>  
                        <h2>Frank Wilson</h2>  
                        <h2><a href="http://twitter.com/oops" rel="nofollow">@oops</a></h2>  
                   </li>
                </ul>
            </section>
        </section>
        <section id="events">
            <h1>events</h1>
            <ul>
                <li>  
                    <h2>USC Game</h2>  
                    <h2><a href="http://twitter.com/oops" rel="nofollow">@oops</a></h2>  
                </li>  
                <li>  
                    <h2>Lakers Game</h2>  
                    <h2><a href="http://twitter.com/oops" rel="nofollow">@oops</a></h2>  
               </li>
            </ul>
        </section>
    </section>
    <section id="footer">
        This is the footer section. It is moving down based on the groupme section now.
        <p>a</p>
        <p>a</p>
        <p>a</p>
        <p>a</p>
    </section>
</body>
</html>

And the CSS

#header {
    -moz-border-radius: 15px, 15px, 15px, 15px;
    -webkit-border-radius: 15px, 15px, 15px, 15px;
    border-radius: 15px, 15px, 15px, 15px;
    height: 100px;
    background-color: #91bd09;
    position: static;
    display: block;
}

#footer {
    background-color: #a9a9a9;
    clear: both;
}

#lists {
    position: relative;
    display: block;
}

#groupme {
    display: block;
    width: 500px;
}

#friends {
    position: relative;
    display: inline-block;
    width: 200px;
    background-color: #6495ed;
    -moz-border-radius: 15px, 15px, 15px, 15px;
    -webkit-border-radius: 15px, 15px, 15px, 15px;
    border-radius: 15px, 15px, 15px, 15px;
    left: 20px;
}

#otherFriends {
    display: inline-block;
    position: relative;
    width: 200px;
    background-color: #6495ed;
    -moz-border-radius: 15px, 15px, 15px, 15px;
    -webkit-border-radius: 15px, 15px, 15px, 15px;
    border-radius: 15px, 15px, 15px, 15px;
    -moz-box-shadow: #444444;
    box-shadow: #444444;
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    float: right;
}

#events {
    display: block;
    width: 200px;
    background-color: #6495ed;
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 14px;
}

The only thing that I didn't get to work, but have in the past is the radius curves around each list.

Thanks

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Eric Pascarello

author

Posts: 15385

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Here is an idea:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">   
    <head>
        <style>
            .boxItem{ 
                width: 50%;
                padding: 0px;
                margin: auto;
            }
            .leftItem{
                float: left;
                width: 10%;
                background-color: #CFC;
            }
            .rightItem{
                float: right;
                width: 10%;
                background-color: #FCC;
            }
            .contentItem{
                background-color: #ccc;
                margin: 0 11%;
            }            
        </style>        
    </head>
    <body>
        <div class="boxItem">
            <div class="rightItem">3</div>
            <div class="leftItem">1</div>
            <div class="contentItem">2</div>
        </div>        
    </body>
</html>

Mark Spritzler

ranger

Posts: 17347

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eric, that would be great if that was the look I was trying to get, but it isn't. I understand what you did and that is the basics for float left and right, but that isn't what I am trying to here with my examples/test.

In your example the right is too far to the right. It is on the extreme right.

I want to be able to have full control over where the boxes go. But still be in the flow. More like a grid, but many overlapping columns and rows for some boxes, some boxes partially in a column/row, with other part in another column in the same row. Basically, I have command of everything and know what css styles to use to get exactly what I want.

My app will have dynamic number of boxes for different items, and I want the html to all be the same for a box, but the css is what will dictate where exactly it goes. All these boxes will be in the content section below the header and nav and above the footer. And I need the footer to move down when more space is needed.

I think you understand what I mean. It goes beyond just left or right, or inline/block, including position.

Thanks

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Eric Pascarello

author

Posts: 15385

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I can not picture what you mean, it could be the migraine I am having.

Using absolute positioning means you are stuck with a layout. So if you user has a small screen, they will have horizontal scrollbars. You okay with that?

Ever consider aligning your footer to the bottom of the screen?

Eric

Mark Spritzler

ranger

Posts: 17347

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eric Pascarello wrote:I can not picture what you mean, it could be the migraine I am having.

Using absolute positioning means you are stuck with a layout. So if you user has a small screen, they will have horizontal scrollbars. You okay with that?

Ever consider aligning your footer to the bottom of the screen?

Eric

I think I have the same headache. Must be doing web html/css stuff that causes these headaches. I actually don't have problems with Javascript, I like it now. But html/css totally different ball of wax. To have to visually lay something out by being in a css file editing with properties that affect each other to affect the layout is well, in my mind stupid. It is so disconnected that you have to keep your vision in your head while you edit the css and go back and forth to see if your changes have the effect on the page that you wanted.

I am attaching a screen shot of what I was attempting to do. This is using the html and css that I posted. It is not something that is supposed to go live, just for me to experiment with to get the hang of putting things on top of other things.

How can you align the footer to the bottom of the screen. And not in the sense that it is always visible. Just at the bottom of the page below all other elements?

Thanks

Mark

Screen-shot-2012-02-09-at-6.08.57-PM.png

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

Eric Pascarello

author

Posts: 15385

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

When you make the elements absolute, you are taking the elements out of the flow of the document. I believe what you are trying to do is basically impossible. I am not a CSS guru, so I may be wrong.

Eric

Mark Spritzler

ranger

Posts: 17347

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eric Pascarello wrote:When you make the elements absolute, you are taking the elements out of the flow of the document. I believe what you are trying to do is basically impossible. I am not a CSS guru, so I may be wrong.

Eric

Yeah, but that image and the last html/css I posted does not use absolute, and achieves my original goal for that test, however, there were lots of hoops jumped through and an extra section or two added around the original sections to get it to work without absolute.

So, I did solve it, just that it took more than it should have.

Mark

Perfect World Programming, LLC - iOS Apps
How to Ask Questions the Smart Way FAQ

And then the entire population worshiped me like unto a god. Well, me and this tiny ad:

Gift giving made easy with the permaculture playing cards

https://coderanch.com/t/777758/Gift-giving-easy-permaculture-playing