Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] vervelend foutje bij de verwerking van een div.

None
15 antwoorden
  • Beste C!T forumleden,

    ben momenteel bezig met een nieuwe website voor een bedrijf welke zich bezig houdt met het maken en verwerken van kinderportretten op locatie.

    de breedte is fixed, de hoogte is afhankelijk van inhoud (dus divs= relative)

    ik gebruik als doctype xhtml 1.0 strict.

    hier staat een voorbeeld van de eerste stapjes van de website.
    www.kids-profi-portrait.com

    de verwerking van de navigatiebalk is in IE en mozilla compleet anders.

    de links binnen de navigatie zijn opgemaakt via horizontale list items (taming lists)

    in mozilla verschijnt boven de navigatiebalk een witte balk.
    in IE is die witte balk er niet, de navigatiebalk sluit netjes aan bij de header. Helaas wordt hier de navigatiebalk te hoog waardoor het achtergrondplaatje zich nog een keer herhaalt.

    heeft iemand een idee wat ik over het hoofd zie.


    voor de rest is de site nog volledig in aanbouw.

    alvast bedankt voor jullie reakties.

    Mvg,
    Tony
  • Ik heb het hele css bestand nog eens gecheckt. maar het gekke is dat er absoluut geen enkel element voorkomt welke een witte balk of border genereert. Ik gebruik ook geen margins of paddings. Daarnaast zijn alle divs relative en zouden ze zich dus aaneenvolgend moeten plaatsen zonder witruimte.

    erg vreemd…

    ik weet wel dat de fout ergens in mijn horizontale list zit. maar ik zou niet weten waar…
  • hier de css code:

    http://www.planetdust.nl/kpp/css/stylesheet.css
  • Heb er op m'n pc ff een testcase van gemaakt.
    - Het gebruik van 'position: relative' (of absolute) is hier niet nodig. Die heb ik in mijn testcase dan ook weggehaald. Divs komen namelijk sowieso altijd automatisch onder elkaar te staan (tenzij anders vastgelegd in je CSS).
    - De list in #nav heeft een margin-top. Die kun je weghalen, dan sluit #nav voortaan aan op de header.
    - In IE loopt de background van #nav te ver door naar beneden. Je kunt overflow: hidden gebruiken om de background niet te ver door te laten lopen.
  • fijn dat je even reageert boelie.

    ik dacht altijd dat je relative moest gebruiken als je divs wilt laten opvolgen. weer wat geleerd dus. bedankt.

    overflow hidden: dat had ik ook al geprobeert, dit werkt ook prima. het lijkt me alleen niet de echte oplossing voor het probleem. (eerder een workaround).

    die margin-top, die had ik dus helemaal over het hoofd gezien.

    heel erg bedankt voor je reply. ik ben flink geholpen door jou tips :)
  • [quote:b1f0f2a778="D'acide"]overflow hidden: dat had ik ook al geprobeert, dit werkt ook prima. het lijkt me alleen niet de echte oplossing voor het probleem. (eerder een workaround).[/quote:b1f0f2a778]Haha ja idd. Als je i.p.v. de overflow de margin-bottom op 0 zet, dan werkt het ook. Kortom, alle margins van #nav ul op 0.
  • helemaal top :)

    heb ook direct mijn issue met de sub_nav aangepast (de 2e navigatie div).

    hier staken een aantal lijnen uit. die problemen zijn nu ook opgelost door die margin bottom op 0 te zetten.


    enige grote issue die iik nu heb, is dat ik niks kan aanklikken in de gekluerde bottom boxes. per box is er 1 URL. echter, zodra ik met mijn cursor erboven hover, dan verschijnt niet de aanklik cursor.

    maargoed, hier kan ik morgen nog mijn hoofd over gaan breken.

    PS: vanuit de indexpagina kan je alleen naar "informatie"… de rest werkt nog niet.
  • De website is inmiddels al weer verder gevorderd.

    het probleem met de niet aanklikbare links in de gekleurde boxes heb ik volgens mij opgelost.

    het leek alsof de container div [b:9a36cdb33c]over[/b:9a36cdb33c] de gekleurde boxes liep, waardoor de links dus niet aanklikbaar zijn.

    ik heb toen de Z-index van de container div (#holder) op 2 gezet. nu zijn ze wel aanklikbaar.
  • Waarom werk je überhaupt met z-index?
  • nou, ik werkte er niet mee. maar toen ik z-index niet gebruikte kon ik de links niet aanklikken. toen ik de z index van de container div op 2 zette, toen kon ik ineens wel op de links klikken.

    ik vind het ook vreemd.geen idee wat de fout is. maar nu werkt het wel tenminste :D
  • Je kunt de Aardvark Firefoxextensie gebruiken om te zien tot waar bepaalde vlakken lopen, of gebruik de outlinefunctie van de Webdeveloper Toolbar. Andere manier is om vlakken tijdelijk een background mee te geven. Drie manieren om te zien of vlakken elkaar overlappen.

    Maar net als die overflow-suggestie van mij, is jouw z-indexgebruik natuurlijk symtoombestrijding, geen oplossing :wink:
  • Zo, ik ben alweer een tijdje bezig met de website.

    Ik heb nu een issue waar ik maar niet mee verder kom. Denk dat t iets relatiefs simpel is. maar weet even niet meer waar te zoeken.

    Hier een voorbeeldpagina:
    http://www.kids-profi-portrait.com/website/website_kpp/agenda.php

    hier zie je de agenda pagina van de website.

    elke pagina heeft de zelfde layout/stijl.

    zo verschijnt onder elke content een begeleidend plaatje/foto. Echter daaronder verschijnt het logo van het bedrijf.

    ik zou dat logo graag onder de subnavigatie neerzetten. dus links van de content. Probleem is echter dat de hoogte van de subnavigatie varieert.

    weet iemand een richting waar ik naar kan zoeken?

    en een tweede issue waar ik vaker tegenaanloop:
    als ik gebruik maak van tabellen (voor het weergeven van tabellaire data), dan verschijnt in mozilla na elke rij een witregel. In IE is dat niet zo.
    iemand een suggestie?

    vriendelijk bedankt.


    voor het gemak, hier mijn CSS:
    [code:1:f238b6b2d7]

    #holder{
    width: 747px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: #FFFFFF;
    z-index: 2;
    }

    #toplogo{
    background-image: url(../images/toplogo.jpg);
    position: relative;
    height: 116px;
    width: 748px;
    }
    #holder #language a {
    text-decoration: none;
    }


    #nav{
    background-image: url(../images/nav_bg.jpg);
    width: 718px;
    height: 34px;
    padding-left: 30px;
    }

    #language{
    z-index: 1;
    position: absolute;
    width: 70px;
    height: 19px;
    top: 126px;
    left: 664px;
    text-align: center;
    }

    #kpplogo{
    width: 160px;
    height: 95px;
    background-image: url(../images/kpplogo_kleur.jpg);
    background-repeat: no-repeat;
    margin-left: 5px;
    margin-bottom: 10px;
    }

    #subnav{
    width: 100px;
    position: absolute;
    left: 20px;
    background-color: #E9E9E9;
    border-top-width: thin;
    border-top-style: solid;
    border-top-color: #999999;
    border-right-style: solid;
    border-right-width: thin;
    border-left-width: thin;
    border-left-style: solid;
    border-right-color: #999999;
    border-bottom-color: #999999;
    border-left-color: #999999;
    }
    #subnav ul {
    list-style-type: none;
    margin-left: 0px;
    padding-left: 0px;
    margin-bottom: 0px;
    margin-top: 0px;
    }
    #subnav li {
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: #999999;
    padding-left: 5px;
    }


    #holder #subnav li a:hover {
    color: #0091F0;
    }



    #subnav a {
    text-decoration: none;
    font-size: 120%;
    color: #4D7FA1;
    font-weight: bold;
    }

    body {
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #333333;
    }


    #righttop{
    width: 150px;
    height: 35px;
    position: relative;
    margin-left: 578px;
    text-align: right;
    margin-top: 15px;
    }

    #indexmovie{
    position: relative;
    width: 748px;
    }




    #content{
    width: 450px;
    left: 185px;
    text-align: justify;
    margin-bottom: 25px;
    position: relative;
    }

    #next{
    position: relative;
    width: 75px;
    height: 25px;
    margin-left: 654px;
    margin-bottom: 25px;
    }

    #footer{
    background-image: url(../images/footer.jpg);
    position: relative;
    height: 22px;
    color: #FFFFFF;
    text-align: center;
    line-height: 22px;
    font-size: 110%;
    width: 748px;
    float: right;
    margin-top: 0px;
    }

    #box_blauw {
    background-image: url(../images/box_blauw.gif);
    height: 50px;
    width: 177px;
    float: left;
    padding-top: 50px;
    color: #FFFFFF;
    font-size: 110%;
    padding-left: 5px;
    padding-right: 5px;
    z-index: 1;
    }
    #holder #box_blauw a {
    color: #FFFFFF;
    font-weight: bold;
    }


    #box_roze {
    background-image: url(../images/box_roze.gif);
    height: 50px;
    width: 177px;
    float: left;
    padding-top: 50px;
    color: #FFFFFF;
    font-size: 110%;
    padding-left: 5px;
    padding-right: 5px;
    }
    #holder #box_roze a {
    font-weight: bold;
    color: #FFFFFF;
    }


    #box_groen {
    background-image: url(../images/box_groen.gif);
    height: 50px;
    width: 177px;
    float: left;
    padding-top: 50px;
    color: #FFFFFF;
    font-size: 110%;
    padding-left: 5px;
    padding-right: 5px;
    }
    #holder #box_groen a {
    font-weight: bold;
    color: #FFFFFF;
    }


    #box_geel {
    background-image: url(../images/box_geel.gif);
    height: 50px;
    width: 176px;
    float: right;
    overflow: hidden;
    padding-top: 50px;
    color: #FFFFFF;
    font-size: 110%;
    padding-left: 5px;
    padding-right: 5px;
    }
    #holder #box_geel a {
    font-weight: bold;
    color: #FFFFFF;
    }


    #bottom{
    width: 748px;
    position: relative;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    }

    h1 {
    font-size: 175%;
    color: #ac7d3a;
    font-weight: bold;
    }
    h2 {
    font-size: 150%;
    color: #ac7d3a;
    font-weight: bold;
    }
    h3 {
    font-size: 140%;
    color: #000000;
    }
    p {
    font-size: 110%;
    color: #333333;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    }
    #nav ul {
    text-indent: -10px;
    margin-left: 0px;
    padding-left: 0px;
    list-style-type: none;
    line-height: 34px;
    margin-bottom: 0px;
    margin-top: 0px;
    }
    #nav ul li {
    display: inline;
    padding-right: 10px;
    }

    #bottom ul {
    text-indent: -10px;
    margin-left: 0px;
    padding-left: 0px;
    list-style-type: none;
    }

    #bottom ul li{
    padding: 4px;
    display: inline;
    }

    #nav a:link {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 130%;
    font-weight: bold;
    }
    #nav a:visited {
    font-size: 130%;
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
    }
    #nav a:hover {
    font-size: 130%;
    color: #8BD6FE;
    text-decoration: none;
    }

    #bottom a:link {
    text-decoration: none;
    color: #004878;
    font-size: 120%;
    font-weight: bold;
    }
    #bottom a:visited {
    font-size: 120%;
    font-weight: bold;
    color: #004878;
    text-decoration: none;
    }
    #bottom a:hover {
    font-size: 120%;
    color: #0091F0;
    text-decoration: none;
    }
    .bold {
    font-weight: bold;
    }
    td {
    vertical-align: top;
    }
    #holder #content a:link {
    text-decoration: none;
    color: #000099;
    }
    #holder #content a:visited {
    color: #00006A;
    text-decoration: none;
    }
    #holder #content a:hover {
    color: #999900;
    text-decoration: underline;
    }

    [/code:1:f238b6b2d7]
  • [quote:29806ffa6d="D'acide"]ik zou dat logo graag onder de subnavigatie neerzetten. dus links van de content. Probleem is echter dat de hoogte van de subnavigatie varieert.
    [..]
    als ik gebruik maak van tabellen (voor het weergeven van tabellaire data), dan verschijnt in mozilla na elke rij een witregel. In IE is dat niet zo.
    iemand een suggestie?[/quote:29806ffa6d]
    Lijkt probleem 1 niet op het topic CSS - binnen kolom div naar beneden duwen?

    En kan probleem 2 liggen aan dat je de inhoud van de tabulaire data in p-elementen zet? Dat die de witregel veroorzaken? (Je zou die p-elementen misschien stijlregels meegeven, of achterwege kunnen laten?)
  • probleem 1: thanks voor je link. denk dat ik er wel het eea bruikbaars uit kan halen. top :)

    probleem 2: damn, dat ik daar zelf niet op gekomen ben. Heb zojuist een test gedaan zonder de P tag.. en ja hoor. :oops: dat was het inderdaad. Wel vreemd dat IE niet de witregel laat zien. want zover iik weet genereert de P tag altijd een witregel (ook in IE)..

    maargoed.. ik ben weer flink geholpen.

    nogmaals dank.
  • ow wat ben ik toch dom…

    ben ik hier de hele tijd bezig met het plaatsen van het logo onder de subnav div…. Gespeeld met relative positioneren etc…

    besef ik me zojuist dat ik het logo gewoon in de subnav div kan plaatsen achter de </ul>

    sjongejonge :P

    maargoed, beter laat dan nooit. hehe

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.