[CSS] Dynamische content met footer direct eronder* - Softwareontwikkeling

maandag 14 mei 2007 13:38

Acties:

Topicstarter

Goedemiddag allemaal.

Ik ben nu al twee dagen bezig om een probleen met divjes op te lossen. Talloze tutorials gedaan, boeken open geslagen en ontelbare websites geraadpleegd (natuurlijk ook de searchfunctie van GoT, maar dat is niet super helpvol want de meeste screenshots staan er niet meer op).

Anyway, het gaat hierom (zie screenshots voor verduidelijking)

De bovenste, header, is een vaste hoogte. Het menu eronder ook. De content is in percentages omdat deze dus mee moet rekken met de content (alleen in de hoogte). Het probleem is, dat ik nog een footer wil (met contact webmaster en copyrightgezeur, ook mooi afronden zoals aan de bovenkant) die direct aansluit op de content. Het is dus niet mogelijk om dit absoluut te maken aangezien de grootte van de content steeds verschilt. In IE is het me nu gelukt (volgensmij niet op een goede manier, maargoed

), maar in FF en Opera niet. Ik snap echt niet wat ik fout doe, dus hulp wordt heel erg op prijs gesteld!

Screenshots:
http://www.26fps.nl/got/ssie.jpg <-- IE
http://www.26fps.nl/got/ssff.jpg <-- Firefox
http://www.26fps.nl/got/ssop.jpg <-- Opera

Cascading Stylesheet:

@charset "utf-8";
/* CSS Document */

html                { padding: 0; 
                margin: 0;
                font: 11px Arial, Helvetica, sans-serif;
                color: white; }

body                { background-color: #ffffff; 
                padding: 0; 
                margin: 0 auto;
                text-color: #eeeeee;
                text-align: center;
                }

/* DIV's */

#container      { margin: 0 auto;
                padding: 0;
                width: 750px; height: 100%;
                }

#upperheader    { width: 100%;
                height: 20px;
                visibility: hidden; 
                }
                
#header         { padding: 0;
                margin: 0 auto;
                width: 750px; height: 150px;
                }

#menu           { margin: 0 auto;
                padding: 0;
                width: 750px; height: auto;
                background: url(../images/bgimgbottom.gif);
                }

#content        { margin: 0 auto;
                heigth: auto;
                width: auto;
                background-color: #3399cc;
                padding-top: 15px;
                padding-bottom: 15px;
                padding-left: 10px;
                padding-right: 10px;
                text-align: left;
                overflow: auto;
                }
    
#downer         { padding: 0;
                margin: 0;
                width: 750px; height: 35;
                background-color: #000000;
                }
                
#downdowner     { width: 100%;
                height: 20px;
                visibility: hidden; 
                }

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sneaky</title>
<link href="css/opmaak.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="container">
    
    <div id="upperheader">    </div>

<div id="header">
<img align="left" src="images/header_links.gif" />
<img align="right" src="images/header_rechts.gif" /></div>
    
    <div id="menu">
    <img align="middle" src="images/navigatie.gif" /></div>
    
    <div id="content">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris condimentum commodo odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque ultricies eros sed nulla. Pellentesque vehicula sollicitudin ligula. Sed vitae lorem. Nulla dapibus, metus vitae mattis commodo, justo tortor bibendum urna, quis posuere purus arcu non ipsum. Phasellus quis quam ut mauris pretium porta. Nam tempor lacinia erat. Nam congue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nulla. Praesent volutpat lacus non felis. Vivamus feugiat nibh vel diam. Etiam rhoncus ullamcorper orci. Sed iaculis metus at felis. </p>

<p>
Nam in quam vehicula tellus vestibulum molestie. Sed feugiat neque in libero. Quisque eu sapien. Curabitur orci erat, fringilla nec, tempor eu, varius et, lectus. Nulla viverra tristique tortor. Nulla nulla. Sed massa libero, tempus quis, imperdiet eget, fringilla vitae, dolor. Cras condimentum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam ullamcorper mi eget pede. Proin tristique, risus a sollicitudin pulvinar, risus dolor bibendum nisl, eu eleifend magna felis sit amet lorem. </p>
<p>&nbsp;</p>
</div>
        <div id="downer">
        <h1>Blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat</h1>
    </div>
    
    <div id="downdowner">    </div>
    </div>

</body>
</html>

Moet zeggen dat ik me wel een beetje lullig voel om deze vraag te stellen omdat er al zó veel dingen over DIV's zijn gevraagt maar ik kom er dus echt niet uit

Code kan talen bevatten wat de leesbaarheid ten goede komt

[ Voor 1% gewijzigd door BtM909 op 14-05-2007 13:40 ]

maandag 14 mei 2007 13:42

Acties:

BtM909

Watch out Guys...

offtopic:
Probeer voortaan een titel te vinden die het probleem beschrijft en niet je persoonlijke gemoedstoestand

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

maandag 14 mei 2007 14:06

Acties:

Verwijderd

Ik heb hier wel een mooi voorbeeldje voor je, wat je volgens mij prima kunt gebruiken hiervoor:
http://test.jaydev.nl/tpl.htm

De footer zit dus niet in je container.

Wat jij met je plaatjes doet is niet netjes, die hoor je eigenlijk in een background te zetten van je element <h1><span>Dit zie je alleen zonder css</span></h1>, omdat dit niet bij de inhoud van je site hoort.
(bv. in een tekst over honden zou je een hondenplaatje semantisch gezien gewoon als <img> neer kunnen zetten)

Cascading Stylesheet:

h1{
background:url(header.jpg);
}
h1 span{
position:absolute;
width:0;
height:0;
display:none;
}

[ Voor 73% gewijzigd door Verwijderd op 14-05-2007 14:13 ]

maandag 14 mei 2007 14:33

Acties:

sOid

Topicstarter

BtM909 schreef op maandag 14 mei 2007 @ 13:42:

offtopic:
Probeer voortaan een titel te vinden die het probleem beschrijft en niet je persoonlijke gemoedstoestand

Haha ja sorry, je hebt gelijk

Verwijderd schreef op maandag 14 mei 2007 @ 14:06:
Ik heb hier wel een mooi voorbeeldje voor je, wat je volgens mij prima kunt gebruiken hiervoor:
http://test.jaydev.nl/tpl.htm

De footer zit dus niet in je container.

Wat jij met je plaatjes doet is niet netjes, die hoor je eigenlijk in een background te zetten van je element <h1><span>Dit zie je alleen zonder css</span></h1>, omdat dit niet bij de inhoud van je site hoort.
(bv. in een tekst over honden zou je een hondenplaatje semantisch gezien gewoon als <img> neer kunnen zetten)
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
h1{
background:url(header.jpg);
}
h1 span{
position:absolute;
width:0;
height:0;
display:none;
}

Bedankt, ziet er goed uit. Zal er wel even mee bezig gaan

woensdag 16 mei 2007 22:00

Acties:

sOid

Topicstarter

Jep, het is gelukt! Nogmaals bedankt