[CSS] box groter dan 100% door margins - Softwareontwikkeling

donderdag 16 september 2004 14:17

Acties:

Verwijderd

Topicstarter

Ik heb dit stukje code gemaakt:

code:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>test</title>
    <style type="text/css" media="screen,print">
    
    body {
        background-image:none;
        background-color: #6F0C13;
        text-align: center;
    }
    #line {
        background-color:#000000;
        width:1px;
        height:100%;
        margin: 5px 5px 5px 5px;
        position:static;
    }
    
    #center {
        border: 2px #000000 solid;
        background-color:#C2B4B4;
        width:780px; 
        height:500px;
        margin: 5px auto;
        position:relative;
    }

    </style>
</head>
<body>
<div id="center"> 
    <div id="line"> 
    </div>
</div>
</body>
</html>

Wat ik wil is dat de lijn die je ziet aan alle kanten een margin van 5px heeft. Maar ik doe iets niet goed want hij gaat buiten de parent box. Ik heb de box op 100% gezet omdat als de parent box groter word deze box ook groter moet worden.

Waarschijnlijk simpel op te lossen maar ik heb het niet kunnen vinden op de w3 site.

<-- beginner

donderdag 16 september 2004 14:20

Acties:

André

Analytics dude

Gebruik padding ipv margin? Lijkt weer op het brakke box-model van IE. Zo zou het moeten werken:

http://www.w3.org/TR/REC-CSS2/box.html

[ Voor 69% gewijzigd door André op 16-09-2004 14:22 ]

donderdag 16 september 2004 14:21

Acties:

Verwijderd

width = width + padding + border

Dat gaat dus niet werken

donderdag 16 september 2004 16:50

Acties:

T-MOB

Ik neem aan dat er strax ook nog wat in de box geschreven gaat worden... Je zou het dan zo op kunnen lossen:

code:

    #line {
        
        border-left: 1px solid #000;
        _height: 490px; /* hiep hoi IE */ 
        min-height: 490px;
        margin: 5px;
      }

In die <div id="line"> plaats je vevolgens gewoon je content. Die lijn groeit wel mee...

Regeren is vooruitschuiven