webpagina's staan half gevuld op scherm. ipv volle breedte.

Status
Niet open voor verdere reacties.
djeric

djeric

Gebruiker
Lid geworden
22 nov 2006
Berichten
955
hallo.

op mijn website yourdjeric zie ik bij mijn breedbeeld scherm op een scherm resolutie van: 1280 x 720 de filmstrip aan de rechterzijde niet uiterst rechts staan. voorheen was dit wel. ik denk dat er iets is mis gegaan in de css code met een regel waar bij je iets voorgang geeft met een bepaalde code maar zie geen fouten. (aldus de validator)

Code: 
body { 
background-image : url('../images/blue010.gif'); 
background-attachment : fixed; 
background-repeat : repeat; 
} 
#menu { 
position : absolute; 
top : 30px; 
left : 10px; 
padding : 0; 
margin : 0 0 0 0; 
text-align : center; 
width : 180px; 
} 
#menu ul { 
list-style-type : none; 
display : block; 
padding : 0; 
margin : 0; 
} 
#menu a { 
background-color : #66ff66; 
display : block; 
padding : 5px; 
margin : 10px; 
line-height : normal; 
text-decoration : none; 
border : 0 solid #0000ff; 
width : 120px; 
color : #ff0000; 
font-weight : bold; 
} 
#menu a:hover { 
color : #ffffff; 
background : #ff0000; 
} 
#logo { 
background-image : url('images/logo.jpg'); 
background-repeat : no-repeat; 
position : absolute; 
top : 40px; 
left : 200px; 
height : 150px; 
width : 600px; 
} 
#inhoud { 
background-attachment : scroll; 
background-repeat : repeat-y; 
position : absolute; 
top : 210px; 
left : 200px; 
width : 600px; 
color : #fff999; 
font-family : Georgia, "Times New Roman", Times, serif; 
font-style : italic; 
font-size : medium; 
font-weight : 100; 
} 
#inhoud h2 { 
text-align : center; 
color : silver; 
} 
#demos { 
background-repeat : no-repeat; 
background-position : center; 
width : 400px; 
height : 416px; 
} 
.form { 
background-color : transparent; 
color : #666666; 
width : 400px; 
height : 416px; 
} 
#loading { 
position : absolute; 
top : 300px; 
left : 150px; 
} 
#filmstrip { 
background-image : url('../images/Filmstrip.jpg'); 
position : absolute; 
top : 40px; 
left : 820px; 
width : 200px; 
height : 600px; 
} 
.rood { 
color : red; 
} 
.geel { 
font-size : large; 
color : yellow; 
} 
.silver { 
font-size : large; 
color : silver; 
font-weight : bolder; 
} 
#teller { 
background-attachment : scroll; 
text-align : center; 
width : 600px; 
} 
.table { 
width : 600px; 
text-align : left; 
} 
.tablelinks { 
width : 600px; 
text-align : center; 
border : 1px solid gray; 
} 
#table a, a:link { 
color : #ff0000; 
} 
#table a, a:hover, a:visited { 
color : #cccccc; 
} 
.tr { 
width : 150px; 
} 
.td { 
width : 115px; 
} 
h1 { 
color : white; 
font-size : xx-large; 
font-family : Georgia, Tahoma, Verdana, Times New Roman, Arial; 
} 
h2 { 
color : silver; 
font-size : x-large; 
font-family : Georgia, Tahoma, Verdana, Times New Roman, Arial; 
} 
h3 { 
color : white; 
font-size : large; 
font-family : Georgia, Tahoma, Verdana, Times New Roman, Arial; 
} 
h4 { 
color : silver; 
font-size : medium; 
font-family : Georgia, Tahoma, Verdana, Times New Roman, Arial; 
} 
h5 { 
color : #666666; 
font-size : small; 
font-family : Georgia, Tahoma, Verdana, Times New Roman, Arial; 
} 
h6 { 
color : #666666; 
font-family : Georgia, Tahoma, Verdana, Times New Roman, Arial; 
font-size : xx-small; 
} 
.vraag { 
color : #ff0000; 
font-size : small; 
font-family : Georgia, Tahoma, Verdana, Times New Roman, Arial; 
width : 115px; 
height : auto; 
margin : 0; 
padding : 0; 
line-height : 130%; 
} 
.antwoord { 
color : #00ff44; 
font-size : small; 
font-family : Georgia, Tahoma, Verdana, Times New Roman, Arial; 
width : 115px; 
height : auto; 
margin : 0; 
padding : 0; 
line-height : 130%; 
} 
table td { 
vertical-align : top; 
} 
table table { 
margin-top : 10px; 
} 
table table td { 
padding : 3px 5px; 
}
 
Hoi eric,
Wat er mis gaat, is dat alle containers een {position: absolute;} hebben meegekregen: met een in pixels vastgelegde afstand tot de linkerzijkant.
Wat je kan doen:
  • alle absolute posities er uit halen;
  • de <body> een vaste breedte van max. 1000px geven, met {margin: 10px auto;}, zodat de pagina altijd gecentreerd is;
  • het #menu een {float: left;} geven,
  • de #filmstrip in de html meteen na het #menu zetten, en een {float: right;} geven,
  • zodat de #inhoud mooi tussen die twee in komt te zitten.
Dat wordt dan ongeveer:
Ik heb de css alleen losgelaten op de homepage; het zou kunnen zijn dat er op andere pagina's nog wat aan gedaan moet worden.

Met vriendelijke groet,
CSShunter
 
csshunter zei:
Dat wordt dan ongeveer:
Klik om te vergroten...


  • ik heb dit eens bekeken en gedaan, maar merk nu op dat de filmstrip wel uiterst rechts staat maar ook helemaal onderaan.

    komt dat door deze code die bij de filmstrip staat???
    Code: 
    height : 600px;

    moet die niet lager staan dan? zo ja, bv in ik noem maar wat 200px; dan word hij in sommige schermen toch niet weergeven dan? als iemand een 14 inch monitor heeft of een 21 inch staandie verschillend op hun scherm. even eens als andere scherm resoluties e.d. of werkt dat juist wel goed? dat hij dan 200pixels van de boven kant blijft?

    afijn.... mijn vraag... klopt die 600px; ??????
 
Nee hoor, de hoogte van het kolommetje #filmstrip is prima; zou je daaraan gaan knabbelen, dan zou er een stuk van de afbeelding afgezaagd worden. Met de hoogte van 600px komt hij altijd helemaal op scherm (eventueel met scrollen te zien).

Maar doet dit verschijnsel zich ook voor bij mijn testpagina? - Bij mij zit de filmstrook helemaal niet onderaan, maar op gelijke hoogte als de bovenkant van het menu en van het logo (in alle browsers, bij alle resoluties).

Zo ja, met welke browser en welke resolutie bezoek je de testpagina?

Zo nee, dan heb ik een blauw vermoeden dat je de vierde bullet van m'n suggestie-schoten niet helemaal hebt toegepast:
  • de #filmstrip in de html meteen na het #menu zetten, en een {float: right;} geven,
Klik om te vergroten...
Oorspronkelijk stond de <div id="filmstrip"> namelijk helemaal onderaan in de <body>, en die heb ik naar boven verhuisd: meteen na de <div id="menu">.
Als je dat niet doet, kan de filmstrook niet naast de <div id="inhoud"> komen te hangen, maar kan deze er pas onder beginnen.

Achtergrond hiervan: de <div id="filmstrip"> heeft een {float: right;}, en gefloate elementen moeten altijd éérst in de html komen, zodat de volgende niet gefloate elementen er naast kunnen komen. Dat is hier het geval.
De structuur is:
HTML: 
<body>
   <div id="menu"><!-- links gefloat -->
   ...
   </div>

   <div id="filmstrip"><!-- rechts gefloat -->
   ...
   </div>

   <div id="logo"><!-- niet gefloat: ertussen -->
   ...
   </div> 

   <div id="inhoud"><!-- niet gefloat: ook ertussen, en onder het logo -->
   ...
   </div>
</body>
Met vriendelijke groet,
CSShunter
 
csshunter zei:
Zo nee, dan heb ik een blauw vermoeden dat je de vierde bullet van m'n suggestie-schoten niet helemaal hebt toegepast:
Klik om te vergroten...

:eek::eek::eek:

sorry idd. heb het toegepast nu is het juist wel goed.

heb meteen weer alles gevalideerd en alle fouten eruit gehaald die er in stonden.

had in sommige html documenten de code <br> staan. en had vooraf ergens een </div> tag gemist. de html validator herkende alleen de fout van de </div> die werd gemist. toen ik die oploste, kwam pas de fout dat de <br> niet klopte.

soms zijn validators vaag:confused:

maar met al.....

het is nu opgelost allemaal:thumb:
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan