Marcel: left: 276 und width:100 funktioniert nicht

SELF-Forum

left: 276 und width:100 funktioniert nicht

Marcel
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte ein Menu machen, was von links 276px bis an den rechten Rand reicht und 20px vom rechten Rand entfernt soll eine vertikale Linie sein. Das bekomme ich einfach nicht.
Probiert habe ich es mit Firefox 2 und IE7.

Hier einen meiner Versuche:

<!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" lang="de" xml:lang="de">

<head>
<title>CSS Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
#menu_oben{
 z-index: 0;
 position: fixed;
 top: 117px;
 width: 99%;
 height: 26px;
 padding:0px;
 margin: 0px;
 border: 0px;
 color : White;
 background-color: #747c7f;
 border-bottom-color: #547f85;
 border-bottom-style: solid;
 border-bottom-width: 7px;
}

.menu_oben_tb1{
 table-layout: fixed;
 height: 20px;
 width: 95%;
 border-bottom: 1px;
 border-top: 1px;
 border-right: 1px;
 border-left: 1px;
 padding: 0px 0px 0px 0px;
 border-spacing: 0px;
}

.menu_oben_tb2{
 height: 20px;
 width: 20px;
 border-bottom-width: 0px;
 border-right-width: 0px;
 border-top-width: 0px;
 border-left-width: 1px;
 border-style: solid solid solid solid;
 border-left-color: white;
}

#menu_oben_rahmen{
 z-index: 1;
 position: fixed;
 /padding-left: 0px;
 padding-left: 276px;
 top: 0px;
 width: 100%;
 height: 100%;
 border: 1px solid black;
 }

</style>

</head>

<body>

<div id="menu_oben_rahmen">
<div id="menu_oben">
 <table class="menu_oben_tb1">
 <tr>
  <td width="100%">&nbsp;</td>
  <td style=" height: 100%; width: 20px; border-right: 1px solid white;">&nbsp;</td>
 </tr>
 </table>
</div>  <!-- Ende: id="menu_oben"  -->
</div>

</body>
</html>

Sehen kann man es hier:
http://de.geocities.com/marcel_polty/test.html

Hat jemand einen Tipp für mich?

Danke + Gruß

Marcel

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. left: 276 und width:100 funktioniert nicht

    Jonathan
    – Informationen zu den Bewertungsregeln

    Hi,

    ich verstehe deinen Quellcode nicht ganz...

    #menu_oben{
    z-index: 0;

    wozu?

    width: 99%;

    wozu?

    border-bottom-color: #547f85;
    border-bottom-style: solid;
    border-bottom-width: 7px;

    Das geht einfacher:
    border-bottom: 7px solid #547f85;

    .menu_oben_tb1{

    [...]

    width: 95%;

    wozu?

    border-bottom: 1px;
    border-top: 1px;
    border-right: 1px;
    border-left: 1px;
    padding: 0px 0px 0px 0px;

    das geht auch einfacher:
    border: 1px; padding:0;
    (wobei der border relativ sinnlos ist ohne zusätzliche style-angabe)

    }

    .menu_oben_tb2{

    [...]

    border-bottom-width: 0px;
    border-right-width: 0px;
    border-top-width: 0px;
    border-left-width: 1px;
    border-style: solid solid solid solid;
    border-left-color: white;

    das geht auch einfacher:

    border:0; border-left: 1px solid white;

    }

    #menu_oben_rahmen{

    [...}

    /padding-left: 0px;
    padding-left: 276px;

    hä?

    [...]

    width: 100%;

    wozu?
    [...]

    </style>

    </head>

    <body>

    <div id="menu_oben_rahmen">

    wozu?

    <div id="menu_oben">
    <table class="menu_oben_tb1">

    wozu die Tabelle?

    <tr>
      <td width="100%">&nbsp;</td>
      <td style=" height: 100%; width: 20px; border-right: 1px solid white;">&nbsp;</td>

    Deine Berechnung ist etwas komisch. Wieso sollte 99%*95%*(100%+22px) das gleiche sein, wie 100%? (border der oberen elemente jetzt nicht mit einberechnet.)

    Vereinfache erstmal deinen Quellcode, dann sehen wir weiter.

    Was hälst du von etwas wie
    <div style="position:fixed;left:276px;right:20px;height:20px;background:red">blah</div>
    ?

    Ist doch irgendwie einfacher... (natürlich sollte man den stil auslagern)

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln