Forum Mjukvara Programmering och digitalt skapande Tråd

Css, 3 kolumner + dynamisk footer

1
Skriv svar
Permalänk
Medlem ★
●

Css, 3 kolumner + dynamisk footer

Är det någon som har några tips på hur man ska skriva sin dynamiska footer som alltid ligger längs ner. Den ska stanna när den går in i någon av divarna i mitten.

Jag har lyckats med att den är beroende av 2 av kolumerna, men jag får inte till det med den sista.

#top {
height: 7em;
width:100%;
clear:both;
overflow:hidden;
margin-bottom:1em;

}

#left {

margin-top: 0.75em;
left:1em;
float:left;
width: 10em;
margin-bottom: 0.75em;
clear:right;
margin-left:1em;

border-left-style: double;
border-top-style: double;
border-left-width: 4px;
border-bottom-width: 1px;
border-top-width: 4px;
border-bottom-style: solid;
border-right-width: 1px;
border-right-style: solid;

#middle {

margin-left: 13em;
margin-right: 23em;
margin-top: 1.75em;
padding: 2em;
overflow:hidden;

border-right-color: #ffffff;
border-left-color: #ffffff;
border-bottom-color: #999999;
border-top-color: #ffffff;
border-top-style: solid;
border-top-width: 1px;
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;

#right {
border: 2px solid #000000;
position: absolute;
top: 8.75em;
right:1em;
width: 20em;
clear:left;
clear:both;

border-right-style: none;
border-left-style: none;
border-bottom-style: none;
border-top-style: double;
border-top-width: 1px;
border-top-color: #cccccc;

så är min kod ut, och de ligger alla i en 100% div så att footer hamnar utanför.
Det ligger även en banner ovanför.

Enligt denna typ

Jag har provat lite olika position på divarna men inget fungerar för alla 3 kolumner, har inte heller sett någon sida på nätet som har det.
Kolumnerna på sidan ska alltid synas i fullbredd medan mitten kan variera i bredd.

Visa signatur

Ei bor i stockholm och tar inget ansvar för allt som han säger
i5 2500k, 16 gig ram, radeon 6950
Solna arbetscenter

Redigera
Citera flera Citera
Permalänk
Medlem
●

Finns det nån särskild anledning till att #right är absolut positionerad?

*EDIT*
Jag förstog inte riktigt vad du ville ha, men jag gjorde en trekolumnslayout med en footer. Så här ser det ut.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<style type="text/css">

#container {
	width: 960px;
	height: 100%;
	overflow: hidden;
	margin: 0 auto;
	padding: 0px;
}

#footer {
	clear: both;
	width: 958px;
	height: 100%;
	overflow: hidden;
	background-color: #ccc;
	border: 1px solid black;
	margin-top: 30px;
}

.column {
	width: 298px;
	border: 1px solid black;
	margin-right: 30px;
	background-color: #ccc;
	float: left;
}

.rightcol {
	margin-right: 0px;
}

</style>
</head>
<body>
<div id="container">
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed magna lectus, ac auctor dui. Duis malesuada rhoncus nulla sed pulvinar. In eu tortor dui. Ut a nibh mollis sapien placerat sagittis a sed sem. </p>
</div>

<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed magna lectus, ac auctor dui. Duis malesuada rhoncus nulla sed pulvinar. In eu tortor dui. Ut a nibh mollis sapien placerat sagittis a sed sem. </p>
</div>

<div class="column rightcol">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed magna lectus, ac auctor dui. Duis malesuada rhoncus nulla sed pulvinar. In eu tortor dui. Ut a nibh mollis sapien placerat sagittis a sed sem. </p>
</div>

<div id="footer">
<p>Kontaktinfo - Copyright - Bananskal</p>
</div>
</div>
</body>
</html>

Fniss

Senast redigerat
Visa signatur

Primär - C2D T6500 :: 4GB :: Mobility 4570.
Sekundär - AMD64x2 6000+ :: 2GB :: 8800GT 1GB

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Sysse S
PS. Finns det ingen code-tag på swec? :3

Du kan ju testa, det borde ju finnas en.
Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Får försöka förklara. Mitten kollumen ska vara dynamisk bred, så att den anpassar sig till hur stort fönstret är.

Footern ska alltid ligga längs ner i fönstret även om det inte är någon kolumn som är hög nog för att komma ner till den.

Om en kollumn kommer ner till footern så ska den tryckas neråt.

Visa signatur

Ei bor i stockholm och tar inget ansvar för allt som han säger
i5 2500k, 16 gig ram, radeon 6950
Solna arbetscenter

Redigera
Citera flera Citera
Permalänk
Medlem
●

vad du behöver är:

position:fixed

samt:

bottom:0px
left:0px
width: 100%

Något i den stilen.

Jag skulle rekommendera ett besök på

http://www.w3schools.com/css/css_reference.asp

hela W3C schools siten är för övrigt en bra läsning för webbdesigners.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara