Border niet bij layout?

**T. Smits** · 03-02-2010, 21:38

Hey,

Weet iemand zo 1, 2, 3 even te zeggen wat ik moet aanpassen zodat de border links + rechts wel om de site loopt?
Site is te zien hier: http://075.be/

Op de een of andere reden kan ik me broncode niet bekijken en heb ook geen dreamweaver (Zit namelijk niet op me eigen pc).. Dus kan het zelf niet checken...

Zou iemand mij kunnen vertellen wat ik fout doe?
Ik bedoel dus eigenlijk dat de border links + rechts gewoon doorloopt, nu loopt hij tot de helft..

Tomas.

**Marvin Middenwaard** · 03-02-2010, 21:51

Kun je niet gewoon 2 extra afbeeldingen in CSS van 2px breedte onder het einde van de border plaatsen?
Heb hier even de CSS en HTML bron voor de geinteresseerden ;)

CSS

Code:

@charset "UTF-8";
/* CSS Document */

body
{width: 1000px;
border-left: 2px solid #FF0000;
border-right: 2px solid #FF0000;
margin: 0px auto;
background-image: url('images/bg.png');
background-repeat: repeat;}


#borderl
{width: 2px;
float: left;
padding-bottom: 30000px;
margin-bottom: -29995px;
background-color: #FF0000;
float: left;}

#site
{width: 1000px;
padding-bottom: 30000px;
margin-bottom: -29995px;
float: left;}

#borderr
{width: 2px;
float: left;
padding-bottom: 30000px;
margin-bottom: -29995px;
background-color: #FF0000;
float: left;}

#pagina
{width: 1000px;
border-left: 2px solid #FF0000;}

#header
{width: 1000px;}

#headerl
{width: 530px;
height:177px;
background-image: url('images/headerl.jpg');
background-repeat: no-repeat;
float: left;}

#headerr
{width: 470px;
float: left;
background-image: url('images/headerr.jpg');
background-repeat: no-repeat;
float: left;
height: 177px;}

#headermenu
{height: 27px;
margin-top: 150px;}

#header h1
{margin-left: 210px;
margin-top: 37px;
color: #7b68ee;
font-size: 120px;}

#headermenu a
{text-decoration: none;
background-image: url('images/headermenu.png');
background-repeat: no-repeat;
height: 27px;
display: block;
color: #ff0000;
font-size: 18px;
width: 93px;
margin-right: 5px;
float: left;
text-align: center;
padding-top: 7px;}

#headermenu a:hover
{text-decoration: none;
background-image: url('images/headermenuhover.png');
background-repeat: no-repeat;
height: 27px;
display: block;
color: #ff0000;
font-size: 18px;
width: 93px;
margin-right: 5px;
float: left;
text-align: center;
padding-top: 7px;}

#menu
{height: 38px;
width: 1000px;
clear: both;
background-image: url('images/menubg.png');
background-repeat: repeat;}

#menul
{width:772px;
float: left;
height:38px;}

#menur
{background-image: url('images/menur.png');
background-repeat: no-repeat;
height: 38px;
width: 228px;
float: left;
background-position: top left;}

#menu a 
{color: #ff0000;
text-decoration: none;
float: left;
list-style: none;
font-size: 17px;
padding: 0 6px 0 6px;
margin: 10px 0px 0px 0px;}
    
#menu a:hover, ul#menu li.active a, ul#menu li.active a:hover 
{color: #37e116;
text-decoration: none;
border-bottom: 2px solid #ff0000;
font-size: 17px;
padding: 0 3px 0 3px;
margin: 10px 3px 0px 3px;}

#berichtenbalk
{width: 1000px;
background-image: url('images/berichtenbg.png');
background-repeat: no-repeat;
min-height: 54px;
padding: 0px;
background-position: top right;}

#berichtenbalkl
{margin: 10px 10px 10px 10px;
float: left;
background-color: #ffff00;
width: 812px;
height: 34px;}

#berichtenbalkr
{float: right;
margin: 10px 10px 10px 0px;
background-color: #ffff00;
width: 114px;
height: 34px;}

#content
{width: 1000px;}

#lcontentheader
{width: 183px;
background-image: url('images/lcontentheader.jpg');
background-repeat: no-repeat;
margin-right: 26px;
float: left;
height: 16px;}

#rcontentheader
{width: 791px;
background-image: url('images/rcontentheader.jpg');
background-repeat: no-repeat;
float: left;
height: 16px;}

#contentc
{width: 1000px;
overflow: hidden;}

#lcontent
{width: 183px;
background-image: url('images/contentbg.jpg');
background-repeat: repeat;
margin-right: 26px;
padding-bottom: 30000px;
margin-bottom: -29995px;
float: left;}

#rcontent
{width: 791px;
background-image: url('images/contentbg.jpg');
background-repeat: repeat;
padding-bottom: 30000px;
margin-bottom: -29995px;
float: left;}

#contentheader
{width: 1000px;}

#footercontent
{width: 1000px;}

#contentfooterl
{width: 316px;
height: 135px;
float: left;
background-image: url('images/contentfooterl.png');
background-repeat: no-repeat;}

#contentfooterm
{width: 576px;
float: left;
height: 135px;
background-image: url('images/contentfooterm.png');
background-repeat: repeat-x;}

#contentfooterr
{width: 108px;
height: 135px;
background-image: url('images/contentfooterr.png');
background-repeat: no-repeat;
float: left;}

#footer
{width: 1000px;}

#footerl
{float: left;
width: 126px;
height:50px;
float: left;
background-image: url('images/footerl.png');
background-repeat: no-repeat;}

#footerm
{float: left;
width: 748px;
height: 50px;
float: left;
background-repeat: repeat-y;
background-image: url('images/footerm.png');}

#footerr
{float: left;
width: 126px;
height:50px;
float: left;
background-image: url('images/footerr.png');
background-repeat: no-repeat;}

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>75 Jaar</title>
<link rel="stylesheet" type="text/css" href="75.css" />
        <script src="cufon.js" type="text/javascript"></script>
    <script src="PartybyTom_400.font.js" type="text/javascript"></script>
    <script src="Budmo_400.font.js" type="text/javascript"></script>
    <script type="text/javascript">
        Cufon.replace('a', { fontFamily: 'Budmo Jiggler' });
        Cufon.replace('h1', { fontFamily: 'PartybyTom' });
    </script>    
</head>

<body>

<div id="header">
    <div id="headerl">
        <h1>75</h1>
    </div>
    <div id="headerr">
        <div id="headermenu">
            <a href="http://mobieltonen.nl">Home</a>
            <a href="http://mobieltonen.nl">Store</a>
        </div>
    </div>
</div>

<div id="menu">
    <div id="menul">
        <a href="http://mobieltonen.nl">Cadeau</a>
        <a href="http://mobieltonen.nl">Catering</a>
        <a href="http://mobieltonen.nl">Feestruimte</a>
        <a href="http://mobieltonen.nl">Gedichten</a>
        <a href="http://mobieltonen.nl">Entertainment</a>
           <a href="http://mobieltonen.nl">Kaarten</a>
    </div>
    <div id="menur">
    </div>
</div>

<div id="berichtenbalk">
    <div id="berichtenbalkl">
    </div>
    <div id="berichtenbalkr">
    </div>
</div>

<div id="contentheader">
    <div id="lcontentheader">
    </div>
    <div id="rcontentheader">
    </div>
</div>

<div id="contentc">
    <div id="lcontent">
        test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />
    </div>
    <div id="rcontent">
    </div>
</div>

<div id="footercontent">
    <div id="contentfooterl">
    </div>
    <div id="contentfooterm">
    </div>
    <div id="contentfooterr">
    </div>
</div>

<div id="footer">
    <div id="footerl">
    </div>
    <div id="footerm">
    </div>
    <div id="footerr">
    </div>
</div>

</body>
</html>

**Ton van Alebeek** · 03-02-2010, 22:07

Probeer anders een wrapper #div om al je divs te plaatsen. Als je die dan de border meegeeft ipv de body, moet het werken volgens mij.

Border niet bij layout?