webForumDet fria alternativet

Sidan flyttas trots att den är centrerad!

HTML & CSS

4 svar · 460 visningar · startad av m_soderlund

Medlem sedan sep. 20026 425 inlägg
Frågan#1

Jag har ett lager som ska centrera innehållet på min sida.

#centre
{
	margin: 0 auto;
	padding: 0px;
	width: 760px;
}

Sen har jag fyra andra lager, ett för loggan (#logo), ett för menyn (#nav), ett för innehållet på sajten (#content) och ett för en högerspalt på sidan (#sidebar).
Det som inte fungerar, är att om jag visar fler än sex tumnaglar (för Opera7) och fler än nio tumnaglar (för Firefox) i lagret #content, så skjuts hela sidan några pixlar åt vänster. Visar jag färre tumnaglar än ovan för respektive webbläsare, så fungerar det hela. I IE6 så fungerar allt perfekt oavsett hur många tumnaglar jag visar.

Vad i hela fridens namn kan vara problemet?

Logo-lager:

#logo
{
	height: 90px;
        width: 740px;
	text-align: left;
	font-size: small;
	padding: 10px 10px 10px 10px;
	margin: 0 0 0 0;
	border-style: solid;
	border-width: 1px;
	border-color: #999999;
}

Menylager:

#nav
{
	width: 740px;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 8px;
	text-align: left;
	padding: 5px 10px 5px 10px;
	margin: 5px 0px 5px 0px;
	border-style: solid;
	border-width: 1px;
	border-color: #999999;
}

Lager för innehållet på sajten:

#content
{
	width: 740px;
	padding: 5px 10px 5px 10px;
	margin: 0px 0px 0px 0px;
	border-style: solid;
	border-width: 1px;
	border-color: #999999;
	float: left;
}

Lager för högerspalt på sidan:

#sidebar
{
	font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
	font-weight: normal;
	float: right;
	width: 220px;
	height: 400px;
	margin-top: 30px;
}

I min index-sida så ser det ut så här i bodyn:

<!-- begin centre div -->
<div id="centre">

<div id="logo">Detta är logo-platsen</div>

<!-- begin navigation div -->
<div id="nav">
	<a href="default.aspx">startsida</a>
	<a href="default.aspx?CatId=2">fotogalleri</a>
	<a href="default.aspx?CatId=3">intervjuer</a>
	<a href="default.aspx?CatId=4">artiklar</a>
	<a href="default.aspx?CatId=5">martin</a>
	<a href="default.aspx?CatId=6">kontakt</a>
</div>
<!-- end navigation div -->

<!-- begin content div -->
<div id="content">
<form id="container" method="post" runat="server">
    <asp:label id="title" runat="server" />
    <p>
    <asp:placeholder id="main" runat="server" />
	
	<asp:label id="content_title" runat="server" />   
    <div id="content_thumbs">
		<asp:placeholder id="thumbs_load" runat="server" />
    </div>
	
    
    </p>
</form>
</div>
<!-- end content div -->

<!-- footer div -->
<div id="bottom">
Copyright &copy; 2001-2005 Dileno, alla r&auml;ttigheter reserverade.
</div>
<!-- end footer div -->

</div>
<!-- end centre div -->
Medlem sedan sep. 20021 655 inlägg
#2

När du får för många bilder på sidan tvingar du fram en scroll-list. Denna scroll-list gör att den tillgängliga ytan blir ca 16px mindre, så allt som är centrerat eller positionerat efter högerkanten förskjuts 8px till vänster.
IE visar alltid en scroll-list, oavsett om den behövs eller inte.

Jag kan inte tänka mig att man vill att det ska fungera på något annat sätt.

Medlem sedan sep. 20026 425 inlägg
#3

Wow! Sanslöst bra av dig, dectgap! :bire

Nu återstår bara att koda runt det hela så att det fungerar bra. Tips på det tills vidare? Man borde kunna använda sig av CSS för att säga åt att en scrollbar alltid ska synas.

Medlem sedan sep. 20021 655 inlägg
#4

På sidor jag har gjort där samma fenomen uppkommer struntar jag helt i det, eftersom jag tycker att Firefox gör vad man kan förvänta sig att den ska göra. Om det inte finns anledning att ha en scroll-list visar den ingen, helt enkelt.

Det du kommer att få problem med ifall du ha fram en scroll-list oavsett innehållets längd är att det inte finns någon motsvarighet till overflow-x och overflow-y i Opera eller Firefox, som det finns i IE.

Medlem sedan sep. 20026 425 inlägg
#5

Jag upptäckte att overflow: scroll inte fungerade särskilt bra i Firefox och Opera. :l

Känns som att man kanske struntar i detta till slut. Tack!

260 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
131 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)