Centrera lager med css

13 svar · 410 visningar · startad av joel_sundkvist 23 apr. 2003

joel_sundkvistMedlem sedan feb. 2003240 inlägg

Frågan23 apr. 2003 16:46#1

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;
}

m_soderlundMedlem sedan sep. 20026 425 inlägg

23 apr. 2003 16:48#2

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;

Peter SMedlem sedan dec. 20025 483 inlägg

23 apr. 2003 17:10#3

<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>

Jesper TMedlem sedan nov. 20017 144 inlägg

23 apr. 2003 17:12#4

Re: Centrera lager med css

//redan svarat

joel_sundkvistMedlem sedan feb. 2003240 inlägg

23 apr. 2003 17:52#5

Tack för hjälpen!!

Kommer detta att funka oavsett skärmupplösning och webläsare?

Jesper TMedlem sedan nov. 20017 144 inlägg

23 apr. 2003 18:34#6

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.

ulfeMedlem sedan mars 200348 inlägg

23 apr. 2003 21:03#7

Kolla denna länken
http://www.wpdfd.com/editorial/wpd0103.htm
Där finns två exempel på centrerad css

joel_sundkvistMedlem sedan feb. 2003240 inlägg

24 apr. 2003 17:14#8

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&ouml;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&auml;nkar</td>
<td>G&auml;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>

FlashesMedlem sedan jan. 2003282 inlägg

24 apr. 2003 19:19#9

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

joel_sundkvistMedlem sedan feb. 2003240 inlägg

24 apr. 2003 21:01#10

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

joel_sundkvistMedlem sedan feb. 2003240 inlägg

25 apr. 2003 05:36#11

Ingen som vet?

FlashesMedlem sedan jan. 2003282 inlägg

25 apr. 2003 06:36#12

Du har ju frames på din sida, eller ser jag fel?
Du måste ändra ditt frameset i såfall.

Mvh
Jan-Olov

joel_sundkvistMedlem sedan feb. 2003240 inlägg

25 apr. 2003 10:44#13

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 =)

ulfeMedlem sedan mars 200348 inlägg

25 apr. 2003 15:20#14

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.