Myslíš tu navigaci takhle (vedle obrázku)?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XXXX - základní rozložení</title>
<style>
* { margin: 0px; padding: 0px }
/* _____________________ SIMULACE OBRAZKU */
#IMG { border: 0px solid; width: 600px; height: 143px; font: 100px/143px Arial;
text-align: center; background:black; color:white }
/* ^^^^^^^^^^^^^^^^^^^^^->ZMĚNIT PO VLOŽENÍ OBRÁZKU */
html { background: white; /* BARVA L+P OKRAJE */
text-align: center } /* <-Centruje */
body { margin: 0 auto; /* <-stránku */
width: 760px; /* =[šířka stránky]=[navigace+obsah] */
text-align: left;
background: gray; /* BARVA STRANKY */
font: 14px serif;
}
#obsah { margin-left: 160px; width: 600px; } /* =[šířka navigace] */
p,.uvnitr { margin:2px;
padding:1ex;
background: #AAF; /* BARVA text.bloku */
color: blue; /* BARVA pisma */
}
/******************************** Navigace *********************************************/
div#nav { float:left;
width: 160px;
background: #DDD; /* BARVA NAVIGACE */
}
div#nav ul { list-style: none;
width: 145px; /* =[šířka MENU] */
margin: 5px auto 333px auto; /* [okraje MENU] */
background: #AAF; /* BARVA MENU */
border: 1px solid white;
}
div#nav li { border: solid 1px white }
#nav a { display: block;
width: 92%;
padding: 6px;
text-decoration: none;
font: bold 12px/1 Arial;
}
#nav a:hover { /* Vybrana polozka: */
background: #FFF; /* BARVA */
}
/******* Styly jen pro IE6 **********************/
* html #obsah { margin-left: 0px; height: 1em } /* >> IE6 obsahuje chyby, které potlačí tyto 2 definice */
* html #nav { margin-right: -3px } /* >> V jiných prohlížečích se neuplatní */
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">aaaaaaaaaa</a></li>
<li><a href="#">bbbbbbbb</a></li>
<li><a href="#">ccccc ccc</a></li>
<li><a href="#">ddddddddddddd</a></li>
<li><a href="#">eeeeeeeeeeeeeeee</a></li>
<li><a href="#">ffffff</a></li>
<li><a href="#">gggggg</a></li>
<li><a href="#">hhhhhh</a></li>
</ul>
</div>
<div id="obsah">
<div id="IMG"> OBRÁZEK </div> <!-- <img src="....header.jpg" alt="header" /> -->
<div class="uvnitr"><h4>Článek 1</h4>aaaabbbbccccdddd
</div>
<div class="uvnitr"><h4>Článek 2</h4>aaaabbbbccccdddd
</div>
<p>text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text </p>
</div>
<div style="clear:left; text-align:center; background:yellow">
========================== pata ==============================
</div>
</body>
</html>
Jinak dělat stránku v DW a současně vnášet do kódu ruční úpravy nepovažuju za šťastný způsob,
to je lepší dělat celou ručně (případně vyjít z nějakého "polotovaru").