[css+ html] Problemen met 100% hoogte - Softwareontwikkeling

dinsdag 26 februari 2008 17:00

Acties:

No smoke, no poke

Topicstarter

Ik ben weer bezig met een nieuwe layout voor mijn site, ditmaal probeer ik ook wat nieuwere dingen.
Waaronder dat de achtergrond van de site meeloopt tot helemaal onderaan.

Hier ben ik al een tijd mee bezig en mede door diverse tutorials is het resultaat is dat het in internet explorer het werkt zoals het moet.

Zie hier de index van het idee van de site.
Een achtergrond afbeeldingen die herhaald word die van boven tot aan beneden doorloopt en daarbinnen met ruimte daarbinnen waarin de de kop, menu en het tekstvak valt.
Als je hier kijkt, dan zie je dat het tekstvak een stuk naar benden doorloopt vanwege de inhoud. Plaatjes werken niet want die moet er nog bij worden gezet.
Nu loopt bij internet explorer de achtergrond afbeeldingen netjes door naar beneden, maar onder firefox krijg ik het absoluut niet voor elkaar. De achtergrond afbeelding loopt tot de onderkant van de browser en als je naar beneden scrolt zie je dat de achtergrond afbeeldingen stopt en dus niet doorloopt...
Misschien is het iets heel simpels, of heb ik de site compleet verkeerd opgebouwd, ik heb geen idee. Ik kwam wel wat dingen tegen op internet met een vaste footer enzo, maar die wil en kan ik bij de layout niet gebruiken. Verdere oplossingen kwam ik niet tegen.

Zoals eerder vermeld, hier de index waar je ziet dat de achtergrond afbeeldingen helemaal naar beneden door loopt ondanks de inhoud en hier is een voorbeeld van als de pagina doorloopt en je onder internet explorer de achtergrond niet verder krijgt als dat de browserhoogte is.

IS dit aan te passen, en zo ja hoe?

Hier de codes.

Index:

HTML:

<html>
<head>
<title>Joopiesplace.nl - Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="description" content="Persoonlijke website over mijn hobbies">
<meta name="language" content="Nederlands">
<meta name="keywords" content="johan, johan hogervorst, hogervorst, joopie, joopieboy, computers, pc, apparatuur, audio, geluid, afbeeldingen, foto's, fotoshop, auto, tuning, portfolio, website, html, css">
</head>
<body>
<div id="container">
    <div id="header">
        <div id="koplink">
            <a href="index.html"><img src="layout/koplink.jpg" width="490" height="70" border="0"></a>
        </div>
    </div>
    <div id="menubalk">
        <div id="headerlinks">
            <a href="index.html" class="menu">Home</a><a href="contact.html" class="menu">Contact</a><a href="http://186469.guestbooks.motigo.com" target="_blank" class="menu">Gastenboek</a><a href="geschiedenis.html" class="menu">Geschiedenis</a><a href="link.html" class="menu">Links</a>
        </div>
        <div id="menubalklinks">
            <div id="menubalklinksa"><li class="autos"><a href="autos.html">Auto's</a></li></div>
            <div id="menubalklinksb"><li class="apparatuur"><a href="apparatuur.html">Apparatuur</a></li></div>
            <div id="menubalklinksc"><li class="portfolio"><a href="portfolio.html">Portfolio</a></li></div>
        </div>
    </div>
    <div id="links">
        <div id="menu">
        <br>
        <p>Menu
        <br>
        <br>Test
        <br>
        </div>
    </div>
    <div id="rechts">
        <div id="tekstvak">
        <br>
        <h1>Van harte welkom op mijn site.</h1>
        <p>Een nieuw jaar met een nieuwe start van de site. Frisse nieuwe layout met een hoop wijzigingen over de hele site.
        <br>
        <br>De site gaat nog steeds over mijn hobby's, vooral computers, audio en auto's. Er is een fotopafina van mijn apparatuur bijgekomen, <a href="fotosapparatuur.html">zie deze pagina</a>. De verschillende pagina's over mijn apparatuur is nu samengebakken tot 1 mooie nieuwe pagina, <a href="apparatuur.html">zie deze pagina</a>. De pagina's van diverse mensen met hun auto zijn er ook nog steeds en mocht u ook uw auto hier willen laten zien, <a href="contact.html">neem even contact op</a>.
        <br>
        <br>Verder is er niet veel verandert, hopelijk bevalt de nieuwe layout en werkt de site naar behoren. Mochten er toch fouten inzitten, of wilt u gewoon reageren, dan <a href="contact.html">kan dat hier</a>.
        <br>
        <br>Veel plezier met de nieuwe site,
        <br>
        <br>Joopieboy
        </div>
    </div>
</div>
</body>
</html>

En de stylesheet:

Cascading Stylesheet:

body {background-color:#313131;
    height: 100%;
    text-align: center;
    margin: 0px;
    }
/* --------Container --------*/
#container {background-image: url(layout/patroon.jpg);
    width: 800px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    position: relative;
    bottom: 0;
    text-align: left;
    margin: 0 auto;
    }
/* -------- Bovenkant --------*/
#header {background-image: url(layout/header.jpg);
    width: 800px;
    height: 150px;
    margin: 0;
    padding: 0;
    }
#menubalk {background-image: url(layout/menubalk.jpg);
    width: 800px;
    height: 100px;
    margin: 0;
    padding: 0;
    }
/* --------Menu --------*/
#links {width: 190px;
    float: left;
    }
#menu {background-color: #f5f5f5;
    width: 160px;
    border-style: solid;
    border-color: #000000;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 0px;
    border-right-width: 0px;
    margin-left: 15px;
    margin-bottom: 20px;
    }
/* --------Tekstvak--------*/
#rechts {width: 610px;
    float: left;
    }
#tekstvak {background-color: #f5f5f5;
    width: 580px;
    border-style: solid;
    border-color: #000000;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 0px;
    border-right-width: 0px;
    margin-left: 15px;
    margin-bottom: 20px;
    }
/* --------Koplink--------*/
#koplink {padding-top: 30px;
    padding-left: 294px;
    }
/* -------Headerlinks--------*/
#headerlinks {background-color: #000000;
    width: 770px;
    height: 20px;
    text-align: center;
    position: absolute;
    margin-left: 15px;
    margin-right: 15px;
    }
/* --------Menubalklinks--------*/
#menubalklinks {width: 600px;
    height: 60px;
    position: absolute;
    margin-top: 25px;
    margin-left: 90px;
    }
/* -------- Menubalklinks A--------*/
#menubalklinksa {background-color: #000000;
    width: 200px;
    height: 60px;
    position: absolute;
    }
#menubalklinksa li {list-style: none;
    float: center;
    display: inline;
    margin: 0px;
    }
#menubalklinksa li a {width: 200px;
    height: 0 !important;
    height /**/: 60px;
    display: block;
    overflow: hidden;
    padding-top: 60px; 
    }
#menubalklinksa li a:hover {background-position: 0 -60px;
    }
#menubalklinksa li a:active {background-position: 0 -60px;
    }
#menubalklinksa li.autos a {background-image: url(layout/autos.jpg);
    }
/* -------- Menubalklinks B--------*/
#menubalklinksb {background-color: #000000;
    width: 200px;
    height: 60px;
    position: absolute;
    margin-left: 200px;
    }
#menubalklinksb li {list-style: none;
    float: center;
    display: inline;
    margin: 0px;
    }
#menubalklinksb li a {width: 200px;
    height: 0 !important;
    height /**/: 60px;
    display: block;
    overflow: hidden;
    padding-top: 60px; 
    }
#menubalklinksb li a:hover {background-position: 0 -60px;
    }
#menubalklinksb li a:active {background-position: 0 -60px;
    }
#menubalklinksb li.apparatuur a {background-image: url(layout/apparatuur.jpg);
    }
/* -------- Menubalklinks C--------*/
#menubalklinksc {background-color: #000000;
    width: 200px;
    height: 60px;
    position: absolute;
    margin-left: 400px;
    }
#menubalklinksc li {list-style: none;
    float: center;
    display: inline;
    margin: 0px;
    }
#menubalklinksc li a {width: 200px;
    height: 0 !important;
    height /**/: 60px;
    display: block;
    overflow: hidden;
    padding-top: 60px; 
    }
#menubalklinksc li a:hover {background-position: 0 -60px;
    }
#menubalklinksc li a:active {background-position: 0 -60px;
    }
#menubalklinksc li.portfolio a {background-image: url(layout/portfolio.jpg);
    }

Beetje veel codes helaas, maar dat komt omdat ik de site al verder aan het afbouwen was en bij het invullen van alles pas deze fout zag...

Hopelijk kunnen jullie mij helpen!

Het leven is te kort om geduld te hebben!

dinsdag 26 februari 2008 17:10

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Joopieboy schreef op dinsdag 26 februari 2008 @ 17:00:
Beetje veel codes helaas, maar dat komt omdat ik de site al verder aan het afbouwen was en bij het invullen van alles pas deze fout zag...

Je kunt uiteraard ook even een test-case maken met alleen het broodnodige erin om je punt duidelijk te maken; dat is overigens voor je zelf ook nog eens een stuk makkelijker om het één en ander in te proberen/pielen om het goed te krijgen.

Anyway; dit is me een beetje teveel een Kan iemand even...?-topic. Kijk even in onze Programming Beleid Quickstart om te zien hoe we hier wél graag een topic zien

Oh, en kijk meteen even hier. Je bent namelijk niet de eerste

[ Voor 20% gewijzigd door RobIII op 26-02-2008 17:12 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

Dit topic is gesloten.