CSS div horizonlaal dynamisch maken

Status
Niet open voor verdere reacties.
Frankwin

Frankwin

Gebruiker
Lid geworden
1 jan 2001
Berichten
905
Ik ben bezig met een website bestaande uit 4 divs: header, linker menu, content en rechter menu.
De menu's hebben een vaste breedte (respectievelijk 205 en 120 pixels) en nu wil ik dat mijn content de rest van de schermbreedte gebruikt.
(in een frameset kon dat met cols="205, * ,120").

Is dit mogelijk met CSS?

Mijn code:
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>
    <title>3 kolommen layout</title>
    <style type="text/css">
        body
        {
            background-color: #CCCCFF;
            font-family: Times New Roman, Times, serif;
            color: #000066;
            font-weight: normal;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        #container
        {
            position: static;
            width: 100%;
            text-align: left;
            margin-left: auto;
            margin-right: auto;
        }
        #header
        {
            width: 100%;
            height: 150px;
            position: static;
            background-color: yellow;
            color: #0000FF;
            top: 0;
            margin-left: auto;
            margin-right: auto;
            margin-top: 5px;
        }
        
        #links
        {
            background-color: blue;
            width: 205px;
            height: 600px;
            position: relative;
            margin-left: 5px;
            margin-top: 5px;
            margin-right: 5px;
            float: left;
        }
        
        #content
        {
            background-color: green;
            width: 500px; /*hoe maak je deze breedte relatief ? */
            height: 600px;
            position: relative;
            margin-top: 5px;
            margin-right: auto;
            float: left;
        }
        #rechts
        {
            width: 120px;
            height: 600px;
            position: relative;
            background-color: red;
            float: right;
            margin-top: 5px;
            margin-right: 5px;
            right: 0;
            
        }
        
    </style>
</head>
<body>
    <div id="container">
        <div id="header">HEADER</div>
        <div id="links">LINKS</div>
        <div id="content">INHOUD</div>
        <div id="rechts">RECHTS</div>
    </div>
</body>
</html>
 
tabellen

Nadeel van een passend ontwerp maken is dat je voor iedere resolutie een andere versie krijgt. Dan ben ik toch erg geneigd om weer van een tabel gebruik te maken, maar daar wilde ik eigenlijk van af.

Code: 
<table width="100%" border="0"">
<tr>
<td width="205">
        <div id="links">LINKS</div>
</td>
<td>
        <div id="content">INHOUD</div>
</td>
<td width="120">
        <div id="rechts">RECHTS</div>
</td>
</tr>
</table>
 
Op people.zeelandnet?
Gewoon een tabel.

Overigens als ik met divjes werk voor de layout
gebruik ik vaste waardes.
Container 800px
Dit mede omdat dan je layout in orde blijft, en voor de leesbaarheid is het prettiger.
Een width 100% op een 22 inch beeldscherm is totaal anders als op de
ontwerpcomputer van 17 inch.
 
Blijkbaar was ik niet helemaal duidelijk. Ik bedoelde zoiets.

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>
    <title>3 kolommen layout</title>
    <style type="text/css">
        body
        {
            background-color: #CCCCFF;
            font-family: Times New Roman, Times, serif;
            color: #000066;
            font-weight: normal;
            margin: 0;
            padding: 0;
            text-align: left;
        }
        #container
        {
            position: absolute;
            background-color: green;
            width: 100%;
            heigth: 750px;
        }
        #header
        {
            position: relative;
            width: 100%;
            height: 150px;
            background-color: yellow;
            color: #0000FF;
            border-color: #CCCCFF;
            border-style: solid;
            border-width: 5px 0px 5px 0px;
        }
        #links
        {
            position: relative;
            background-color: blue;
            width: 205px;
            height: 600px;
            border-color: #CCCCFF;
            border-style: solid;
            border-width: 0px 5px 0px 5px;
            float: left;
        }
        #content
        {
            position: relative;
            height: 600px;
        }
        #rechts
        {
            position: relative;
            width: 120px;
            height: 600px;
            background-color: red;
            border-color: #CCCCFF;
            border-style: solid;
            border-width: 0px 5px 0px 5px;
            float: right;
            
        }
        
    </style>
</head>
<body>
    <div id="container">
        <div id="header">HEADER</div>
        <div id="links">LINKS</div>
        <div id="rechts">RECHTS</div>
        <div id="content">INHOUD - de tekst hiervan iets langer maken om te zien wat er gebeurt want nu is het niet helemaal duidelijk; verklein en vergroot het venster om te zien wat er gebeurt</div>
    </div>
</body>
</html>
 
Gelukt!

Het is me gelukt door de linker en rechter div als absolute te definieren en daan de rand te hangen met left:0 en right:0;
De content heb ik vervolgens een margin-left gegeven van de breedte van de linker div en een margin-right van de breedte van de rechter div.

Code: 
body {
	margin: 0; 
	padding: 0; 
	text-align: center;
}

#container
{
	position: static;
	width: 100%;
	text-align: left;
	margin-left: auto;
    	margin-right: auto;
} 

#links {
	text-align: left;
	width: 150px;
	position: absolute;
	margin-left: 5px;
	margin-top: 5px;
    	margin-right: 5px;
	left: 0;
}

#content {
	text-align: left;
	margin-top: 5px;
	margin-left: 155px;
	margin-right: 130px;
}

#rechts {
	width: 120px;
	position: absolute;
	float: right;
	right: 0;
}

Alles werkt nog niet als ik de gehele pagina wil centreren (door de container en breedte van 100% te geven), maar this does the trick for me.

Binnenkort te zien op http://www.htmlhulp.com
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan