webForumDet fria alternativet

CSS Div

19 svar · 1 558 visningar · startad av SoulGod

SoulGodMedlem sedan aug. 20051 200 inlägg
#1

Har gjort flertalet hemsidor - och på dom flesta har alla sagt "Använd CSS Div"..och det vill jag göra på min kommande hemsida..
Hur gör jag?

Jag vill ha en "logo", en meny list (som ligger under loggan),
en liten meny till vänster, en "innehållsruta" i mitten, och sedan en "rad" längst ner (copyright rad o.s.v.)...

Jag fattar ingenting om hur css div os.v. fungerar.
Kan någon hjälpa mig?

SoulGodMedlem sedan aug. 20051 200 inlägg
#2

Tog hjälp av "kaxigt.com" , och lyckades bygga denna:
http://soulgod.no-ip.info/souldesign/
dock fattar jag ingenting..
jag får inte till en menyframe där uppe, eller en meny till vänster...

Kan ngn förklara? =)

cascaMedlem sedan feb. 20005 891 inlägg
#3

Alltså, du gör en div med DIV-taggen och sen använder du CSS-attribut för att positionera den.

SoulGodMedlem sedan aug. 20051 200 inlägg
#4

http://soulgod.no-ip.info/souldesign/

Titta på den... så ser du hur jag klantat till mig hittils *skrattar*
Iaf - min närmaste fråga, hur gör jag sidan så den sträcker sig över hela sidan ?
100% höjd typ...

Bifogar min css kod:

body,html {
	background:#cccccc url() repeat; background-attachment: fixed;
	line-height:150%;
  	text-align:center;
 	font:x-small/1.5em verdana,arial,Trebuchet MS,Verdana,Sans-serif;
	font-size/* */:/**/small;
	font-size: /**/small;}

#bg {
	width: 740px;
	\width: 740px;
	w\idth: 740px;
	height: 100%;
	border: 1px solid gray;
	margin: 5px;
	margin-left: auto;
	margin-right: auto;
	padding: 5px;
	background:#366D96 url() repeat; background-attachment: fixed;
	line-height:150%;
	font:x-small/1.5em verdana,arial,Trebuchet MS,Verdana,Sans-serif;
	color:#333;
	font-size/* */:/**/small;
	font-size: /**/small;}

#logo {
	height:120px;
	padding: 10px;
	margin-bottom: 5px;
	align: left;
	background:#fff url() no-repeat left top;
	text-align:left;
	color:#fff;}
#banner h3 {
	padding:10px;
	text-align:left;}
		
#menubar {
	height: 20px;
	margin: 0px;
	margin-left:0px;
	padding: 0px;
	background:#fff;}

#content {
	padding: 5px;
	margin-right: 0px;
	margin-top: 5px;
	margin-bottom: 15px;
	background:rgb(235, 235, 235) url() repeat;}
cascaMedlem sedan feb. 20005 891 inlägg
#5

Kika på glish.com, där i högermenyn under "Quick-Links to the Layouts:" finns "3 columns, the holy grail"..

http://glish.com/css/

MozfanMedlem sedan okt. 2005541 inlägg
#6

Och en "menylist" (horisontel meny under loggan) hittar du här >

SoulGodMedlem sedan aug. 20051 200 inlägg
#7

Jag har redan fått till de kolumner jag vill ha (nästan)
Föredrar dessutom att inte ta en hel kod, utan att skriva det själv.
Det ger mig bättre förståelse för hur det fungerar.
Men jag har tittat båda era länkar - och jag får inte fram hur jag gör en div
till 100% höjd ändå.
Hur gör jag?

SoulGodMedlem sedan aug. 20051 200 inlägg
#8

Felsökning

Har sökt lite på nätet, och hittat en kod som gör "height: 100%" att fungera...
Och det är:
"" position:absolute ""

Dock tar denna bort min önskade centrering.
Och lägger jag dit position:center , så försvinner 100% höjd..

Varför är det såhär?

doggelitoMedlem sedan juni 20003 076 inlägg
#9

för att få en div 100% hög så brukar man få lägga till denna: :)

html, body
{
     height:100%;
}
echoSweMedlem sedan nov. 20041 189 inlägg
#10

SoulGod skrev:

Har sökt lite på nätet, och hittat en kod som gör "height: 100%" att fungera...
Och det är:
"" position:absolute ""

Dock tar denna bort min önskade centrering.
Och lägger jag dit position:center , så försvinner 100% höjd..

Varför är det såhär?

  1. sätt in doggelitos kod
  2. sätt in min-height:100%; för din div.
  3. för IE är det height:100% för din div.
  4. ta bort alla fulhack för tidigare IE-versioner. Lär dig först CSS, sedan är det enklare att gå på hacken.
SoulGodMedlem sedan aug. 20051 200 inlägg
#11

Nu till nästa problem - jag vill lägga någonting LÄNGST ner på min sida.
hur?
"position: absolute bottom" skulle enligt ngn sida fungera.. men det gör det inte..
läste på samma sida att FF inte klarar det, men IE gör det.
Vad stämmer? =)

aspMedlem sedan aug. 2002733 inlägg
#12

Använd tabeller för tusen, hålla på div:ar o sånt är överskattat. Blir bara fult o krångligt i vissa webbläsare.... taget!

jarvkloMedlem sedan juli 20013 378 inlägg
#13

Hmm...

Här är en princip du kan använda om du vill köra med "div-layout" och en sidfot i underkanten... :birp

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<title>Ett av Jarvklos exempel</title>

	<style type="text/css">
	html,body {margin:0;padding:0;height:100%}
	#container {
		min-height: 100%;
		background-color:#eee;
		width:300px;
		margin:0 auto;
	}
	* html #container {  /* hack för MSIE 6 och tidigare */
		height: 100%;
	}
	#bottenutrymme {
		height: 30px;   /* garanterar plats för #fot */
		background-color: #ccf;  /* färgen finns här bara för att demonstrera var diven hamnar */
	}
	#fot {
		/* samma width, height, margin och ev. padding som #container */
		width:300px;
		margin:0 auto;
		
		height: 30px; /* samma höjd som #bottenutrymme */
		margin-top: -30px; /* samma höjd som #bottenutrymme (inkl ev paddings där) */
		border-top: 1px solid #000;
		}
	</style>

</head>

<body>
<div id="container">
	Container
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
	Sed ut ante a sapien venenatis euismod. 
	Ut vitae leo non tellus congue pulvinar. Vestibulum sed risus. 
	Aenean eget lectus ac dui tincidunt imperdiet. 
	Curabitur vestibulum augue in odio. Quisque eget tortor. 
	Etiam hendrerit velit nec nisl. 
	Quisque et sapien eu odio aliquet vehicula. 
	Suspendisse volutpat, magna et iaculis accumsan, 
	ante purus rutrum mauris, non sodales dolor mauris et urna. 
	Nam at ligula. Vestibulum ante ipsum primis in faucibus orci
	luctus et ultrices posuere cubilia Curae; 
	Curabitur vitae justo. Nam tellus ipsum, adipiscing quis, 
	imperdiet vel, gravida id, sem. 
	Maecenas et magna nec erat tincidunt placerat. 
	Sed viverra, erat vitae euismod tristique, eros arcu molestie sem, 
	id sagittis justo urna at erat.
	<div id="bottenutrymme">&nbsp;</div>
</div>
<div id="fot">Fot (Obs utanför containern i koden)</div>
</body>
</html>

Prova

SoulGodMedlem sedan aug. 20051 200 inlägg
#14

asp > Onödigt Svar.

jarvklo > tackar, ska pröva.

SoulGodMedlem sedan aug. 20051 200 inlägg
#15

jarvklo > Får lite skum design nu faktiskt...
http://soulgod.no-ip.info/souldesign/

Vad gör jag fel?
Kör med din kod.

jarvkloMedlem sedan juli 20013 378 inlägg
#16

Njae du kör inte riktigt med min kod...

<div id="fot">Fot ([b]Obs utanför containern i koden)[/b]</div>

Just nu ligger alltså din #fot inne i din "container" #bg :bire

whistlerMedlem sedan okt. 200148 inlägg
#17

Jag har försökt få att använda din idé jarvklo, och det ser bra ut i Explorer, men i Mozilla så följer inte Divarna "Header" och "Inner" med ända ner. Vad kan detta bero på?

<html>
<head>
		<link rel="stylesheet" href="stilmall.css" type="text/css" media="screen">		
</head>

<body id="default">
<div id="header">
<div id="inner">

<br>
Innehåll på hemsidan
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>

<br><br><br>

<div id="bottenutrymme">&nbsp;</div>

</div><!--inner -->

<div id="footer">
	<div id="left">
	</div>
	<div id="right">Copyright 2007</div>
</div>

</div><!--header -->

</body>

HTML
{
    HEIGHT: 100%;
}

BODY
{
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    PADDING-TOP: 0px;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    HEIGHT: 100%;
    BACKGROUND-COLOR: #bebebe;
    TEXT-ALIGN: center;
    FONT-SIZE: 9pt;
    FONT-FAMILY: Verdana, Arial;
}

#header
{
    MARGIN: 0px auto;
    WIDTH: 806px;
    min-height: 100%;
    POSITION: relative;
    BACKGROUND-COLOR: #FFFFFF;
}

html #header { 
	height: 100%;
}

#inner
{
    min-height: 100%;
    MARGIN: 0px 20px;
    BACKGROUND-COLOR: #fff600;
}

html #inner { 
	height: 100%;
}
#bottenutrymme
{
    HEIGHT: 30px;
}

#footer {
	height: 30px;
	margin-top: -30px;
	margin-left: 30px;
	margin-right: 30px;
	font-size: 10px; 	
	color: #959595;
	font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular; 
	}
#footer #left {
	float: left;
	}
#footer #right {
	float: right;
	}

Hoppas någon har enkel förklaring. Tack på förhand

jarvkloMedlem sedan juli 20013 378 inlägg
#18

Hmm...

Nu har jag inte testat din kod, men jag ser direkt att du du missat "*"-tecknet som bör stå först i CSS-stilen

html #header { 
	height: 100%;
}

det bör alltså vara

* html #header { 
	height: 100%;
}

"* html" är ett "CSS-hack", dvs en medvetet felaktigt skriven stil som får Explorer (som är den enda webbläsaren som tror att "* html #header" är samma sak som "html #header") att använda "height: 100%" istället för den "min-height: 100%" som står i stilen #header ovanför...

ett annat sätt att "tvåla till IE så att den gör rätt" är att istället använda en "villkorlig kommentar" - exempel på den metoden finns i http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html om du vill jämföra vad som skiljer ;)

whistlerMedlem sedan okt. 200148 inlägg
#19

Hej och tack för ett snabbt svar.

Jag lade till * framför, men problemet kvarstår. Mozilla fyller inte ut Diven "Inner" ända ner i botten om Inner inte innehåller tillräckligt med text (dvs om man tar bort alla <br>). Vad kan detta bero på?

jarvkloMedlem sedan juli 20013 378 inlägg
#20

Hmm...

Om "Inner" kunde täcka hela ytan, skulle inte trixet med "bottenutrymme" behövas ;)
Det är tyvärr så att en "inre div" inte kan täcka hela ytan om inte "någon av de yttre" har en fast höjs (dvs inte procent).

Du verkar köra utan <!DOCTYPE ?

Förmodligen är det så att även MSIE slutar täcka hela ytan om du lägger dit en giltig <!DOCTYPE

Trixet i exemplet du utgår ifrån är att lägga bakgrunden i den div som du kallar "header" och att låta "bottenutrymme" se till att innehållet i den "inre" inte kan "halka under" "footer" när "footer" dras upp med en negativ toppmarginal...
.
Kolla en gång till i originalexemplet(en) så ser du att bakgrunderna sitter på den "yttre" div:en i bägge exemplen.

Hoppas det löser sig - om inte är det bara att fråga på :bire

133 ms totalt · 3 externa anrop · v20260731065814-full.2b84b982
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
129 ms — hämta tråd, inlägg och bilagor (db)