Thomas: Größe je nach Fenstergröße

SELF-Forum

Größe je nach Fenstergröße

Thomas Homepage des Autors
– Informationen zu den Bewertungsregeln

Hi,

http://vfb-stuttgart.piranho.com

Das rechte Menü (.menre) bleibt immer 10 px vom Seitenrand entfernt.

1.)Jetzt soll der Mittelteil (.text) immer genau den Platz zwischen dem linken Menü und dem rechten Menü ausfüllen (mit 10 px Abstand zu den Menüs). Wie mache ich das?

2.) Das obere Menü soll auch immer bis 10 px zum rechten Rand gehen. Wie mach ich das?

Thomas

<html><head>

<style type="text/css">

.menob
{
font-size:12px;font-family:Verdana;
position:absolute;width:748px;height:100px;
background-color:#efefef;
border:1px solid #aaaaaa;
left:10;top:10px;
-moz-border-radius:10px;
}

.menli
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:290px;
background-color:#efefef;
border:1px solid #aaaaaa;
left:10px;top:120px;
-moz-border-radius:10px;
}

.menre
{
font-size:12px;font-family:Verdana;
position:absolute;width:100px;height:290px;
background-color:#efefef;
border:1px solid #aaaaaa;
left: 100%;
margin-left: -110px;
top:120px;
-moz-border-radius:10px;
}

.text
{
font-size:12px;font-family:Verdana;
position:absolute;height:290px;
background-color:#efefef;
border:1px solid #aaaaaa;
left: 120px;

top:120px;
-moz-border-radius:10px;

}
</style>

<title>Rahmen mit abgerundeten Ecken</title>

</head>
<body>

test

<div class="menli">linkes Menü</div>

<div class="menre">rechtes Menü</div>

<div class="menob">Header</div>

<div class="text">Inhalt</div>

</body></html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Größe je nach Fenstergröße

    Struppi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    1.)Jetzt soll der Mittelteil (.text) immer genau den Platz zwischen dem linken Menü und dem rechten Menü ausfüllen (mit 10 px Abstand zu den Menüs). Wie mache ich das?

    2.) Das obere Menü soll auch immer bis 10 px zum rechten Rand gehen. Wie mach ich das?

    Für die eindeutigen Bereiche würde ich IDs verwenden und für das Design eine Klasse. Ansonsten ist das ganze recht einfach:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
            "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html>
    <head>
    <title>Rahmen mit abgerundeten Ecken</title>

    <style type="text/css">
    body
    {
    margin:0 10px;
    padding:0;
    font-size:12px;
    font-family:Verdana;
    }

    #menob
    {
    height:100px;
    margin-bottom:10px;

    background-color:#efefef;
    border:1px solid #aaaaaa;
    -moz-border-radius:10px;
    }

    #menli
    {
    float:left;
    width:100px;
    height:290px;
    }

    #menre
    {
    float:right;
    width:100px;
    height:290px;
    }

    #text
    {
       margin-left: 110px;
       margin-right:110px;
    }

    .box
    {
    background-color:#efefef;
    border:1px solid #aaaaaa;
    -moz-border-radius:10px;
    }
    </style>

    </head>
    <body>

    <div class="box" id="menob">Header</div>
    <div class="box" id="menli">linkes Menü</div>
    <div class="box" id="menre">rechtes Menü</div>
    <div class="box" id="text">Inhalt</div>

    </body></html>

    Struppi.

    --
    Javascript ist toll
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln