12 berichten aan het bekijken - 1 tot 12 (van in totaal 12)
  • Q:
    Bijdrager
    DEform

    CSS-probleem

    Ik ben vastgelopen met css.
    De oplossing vind ik nergens, heb al zitten google’en,
    de fora afgezocht, m’n msn-lijst afgegaan; geen resultaat…

    Nu mag ik van mezelf zeggen dat ik vrij goed
    met css overweg kan, maar ik raak er echt niet uit!

    Het gaat om mijn site, DEform,
    zoals je ziet is de middelste kolom donkerder grijs.
    Van boven staat er een afbeelding (100px hoog) en de
    achtergrondkleur is dezelfde als die van de afbeelding.

    Maar ik zou willen dat de achtergrond kleur tot onder gaat.

    Het zijn 3 div’jes:

    [code:1:26e2f901f6] <div id="kolom1">
    <?php
    if(!isset($_GET[’p’])){
    $pagina == ‘portfolio’;
    }
    switch($pagina){
    case ‘portfolio’:
    $include = "portfolio";
    break;
    case ‘deform’:
    $include = "deform";
    break;
    case ‘contact’:
    $include = "contact";
    break;
    }
    if(isset($include)){
    include("includes/".$include.".inc.php");
    }else{
    include("includes/portfolio.inc.php");
    }

    ?>
    </div>

    <div id="kolom2">
    <?php include("includes/waarom.inc.php"); ?>
    </div>

    <div id="kolom3">
    <?php include("includes/links.inc.php"); ?>
    </div>
    [/code:1:26e2f901f6]

    Met deze css er achter:

    [code:1:26e2f901f6]#kolom1 {
    width: 524px;
    background: #cccccc;
    position: relative;
    float: left;
    margin-top: -9px;
    }
    #kolom2 {
    background-color: #999999;
    background-image: url(../images/2.png);
    background-repeat: no-repeat;
    background-position: top;
    width: 244px;
    min-height: 400px;
    height: inherit;
    border-left: 5px solid #8e8e8e;
    border-right: 5px solid #8e8e8e;
    position: relative;
    float: left;
    margin-top: -9px;
    }
    #kolom3 {
    background-color: #cccccc;
    background-image: url(../images/3.png);
    background-repeat: no-repeat;
    background-position: top;
    width: 204px;
    position: relative;
    float: left;
    margin-top: -9px;
    }
    [/code:1:26e2f901f6]

    Bijdrager
    psuedo

    dit heeft niet alleen met CSS te maken. ontwerpen van websites is niet simpelweg CSS maar ook grafisch denk werk. er zijn een aantal manieren om deze achtergrond te realiseren.

    http://www.gigadesign.be/2006/07/layout-met-100-hoogte/

    Bijdrager
    hansenonline

    de enige manier om met css een achtergrond tot het einde van de container te krijgen is volgens mij een plaatje als achtergrond voor de container te gebruiken die de kleuren voor de kolommen geeft.
    dan moet je er wel voor zorgen dat de layout fixed is.

    Bijdrager
    DEform
    ”hansenonline”

    de enige manier om met css een achtergrond tot het einde van de container te krijgen is volgens mij een plaatje als achtergrond voor de container te gebruiken die de kleuren voor de kolommen geeft.
    dan moet je er wel voor zorgen dat de layout fixed is.

    Tja alle inhoud komt uit mijn cms, dus fixed is geen optie:)

    Bijdrager
    aerosoul

    Ik word van jou Css niet echt vrolijk eerlijk gezegd.. dat kan een stuk overzichtelijker en korter!

    [code:1:ec370599c3]
    #links a:link{
    color: #000000;
    text-decoration: none;
    background-image: url(../images/opsomming1.gif);
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 30px;
    font-size: 12px;
    }
    #links a:visited{
    color: #000000;
    text-decoration: none;
    background-image: url(../images/opsomming1.gif);
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 30px;
    font-size: 12px;
    }
    #links a:hover{
    color: #3399cc;
    text-decoration: underline;
    background-image: url(../images/opsomming2.gif);
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 30px;
    font-size: 12px;
    }
    #links a:active{
    color: #3399cc;
    text-decoration: underline;
    background-image: url(../images/opsomming2.gif);
    background-repeat: no-repeat;
    background-position: left;
    padding-left: 30px;
    font-size: 12px;
    [/code:1:ec370599c3]

    kan ook als:
    [code:1:ec370599c3]
    #links a {
    color:#000;
    text-decoration:none;
    background: url(../images/opsomming1.gif) no-repeat left;
    padding: 0 0 0 30px;
    font-size:12px;
    }
    #links a:hover {
    color: #3399cc;
    }

    #links a:active {
    color:#3399cc;
    }
    [/code:1:ec370599c3]

    En verder als jij een plaatje maakt met de borders van het grijs daarin. En die als achtergrond zet in je contentwrapper op repeat-y zet en die dan ook positioneer naar rechts met een bepaald aantal pixels?

    Verder zou ik je html ook liever even lekkerder willen zien; javascript in externe bestanden (Dat ruimt zo op!) en iets met tabs?

    In ieder geval veel succes verder en ik hoop dat je m’n commentaar niet als negatief op vat.

    Bijdrager
    DEform
    ”aerosoul”

    En verder als jij een plaatje maakt met de borders van het grijs daarin. En die als achtergrond zet in je contentwrapper op repeat-y zet en die dan ook positioneer naar rechts met een bepaald aantal pixels?

    Verder zou ik je html ook liever even lekkerder willen zien; javascript in externe bestanden (Dat ruimt zo op!) en iets met tabs?

    In ieder geval veel succes verder en ik hoop dat je m’n commentaar niet als negatief op vat.

    Hoi aerosoul,

    Misschien had ik het erbij moeten vermelden.
    Eerst probeer ik alles werkend te krijgen in css, en dan probeer
    ik zoveel mogelijk te vereenvoudigen, maar bedankt voor de tip!

    js in externe bestanden, tja, dat is zo wat ieder zijn ding zeker.
    Ik steek alles in includes, dus om te coderen werkt dat super overzichtelijk,
    maar als je dan in die browser naar de code kijkt is het warboel.
    Wat bedoel je precies met tabs?

    Bijdrager
    aerosoul

    Ok dan is ’t goed :wink:

    Met tabs bedoel ik dat je iets niet zo neer zet:
    [code:1:ba4c1b00c7]
    <body>
    <div>
    <ul>
    <li></li>
    </ul>
    </div>
    </body>
    [/code:1:ba4c1b00c7]

    Maar:

    [code:1:ba4c1b00c7]
    <body>
    <div>
    <ul>
    <li></li>
    </ul>
    </div>
    </body>
    [/code:1:ba4c1b00c7]
    Je doe dit momenteel wel enigzins maar misschien dat je het meer kan doen. Het is natuurlijk niet verplicht, maar je maakt het jezelf ermee een stuk lekkerder werken omdat je makkelijker kan zien hoe diep je ergens zit. En je hebt gewoon meer overzicht (vind ik.)

    zelf doe ik ’t zelfs vaak zo:
    [code:1:ba4c1b00c7]
    <body>

    <div>

    <ul>

    <li></li>

    </ul>

    </div>

    </body>
    [/code:1:ba4c1b00c7]

    Bijdrager
    DEform
    ”aerosoul”

    [code:1:2a0c2adbea]
    <body>

    <div>

    <ul>

    <li></li>

    </ul>

    </div>

    </body>
    [/code:1:2a0c2adbea]

    Aaaah zo bedoel je:)
    Maar dat is omdat alle inhoud uit een database komt.
    PHP parst die html code eruit, en houdt dus geen rekening met tabs.
    Maar mijn php documenten zijn wel mooi ge-tab’d :P

    Nu mijn probleem nog opgelost zien te krijgen :x

    Bijdrager
    iCohn

    Zoek even op Faux column in google
    Die heb je nodig hiervoor.:)

    Bijdrager
    DEform
    ”iCohn”

    Zoek even op Faux column in google
    Die heb je nodig hiervoor.:)

    Aha, een oplossing.
    Maar ik kan er niet aan uit:)
    Misschien wat meer help?

    Bijdrager
    iCohn

    Hier staat het wel duidelijk beschreven vind ik.
    Neem aan dat dit geen probleem moet zijn, aangezien je zelf aangeeft vrij goed overweg te kunnen met CSS.

    Bij mijn weten is dit de enige manier op je probleem op de lossen.

    Bijdrager
    DEform
    ”iCohn”

    Hier staat het wel duidelijk beschreven vind ik.
    Neem aan dat dit geen probleem moet zijn, aangezien je zelf aangeeft vrij goed overweg te kunnen met CSS.

    Bij mijn weten is dit de enige manier op je probleem op de lossen.

    Wow bedankt! :lol:
    Dat is’m dus.
    Wel een heel gedoe om dat gif’je de jusite maten te geven, maar het werkt perfect!

    101 x dank :wink:

12 berichten aan het bekijken - 1 tot 12 (van in totaal 12)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.