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 problemen met variabele breedte content

Prin0096
8 antwoorden
  • Hoi mensen,

    Ik post hier voor het eerst! Ik ben een website aan het maken en die moet er als volgt uit zien:
    header
    footer, aan de onderzijde van het beeldscherm
    linker menu
    rechts de content.

    Header, footer en menu lukken. Staan goed. Ik heb het gemaakt met DIV.
    Wat ik nu wil is de content zo maken dat hij mee rekt met de breedte van het scherm. Ik wil een template maken dus in de content moet een editable region komen. Die editable region moet een schuifbalk krijgen als hij langer wordt dan het beeldscherm hoog is.

    Ik krijg de div voor de content niet goed.
    Hier is broncode van de HTML:
    <body id="body">
    <div id="container">
    <div id="header"><img src="../images/logo/logo.gif" /></div>
    <div id="menucontainer">
    <div id="menu">
    <ul>
    <li><a href="javascript:;">&raquo; link1</a></li>
    <li><a href="javascript:;">&raquo; link2</a></li>
    <li><a href="javascript:;">&raquo; link3</a></li>
    <li><a href="javascript:;">&raquo; Home</a></li>
    </ul>
    </div></div>

    <div id="content">

    </div>
    </div>
    <div id="footer">&copy; 2008</div>

    </body>

    Hier is de CSS
    html body {width:100%}

    #body {
    margin-top:0px;
    margin-left:0px;
    margin-right:0px;
    min-height:100%;


    }


    #header {
    float:left;
    position:relative;
    margin-left:0px;
    margin-top:0px;
    margin-right:0px;
    height:150px;
    width:100%;
    background-image: url(../images/kopachtergrond2.jpg);
    clear:both;
    z-index:2;
    border-bottom:1px solid #000000;
    }

    #menucontainer {
    z-index:1;
    position:absolute; top:0px; left:0px;
    background-image:url(../images/wall-cleanedup-soft.jpg);
    float:left;
    width:240px;
    min-height:100%;
    border-right: 1px solid #000000;
    margin-bottom:0px;
    }

    #menu {

    float:left;
    position: relative; top:170px; left:10px;
    width: 220px;
    height: 220px;
    background-color:transparant;
    margin-left:0px;
    }
    .menutitel {
    margin-left:10px;
    margin-top:0px;
    color:#000000;
    font-weight:500;
    font-size:18px;
    }

    /*menuhyperlinks*/
    #menu ul {
    list-style:none;
    color:#ffffff;
    font-family: "Trebuchet MS";
    padding-top:5px;
    font-size:13px;

    }
    #menu li a{
    display:block;
    height:25px;
    color:#ffffff;
    background-color:#61870E;
    text-decoration:none;
    border:1px solid #2D4507;
    border-style:outset;
    margin-bottom:0px;
    margin-left:-30px;
    margin-right:10px;
    padding-top:3px;
    padding-left:15px;}

    #menu li a:hover{
    background-color:#2D4507;
    color:#ffffff;
    }



    #content {
    min-height:100%;
    position:absoluut;
    float:left;
    width:100%;
    background-color:#FF6600;
    margin-left:0px;

    }

    #footer {
    z-index:2;
    position: fixed;
    bottom:0;
    left:0;
    background-color:#2D4507;
    width:100%;
    height:20px;
    color:#FFFFCC;
    padding-right:10px;
    padding-top:10px;
    text-align:right;
    }

    gr,

    Arjan
  • [code:1:789c9162eb]position:absoluut;[/code:1:789c9162eb]
    moet zijn
    [code:1:789c9162eb]position:absolute;[/code:1:789c9162eb]


    Off topic: http://forum.computertotaal.nl/phpBB2/faq.php?mode=bbcode
  • Bedankt.

    Nu krijg ik de content te zien in FF maar niet in IE

    Ook staat de content div aan de linkerkant en dus onder het menu.
    Hij moet naast het menu komen.
    Als ik dan de margin-left instel op 240px staat hij er wel naast maar gaat hij ook 240px teveel uit het scherm. Hoe stopt hij dan aan de rechterkant?

    Arjan
  • Waarom het in IE misgaat weet ik ff niet, maar ik denk dat je het probleem van die 240px kan oplossen door de body een width van 100% te geven.
  • [quote:e3ad63af67="arjandevries"]Bedankt.

    Nu krijg ik de content te zien in FF maar niet in IE

    Ook staat de content div aan de linkerkant en dus onder het menu.
    Hij moet naast het menu komen.
    Als ik dan de margin-left instel op 240px staat hij er wel naast maar gaat hij ook 240px teveel uit het scherm. Hoe stopt hij dan aan de rechterkant?

    Arjan[/quote:e3ad63af67]
    Post even een linkje naar je site, dan begrijp ik wat je bedoelt.
    Wijzig ook even de titel van je topic in bv. Margin-left werkt niet goed in IE
  • http://www.imajuku.nl/testen/definitief.html

    http://www.imajuku.nl/testen/definitief1.css

    Hier staat de boel.

    Bedankt,

    Arjan
  • In je CSS zag ik bij #menu background-color:transparant staan.
    Dit moet zijn:[code:1:958ad7e777]background-color:transparent[/code:1:958ad7e777]

Beantwoord deze vraag

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