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: border loopt niet door

Mrs.Birdlover
3 antwoorden
  • Hallo allen,
    Ik zit met een probleem.
    Ben bezig met een nieuwe website.
    Tussen het linkermenu en de container loopt een (dashed) border.
    Deze border staat in de #container.
    Echter: als ik te weinig tekst invoer, loopt deze border niet door.
    Als ik de border in de #linkermenu zet, stopt de border als ik meer tekst invoer dan het menu lang is.
    Kortom: jullie voelen de vraag al komen……is dit met CSS op te lossen of moet ik misschien toch een piepklein plaatje van 2 pixels maken, en laten herhalen? (Dat plaatje moet ik overigens toch maken omdat ik graag dotted borders wil, en IE houdt daar niet zo van :( )
    Bedankt alvast voor het meedenken!


    [code:1:c5cca50d0a]
    a:link {color: #000; text-decoration: none;}
    a:visited {color: #CC0033; text-decoration: none;}
    a:active {color: #963200; text-decoration: none;}
    a:hover {color:#999;}

    body,
    html {
    margin:0;
    padding:0;
    background:#fff; /* achtergrondkleur wit*/
    color:#000;
    background:#fff url(images/background1.jpg) no-repeat bottom right fixed;
    }

    body {
    min-width:750px;
    font-family: verdana,arial, sans sherif;
    font-size:77%;
    margin:10px 1px;
    }

    #wrap {
    background:#fff;
    margin:left;
    width:750px;
    border: 1px dashed #666;
    }

    #header {
    background:#ccc;
    border-bottom: 1px dashed #666;
    }

    #header h1 {
    padding:20px;
    margin:0;
    }

    #linkermenu {
    background:#fff;
    float:left;
    width:240px;
    font-size: 11px;
    }

    #container h2, #container h3, {
    padding:0 10px;
    }

    p {margin-bottom: 10px; padding: 0 10px;}


    h3, h2 {
    margin-top: 5px;
    color:#CC0033;
    font-size: 14px;
    text-align: center;
    }

    #container {
    background:#fff;
    float:left;
    width:500px;
    border-left: 1px dashed #666;
    }

    #linkermenu ul {
    margin-bottom:5px;
    list-style: none;


    }
    #linkermenu h3, #linkermenu p {
    padding:0 10px;
    }

    #footer {
    background:#fff;
    border-top: 1px dashed #666;
    clear:both;
    }

    #footer p {
    padding:5px;
    margin:0;
    }
    [/code:1:c5cca50d0a]
  • Je kunt als repeating background voor de wrap een stukje lijn maken, waardoor de lijn dus niet op het menu of de container zit, maar als background. Het faux columns-idee.
    Wellicht kun je in die background ook andere lijntjes (zoals borders) verwerken, scheelt weer wat m.b.t. browserverschillen.
  • [quote:37dd85a89e="Mrs.Birdlover"]Bedankt alvast voor het meedenken![/quote:37dd85a89e]
    Ik mis de HTML-code…

Beantwoord deze vraag

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