css, height: 100% framkallar ständigt scrollbars!?

Tråden skapades och har fått 7 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Stockholm
  • 2003-12-13 21:58

Hej!

Har lite problem... har skrivit så här:

body {

	padding: 0px 0px 0px 0px;
	margin: 0px 10px 10px 10px;

	font-size: 11px;
	font-family: arial, sans-serif;
}

#top {
	text-align: center;
	height:100px;
	width: 100%;
	background-color: rgb(25,25,25);
}

#menu {
	text-align: center;
	width: 100%;
	background-color: rgb(25,150,0);
}

#main {
	width: 100%;
	background-color: rgb(250,25,0);
	height: 100%;
	
/*
	position: absolute;
	top: 134;
	left: 180;
	width: auto;
*/
}

i min css.fil och sen så ser det ut så här i mitt php-dokument:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="include/style.css">
</head>

<body>
<div id="top">snygg bild</div>
<div id="menu">menyn</div>
<div id="main">main</div>

</html>
</head>

men main tar inte upp 100% av det utrymmet som är kvar utan tar upp utan sätter sin height till samma antal pixlar som hela webbläsarfönstret tar upp... ni förstår säkert min idé för hur jag tänkte mig att sidan ska se ut.... 3 block som tar upp varsin rad..

mvh
ivar

  • Medlem
  • Karlstad
  • 2003-12-13 23:53

100% är ju 100% av viewport, så 100% + 100px + höjden på "menu" blir MER än viewport = scrollbars.

Lägg in "top" och "menu" inuti "main":

<div id="main">
<div id="top">snygg bild</div>
<div id="menu">menyn</div>
main
</div>

  • Medlem
  • Stockholm
  • 2003-12-14 10:25

Aha, skönt. Då förstår jag.

Jag fick ändå scrollbars för bordern lägger sig utanpå.. så här slutade det alltså:

body {

	padding: 0px 0px 0px 0px;
	margin: 0px 20px 10px 20px;

	font-size: 11px;
	font-family: arial, sans-serif;
}

#top,#menu,#main {
	width: 100%;
	text-align: center;
}

#top {
	height:100px;
	background-color: rgb(25,25,25);
}

#menu {
	
	height: 30px;
	background-color: rgb(25,150,0);
}

#main {
	border-left: 1px solid rgb(0,0,0);
	border-right: 1px solid rgb(0,0,0);
	
	background-color: rgb(250,25,0);
	height: 97%;
	border-bottom: 1px solid rgb(0,0,0); 
}

samt

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="include/style.css">
</head>

<body>
<div id="main">
	<div id="top">snygg logo</div>
	<div id="menu">menyn</div>
	main
	<p style="height:150px; text-align: right; border: 1px solid #449922;">tjockis</p>
</div>

</html>
</head>

men fy skam vad dåligt safari är på att hantera css? Safari fattar ju typ nada av procent-satser.
Det här blev ialla fall perfekt, tack så mycket för hjälpen!

Förresten, när man ändå är inne på att någon webbläsare inte visar sidan rätt... är det något som kommer förändras? För jag vill göra hemsidan så kompatibel som möjligt och då håller det ju inte att den ser olika ut i alla webbläsare

  • Medlem
  • Stockholm
  • 2003-12-14 10:49

Jag har inte riktigt förstått hur reglerna för nästling fungerar ändå...

jag satte padding-left: 10px; inuti #menu men då blev resultatet som bilden visar.
Jag trodde #menu och #top inte kunde sträcka sig utanför #main eftersom båda två låg inuti i #main ..

  • Medlem
  • Karlstad
  • 2003-12-14 11:26

Ja du... bygga sidor enbart med CSS är inte helt lätt. Tvärtom, det är sällan du ens stöter på ett super-proffs som orkar göra det.

Jag föreslår att du bygger en stomme av tabeller och sedan lägger på CSS för kontroll av elementen (om du nu inte bara vill träna och lära CSS-bygge, förstås, utan vill göra klart en sajt också).

Ett annat utmärkt verktyg är att använda Firebird och installera en extension som heter "Web designer" i den. Om du då tittar på sidan i den webbläsaren, så kan du öppna en meny på sidan och ändra CSS-parametrarna - och direkt se i läsaren hur det påverkar uteseende/funktionen av sidan.

Om du letar exempel/tutorials, kanske dessa hjälper. Håll framför allt ett öga på Eric Meyer (meyerweb.com):

http://www.echoecho.com/css.htm
http://www.thenoodleincident.com/tutorials/box_lesson/index.html
http://www.glish.com/css/
http://www.meyerweb.com/eric/css/edge/
http://www.w3schools.com/css/default.asp
http://www.alistapart.com/stories/practicalcss/

EDIT: Höll på att glömma:
Jo, jag är altså lång ifrån nån CSS-guru. Men man måste tänka på att en del attribut "överförs" från den tidigare stilen - om du förstår vad jag menar. Kolla in o läs länkarna ovan...

Citat:

Skrevs ursprungligen av ivar
Jag har inte riktigt förstått hur reglerna för nästling fungerar ändå...

jag satte padding-left: 10px; inuti #menu men då blev resultatet som bilden visar.
Jag trodde #menu och #top inte kunde sträcka sig utanför #main eftersom båda två låg inuti i #main ..

det du upplever är "box modelllen" dvs reglerna för de olika elementen i en låda lägs på varandra.

just nu så kör de flesta webbläsare (utom explorer 5/5.5 såklart) med ( dockenligt specifikationerna!) height/width -> padding -> border -> margin om inte jag minns helt fel. Detta betyder alltså tex padding som i ditt fall läggs till storleken på din låda.

Kanske inte helt logiskt men så funkar det, man vänjer sig fort att "räkna"

edit: och här är den allltid roliga w3c länk: http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions

Och så det ack så viktiga CSS-hacket för IEwin:

http://tantek.com/CSS/Examples/boxmodelhack.html

VIKTIGT!

  • Medlem
  • 2004-01-05 16:08

Hej,

En bredd av 100% plus 10px är tyvärr mer än bredden på fönstret (även kallat "viewport"). Eftersom din HTML-sida inte har definierat en DOCTYPE kommer inte heller IE6 att rendera sidan enligt korrekt "box-modell".

För att enklare förstå hur boxmodellen fungerar, se denna bild:

1
Bevaka tråden