Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] Variabele lengtes in CSS, en een scrollbar

Anoniem
Anne
8 antwoorden
  • Ik heb het volgende probleem, ik ben hier bezig met een website die ik ga maken in CSS, nu is het zo dat de boxen, left01, left02, left03 en footer01 links moeten uitlijnen.

    nav, topright en bottomright moeten rechts uitlijnen. Nu wil ik graag dat de box menu een variabele breedte krijg.

    het zelfde geld voor de box content, maar deze box moet zowel in de breedte als in de hoogte variabel zijn. Box

    left03 moet in de breedte vast staan maar in de lengte variabel zijn.

    De boxen content, nav en left03 moeten aan de onderkant even lang zijn, en stoppen bij footer.

    Footer moet onderaan de pagina staan, waarvan box footer01 links moet uitlijnen, box bottomright rechts. De box

    footer02 moet een variabele breedte hebben die het uitvult tot bottomright. Ik vraag me af of ik de footer boxen

    een vaste plaats moet geven of dat ze automatisch met de box content mee kunnen zakken.

    Wanneer de tekst te veel word in de box container moet daarin een scrollbar komen.

    Een heel verhaal met hierin veel problemen, heeft iemand misschien suggesties?

    klik hier om het te bekijken:

    http://217.120.106.102/test/

    Bedankt Roman

    :oops:
  • Wat wil je nu precies aan deze veranderen? Alinea's lezen trouwens een stuk fijner en een plaatje zegt meer dan duizend woorden (en je kunt het nog sneller begrijpen).
  • ok, ik heb nu de plaatjes erbij gezet, misschien dat het nu duidelijker is.

    Over die alineas, ja dat klopt ik had geplakt vanuit notepad, blijktbaar gooit hij er dan enters tussen 8)
  • Een totaalplaatje met de complete layout :wink:

    (met eventueel nog even aangegeven waar je welke div in gedachten had)
  • [code:1:b3f5d622cc]#menutekst{
    font: 14px verdana;
    color: orange;
    }

    #container{
    width: 900px;
    margin: 0px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    background-color: #000000;
    }

    #menu{

    position: absolute;
    width: 344px;
    top: 0px;
    left: 283px;
    background-color: #ffffff;
    height: 32px;
    }

    #topright{

    position: absolute;
    left: 627px;
    top: 0px;
    width: 149px;
    background: #cc0066 url(right01.gif) no-repeat fixed;
    height: 32px;
    }

    #left01{

    position: absolute;
    width: 283px;
    top: 0px;
    left: 0px;
    background: #ffffff url(left01.gif) no-repeat fixed;
    height: 70px;
    }

    #left02{

    position: absolute;
    width: 283px;
    top: 70px;
    left: 0px;
    background: #ffffff url(left02.gif) no-repeat fixed;
    height: 176px;
    }

    #left03{

    position: absolute;
    width: 283px;
    top: 246px;
    left: 0px;
    background: #ffffff url(left03.gif) no-repeat fixed;
    height: 176px;
    }

    /*#content{
    top: 43px;
    left: 283px;
    position: absolute;
    height: 348px;
    width: 344px;
    background-color: #FF0099;
    }*/

    #content{

    top: 43px;
    clear: right;
    background-color: #FF0099;
    }

    #nav{
    top: 32px;
    left: 637px;
    position: absolute;
    height: 359px;
    width: 139px;
    background-color: #33CC00;
    }

    #footer01{
    top: 391px;
    left: 0px;
    position: absolute;
    height: 42px;
    width: 283px;
    background: #666666 url(footer01.gif) repeat fixed;
    }

    #footer02{
    top: 391px;
    left: 283px;
    position: absolute;
    height: 42px;
    width: 344px;
    background: #666666 url(footer01.gif) repeat fixed;
    }

    #bottomright{
    top: 391px;
    left: 627px;
    position: absolute;
    height: 40px;
    width: 149px;
    background: #ff0000 url(right04.gif) no-repeat fixed;
    }

    #navactive{
    top: 100px;
    left: 627px;
    position: absolute;
    height: 348;
    width: 10px;
    background-color: #FFFFFF;
    }

    #menuactive{
    top: 32px;
    left: 283px;
    position: absolute;
    height: 10px;
    width: 344px;
    background-color: #666666;
    }

    html,body{

    width:100%;
    margin:0px;
    padding:0px;
    }[/code:1:b3f5d622cc]
  • Zo wordt het nog steeds niet duidelijk _wat_ je wilt bereiken. Het posten van een screen shot en wat CSS code heeft weinig nut, dat kan iedereen zelf wel bekijken (kun je ze weer weghalen?).

    Waarom bestaat de linkerkant uit 3 divs? Toch niet omdat het verschillende plaatjes zijn of wel? Want dan zou je die net zo goed kunnen samenvoegen. Je moet denken in structuur niet in "hoeveel plaatjes zal ik hiervan maken".

    Verder, heeft het geheel een vaste breedte? Is de hoogte vast?
  • als je mijn eerste post even wilt lezen :)

    En ja, dat zijn 3 verschillende plaatjes, in totale grootte kleiner dan 1 plaatje. ze zijn hier even vaag gemaakt,.

    De breedte staat niet vast, maar de uitlijning van de linker divs en de rechter divs.

    Wanneer er veel tekst in de content staat moeten de footers mee naar beneden zakken, foter02 moet een variabele breedte hebben.

    Ik ga even eten, brb
  • sorry anne, hoe moet ik het vragen? Ik merk dat mijn vraagstelling niet overeen komt met waarop jij antwoord :-?

    Ik denk toch dat ik het juist heb gevraagt :o

Beantwoord deze vraag

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