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] Twee tabellen naast elkaar uitlijnen

Anoniem
None
21 antwoorden
  • Hey Mensen!

    Ik had even een vraagje aan jullie.

    Ik ben bezig met http://www.racenieuws.net en daar zie je onder de rode balk een gedeelte met "nieuws" aan de linkerkant en een grijs vak aan de rechterkant. Ik krijg ze niet gelijk zegmaar.

    Ik had het geprobeerd via margin-top: -13px; ongeveer maar dat helpt ook niet.

    Dit is mijn CSS:

    (#topmenu is waar "NIEUWS" in staat en #top_2 is waar het grijze vakje in staat)

    [code:1:cce9b8f22e]BODY { font-family: Verdana; font-size: 11px;
    color: #000000; background-color: #FFFFFF; }
    H4 { color: #ffffff; background-color: #000000; width: 200px ; }
    H2 { color: #000000; width: 200px ; }
    H5 { color: #000000; width: 200px ; }

    #text {
    margin: 0px;
    padding: 0px;
    }

    #site{
    width: 770px;
    heigth: 500px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    margin-right: auto;
    margin-left: auto;
    }

    #top{
    width: 770px;
    height: 13px;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    margin-right: auto;
    margin-left: auto;
    }

    #topmenu{
    width: 770px;
    height: 13px;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    margin-right: auto;
    margin-left: auto;
    }

    #top_2{
    width: 225px;
    height: 13px;
    margin-left: 544px;
    background-image:url(afbeeldingen/smallmenu_top.jpg)
    }

    #onder{
    width: 770px;
    text-align: center;
    border-top: 1px solid #000;
    margin-right: auto;
    margin-left: auto;
    background-color: #ffffff;
    color: #cccccc;
    }

    #menurechts{
    text-align: 5px;
    width: 200px;
    height: 500px;
    border-left: 1px solid #000;
    margin-left: 569px;
    }

    #midden{
    text-align: 5px;
    width: 400px;
    height: 500px;
    margin-left: 0px;
    margin-top: -501px;
    }[/code:1:cce9b8f22e]

    Ik hoop dat jullie mij kunnen helpen!
  • hmm.. ik krijg dit in firefox:


    http://62.163.141.53/pictures
    acenieuwsinfirefox.png …


    na je source te bekijken

    mis ik–> een body start tag.

    je CSS is ook niet valid

    en check je source dus ff, dan praten we verder ;)
  • Ik zie zo niet de fout in je code, eerlijk gezegd denk ik ook niet dat het met een simpele regel in je css op te lossen is. Kijk allereerst maar eens naar je site met FF, dan staat alles helemaal verkeerd.

    Ikzelf heb ook een 2 kolommen layout gebruikt, met een header en footer. Dit is een voorbeeld van 456bereastreet.com en is erg duidelijk uitgelegd
  • hier nog een voorbeeld
  • [quote:fea7a47b7f="NaaDje"]hmm.. ik krijg dit in firefox:


    http://62.163.141.53/pictures
    acenieuwsinfirefox.png …


    na je source te bekijken

    mis ik–> een body start tag.

    je CSS is ook niet valid

    en check je source dus ff, dan praten we verder ;)[/quote:fea7a47b7f]

    Naja m'n CSS is nu iig valid :)

    Ik heb het nu ook even op FireFox bekeken… en je hebt gelijk. De tekst klapt omhoog.

    Zou iemand mij kunnen vertellen hoe ik dan een website IE én FireFox compatible moet maken?
  • Eérst bouwen voor Firefox, daarna hacks invoegen om het op IE te laten werken. Firefox doet het namelijk (meestal) goed, dus dan bouw je eerst een solide, kloppende basis, waarna je het aanpast zodat een browser met kuren (IE) het ook goed weergeeft.

    Lees bijv. de volgende artikelen op:
    PIE/CommunityMX
    validweb (NL)
    Quirksmode
    Centricle
  • Ik ben hem nu aan het bouwen voor FireFox… maar ik heb nog steeds het probleem dat ik het mini menu er niet goed op krijg :(

    Check deze pagina maar even voor mn CSS:
    http://jigsaw.w3.org/css-validator/validator?uri=www.racenieuws.net%2Fstyle.css&warning=2&profile=css2&usermedium=all

    Help mij a.u.b.
  • Ik snap eigenlijk niet helemaal wat je wilt bereiken…

    Wil je dat het minimenu op dezelfde hoogte is als 'Nieuws'? Of wil je iets anders?
  • Sorry voor de onduidelijkheid misschien… juist, wil hem op dezelfde hoogte als Nieuws
  • Voor zowel Nieuws als dat minimenu zou je kunnen aangeven in je stylesheet:
    position: absolute;
    top: ?px
    left: ?px

    waarbij ? = een zelf te verzinnen waarde.

    Een div moet je eigenlijk zien als een blokje. Als je enkele divjes bij elkaar op een pagina zet en je maakt de eerste div (in dit geval Nieuws) heel breed, dan gaat die tweede div er automatisch onder zitten, want ze passen niet naast elkaar op één regel. Door ze absoluut te positioneren kun je ze boven elkaar zetten, dan zitten ze elkaar niet in de weg.

    Andere oplossing is om dat minimenu binnen de div van nieuws te plaatsen.
  • Oke, harstikke bedankt.

    Ik zal nu eens kijken om de website FF en IE compatible te maken. Zal even zoeken. Hoop dat jullie mij weer kunnen helpen als het niet lukt :oops:
  • [quote:55b42ef190="Japaveh"]Ik zie zo niet de fout in je code, eerlijk gezegd denk ik ook niet dat het met een simpele regel in je css op te lossen is. Kijk allereerst maar eens naar je site met FF, dan staat alles helemaal verkeerd.

    Ikzelf heb ook een 2 kolommen layout gebruikt, met een header en footer. Dit is een voorbeeld van 456bereastreet.com en is erg duidelijk uitgelegd[/quote:55b42ef190]

    Ik heb je voorbeeld helemaal exact nagemaakt, maar bij mij blijft alles links staan. M.a.w. hij centreert niet en dat moet ik juist hebben.
  • [quote:6a7f407445="Wiep Corbier"]
    Ik heb je voorbeeld helemaal exact nagemaakt, maar bij mij blijft alles links staan. M.a.w. hij centreert niet en dat moet ik juist hebben.[/quote:6a7f407445]
    Waarschijnlijk ben je dan in je #wrap vergeten om de margin op auto te zetten:
    [code:1:6a7f407445]
    #wrap {
    background:#99c;
    margin:0 auto;
    width:750px;
    }
    [/code:1:6a7f407445]
    dit is het eindresultaat, wanneer ik daar ook die margin regel weghaal, wordt alles ook links gezet namelijk
  • Nou, zoals ik zei: ik heb hem [u:eefede4d34]exact [/u:eefede4d34]nagemaakt.
  • [quote:afedca4e19="Wiep Corbier"]Nou, zoals ik zei: ik heb hem [u:afedca4e19]exact [/u:afedca4e19]nagemaakt.[/quote:afedca4e19]
    Dat is dan toch raar. Als je hem exact namaakt, dan zou het resultaat ook exact hetzelfde moeten zijn. Ook ik heb hem exact nagemaakt en bij mij staat ie wel in het midden.

    Heb je hem ergens online staan?
  • Hier…http://217.123.32.180/wzs/default.htm

    [code:1:d3ff901ae2]
    body
    {
    margin: 0;
    padding: 0;
    background-color: #A7A09A;
    color:#000;
    }
    #wrap {
    background:#99c;
    margin:0 auto;
    width:750px;
    }
    #header
    {
    background-color:#ddd;
    }
    #nav
    {
    background-color:#c99;
    }
    #main
    {
    background-color:#9c9;
    float:left;
    width:500px;
    }
    #sidebar
    {
    background-color:#c9c;
    width:247px;
    margin-left:500px;
    }
    html>body #sidebar
    {
    width:250px;
    }
    #footer
    {
    background-color:#cc9;
    }
    [/code:1:d3ff901ae2]
  • [quote:4d58750ff0="Wiep Corbier"]Hier…http://217.123.32.180/wzs/default.htm[/quote:4d58750ff0]
    Met firefox staat hij in het midden. Met IE niet.

    De fout zit hem erin dat je geen doctype gedeclareerd hebt. Als ik het goed heb gaa IE dan in Quirksmode en wordt de pagina niet goed gerenderd. Als je dit bovenaan de pagina zet

    [code:1:4d58750ff0]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <HEAD>
    [/code:1:4d58750ff0]
    Dat gaat het nu wel goed. Ik heb even jouw code getest op m'n server
  • Toegevoegd, maar werkt ook niet.

    Nou, morgen maar weer eens verder kijken.
  • [quote:37f02ae366="Wiep Corbier"]Toegevoegd, maar werkt ook niet.

    Nou, morgen maar weer eens verder kijken.[/quote:37f02ae366]
    Je moet het doctype ook helemaal bovenaan zetten ;)
  • Yep, dat is het.. :)

Beantwoord deze vraag

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