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)

CCS Probleem px/%

crazyme
10 antwoorden
  • Hallo allemaal.

    Ik heb het volgede probleem ik ben bezig met de header van een site en daar moeten bepaalde gedeeltes vaste maat houden en somige moeten flexibel zijn ik heb het nu op de volgende manier gedaan alleen pakt het flexibele gedeelte het aantal procenten van de hele pagina terwijl hij het aantal procenten moet pakken van het gedeelde dat nog over is nadat de vaste maten in pixels zijn opgegeven.
    [code:1:49647d71ce]

    <style type="text/css">
    <!–
    body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    }
    body {
    background-color: #f9f7d5;
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    }
    a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: 7b5b32;
    }
    a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: #b5b32;
    }

    .corner_topleft{
    float: left;
    position:relative;
    background-repeat:no-repeat;
    background-image:url(images/hoekboven.jpg);
    background-color: #f08341;
    height: 256px;
    width: 256px;
    }
    .logo-left{
    position:absolute;
    font-family:"Times New Roman", Times, serif;
    font-size:24px;
    color:#6f522e;
    left: 12px;
    top: 141px;
    width: 141px;
    }
    .logo-right{
    position:absolute;
    font-family:"Times New Roman", Times, serif;
    font-size:30px;
    font-weight:bold;
    color:#6f522e;
    left: 90px;
    top: 171px;
    width: 159px;
    height: 38px;
    }
    .logo{
    position:absolute;
    left:68px;
    top:16px;
    background-image:url(images/logo.jpg);
    width: 133px;
    height:118px;
    }
    .menu{
    margin-bottom:15px;
    background-color: #7b5b32;
    height:30px;
    clear: both;
    width:100%;
    margin-left:1%;
    }
    #content{
    float:left;
    width: 40%;
    }
    #vogeltop{
    background-repeat:no-repeat;
    background-image: url(images/vogeltop.jpg);
    float:left;
    width: 475px;
    height:256px;
    }


    –>
    </style>
    </head>

    <body>

    <div class="corner_topleft">
    <span class="logo-left">pottenbakkerij</span><span class="logo-right">De Vogelpot</span><span class="logo"></span></div>

    <div id="content">
    <div class="menu">Content for class "menu" Goes Here</div>
    </div>

    <div id="vogeltop"></div>

    </body>
    </html>
    [/code:1:49647d71ce]
  • Het is in CSS op dit moment niet mogelijk* om te rekenen met maten. Een oplossing zou kunnen zijn om het element of de elementen te nesten in een div die 100% is van de overgebleven ruimte en daarbinnen met andere divs die ruimte op te delen.

    - Bas

    * iig niet in alle mainstream browsers
  • [quote:1362621101="BasHamar"]Het is in CSS op dit moment niet mogelijk* om te rekenen met maten. Een oplossing zou kunnen zijn om het element of de elementen te nesten in een div die 100% is van de overgebleven ruimte en daarbinnen met andere divs die ruimte op te delen.

    - Bas

    * iig niet in alle mainstream browsers[/quote:1362621101]

    hoe geef je een div een maat van 100% van de overgebleven ruimte? Als ik dit namelijk kan opgeven is het probleem opgelost..
  • Bij gebrek aan een concrete invulling van je probleem: dit is het standaardgedrag van een div. Ik neem dus aan dat je wat anders bedoelt, kan je dit misschien verduidelijken? Welke div moet je precies aanpassen?

    - Bas
  • [quote:2c61b30a1f="BasHamar"]Bij gebrek aan een concrete invulling van je probleem: dit is het standaardgedrag van een div. Ik neem dus aan dat je wat anders bedoelt, kan je dit misschien verduidelijken? Welke div moet je precies aanpassen?

    - Bas[/quote:2c61b30a1f]

    hoe is het dan mogelijk dat de content div de vollige breedte van me pagina wordt als geen breedte opgeef en hij de div die rechts staat omlaag doet?
  • we pakken een voorbeeld. Ik wil 3 kolomen maken

    de linker: 100px
    de middelste: 100% van wat nog leeg is
    de rechter: 200px

    hoe gat ik dit in css neer zetten?
  • Met float. ;)

    Ik liep ook net tegen een interessant artikel aan dat een kleine overlap heeft met wat jij wil (als je float gaat gebruiken), wellicht dat je er wat aan hebt.

    Fixed or fluid width? Elastic!

    - Bas
  • [quote:a2faecefd8="BasHamar"]Met float. ;)

    Ik liep ook net tegen een interessant artikel aan dat een kleine overlap heeft met wat jij wil (als je float gaat gebruiken), wellicht dat je er wat aan hebt.

    Fixed or fluid width? Elastic!

    - Bas[/quote:a2faecefd8]

    als ik mijn linker div op float:left zet mijn rechter div op float right en vervolgens de middelste div geen float meegeef en ook geen breedte zou je denken dat had de volledige ruimte tussen de 2 divs inneemt maar niks in minder waar hij neemt vanaf mijn linker div de complete ruimte tot aan het eind van het venster en schruift mijn rechter div naar beneden. Dit wordt dus niet opgelost door dit artikele please help mij…
  • Er zijn meerdere manieren mogelijk, kijk anders even hier. Succes!

    [b:546d182280]Edit:[/b:546d182280] of anders even snel uit de losse pols dit:[code:1:546d182280]<html>
    <head>
    <title>Float</title>
    <style type="text/css">
    html,body{margin:0;padding:0;}
    div{margin:20px;border:1px dashed #f00;}
    #een{float:left;width:100px;}
    #twee{float:right;width:200px;}
    #drie{margin-left:140px;margin-right:240px;}
    </style>
    </head>
    <body>
    <div id="een">
    <h1>Een</h1>
    <p>Honderd pixels</p>
    </div>

    <div id="twee">
    <h1>Twee</h1>
    <p>Tweehonderd pixels</p>
    </div>

    <div id="drie">
    <h1>Drie</h1>
    <p>Honderd procent van overgebleven ruimte</p>
    </div>
    </body>
    </html>[/code:1:546d182280]Alleen getest in FF.

    - Bas
  • [quote:c0b30ecb35="crazyme"]we pakken een voorbeeld. Ik wil 3 kolomen maken

    de linker: 100px
    de middelste: 100% van wat nog leeg is
    de rechter: 200px

    hoe gat ik dit in css neer zetten?[/quote:c0b30ecb35]
    http://www.tjkdesign.com/articles/3cols.asp

Beantwoord deze vraag

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