Placering af link og tekst i flydende layout med css
Jeg har i et par dage forsøgt at placere forskellige elementer i et flydende design.Alt hvad der sker er at teksten(hvis det er en tekst) skubber det underliggende lag i samme afstand som jeg placerer min top margin.
Eks. Jeg skal placere en tekst i min topbanner som er lejret inde i et wrapper div. Uden topbanneren skubbes.
Hvis jeg kunne bede om en forklaring, så ville det være det bedste, da jeg ikke rigtigt er helt med.
PS det er mit første flydende layout!
Her er min HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Nimskov's Harley Davidson</title>
<link href="stylesheets/nim.css" rel="stylesheet" type="text/css">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<style type="text/css">
<!--
.style1 {color: #666666}
.style2 {color: #CCCCCC}
.style3 {
color: #FFFFFF;
font-weight: bold;
}
-->
</style>
</head>
<body>
<div class="style2" id="wrapper">
<div id="header">
<img src="images/Banner_top.jpg" alt="Nimskov Harley Davidson" width="760" border="0" usemap="#Map2">
<map name="Map2"><area shape="rect" coords="514,143,623,167" href= "#http://www.krak.dk/GRIDS/MAINPAGES/map.asp?mapnavfac=&mapnav=&mappixwidth=640&ResultName=&ResultAdr=&tlf=&redZoom=true&redExtent=&mapx=&mapy=&job=&POSTNR_BY=4330+Hvals%F8&Adresse=Roskildevej+26&Tagning=4.21_Kort_ForsStKort%2FKN_Sog&mfpt=&mfpl=&cspt=&cspl=&mfpstate=1&cspstate=1&mfpsize=&cspsize=&mapschange=0&x=68084783&y=616419948&vnr=353766&hnr=26&stepinout=&scrolltop=0&maptype=1&zoomlevel=6&mapserial=kortld.krak.dk%7C616819948%7C616019948%7C67584783%7C68584783%7C641300000%7C603300000%7C42750000%7C90250000%7C640%7C512%7C64000%7C100000%7C68084783%7C616419948%7C0%7C%7C%7C0%7C0%7C0%7C0%7C0%7C0%7C1%7Cff0000%7C0%7C0%7C0%7C0%7C0%7Ckortkundeld.krak.dk%7C1" target="_self" alt="HD_beskrivelse">
<area shape="rect" coords="649,144,735,166" href="Harley_davidson_contactus.html">
<area shape="rect" coords="455,145,504,165" href="Harley_davidson_links.html">
<area shape="rect" coords="32,142,90,170" href="index.html" target="_blank" alt="Nimskov_Home">
<area shape="rect" coords="371,146,437,166" href="HD_projekter.html" alt="HD-projekter">
</map>
</div>
<div id="content">
<p><img style="float:right; margin-right:1em; clear:both" src="images/front_pic.jpg" alt="Harley V-rod" width="513" height="283" border="0"></p>
<p class="style2">Din Harley Davidson partner</p>
<p>Nimskov MC er placeret centralt på Sjælland, tæt på Harley Davidson of Denmarks, sjællandske lokale "KAFFEHUSET".</p><P>♣ Vi foretager alle former for reparationer, trimninger af motorer, salg af reservedele fra alle de store leverandører, Så mangler du noget eller bare vil have en Harley snak så kig forbi os.
<p>♣ Vil du sælge din "gamle" cykel?, så tager vi den gerne i kommision! </p>
<p>♣ Projekter er et af vores specialer. Har du en ide?, så virkeligører vi den i samarbejde med dig.</p>
<P>♣ Vi kan også tilbyde at forberede cykler til syn. </P>
<p>♣ Som noget nyt kan vi vinter opbevare cykler i vores opvarmede lokaler.</p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-8429596067743385";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "CCCCCC";
google_color_bg = "CCCCCC";
google_color_link = "000000";
google_color_text = "333333";
google_color_url = "666666";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></p>
</div>
<div id="navigation">
<ul class="style1" id="mainnav">
<li><a href="index.html">Home</a>
<ul class="subnav">
<li><a href="#">Rammer og Chassis dele</a></li>
<li><a href="#">Gafler, styr, kaber</a></li>
<li><a href="#">Hjul, dæk, udstødning</a></li>
<li><a href="#">Gearkasser og transmission</a></li>
<li><a href="#">El-dele</a></li>
<li><a href="#">Motordele</a></li>
<li><a href="#">Diverse</a></li>
</ul>
</li>
<li><a href="#">Brugte dele sælges</a></li>
<li><a href="#">Financiering</a></li>
<li><a href="#">Svinetilbud</a></li>
<li><a href="#">Forhandler liste</a></li>
<li><a href="#">Kommissionssalg</a></li>
<li><a href="Harley_davidson_contactus.html">Kontakt os</a></li>
</ul>
<img src="images/1957-Harley-Davidson-Panhea.jpg" alt="Harley_Davidson_MC" width="178" height="215" border="1"></div>
<div id="footer">Copyright © 2006 - 2010 HD-design all rights reserved</div>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-202848-2";
urchinTracker();
</script>
</body>
</html>
Her er den tilhørende css:
html, body, ul, ol, li, p, blockquote, q, h1, h2, h3, h4, h5, h6, form, fieldset, a, div, img{margin:0;
padding: 0;
border: 0;
}
body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #666666;
text-align: center;
}
#header{
height:320px;
margin-top:0%;
}
#wrapper {
text-align: left;
width: 760px;
margin-top:2%;
margin-right: auto;
margin-left: auto;
padding: 0px 0 0 0;
border-top: 2px solid #999999;
border-left: 2px solid #999999;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
}
img{
border: 1px solid #FFFFFF;
}
#content {
width: 550px;
float: right;
padding: 20px 10px 0 0;
background-color: #333333;
}
#content p {
font-size: 80%;
line-height: 1em;
padding-left: 1em;
padding-bottom: 1em;
}
#content h1 {
font: normal 180% Georgia, "Times New Roman", Times, serif;
color: #B51032;
background-color: transparent;
}
#content h2 {
font-size: 120%;
color: #FF9900;
background-color: transparent;
border-bottom: 1px solid #FF9006;
}
#navigation {
float: left;
width: 200px;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
width: 180px;
border-bottom: 1px solid #ff6600;
border-top:1px solid #ff6600;
margin: 0;
padding: 0;
font-size: 80%;
}
#navigation a:link, #navigation a:visited {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 1px solid #ff6600;
border-right: 1px solid #ff6600;
background-color: #333333;
color: #FFFFFF;
text-decoration: none;
}
#navigation a:hover {
background-color: #ff6600;
color: #333333;
}
#navigation ul.subnav {
margin-left: 12px;
}
#navigation ul.subnav li {
border-bottom: 1px solid #ff6600;
width: 168px;
}
#navigation .subnav a:link, #navigation ul.subnav a:visited {
background-color: #666666;
color: #ffffff;
}
#footer {
clear: both;
padding: 0 0 10px 255px;
font-size: 70%;
color: #AAAAAA;
background-color: transparent;
border-top: 1px solid #999999;
}
#search {
float:right;
width: 380px;
margin-top:-200px;
z-index: 5;
}
a {
color: #696969;
text-decoration: none
}
a {
border-bottom: 0.5px solid #ff6600;
}
a:hover {
background-color: #ff6600
}
