webForumDet fria alternativet

CSS Problem

3 svar · 378 visningar · startad av Gabriel82

Gabriel82Medlem sedan okt. 20072 inlägg
#1

Hej!

Undrar vad som hänt med min hemsida https://www.habosportdansare.se
Verkar presis som om det ligger i två lager vilket det inte ska göra Det gula ska ligga lengst upp och längst ner och vitt emellan och det texten ska vara. Men nu vet jag inte vad som hänt. Har varit bra tills fär någon uppdatering sen Har IE 7.

Adressen till sidan är http://www.habosportdansare.se

Är mycket tacksam om jag kan få hjälp med detta problem.

Tack på förhand
\Gabriel

headbugMedlem sedan sep. 2006858 inlägg
#2

Hej!

Det har att göra med att du sätter float på innehållet i den vita avdelningen. När du gör det så förlorar dom lite egenskaper som du behöver för att det ska bli rätt.

Men det är ganska enkelt, med hjälp av CSS-regeln clear:both.

Jag brukar skapa en klass som heter .clear såhär

kod i CSS-stilmallen:

.clear { clear: both; }

och sedan lägger du till en ny div såhär:

<div class="clear"></div>

innan du stänger page_content.

Alltså, i stora drag:

<div id="page_content">
    <div id="content">Hupp</div>
    <div id="sidebar">Yadayada</div>
    <div class="clear"></div>
</div>

Testa o se :)

tantenMedlem sedan nov. 20051 658 inlägg
#3

Förutom det som headbug skrev så ställer nog din layout.css till med en hel del.
Varför sätta margin och padding på en del saker och sedan senare noll-ställa alltihop? t.ex

#container {

	width: 100%;

	margin-top: 57px;

	border-bottom: 2px solid #a0522d;

	background-color: #fff;

}

och om webläsaren sedan läser in denna efteråt

#container {

	margin: 0;

	padding: 0;

	border: 0;

}

så tas marginal och border bort.
Jag vet inte vilka webläsare som kommer läsa vilken först när du importerar den som du gör.
Men mitt tips radera hela den filen inte bara det jag beskriver och 0:a direkt på det du vill ha 0 i stället.
typ

#container {
	width: 100%;
	margin: 57px 0 0 0;
	padding: 0px;
	border-bottom: 2px solid #a0522d;
	background-color: #fff;
}
headbugMedlem sedan sep. 2006858 inlägg
#4

Jo, tanten har rätt, plus att det var en hel del andra saker som inte var korrekta i koden, har du kört det genom en validerare på senaste tiden?

Om inte så föreslår jag att du laddar hem FireFox2 och installerar lite extrasaker såsom FireBug, Tidy HTML validator, web developer toolbar, för att nämna några bra-att-ha

Genererad på 387 ms · cache AV · v20260730165559-full.f96bc7eb