aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Understanding CSS layout practices. Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Understanding CSS layout practices." Watch "Understanding CSS layout practices." New topic
Author

Understanding CSS layout practices.

Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

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 - Two Laptop Bag - Tube Organizer
How to Ask Questions the Smart Way FAQ
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

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
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Look into CSS grids.

Eric
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

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



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
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

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
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Hint CSS clear
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

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
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

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
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

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
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Why are you using position absolute? I figured you were just floating them.

Eric
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

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
Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

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.



And the CSS



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

Thanks

Mark
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Here is an idea:

Mark Spritzler
ranger
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

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
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

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



[Thumbnail for Screen shot 2012-02-09 at 6.08.57 PM.png]

Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
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
Sheriff

Joined: Feb 05, 2001
Posts: 17249
    
    6

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
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Understanding CSS layout practices.
 
Similar Threads
DIV layout issues
Design a footer CSS
Float problem
Struts Validation Framework Problem...........Do Help
Verticaly Align 3 Column DIV in IE6