Prototype website vertoont geen scrollbalk - Softwareontwikkeling

woensdag 5 januari 2005 17:40

Acties:

Verwijderd

Topicstarter

Ik heb een prototype gemaakt voor een website, in IE 6 laat deze gewoon netjes rechts een horizontale scrollbalk zien. In IE 5 vertikt de site het echter om deze scrollbalk te laten zien, de balk is wel nodig ivm. de verandering in lengte van de pagina's. Iemand een idee waar dit aan kan liggen? Ik maar alleen gebruik van HTML & CSS, de pagina is opgebouwd uit tabellen en div's.

woensdag 5 januari 2005 17:42

Acties:

Verwijderd

Hoevaak moet er nog gezegd worden dat wij zonder enige relevante code ook niet kunnen ruiken wat jij hebt gedaan. Zou je *alsjeblieft* wat code kunnen posten?

woensdag 5 januari 2005 17:45

Acties:

Verwijderd

Topicstarter

url van het prototype is: http://www.digitalminds.nl/glgroup/

verder hier de code van de index.htm:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>GL Plastics - Precision Moulding</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="components/stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="containerDiv">

    <table width="700" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="2" width="700" height="100">
                <!-- begin header -->
                <div id="headerDiv">
                    <span id="titelSpan">Welkom bij GL Plastics</span>
                </div>
                <!-- einde header -->
            </td>
        </tr>
        <tr>
            <td width="182">
                <!-- left -->
                <div id="leftDiv">
                    <table width="182" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="20">&nbsp;</td>
                            <td width="162" bgcolor="#0153A7">&nbsp;</td>
                        </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7"><span id="menukopSpan">&nbsp;GL Plastics</span></td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;<a class="menuLink" href="onzemaniervanwerken.htm" target="_self">Onze manier van werken</a></td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;<a href="nieuws.htm" class="menuLink" target="_self">Nieuws</a></td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;<a href="producten.htm" class="menuLink" target="_self">Producten</a></td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;<a href="overzicht.htm" class="menuLink" target="_self">Overzicht GL Plastics</a></td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;<a href="jobs.htm" class="menuLink" target="_self">Jobs</a></td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;<a href="quality.htm" class="menuLink" target="_self">Quality</a></td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;<a href="contact.htm" class="menuLink" target="_self">Contact</a></td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;<a href="routebeschrijving.htm" class="menuLink" target="_self">Routebeschrijving</a></td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;<a href="#" class="menuLink" target="_self">Home</a></td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;</td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7"><span id="menukopSpan">&nbsp;GL Group</span></td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;<a href="#" class="menuLink" target="_self">xx</a></td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;<a href="#" class="menuLink" target="_self">xx</a></td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;</td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;</td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;</td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;</td>
                      </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td bgcolor="#0153A7">&nbsp;</td>
                      </tr>
                    </table>
                </div>
                <!-- einde left -->
            </td>
            <td width="518">
                <!-- right -->
                <div id="rightDiv">               
                    <span id="contentSpan">
                        <p id="koptekstP">Dit is een koptekst</p>
                        <p id="tekstP">Dit is een tekst</p>
                        <a href="#" class="link">Dit is een hyperlink</a>               
                    </span>
                </div>
                <!-- einde right -->
            </td>
        </tr>
        <tr>
            <td colspan="2" width="700" height="100">
                <!-- footer -->
                <div id="footerDiv">
                
                </div>
                <!-- einde footer -->
            </td>
         </tr>
    </table>

</div>

</body>
</html>

en hier de code van stylesheet.css:

code:

/* CSS Document */

body {
    overflow:hidden;
    }
    
#containerDiv {
    position:absolute;
    left:50%;
    top:5px;
    width:700px;
    margin-left:-350px; 
    margin-top:-0px;
    border-width:0px;
    border-color:#000000;
    border-style:solid;
    }
    
#headerDiv {
    width:700px;
    height:160px;
    border-width:0px;
    border-color:#000000;
    border-style:solid;
    background-image:url(../images/header.jpg);
    }

#leftDiv {
    width:180px;
    border-width:0px;
    border-color:#000000;
    border-style:solid;
    }

#rightDiv {
    width:520px;
    border-width:0px;
    border-color:#000000;
    border-style:solid;
    }
    
#footerDiv {
    width:700px;
    height:110px;
    border-width:0px;
    border-color:#000000;
    border-style:solid;
    background-image:url(../images/footer.jpg);
    }

#menukopSpan {
    font-family:arial;
    font-size:12px;
    font-weight:700;
    color:#FFFFFF;
    background-color:#0153A7;
    }
    
a.menuLink:link {font-family:arial; font-size:12px; font-weight:300; color:#FFFFFF; text-decoration:underline;}
a.menuLink:visited {font-family:arial; font-size:12px; font-weight:300; color:#FFFFFF; text-decoration:underline;}
a.menuLink:hover {font-family:arial; font-size:12px; font-weight:700; color:#FFFFFF; text-decoration:none;}
a.menuLink:active {font-family:arial; font-size:12px; font-weight:700; color:#FFFFFF; text-decoration:none;}

#titelSpan  {
    position:absolute;
    left:190px;
    top:140px;
    height:20px;
    width:500px;
    font-family:arial;
    font-size:14px;
    font-weight:700;
    color:#0053A6;
    }
    
#contentSpan {
    position:absolute;
    left:190px;
    top:185px;
    width:500px;
    }

#koptekstP {
    font-family:arial;
    font-size:12px;
    font-weight:700;
    color:#0053A6;
    }

#tekstP {
    font-family:arial;
    font-size:12px;
    font-weight:300;
    color:#000000;
    }

a.link:link {font-family:arial; font-size:12px; font-weight:300; color:#0053A6; text-decoration:underline;}
a.link:visited {font-family:arial; font-size:12px; font-weight:300; color:#0053A6; text-decoration:underline;}
a.link:hover {font-family:arial; font-size:12px; font-weight:300; color:#0053A6; text-decoration:none;}
a.link:active {font-family:arial; font-size:12px; font-weight:300; color:#0053A6; text-decoration:none;}

woensdag 5 januari 2005 17:51

Acties:

MBV

da's een hele lap tekst. Zou je het kunnen minimaliseren tot de kleinste test-case die niet werkt, en vervolgens daarvan de code posten? (zonder de hele zooi <br/> die eventueel nodig zijn om de tekst lang genoeg te maken)
Ik heb nu geen idee waar ik moet zoeken, en geen zin om 5 min lang jouw code uit te pluizen

edit:
hmm, werkt ook niet onder Firefox. vaag, maar ik heb nog veel voor mezelf nuttigere dingen te doen, sorry!

[ Voor 19% gewijzigd door MBV op 05-01-2005 17:53 ]

woensdag 5 januari 2005 17:51

Acties:

Icey

Ook in firefox geen scrollbar... Wellicht komt het doordat er nog wat foutjes inzitten (doe eens een html validator erdoor halen).

Is het niet netjes om met bijv. een Iframe te werken?

Verder is het niet mijn style van bouwen (tabellen gebruik je voor opmaak van tekst, niet voor websites).

woensdag 5 januari 2005 17:55

Acties:

crisp

Devver

Pixelated

fatsoenlijke methode gebruiken om te centreren:

Cascading Stylesheet:

body {
    overflow: auto;
    text-align: center;
    }
    
#containerDiv {
    width: 700px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    }

[ Voor 13% gewijzigd door crisp op 05-01-2005 17:56 ]

Intentionally left blank

woensdag 5 januari 2005 17:59

Acties:

MBV

http://validator.w3.org/c...tically%29&ss=1&verbose=1
'k kon het niet laten, te nieuwschierig

Je doet iig 1 ding fout: een ID is altijd uniek. als je opmaak wilt geven aan meerdere dingen, moet je class="koptekst" gebruiken ipv id=. je kan ze dacht ik zelfs combineren.
Ook gebruik je <span> verkeerd. Kan je daarvoor niet beter een <div> gebruiken?

edit:
zo te zien heeft crisp daar iets meer ervaring mee, dat was me niet opgevallen. Go Crisp

[ Voor 21% gewijzigd door MBV op 05-01-2005 18:01 ]

woensdag 5 januari 2005 18:01

Acties:

SnoeiKoei

Koeien Snoeien Loeiend!

Verwijderd schreef op woensdag 05 januari 2005 @ 17:40:
...in IE 6 laat deze gewoon netjes rechts een horizontale scrollbalk zien...

Mag ik aannemen dat je een verticale scrollbalk bedoelt???

SuBBaSS: "SnoeiKoei, de topic-Freek"

woensdag 5 januari 2005 18:43

Acties:

PierreAronnax

De scrollbalk kun je iig terugkrijgen door overflow:hidden; uit de body { } van de css weg te halen.
(Of te wijzigen in overflow:auto;)

Pierre - Motormedia.nl - Motor-Forum.nl - Motorshopper.nl - Motormeuk.nl - Motorstek.nl

woensdag 5 januari 2005 18:46

Acties:

crisp

Devver

Pixelated

position: relative; toevoegen aan je #containerDiv - ik zie nl dat je weer absoluut positioneert daarbinnen.

Intentionally left blank

woensdag 5 januari 2005 18:50

Acties:

Lukse

Toch even melden dat dit:

code:

#containerDiv {
    position:absolute;
    left:50%;
    top:5px;
    width:700px;
    margin-left:-350px; 
    margin-top:-0px;
    border-width:0px;
    border-color:#000000;
    border-style:solid;
    }

... wel een goede methode is om een div te centreren.

woensdag 5 januari 2005 18:54

Acties:

Icey

En voor de record, mocht iemand ooit een site willen bouwen die een beetje te bezoeken is door mensen met een 800*600 monitor (en dus horizontaal en verticaal gecentreerd):

code:

position: absolute;
width : 760px;
height : 480px;
margin-left : -380px;
margin-top : -240px;
left : 50%;
top : 50%;

[ Voor 8% gewijzigd door Icey op 05-01-2005 18:54 ]

woensdag 5 januari 2005 19:46

Acties:

CrashOne

oOoOoOoOoOoOoOoOoOo

Lukse schreef op woensdag 05 januari 2005 @ 18:50:
Toch even melden dat dit:
code:
1
2
3
4
5
6
7
8
9
10
11
#containerDiv {
    position:absolute;
    left:50%;
    top:5px;
    width:700px;
    margin-left:-350px; 
    margin-top:-0px;
    border-width:0px;
    border-color:#000000;
    border-style:solid;
    }
... wel een goede methode is om een div te centreren.

Dat is het niet, verklein je scherm maar eens en probeer dan eens de content uiterst links van je scherm te bekijken.

Huur mij in als freelance SEO consultant!

woensdag 5 januari 2005 20:13

Acties:

Genoil

-- laat maar --

[ Voor 98% gewijzigd door Genoil op 05-01-2005 20:14 ]