Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Centrering av websidan funkar konstigt (margin: auto)

1
Skriv svar
Permalänk
Medlem
●

Centrering av websidan funkar konstigt (margin: auto)

Har inte rört html på ett par år, men tänkte ändå jag snabbt skulle testa hur min sida skulle se ut i centrerat format...även om jag inte tror jag vill byta så ville jag ändå testa.

Har två yttre boxar, mainbox som här fått en ful röd färg för att synas bättre, och sedan footer för sidfoten. Vad som sedan är inuti dessa borde spela mindre roll?

Vad som händer när jag kör:

 margin-left: auto;
 margin-right: auto;

på dessa två boxar är att de flyttar sig som de ska, men den blåa bordern (här rödfärgad) jag normalt har runt hela mainbox lägger sig nu istället runt top-bannern som är innesluten i denna box.

Vet inte om jag orkar strula med detta, bara undrar om det är nåt självklart och enkelt jag missat när jag får detta konstiga "symptom"? Har svårt googla fram folk som haft bekymmer med en enkel centrering, bara IE-buggen man ser överallt.
Ska nog inte ändra ändå som sagt, bara nyfiken varför det blir så galet med bordern.

Visa signatur

MCP - MCTS - CCNA (expired)

Redigera
Citera flera Citera
Permalänk
Medlem
●

#mainbox borde få en overflow: auto;

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jupp så enkelt var det visst....tack för hjälpen
Får nog fortsätta va vänsterställd sålänge, men kul veta hur det funkar

Visa signatur

MCP - MCTS - CCNA (expired)

Redigera
Citera flera Citera
Permalänk
Medlem
●
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Sebastianfoto.se - Försäljning av fotokonst - Macro, naturbilder, stadsmotiv, naturfoto, tavlor, konst</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link rel="stylesheet" href="mall.css" type="text/css">
</head>
 
<body>
<div id="mainbox">
	<div id="topbar">  
	</div>
 
	<div id="menu">  
		<ul>
			<li><a href="index.htm" id="current">Start</a></li>
			<li><a href="macro.htm">Småkryp</a></li>
			<li><a href="flowers.htm">Blommor</a></li>
			<li><a href="birds.htm">Fåglar</a></li>
			<li><a href="sthlm.htm">Stockholm</a></li>
			<li><a href="other.htm">Övrigt</a></li>
		</ul>
	</div>
 
	<div id="textbox">
		<p class="headline">Välkommen till Sebastianfoto.se!</p> <p>Här kan ni på ett enkelt sätt beskåda min fotokonst, samt även beställa en tavla av er favoritbild.
		Välj önskad kategori i menyn ovan.
		Alla bilder är <a href="ed.htm">oredigerade</a>, och så vill jag ha det för att det ska vara så äkta som möjligt.
		Min konst hänger bland annat på Svanbacken Strandhotell.</p>
 
		<p>Bilderna framkallas professionellt i fotolabb på matt fotopapper, och signeras av mig.
		De levereras <a href="frame.htm">monterade</a> på isolerkartong med passepartout, färdiga att bara stoppa i passande ram.
		Exempel på hur inramade tavlor kan se ut finns <a href="ex.htm">här</a>.</p>
		<p>Om ni istället är intresserade av att använda någon av mina bilder i press eller reklam, <a href="mailto:foto@sebastianfoto.se">kontakta</a> mig.</p>
	</div>
 
	<div style="float: right; padding: 58px 14px 0px 0px">
		<img src="bilder/start-pic2.jpg" alt="Fotokonst collage">
	</div>
<div style="clear: both;"></div>
</div>
 

 
<div class="footer">
	<span style="float:left;">
		<a href="mailto:foto@sebastianfoto.se">Kontakt</a> &nbsp - &nbsp
		<a href="equip.htm">Kameraväska</a> &nbsp - &nbsp
		<a href="ref.htm">Meriter</a> &nbsp - &nbsp
		<a href="about.htm">Om Sebastianfoto</a>
	</span>
 
	<a href="order.htm"><img class="order" src="bilder/knapp.gif" alt="Beställ"></a>
</div>
 
</body>
</html>

Använd denna kod istället.kommer att funka. Din <div style="clear:both;"></div> Ska ligga i #textbox elementet.

Ändar sedan #mainbox egenskaperna i din css till

#mainbox
{
width: 795px;
background-color: white;
border: 1px solid #036;
padding: 0px 0px 10px 0px;
margin-left:auto;
margin-right:auto;
}

Du får även lägga till
margin-right:auto;
margin-left:auto;
i .footer om du vill ha den centrerad

Senast redigerat
Visa signatur

---------------------------------------------------------------

Redigera
Citera flera Citera
Permalänk
Medlem
●

Mmm jag slängde ut en på test, kan ju gå och fundera några år om jag ska ersätta originalet eller ej
Inte orkat fiffla med gamla IE 5.5 fixen, känns som ingen har så gamla browsers av idag iallafall

Tack

test3.sebastianfoto.se

Visa signatur

MCP - MCTS - CCNA (expired)

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara