Helpmij.nl
Helpmij.nl
Helpmij.nl
Steun Helpmij.nl! Klik hier     Computerprobleem? Klik hier!

Quote

Weergeven resultaten 1 tot 5 van 5

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

  1. #1

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

    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; 
    }

  2. #2
    Mega Honourable Senior Member csshunter's avatar
    Geregistreerd
    4 augustus 2009
    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
    Als een webpagina plots niet doet wat je wilt, raadpleeg dan eerst de html-validator, vóórdat je wanhopig aan de css gaat sleutelen. En vraag de css-validator om op alle punten en komma's te letten. Staat er een (goed) DOCtype boven? Doet de pagina niet gewoon wat moet volgens de html-specificatie en de regels voor css? Daarna pas sleutelen!
    (als dat nog nodig is!) - O, ken je de Webrichtijnen (test) al?

  3. #3
    Quote Origineel gepost door csshunter Bekijk Bericht
    Dat wordt dan ongeveer:
    [LIST][*]deze css: www.developerscorner.nl/csshunter/tests/stylesheets/apres-ski.css[*]
    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; ??????

  4. #4
    Mega Honourable Senior Member csshunter's avatar
    Geregistreerd
    4 augustus 2009
    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,
    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 Code:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    <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
    Als een webpagina plots niet doet wat je wilt, raadpleeg dan eerst de html-validator, vóórdat je wanhopig aan de css gaat sleutelen. En vraag de css-validator om op alle punten en komma's te letten. Staat er een (goed) DOCtype boven? Doet de pagina niet gewoon wat moet volgens de html-specificatie en de regels voor css? Daarna pas sleutelen!
    (als dat nog nodig is!) - O, ken je de Webrichtijnen (test) al?

  5. #5
    Quote Origineel gepost door csshunter Bekijk Bericht
    Zo nee, dan heb ik een blauw vermoeden dat je de vierde bullet van m'n suggestie-schoten niet helemaal hebt toegepast:


    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

    maar met al.....

    het is nu opgelost allemaal

  6. Dit topic is automatisch gesloten omdat er sinds vier maanden niet meer op gereageerd is.

    Indien gewenst kan de topicstarter een verzoek tot heropening indienen.

Berichtenregels

  • U mag geen nieuwe vragen starten.
  • U mag niet reageren op berichten.
  • U mag geen bijlagen versturen.
  • U mag uw berichten niet bewerken.
  •  
Helpmij.nl
Helpmij.nl

Helpmij.nl en business

Partners
Sponsoren
Linkpartners
Aanbiedingen