Diven följer inte hela vägen...

3 svar · 365 visningar · startad av GrodanBoll 15 sep. 2003

GrodanBollMedlem sedan sep. 2001788 inlägg

Frågan15 sep. 2003 12:21#1

Hej hej

Jag sitter och testar lite med CSS och försöker bygga upp sidan utan för mkt tabeller.
Dock så får jag lite strul med min vertikala div:s höjd. Den funkar fint om jag inte har med mina main-divar, då är den 100%. Men när jag lägger till mina main-divar så breder den inte ut sig hela vägen ner.

Vad e det för fel? :q

<html>
<head>
<title>Test1 - testar lite CSS-krabb</title>

<style type="text/css">
<!-- 
	body 
	{
		font-family: Tahoma, Verdana; 
		font-size: 12px;
	}
	
	#horisontal
	{
		position: absolute;
		left: 0px;
		top: 30px;
		height: 50px;
		width: 700px;
		background: #cccccc;
	}

	#vertikal
	{
		position: absolute;
		left: 600px;
		top: 0px;
		height: 100%;
		width: 50px;
		background: #cccccc;
	}

	#menu
	{
		position: absolute;
		left: 605px;
		top: 110px;
		height: auto;
		width: 40px;
		overflow: hidden;
		font-size: 10px;
	}
	
	#main-left
	{
		position: absolute;
		left: 10px;
		top: 110px;
		height: 100%;
		width: 450px;
	}

	#main-right
	{
		position: absolute;
		left: 470px;
		top: 110px;
		height: 100%;
		width: 100px;
	}

-->
</style>

</head>
<body>
<div id="horisontal">
</div>
<div id="vertikal">
</div>
<div id="menu">
asdasd sjdklj j åä adöpåä ldap as lååååångtordsomsäkertintefårplats
</div>
<div id="main-left">
Main vänster...
</div>
<div id="main-right">
Main höger...
</div>

</body>
</html>

jarvkloMedlem sedan juli 20013 378 inlägg

15 sep. 2003 12:39#2

När du kör med absolut positionering sådär, så är height:100% i höjd samma sak som 100% av webbläsarfönstrets höjd...

Du "petar ner" dina två main 110px med absolut positionering och top:110px vilket gör att dessa två:s underkanter hamnar på "110px + den höjd din webbläsare råkar ha" samtidigt som din #vertiklal ligger på "0px + webbläsarfönstrets höjd" - vilket ger att dess underkant inte hamnar "lika långt ner" som de andra två...

Detta *är* knepigt - jag har ännu inte sett någon *enkel* lösning på det du försöker göra i "ren" CSS (dvs utan att man måste peta in en massa"container-div:ar" och annan extra HTML-kod för att få det att funka med "enbart CSS" ;) - Tabeller *är* fortfarande ett användbart alternativ för det du ser ut att vara ute efter, även om det medför en större risk att man då knepar till tillgängligheten för de som är beroende av skärmuppläsare ;)

GrodanBollMedlem sedan sep. 2001788 inlägg

15 sep. 2003 13:26#3

Hmm... ok.
Tack för svaret. :)

Kan man kanske kombinera en div (nuvarande 'horisontal') samt en bild (som ersätter div:en 'vertikal') som man har som bakgrund i bodytaggen?

Då kan man fortfarande använda css och slipper tabeller för designen. Kan det vara någe?

jarvkloMedlem sedan juli 20013 378 inlägg

15 sep. 2003 17:19#4

Jajjemän - bakgrundsbilder i underliggande "lager" (body i detta fall) är ett mycket använt sätt att ta sig förbi detta hinder. Testa med et och fråga igen om du stöter på patrull - du är inte ensam om att slåss med detta som sagt ;)