2 replies [Last post]
crazyponytail
crazyponytail's picture
Offline
newbie
Last seen: 9 years 39 weeks ago
Timezone: GMT+1
Joined: 2012-11-13
Posts: 3
Points: 9

Im trying to make a flexible layout like this one:demopic.jpg

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!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 24 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

crazyponytail
crazyponytail's picture
Offline
newbie
Last seen: 9 years 39 weeks ago
Timezone: GMT+1
Joined: 2012-11-13
Posts: 3
Points: 9

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!