PDA

Volledige versie bekijken : psd to css tips

pascal7
%Europe/Berlin %754 %2008, 19:06
Ik heb een layout voor een website gemaakt in photoshop. Normaal ben ik gewend om te exporteren als html. Dat gaat al best vaak fout :# .

Ik heb een footer
#footer_ {
position:absolute;
left:11px;
top:669px;
width:814px;
height:35px;
background-image: url(images/footer.png);}
De css waar de content in staat
#hoofdvenster_ {
position:absolute;
left:234px;
top:151px;
width:591px;
min-height:518px;
margin: 0 auto;
background: url(images/hoofdvenster.png) repeat-y;}

Hoe krijg ik het voor elkaar dat de footer meeloopt met het venster?
http://www.ictsoftware.info/probleempje.png
Lorrens
%Europe/Berlin %969 %2008, 00:16
Je tekstblok niet floaten? :P Zo haal je hem uit de normale pageflow, dus dan snap de box eromheen niet dat hij ook mee moet rekken.

(of even een clear onderaan je blok knallen, dus een element met style="clear: both;" eraan :))
pascal7
%Europe/Berlin %622 %2008, 15:56
Zou je me in stappen willen uitleggen hoe ik dit kan doorvoeren.
Als voorbeeldje heb ik deze code:

CSS
#Content {
position:absolute;
left:234px;
top:151px;
width:591px;
min-height:518px;
margin: 0 auto;
background: url(images/hoofdvenster.png) repeat-y;

}

}

HTML:
<div id="Content">
</div>
WernerL
%Europe/Berlin %644 %2008, 16:27
ELKE ge-floate item moet ge-cleart worden. Zet dit in de css van je footer:


clear: both;


Dat zou het probleem op moeten lossen.
pascal7
%Europe/Berlin %816 %2008, 20:35
Mijn lay-out blijft hetzelfde reageren op teksten.
shebanian
%Europe/Berlin %400 %2008, 10:36
#footer_ {
position:absolute;
left:11px;
top:669px;
width:814px;
height:35px;
background-image: url(images/footer.png);}

Zo gaat je footer nooit meelopen.
Nu blijft de footer standaard op 669px van de bovenkant staan.
shebanian
%Europe/Berlin %404 %2008, 10:41
Zo zou het moeten werken let ff niet op de rare kleuren :) ..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.hoofdvenster_ {
position:absolute;
left:234px;
top:151px;
width:591px;
height:518px;
margin: 0 auto;
background: #663333 url(images/hoofdvenster.png) repeat-y;
color: #00CC99;
}
.footer_ {
position:absolute;
left:-212px;
bottom: -35px;
width:814px;
height:35px;
background-image: url(images/footer.png);
color: #00FFFF;
background-color: #99FFCC;
}
-->
</style>
</head>

<body>

<div id="hoofdvenster_" class="hoofdvenster_">MAIN
<div id="footer_" class="footer_">footer</div>
Main
</div>

</body>
</html>
Terror-web
%Europe/Berlin %592 %2008, 15:13
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JouwPagina</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<style type="text/css">
body, html {
padding:0;
margin:0;
height:100%; /* needed for container min-height */
}

.hoofdvenster_ {
position:absolute;
width:814px;
left:50%;
margin-left:-407px;
z-index:2;
background: #663333 url(images/hoofdvenster.png) repeat-y;
color: #00CC99;
z-index:1;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}

#footer_ {
background: #99FFCC url(images/footer.png);
color: #fff;

position:absolute;
height:35px;
width:814px;
bottom:0;
left:50%;
margin-left:-407px;
z-index:2;
}
</style>
</head>

<body>
<div class="hoofdvenster_">HOOFD</div>
<div id="footer_">VOET</div>
</body>

</html>

Je bedoelt niet zoiets?
shebanian
%Europe/Berlin %596 %2008, 15:18
Je bedoelt niet zoiets?

Lijkt mij niet, bij mij [2 posts omhoog] schuift de footer mee naar benedenen, als ik bij jou de tekst heel lang maakt blijft de footer fixt staan en schuift de tekst eronder door....... en gaat de pagina gewoon verder na de footer... (tenzij je overflow aanzet)

De vraag is dus wat is meelopen met het venster ??? :S
Terror-web
%Europe/Berlin %438 %2008, 11:30
Lijkt mij niet, bij mij [2 posts omhoog] schuift de footer mee naar benedenenHeb deze optie gepost, omdat het de clear:both door Lorrens en Werner geopperd blijkbaar niet het gewenste resultaat geeft? Dan zou de topicstarter iets anders in gedachten kunnen hebben..
pascal7
%Europe/Berlin %534 %2008, 13:49
Ik wil dat de footer altijd onderaan de pagina staat en als je veel tekst in het venster zet het tekstgedeelte uitgerekt wordt.
shebanian
%Europe/Berlin %605 %2008, 15:32
Mijn post met HTML hierboven ergens :)