Hej, För att vara en gammal tabell-räv har du kommit riktigt lång. Det finns inga direkta fel (som har betydelse för Ser fint ut men förstår inte varför du behöver ID på alla divvar.Problem med positionering av divar...
är en "gammal" tabellräv som ska ge mig in i CSS-dimman och jag har redan kört på grund...
jag har kommit så långt att allt ligger som det ska i webbläsaren men jag vet inte om jag har gjort det korrekt kodmässigt... har någon lust att komma med lite feedback på hur det är gjort?
Sen har jag funderingar om man ska använda sig av absolute eller relative placaring vilket är "bäst"?
här är min kod:
HTML
<div id="container">
<div id="logo">
<div class="logobild"><img src="images/logo/mainLogo.png" alt="" width="276" height="73" /></div>
</div>
<div id="toptabs">
<a class="toptab" href="index.html">Hem</a> |
<a class="toptab" href="#">Kontakta oss</a> |
<a class="toptab" href="#">Mina sidor</a> </div>
<div id="TopMenuPanel">
<div id="TopMenuControl_MenuPanel">
<ul id="TopMenuControl_Navigator" class="TopMenu stackNavigator">
<li>Länkar</li>
<li>Om oss</li>
<li>Bokning</li>
<li>Praktisk info</li>
<li class="active">Kurser</li>
</ul>
</div>
</div>
<div id="Searchfield">
<form id="form1" name="form1" method="post" action="">
<span class="greyHeader">Vad söker du?</span> <input name="textfield" type="text" style="width: 210px;" id="textfield" size="30" /> <input type="submit" class="input" name="button" id="button" value="Sök" /> </form>
</div>
</div>
CSS
/* General layout */
body {background-image: url(images/bakgrnd/greyBlueLine.png); background-repeat: repeat-x; color:#000000; font-family:"Gill Sans MT" , Arial, Sans-Serif; margin:0; padding:0 0 0;}
#container {margin:0 auto 0; padding:0px 0px 0px; width:950px;}
/* Tags */
a {color:#000000; text-decoration:none;}
a:hover {color:#000000; text-decoration:none;}
a img {border:0;}
/* Toptabs menu */
#toptabs {
position:absolute;
font-size:.8em;
width:950px;
text-align:right;
z-index: 1;
}
.toptab {text-decoration:none;}
.toptab:hover {color:#3066a9; text-decoration:underline;}
/* Logo */
#logo {width:950px; z-index:0; float:left; position:absolute;}
/* Searchfield */
#Searchfield {float:left; position:absolute; top:83px; width:950px; font-size: 0.9em; margin:0 auto 0; color:#3066a9; text-align:center; font-weight:bold;}
/* TopMenu */
#TopMenuPanel {float:right; position:relative; right:0; padding-right:0;}
.TopMenu {list-style:none none; margin:0; padding:0;}
.TopMenu li {
font-size:0.9em;
position:relative;
float:right;
height: 37px;
width: 102px;
text-align:center;
background:transparent url(images/knappar/bg.png) no-repeat 0 0;
margin: 39px -5px 0 0;
padding: 0;
overflow: hidden;
}
.TopMenu li a,
.TopMenu li span {display: block; text-decoration: none; padding: 8px 0 7px; color: #FFFFFF; white-space: nowrap;}
.TopMenu li a:hover {text-decoration: none;}
.TopMenu img.normal {}
.TopMenu img.selected {display: none;}
.TopMenu .active{ background-image: url(images/knappar/bg_sel.png);}
.TopMenu .active a{color: #3066a9;}
.TopMenu .active img.normal {display: none;}
.TopMenu .active img.selected {display: inline;}
Sv: Problem med positionering av divar...
webbläsaren) i din kod, bara ett antal mindre kommentarer (se css-filen). När det gäller html-filen misstänker jag
att du använt doctype xhtml 1.0 transitional, som jag validerat mot?
Valideringsverktyg, både online och file upload:
HTML-validator: http://validator.w3.org/
CSS-validator: http://jigsaw.w3.org/css-validator/
Doctypes:
W3C recommended list: http://www.w3.org/QA/2002/04/valid-dtd-list.html
<b>Position relative v/s absolute</b>
Jag tog mig friheten att justera din html-kod för att demonstrera skillnaderna. Innan vi stänger #container ligger
nu en p-tagg med lite nonsenstext. Hela p-taggen är absolut positionerad för att inte landa ovanför din logo,
globala navigering och sökruta. Med absolut positionering så sätter vi den här exakt helt oavsett andra regler. Den
hamnar inte innanför din #container som ska centreras i mitten med bredden 950px, utan jag har satt left till 0
där den också hamnar i webbläsaren.
I p-taggen finns också ett inline span element med ett annat id. Där har jag valt att flytta den texten relativt 10px
från toppen och 100px från vänster, relativt den position den ursprungligen ska ha. För att tydliggöra än mer, är
den texten också röd i exemplet. Hade jag däremot satt position till absolute, landar den på samma avstånd från
den position där p-taggen är positionerad (eftersom den också har absolut positionering).
<img src="https://files.itslearning.com/data/719/24413/img/position.png">
Ref: http://reference.sitepoint.com/css/positioning
Lycka till!
/* General layout */
body {
background-image: url(images/bakgrnd/greyBlueLine.png);
background-repeat: repeat-x;
color:#000000; font-family:"Gill Sans MT" , Arial, Sans-Serif;
margin:0;
padding:0 0 0; /*** Kommentar #1 ***/
} /* padding (och border och margin) har fyra riktningar enligt följande mönster: */
/* padding: 0; ger samma värde för [top|right|bottom|left] */
/* padding: 0 1px; ger värde 0 för [top|bottom] och 1px för [right|left] */
/* padding: 0 1px 2px 3px; ger värden i tur och ordning för [top|right|bottom|left] */
#container {
margin:0 auto 0; /* bör vara margin: 0 auto; */
padding:0px 0px 0px; /* se #1 */
width:950px;
}
/* Toptabs menu */
#toptabs {
/* kommentera ut text som inte används */
/* ... */
}
/************ Relative v/s Absolute positioning *************/
p.lipsum {
position: absolute;
top: 200px;
left: 0;
width: 400px;
}
#posRel {
position: relative;
color: red;
top: 10px;
left: 100px;
}
<!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>
<title>My HTML-file</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="logo">
<div class="logobild"><img src="images/logo/mainLogo.png" alt="" width="276" height="73" /></div>
</div>
<div id="toptabs">
<a class="toptab" href="index.html">Hem</a> |
<a class="toptab" href="#">Kontakta oss</a> |
<a class="toptab" href="#">Mina sidor</a>
</div>
<div id="TopMenuPanel">
<div id="TopMenuControl_MenuPanel">
<ul id="TopMenuControl_Navigator" class="TopMenu stackNavigator">
<li>Länkar</li>
<li>Om oss</li>
<li>Bokning</li>
<li>Praktisk info</li>
<li class="active">Kurser</li>
</ul>
</div>
</div>
<div id="Searchfield">
<form id="form1" name="form1" method="post" action="">
<span class="greyHeader">Vad söker du?</span>
<input name="textfield" type="text" style="width: 210px;" id="textfield" size="30" />
<input type="submit" class="input" name="button" id="button" value="Sök" />
</form>
</div>
<p class="lipsum">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. <span id="posRel">Ut enim ad minim veniam</span>, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
Sv:Problem med positionering av divar...
för innerelement kan man nå dem genom
#toptabs a{...}
#TopMenuPanel div {...}
#TopMenuPanel div ul {...}
#searchfield form {...}
byt med fördel ut <span class="greyHeader"> mot legend eller rubrik av något slag