2 svar · 760 visningar · startad av Gerthoi
God kväll på er. Jag har ett litet css problem som jag skulle bli överlycklig om ni kunde hjälpa mig med.
Har på senare tid försökt sätta mig in i hur man i dag bygger hemsidor, senast jag trixade så var varken xhtml eller css på modet utan då var det vanliga html och frames som gällde, så jag är helt enkelt rätt ny på det här.
Ok hur som helst försöker jag bygga en design som påminner lite om frame-sets fast i css. Jag har skapat en wrapper div som är 100% hög (för att täcka hela sidan, wrappern är i sig inte nödvändig), i den vill jag ha tre divar varav två (längst upp och längst ned) med fasta värden (i mitt fall 200, 50 pixlar). Så långt allt fint, därefter blir det problem då jag vill att den mellersta diven skall täcka ut resten av utrymmet, som en elastisk frame typ. I denna mellersta div vill jag även ha något element som utökas eller krymps t.ex. en iFrame.
Jag har gjort ett litet exempel som jag skickar med vilket innehåller just en wrapper tag och tre inuti den varav den mellersta har en iFrame i sig samt några radbrytningar.
Slutligen skulle jag vilja att den understa diven alltid är längst ned på sidan, det är inget problem, problemet uppstår dock när jag försöker centrera den till wrapper diven. Kanske behöver jag dock inte bry mig om den understa diven då den ju ändå kommer att hamna längst ned om jag får den mellersta att bli elastisk.
Om någon fattar vad jag tjatar om skulle jag bli överlycklig om ni kunde hjälpa mig. Har kört fast rätt hårt känns det som. Tack så hemskt mycket på förhand.
Här följer min nuvarande exempel-kod (även bifogad i zippad html fil):
<html>
<head>
<title>Exempel</title>
<style type="text/css">
<!--
body {
background-color: #CCC;
margin: 0;
padding: 0;
text-align: center;
}
#wrapper {
background-color: #666;
margin: auto;
width: 600px;
height: 100%;
}
#header {
background-color: #FF0;
margin: auto;
width: 500px;
height: 200px;
}
#mainContent {
background-color: #999;
margin: auto;
width: 550px;
}
iframe {
width: 500px;
height: auto;
}
#footer {
background-color: #0F0;
margin: auto;
width: 500px;
height: 50px;
position: fixed;
bottom: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="mainContent">
<br>
mainContent
<br>
<iframe src="http://www.webforum.nu" name="SweC" scrolling="auto" frameborder="0" ></iframe>
<br>
<br>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Hej och välkommen till wF!
Det du försöker göra är ett klassiskt svårt css-problem men det finns som tur är många fungerande lösningar på nätet. Istället för att översätta någon befintlig lösning åt dig så länkar jag helt enkelt vidare till en Guru inom css/design: Stu Nichols vars sida du hittar här: http://www.cssplay.co.uk/layouts
Den designen du vill göra kallar han för 'Fixed' layout version 1
Lycka till och återkom om något skulle vara oklart...
mvh
Tack så hemskt mycket, jag tror problemet är löst, dock förstår jag inte varför man måste använda en div html tag till varje div (om du förstår vad jag menar - * html #tag), jag ser anledningen i IExplorer men fattar inte riktigt vad man gör och varför explorer behöver det.
Hur som helst, tack återigen så hemskt hemskt mycket.
