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)

verkeerde <div> plaatsing

snowman2
3 antwoorden
  • Hoi,

    IK ben bezig om mijn site nu helemaal perfect te krijgen maar een ding lukt me niet. IK maak gebruik van een cms maar de layout kan ik helemaal via html en css maken. Ik heb daarvoor een layout geleend met toestemming maar ik wil een paar zaken anders hebben.

    Ik heb de volgende html file:

    <!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" lang="en">
    <head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <meta name="description" content="" />
    <meta name="" />
    <meta name="author" content="" />
    <meta name="copyright" content="" />
    <meta name="company" content="" />
    <meta name="revisit-after" content="" />

    <title><txp:page_title /></title>
    <link rel="stylesheet" href="<txp:css />" type="text/css" media="screen" />
    </head>
    <body>
    <div id="container">
    <div id="head">
    </div>
    <div id="wrapper">
    <div id="sidebar-1">
    <div id="menu">
    *** hier komt het menu aanroep ****
    </div>
    </div>
    </div>


    <div id="content">

    *** hier komt mijn content
    </div>
    <div id="foot">
    Design by <a href="http://www.ryanarrowsmith.com/">Ryan Arrowsmith</a> but feel free to share / Proudly

    powered by <a href="http://www.textpattern.com/">Textpattern</a>.
    </div>
    </div>

    </body>
    </html>


    IK gebruik de volgende css file :

    .image
    {
    float: right ;
    margin: 20px;
    }

    body
    {
    background-color: #F9D7F8;
    color: #696969;
    font-family: Verdana, "Lucida Grande", Tahoma, Helvetica;
    font-size: 13px;
    line-height: 25px;
    }

    p
    {
    font-family: Verdana, "Lucida Grande", Tahoma, Helvetica;
    font-size: 13px;
    line-height: 25px;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    }

    .thesmall
    {
    text-align: right;
    margin-left: 10px;
    padding-top: 5px;
    padding-left: 5px;
    margin-right: 50px;
    padding-right: 0;
    margin-top: 1px;
    font-size: 10px;
    line-height: 14px;
    border-top: 1px solid #ccc;
    }

    .block
    {
    float: right;
    width: 250px;
    margin: 8px;
    padding: 15px;
    background: #eee;
    font-size: 11px;
    line-height: 20px;
    }

    .alert
    {
    color: #B8B800;
    float: left;
    width: 250px;
    margin: 8px;
    padding: 15px;
    background: #FFFFCC;
    font-size: 11px;
    line-height: 20px;
    }

    small
    {
    margin-left: 5px;
    }

    a
    {
    color: #000000;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    }

    a:hover
    {
    color: #4a5e7a;
    text-decoration: none;
    border-bottom: 1px solid #ccc;
    }

    blockquote
    {
    margin: 40px;
    padding: 15px;
    background: #eee;
    font-size: 11px;
    line-height: 20px;
    }

    blockquote p
    {
    font-size: 12px;
    line-height: 21px;
    }

    #sidebar-1 p
    {
    line-height: 15px;
    font-size: 10px;
    text-align: left;
    }

    #head
    {
    text-align: center;
    background: #F9D7F8 url('/images/14.jpg') no-repeat top center;
    height: 497px;
    padding: 0;
    margin: 0;
    }

    #container
    {
    width: 800px;
    \width: 810px;
    w\idth: 800px;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    background: #F9D7F8 url('/images/13.jpg') repeat-y top center;
    }

    .comment-block
    {
    margin: 40px;
    background: #eee;
    border: 1px solid #ccc;
    padding: 20px;
    }

    #sidebar-1
    {
    float: left;
    width: 370px;
    \width: 370px;
    w\idth: 370px;
    margin: 10px;
    padding-top: 100px;
    }


    #wrapper
    {
    width: 400px;
    \width: 400px;
    w\idth: 400px;
    margin: 10px;
    text-align: left;
    display: block;
    }

    #content
    {
    margin-left: 495px;
    margin-right: 20px;
    padding-top: 10px;
    text-align: center;
    }


    #foot
    {
    clear: both;
    margin-top: 5px;
    text-align: right;
    height: 153px;
    background: #F9D7F8 url('/images/12.jpg') no-repeat top center;
    font-size: 10px;
    padding-right: 100px;
    padding-top: 60px;
    }

    #accessibility
    {
    position: absolute;
    top: -10000px;
    }

    #sidebar-1 a
    {
    border: 0px;
    color: #C00;
    }

    h1
    {
    font-weight: normal;
    text-decoration: none;
    font-family: Georgia, Times, Serif;
    font-size: 3em;
    }

    h2
    {
    font-weight: normal;
    font-family: Georgia, Times, Serif;
    font-size: 1em;
    font-style: italic;
    }

    h3
    {
    font-weight: normal;
    font-family: georgia, times new roman, serif;
    font-size: 24px;
    line-height: 38px;
    padding-left: 10px;
    margin: 0;
    margin-top: 20px;
    text-align: left;
    }

    h3 a
    {
    border: 0px;
    font-weight: normal;
    font-family: Georgia, Times, Serif;
    font-size: 24ox;
    }

    h1 a, h2 a
    {
    border: 0px;
    }

    .caps
    {
    letter-spacing: 0.1em;
    font-size: 10px;
    }

    #content hr
    {
    color: #ccc;
    width: 66%;
    margin-top: 2em;
    margin-bottom: 2em;
    }

    img.divider
    {
    align: center;
    margin-top: 2em;
    margin-bottom: 2em;
    }

    input
    {
    border: 1px solid #696969;
    padding: 2px;
    font-size: 11px;
    color: #696969;
    font-family: verdana;
    }

    textarea
    {
    border: 1px solid #696969;
    padding: 2px;
    font-size: 11px;
    color: #696969;
    font-family: verdana;
    width: 300px;
    }

    ul#menu
    {
    text-align: left;
    width: 460px;
    list-style-type: none;
    background: #eee;
    margin: 0;
    padding: 10px;
    }

    ul#menu ol
    {
    display: none;
    text-align: right;
    list-style-type: none;
    margin: 0;
    padding: 5px;
    font-weight: bold;
    }

    ul#menu li, ul#menu a
    {
    font-family: verdana, sans-serif;
    font-size: 11px;
    color: #878787;
    font-weight: normal;
    }

    ul#menu li
    {
    border-bottom: solid 1px #ccc;
    line-height: 15px;
    }

    ul#menu ol li
    {
    border-bottom: none;
    }

    ul#menu ol li:before
    {
    content: "- ";
    }

    ul#menu a
    {
    text-decoration: none;
    outline: none;
    }

    ul#menu a:hover
    {
    color: #3f929e;
    }

    ul#menu a.active
    {
    color: #d84248;
    }


    Maar wat er nu gebeurt is dat de content wel naast het menu terecht komt. maar pas begint nadat het menu gestopt is.

    Wat ik bedoel , kun je zien op : http://test.tamarawobben.nl

    Wie o wie weet hoe ik dit goed krijg.

    Alvast bedankt.

    Roelof
  • in FF staat de inhoud wèl naast t mene, maar allebei wel heel erg ver naar beneden.
    Misshcien heb je wat aan deze links:

    http://stijlstek.nl/demo/aleppo/
    http://stijlstek.nl/demo/damascus/
    http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
    http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
  • Ik neem aan dat je het 'Fishy'-template gebruikt hebt, die lijkt er het meest op. In dat geval is de #wrapper te smal (in Fishy wordt 700px gebruikt) en staat #content in de verkeerde div (in Fishy bevindt #content zich binnen de #wrapper).

    In je CSS staat ook ergens 'ox' i.p.v. 'px' en in je HTML wordt een h3 niet goed afgesloten.

Beantwoord deze vraag

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