Wed, 2012-11-14 20:16
Im trying to make a flexible layout like this one:
The text should go around the picture. The layout should be flexible, if I adjust the browser window the content should become smaller. (Is there another way to do this other than webkit?)
And....As you can see, the header logo, isnt just in a normal float position. So how would you layout this design? Would you set the container to relative and position everything else by using absolute or how?
Thats my biggest trouble, can I just use floats here or how should I position all of this?
I need a point at the right direction, please give me tips on what to read about.
*{margin: 0px; padding: 0px;} h1{font: bold 20px Tahoma;} h4{font: bold 11px Tahoma;} center{text-align:center;} header, section, footer, aside, nav, article, hgroup{display:block;} body{text-align:center; background:brown;} #allt{border:1px solid black; background:green; max-width:1000px; margin:0px; text-align:left; position:relative;} #top_header{float:left; height: 180px; width:180px; background:pink;} #right_header{top:0px; left:180px; right:0px; height: 120px; background:blue; position:absolute; top:0px; right:0px;} #top_meny{background:white; width:180px; grey; margin: 0; clear:both; position:absolute; left:0px; top:180px; bottom:0px;} #top_meny li{display:inline-block; list-style:none; padding: 5px; font: bold 14px Tahoma;} #main_section{max-width:820px; background:green; position:absolute; left:180px; top:120px; bottom:70px;} #the_footer{clear:both; text-align:center; background:yellow; height:70px;} a{color:black;} a:hover{color: aqua; text-decoration:underline;}
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> <title>cowsnpigz</title> <meta charset="utf-8" /> <meta name="author" content="Jens Danielsson"> <meta name="description" content="cows"> <meta name="keywords" content="pigs"> <meta name="generator" content="notepad++"> </head> <body> <div id="allt"> <header id="top_header"> Logga </header> <header id="right_header"> Slogan, login osv.. </header> <nav id="top_meny"> <ul> <li><a href="index.html" title="Main Page">Home</a></li> <li><a href="photopage.html" title="cow">cows</a></li> <li><a href="videopage.html" title="pig">pigs</a></li> </ul> </nav> <section id="main_section"> blablablablalbalbblblablablablalbalbblblablablablalbalbblblablablablalbalbblblablablablalbalbblblablablablalbalbblblablablablalbalbblblablablablalbalbblblablablablalbalbblblablablablalbalbblblablablablalbalbblblablablablalbalbblblablablablalbalbblblablablablalbalbbl </section> <footer id="the_footer"> Copyright to all pigs </footer> </div> </body> </html>
Thanks in advance!
Wed, 2012-11-14 22:06
#1
Absolute? No, no, no!
If you use absolute positioning to solve a major layout problem, you then have two problems.
Floats all the way for this. It is simply a two column page. The logo and menu, etc. in one column, and the rest in the other.
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Test Document</title> <style type="text/css"> html, body { background-color: white; color: black; font: 100%/1.5 serif; } p { font-size: 1em; } img { display: block; outline: 1px dotted gray; } #wrapper { margin: 0 auto; max-width: 1000px; min-width: 750px; padding: 1px; } #sidebar { float: left; width: 180px; } #right_header { overflow: hidden; padding: 0 1em; } #main_section { overflow: hidden; padding: 1px 1em; } #main_section img { float: right; margin-left: 1em; } footer { clear: both; } </style> </head> <body> <div id="wrapper"> <div id="sidebar"> <header id="top_header"> <p><img src="mylogo.png" alt="[Image of my logo]" width="180" height="180" /></p> </header> <nav id="global-menu"> <ul> <li><a href="index.html" title="Main Page">Home</a></li> <li><a href="photopage.html" title="cow">cows</a></li> <li><a href="videopage.html" title="pig">pigs</a></li> </ul> </nav> </div> <!-- end sidebar --> <header id="right_header"> <p>Slogan, login osv ….</p> </header> <section id="main_section"> <h1>Main heading</h1> <p><img src="some.png" alt="[a photo of our founder]" width="250" height="300"/> Praesent consectetur suscipit augue eget commodo. Cras dui justo, sollicitudin cursus dapibus eget, elementum non lacus? Aliquam faucibus consequat aliquet. Sed placerat ante quis nulla volutpat pharetra. Pellentesque tortor felis, facilisis eget vehicula et, malesuada interdum mauris. Aenean diam lectus, cursus venenatis lobortis quis; pulvinar ac nulla. Sed gravida placerat convallis. Integer porttitor erat vel augue elementum nec malesuada massa imperdiet! Proin tempor lobortis luctus. Phasellus at massa id odio aliquet interdum! Vestibulum sed turpis eget felis rutrum mattis. Praesent commodo ligula vel leo auctor ut adipiscing justo elementum. </p> <p> Praesent consectetur suscipit augue eget commodo. Cras dui justo, sollicitudin cursus dapibus eget, elementum non lacus? Aliquam faucibus consequat aliquet. Sed placerat ante quis nulla volutpat pharetra. Pellentesque tortor felis, facilisis eget vehicula et, malesuada interdum mauris. Aenean diam lectus, cursus venenatis lobortis quis; pulvinar ac nulla. Sed gravida placerat convallis. Integer porttitor erat vel augue elementum nec malesuada massa imperdiet! Proin tempor lobortis luctus. Phasellus at massa id odio aliquet interdum! Vestibulum sed turpis eget felis rutrum mattis. Praesent commodo ligula vel leo auctor ut adipiscing justo elementum. </p> </section> <footer id="the_footer"> Copyright to all pigs </footer> </div> </body> </html>
cheers,
gary
Thu, 2012-11-15 12:30
#2
Hello Gary. Thank you for
Hello Gary. Thank you for your code. I will analyze this and try to learn something from it. As you can see I am kind of lost in the world of css at the moment.
But its posts like yours that will help me put the bits and pieces together. I know its kind of lazy of me not to just sit down and read a book. But my attention span is very short.
Once again, thank you for taking your time and sorting things out for me!