CSS- div positionering

28 svar · 1 039 visningar · startad av captain 12 mars 2005

captainMedlem sedan dec. 200425 inlägg

Frågan12 mars 2005 05:20#1

Hej

Jag gav mig in på att göra en egen css mall.
men vad jag inte riktigt får kläm på hur div fungerar tillsammans med css absolut positionering. Jag försöker hela tiden få dit vissa divtabeller som jag vill men det går aldrig som jag själv vill när jag sätter dit px värdena.

jag lägger upp min kod här. jag har säkert gjort några uppenbara fel men jag kan inte hitta felet eftersom jag inte riktigt förstår hur det går till med att positionera divar.
jag misstänker att jag gör något fel i htmlkoden. någon som kan berätta hur jag ska göra?

Skulle va tacksam för hjälp!

CSS:


body, html {
 background-color:#c0c0c0;
 text-align:left;
}

#header{
 background-color:#FF3333;
 position:absolute;
 top:0px;
 width:650px;
 height:75px;
 left:75px;
 }
	

#maincontent{
 backgroundcolor:#FFFFFF;
 position:absolute;
 height:100%;
 top:75px; 
 left:75px;
 min-width:650px;
 float:right;
 }

#left-col{
 background-color:#F0F0F0;
 position:absolute;
 top:0px;
 width:110px;
 left:0px;
 height:100%;
 }

#content{
 background-color:#FFFFFF;
 position:absolute; 
 top:0px;
 height:100%;
 left:110px;
 } 

#right-col{
 background-color:#F0F0F0;
 position;absolute;
 top:0px;
 height:100%;
 width:110px;
 left:610px;
 }

HTML:

<html>
<head><title>DvdSource</title>

<style type="text/css">
@import url("body.css");
</style>

</head>
<body>
<center>

<div id="maincontent">

	<div id="header">HEADER HEADER HEADER

	</div>

		<div id="left-col">

	        	<ul id="navlist>
	   	        <li>Hem</li>
		   	<li>Nyheter</li>
	  		<li>Tjänster</li>
	  		<li>Kontakt</li>
			</ul>
		</div>

<div id="content"><Hej presentation 2005</div>		

<div id="right-col">

 			<ul id="navlist>
	   	        <li>Hem</li>
		   	<li>Nyheter</li>
	  		<li>Tjänster</li>
	  		<li>Kontakt</li>
			</ul>

</div>

</div>     //*MAINCONENT*//

</body>
</html>

m_soderlundMedlem sedan sep. 20026 425 inlägg

12 mars 2005 06:47#2

Man borde egentligen inte göra det så enkelt för dig som jag gör nu, men jag kunde inte låta bli. ;) Du får en fullt fungerande CSS-baserad design, som dessutom validerar korrekt med avseende på XHTML och CSS.

Du behöver inte använda dig av absolut positionering om du inte vill. Jag vet inte hur du vill att strukturen ska se ut på din sida, men det här är ett exempel på hur stilmallen skulle kunna se ut.

body {
 background-color: #c0c0c0;
 font: 12px Verdana,Arial,Helvetica,sans-serif;
 text-align: left; }

ul {
 list-style: none;
 margin: 0; }

#maincontent {
 background: #fff url(bg_test.gif) repeat-y 50% 0;
 margin: 0 auto;
 padding: 0;
 width: 650px;
 min-width: 650px; }

#header {
 background-color: #f33; /* samma som #ff3333 */
 margin: 0 auto;
 width: 630px;
 height: 75px;
 padding: 10px; }	

#left-col {
 float: left;
 width: 110px;
 padding: 10px; }

#content {
 background-color: #fff;
 float: left;
 width: 370px;
 padding: 10px; }

#right-col {
 float: right;
 width: 110px;
 padding: 10px 0 10px 10px; }

#navlist { /* här kan du lägga till stilar som gäller för menylänkarna */ }

Din sida bör då se ut så här:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>DvdSource</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="body.css" media="screen" />

</head>

<body>

<div id="header">HEADER HEADER HEADER</div>
<div id="maincontent">

<div id="left-col">
 <ul id="navlist">
  <li>Hem</li>
  <li>Nyheter</li>
  <li>Tjänster</li>
  <li>Kontakt</li>
 </ul>
</div>

<div id="content">Hej presentation 2005</div>

<div id="right-col">Högerkolumn</div>

</div>

</body>
</html>

För att left-col och right-col ska vara "lika höga" som maincontent så har jag lagt till en bild som bakgrundsbild. Lägg den i samma mapp.

Den färdiga sidan ser ut så här: http://member.webforum.nu/4237/test2.htm

m_soderlundMedlem sedan sep. 20026 425 inlägg

12 mars 2005 06:51#3

I den kod du postade så hade du ingen doctype i ditt html-dokument. En doctype är ett måste. Jag valde XHTML transitional. Jag valde även att din teckenkodning skulle vara iso-8859-1. (du kan ändra det till UTF-8 om du vill, jag har än så länge inte riktigt klart för mig vilken skillnaden är ..)

Vidare så snyggade jag upp din kod lite och tog samtidigt bort den absoluta positioneringen. Listan du använder i menyn la jag till några egenskaper - att det inte skulle visas punkter före och att det inte skulle vara något indrag.

margin: 0 auto;

i #header och #maincontent talar om att lagren ska vara centrerade.

m_soderlundMedlem sedan sep. 20026 425 inlägg

12 mars 2005 07:20#4

Okej - nu har jag i alla fall upptäckt lite skillnader mellan teckenkodningarna iso-8859-1 och UTF-8. Om man använder UTF-8 kräver det att man skriver om till exempel å ä ö till deras respektive teckenkodning (är det rätt begrepp, jag kommer inte ihåg?) å, ä och ö. iso-8859-1 är den latinska teckenuppsättningen som används i Europa. UTF-8 klarar av massa olika alfabet. Dessutom använder sig t.ex. xhtml.se av UTF-8, och då kan det sällan vara fel. ;)

captainMedlem sedan dec. 200425 inlägg

12 mars 2005 07:24#5

tack så mycket! Det var över förväntan att någon skulle göra så.

men det är en sak som försvunnit i och med du gav en ny kod. jag vill att det inte skall vara nåt utrymme längst upp.
därav hade jag position:absolute; top:0px;

Hur gör jag nu? har försökt lägga in men det gick inte nu.

m_soderlundMedlem sedan sep. 20026 425 inlägg

12 mars 2005 07:25#6

Lägg till

margin: 0;

i regeln för body-elementet. Dvs så här:

body {
 background-color: #c0c0c0;
 font: 12px Verdana,Arial,Helvetica,sans-serif;
 text-align: left;
 margin: 0; }

m_soderlundMedlem sedan sep. 20026 425 inlägg

12 mars 2005 07:28#7

Ett tips är att läsa mer om CSS på dessa sajter:

- https://www.xhtml.se
- https://www.456bereastreet.com
- https://www.alistapart.com
- https://www.mezzoblue.com
- https://www.simplebits.com

captainMedlem sedan dec. 200425 inlägg

12 mars 2005 08:06#8

tack tack för det snabba svaret.

Nu har jag börjat få fatt i hur det hela fungerar.
Nu har man lagt till en sidfot. jag försöker klura ut hur jag ska få kolumnen lagren nå fram till sidfoten oavsett hur mycket man skriver i content lagret? eller är det meningen att man ska justrera kolumnen varenda gång man skriver nåt?

captainMedlem sedan dec. 200425 inlägg

12 mars 2005 08:07#9

m_soderlund skrev:

Ett tips är att läsa mer om CSS på dessa sajter:

- https://www.xhtml.se
- https://www.456bereastreet.com
- https://www.alistapart.com
- https://www.mezzoblue.com
- https://www.simplebits.com

xhtml.se var en småintressant sajt. tackar jag ska nu plöja mig genom sajterna

m_soderlundMedlem sedan sep. 20026 425 inlägg

12 mars 2005 08:20#10

footer-lagret ska vara precis som header-lagret - bara att det ska ligga efter maincontent-divens slut.

<div id="footer">Här ska footern vara.</div>

CSS:

#footer {
 background-color: #f33;
 margin: 0 auto;
 width: 630px;
 padding: 10px; }

captainMedlem sedan dec. 200425 inlägg

12 mars 2005 08:29#11

jag förstår hur man lägger in footern här, men vad jag menade är att om jag skrivit en massa på #content och då måste man scrolla för att läsa vidare, men left-col och right-col, även footer står kvar där där mainconent har sin height. och #content lagret fortsätter ner.
Jag måste då ändra i mainconent height varje gång jag skriver nåt nått. Kan man itne göra dessa lagren oändligt lång vertikalt. jag löste detta problemet tidigare med height:100%

m_soderlundMedlem sedan sep. 20026 425 inlägg

12 mars 2005 08:49#12

Vill du att texten i left-col och right-col ska synas oavsett om man scrollat ner på sidan eller inte? Vad är det du menar?

captainMedlem sedan dec. 200425 inlägg

12 mars 2005 09:05#13

ursäkta för att jag skriver dåligt.
för att underlätta det hela tog jag en skärmdump o la upp den.

här ser vi att vänster o höger o sidfot kolumnen inte hänger med.

m_soderlundMedlem sedan sep. 20026 425 inlägg

12 mars 2005 09:14#14

Jag har tyvärr inte möjligheter att använda Firefox just här. Hur ser sidan ut i IE då?

Använder du dig av all min kod?

captainMedlem sedan dec. 200425 inlägg

12 mars 2005 09:20#15

Japp jag använde mig av alla din kod.
Det ser precis ut som jag vill i IE. Får väl testa mig fram lite så att det fungerar på Firefox också. TAck ska du ha iallafall m_soderlund!

m_soderlundMedlem sedan sep. 20026 425 inlägg

12 mars 2005 09:51#16

Testa att lägga till denna egenskap till #footer:

clear: both;

footern ska alltså se ut så här:

#footer {
 background-color: #f33;
 margin: 0 auto;
 width: 630px;
 padding: 10px;
 [b]clear: both;[/b] }

captainMedlem sedan dec. 200425 inlägg

12 mars 2005 09:59#17

det gick nu med sidfoten. right-col och left-col står kvar där precis som tidigare. :(

m_soderlundMedlem sedan sep. 20026 425 inlägg

12 mars 2005 10:01#18

Vad exakt vill du ska hända med left-col och right-col?

captainMedlem sedan dec. 200425 inlägg

12 mars 2005 10:39#19

eftersom left och right col har vit bakgrund och när dom inte hänger med så får vi ju mellanrum mellan dom och sidfoten. grått som jag har på sidans bakgrund. det vill jag itne ha.dom ska va ända ner till sidfoten oavsett hur lång contenten blir.

m_soderlundMedlem sedan sep. 20026 425 inlägg

12 mars 2005 10:51#20

Jag förstår inte riktigt vad du menar. Vill du att left-col och right-col ska vara gråa ända ner till footer:n? I så fall - använd bildfilen jag gjorde: bg_body.gif (högerklicka, välj "spara mål som"). Som du ser här så går de ända ner: test2.htm