 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008need help with CSS layout ... see code
Ok, I did spend tons of time now (as a beginner in css stylecoding) (but making html pags for many years), to get this right. But I am overseeing something. At this link you find a drawing of my wanted layout: http://img356.imageshack.us/img356/3809/roughdesignfc1.jpg description: -a left column in which I want to put some artwork only (jpg with repeat-y over the whole heigth of the page!). -the obvious header -a MainContent block (in which I now floated my "menu" div and a first content "cont1" div (- I also tried to take the menu outside the content block)) -a footer Whatever I do, I keep getting strange things. At the moment, for instance, the content and menu texts go through my footer and go on below it. That is my main problem now. But some other problems, having to do with absolute and relative positioning I guess(?), also show up sometimes. The footer problem, I tried to solve with this concept: http://www.wddb.com/i_3_A-Footer-at-the-Bottom.html But somehow, I loose my footer completely than!?!?! I did go through several internet courses on how to work with css layouts, but mostly they work with the concept of a fixed width content. And that is not what I want. I want to desing for 800x600 minimum. And content should be adapting to larger resolutions/screens. Maybe you people can have a look below? thx Ron Here is the rough code I use at the moment (sorry for notepad not structuring this text): <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>blabla</title> <style type="text/css"> <!-- body { text-align: center; } #Wrapper { text-align: left; } #Header { position:absolute; left:7%; top:0px; width:93%; height:100px; z-index:1; background-color: #00FF00; text-align: left; } #MainContent { position:absolute; top:102px; width:93%; z-index:1; background-color: #FFFF00; left: 7%; text-align: left; } #cont1 { float: left; width: 70%; } #Menu { top:102px; width:20%; z-index:2; background-color: #00FFFF; bottom: 102px; left: 80%; text-align: left; float: right; } #Footer { position:absolute; left:7%; width:93%; height:100px; z-index:1; background-color: #FF0000; bottom: 0px; } #LeftPixAchter { position:absolute; left:0px; width:7%; z-index:5; background-color: #FFFFFF; background-image: url(pix/achter.jpg); background-repeat: repeat-y; top: 0px; height: 100%; float: left; } --> </style> </head> <body> <div id="Wrapper"> <div id="Header"></div> <div id="MainContent"> <div id="Menu"> test<br /> test<br /> </div> <div id="cont1"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </p> </div> </div> <div id="Footer"></div> <div id="LeftPixAchter"></div> </div> </div> </body> </html> > Ok, > [quoted text clipped - 5 lines] > > http://img356.imageshack.us/img356/3809/roughdesignfc1.jpg This the sort of thing you want? <http://dorayme.890m.com/alt/ronny.html>  Signaturedorayme Hey thx! Will study your code tonight and try to understand were i did go wrong! Thx again! Hans "dorayme" <doraymeRidThis@optusnet.com.au> schreef in bericht news:doraymeRidThis-> This the sort of thing you want? > <http://dorayme.890m.com/alt/ronny.html> Dorayme, except for the #wrapper you ignore any position declaration. How is a browser handle it than? Does it standard handle it as 'absolute'? Or? thx for your patience! Hi Dorayme, I copied your complete code and filled content and menu with text. If the menulist that I put in menu is longer than the content text, I get this: http://img174.imageshack.us/img174/2536/review1vc8.jpg ??? I think something is still wrong in the code. Question, why is the heigth of menu set to 100%? It should keep the same height as content? > This the sort of thing you want? > > <http://dorayme.890m.com/alt/ronny.html> Floated content left Floated menu right Set a width for both I added a 'clear both' to the footer. So I believe i did get rid of the problem from the below picture. > http://img174.imageshack.us/img174/2536/review1vc8.jpg Other suggestions? > Hi Dorayme, > [quoted text clipped - 13 lines] > > > > <http://dorayme.890m.com/alt/ronny.html> It was just some ideas for you to play with that would do you if your content is a certain way. To get a truly robust template for this sort of thing that will work cross browser for every combination of menu and content and footer and left side text and pics etc is a much much more daunting challenge and for that you might look at such well titled articles as: <http://www.alistapart.com/articles/holygrail> In my experience, for one's own sites, a lot of questions arise only merely hypothetically. In other words, if you know that your menu items are five or six list items deep and you are sure to have a decent amount of text in the content col, that means nothing is wrong *in the circimstances* with a template that might well break in other circumstances. If you said more about the actual site you are making, perhaps we might make other suggestions. Signaturedorayme dorayme, I will go over the pagelink you suggested. For the rest, from your example, I now have a more or less working 'template'. I am rebuilding my site (personal homepage) from the old HTML coding (with tables and some basic css) to a css/divs based one. Setting up my page further will ceratinly reveil more problems. And I will see how I deal with that. For now I try to make an exact copy of my old index.html to the new one (just as a practice.... after that I will make more design alterations). Practice is everything I believe. My old pages are all written out of the bare head with just notepad and it would never pass any w3 test. Promise me not to laugh about the code and you may see it ... ;-) ww2propaganda.eu I recently did some help working on a history book. For that I made a separate part of my homepage with some information. Others pointed out to me that, although working perfect in IE, it sometimes sucked in safari and firefox. > If you said more about the actual site you are making, perhaps we might > make other suggestions. thx > Promise me not to laugh about the code and you > may see it ... ;-) > ww2propaganda.eu I did not laugh at it. I like all that stuff oddly enough... but no time to examine html/css just now... <g> Signaturedorayme > daunting challenge and for that you might look at such well titled > articles as: > > <http://www.alistapart.com/articles/holygrail> Indeed a good article that might help me a little further..thx |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.