13 svar · 408 visningar · startad av joel_sundkvist
Jag har precis börjat använda css för att styra sidlayouten. Har dock stött på ett angenämt problem... Jag undrar hur man gör för att centrera lagret i fönstret. Så här ser min kod ut för "huvudlagret" som jag vill ha centrerat:
#divContent {
position:absolute;
top:5px;
left:5px;
width: 700px;
height: 455px;
background-color: #e2e2f1;
}
Det kanske fungerar att lägga till align; center?
align: center;
Och om du vill att CSS-en ska validera korrekt så måste du även ange color. Har man med background-color så måste man ha med color.
color: #000000;
<style type="text/css">
<!--
#divContent{
position:absolute;
background:#e2e2f1;
height:456px;
width:700px;
left:50%;
top:50%;
margin-left:-350px;
margin-top:-228px;
}
-->
</style>
...
<div id="divContent"></div>
:)
Ja, det skall det väl göra. Men du har ju satt ett fast mått på 456 x 700 så har man en skärm på mindre än 700 pixlars brädd så funkar det ju inte. = liten risk.
Kolla denna länken
http://www.wpdfd.com/editorial/wpd0103.htm
Där finns två exempel på centrerad css
Har en liten fundering...
När jag resizar fönstret så åker meny-lagret också upp. Hur låser jag dess position? Har iallafall lyckats centrera lagren hyfsat.
När jag sedan fixat detta, hur gör jag för att ladda en sida i lagret? Måste jag använda javascript?
Här kommer koden:
<head>
<title>Namnlöst dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="../style_menu.css">
<style type="text/css">
#divMenuContent{
position:absolute;
height:140px;
width:700px;
left:50%;
top:50%;
overflow:hidden;
position:fixed;
margin-left:-350px;
margin-top:-280px;
background-color: #bbbbbb;
}
#divMenu {
position:absolute;
width:350;
height:70px;
overflow:hidden;
top:70px;
left:10px;
}
#divLogo {
position:absolute;
width:280;
height:130;
overflow:hidden;
right:10;
}
#divContent{
position:absolute;
background:#cc99ff;
height:400px;
width:700px;
left:50%;
top:50%;
color:#000;
margin-left:-350px;
margin-top:-120px;
}
</style>
</head>
<body>
<div id="divMenuContent">
<div id="divMenu">
<table width="350" border="0" align="left" cellpadding="5" cellspacing="5" bordercolor="#999999">
<tr>
<td>Nyheter</td>
<td><a href="biografi.html" target="main">Biografi</a></td>
<td><a href="repertoar.html" target="main">Repertoar</a></td>
<td>Press</td>
</tr>
<tr>
<td>Media</td>
<td>Länkar</td>
<td>Gästbok</td>
<td>Kontakt</td>
</tr>
</table>
</div>
<div id="divLogo">
<table border="0" width="280">
<td><div align="center"><img src="bilder/firstlogo_vit.png" width="263" height="128"></div>
</td>
</tr>
</table>
</div>
</div>
<div id="divContent">
<table width="600" border="0" cellpadding="10" cellspacing="10">
<tr>
<td>text...</td>
<td>bild...</td>
</tr>
</table>
</div>
</body>
</html>
Du kan inte ha left:50% och top:50% här
#divMenuContent{
position:absolute;
height:140px;
width:700px;
left:50%;
top:50%;
overflow:hidden;
position:fixed;
margin-left:-350px;
margin-top:-280px;
background-color: #bbbbbb;
}
om du skall kunna ha fast position på det som ligger innanför.
Eller förstod jag dig fel kanske.
Du kan använda dig av padding-top padding-left om du vill hålla divMenu på xx pixlar från kanten av divMenuContent, om jag tänker rätt, har inte testat.
Mvh
Jan-Olov
Vet inte längre vad jag menar ;)
Vill låsa lagren i höjdled men centrera i sidled...
Här finns sidan...
http://hem.bredband.net/joesun2/swe/index.htm
Tack på förhand / Joel
Ingen som vet?
Du har ju frames på din sida, eller ser jag fel?
Du måste ändra ditt frameset i såfall.
Mvh
Jan-Olov
jo hag har två vägräta frames. Här är koden...
<frameset rows="180,*" framespacing="0" frameborder="NO" border="0">
<frame src="menu.html" name="logo" id="logo" scrolling="no" noresize>
<frame src="valkommen.html" name="main" id="main" scrolling="no">
</frameset>
<noframes><body>
</body></noframes>
Jag kanske inte har förstått fördelen med att jobba i lager? ;)
Om sidan inte vore gjord i frames, måste hela sidan laddas om då när man vill öppna en ny sida?
Fördelar/Nackdelar?
Tips mottages tacksamt =)
Ja sidan måste laddas om, men somdu ser har du ju bara två bilder och en rad med text. Bilden laddas och läggs i cachen så du kommer antagligen inte att märka nån skillnad om du skippar framset och lägger allt i en tabell eller lägger innehållet i div-taggar.
Då får du även den effekten du har varit ute efter hela tiden.