Relative 100% breite verwenden

Status
Nicht offen für weitere Antworten.
MichiStroi

MichiStroi

Erfahrenes Mitglied
Hallo!

Ich möchte meine Navigationsleiste von der Linken SubNavi Spalte bis hin zur rechten LoginBox gehen lassen und dann zentrieren.
Aber wie funktioniert dass?
Hat jemand eine Ahnung wie ich dies über die gesammte, verbleibende Breite gehen lassen kann?

Danke
Lg Michi

Code: 
<html>
<head>
<title>BoxTest</title>
<meta name="author" content="Michael Stroi">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
body {
         margin:0px;
         background-color:#EFEBDE;}
#MDTop {
         height:70px;
         margin:0px;
         padding-top:5px;
         padding-left:0px;
         background-color:#6F80BF;
         border-left-width:5px;
         border-top-width:5px;
         border-right-width:5px;
         border-bottom-width:2px;
         border-style:solid;
         border-color:#999999;
}
#MDSubNavi
{
         float:left;
         height:510px;
         width:170px;
         margin:0px;
         padding-top:0px;
         padding-left:0px;
         padding-right:0px;
         background-color:#6F80BF;
         border-style:solid;
         border-color:#999999;
         border-left-width:5px;
         border-top-width:0px;
         border-right-width:2px;
         border-bottom-width:2px;
}
#MDSubTop
{
         width:100%;
         background-color:#FF0000;
}
#MDNav
{
         width:auto;
         height:30;
         float:left;
         background-color:#6F80BF;
         margin-left:7px;
         margin:0px;
}
#MDLogin {
         float:right;
         clear:both;
         width:170px;
         height:90px;
         margin:0px;
         background-color:#6F80BF;
         border-left-width:0px;
         border-top-width:0px;
         border-right-width:0px;
         border-bottom-width:2px;
         border-style:solid;
         border-color:#999999;
}
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="MDTop"></div>
<div id="MDSubNavi"></div>
<div id="MDSubTop">
<div id="MDNav">Hier möchte ich bis die Breite bis zur Loginbox</div>
<div id="MDLogin">Login</div>
</div>
</body>
</html>
 

Anhänge

  • Unbenannt-2.gif
    Unbenannt-2.gif
    4,7 KB · Aufrufe: 67
Hier mein Lösungsvorschlag:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>:::box.test:::</title>

<style type="text/css">
<!--
html, body
{
margin: 0;
padding: 0;
}

div.mainBox
{
width: 100%;
}

div.banner
{
height: 70px;
background: #6f80bf;
border-left-width: 5px;
border-top-width: 5px;
border-right-width: 5px;
border-bottom-width: 2px;
border-style: solid;
border-color: #999999;
}

div.leftCol
{
float: left;
width: 170px;
background: #6f80bf;
height: 510px;
border-style: solid;
border-color: #999999;
border-left-width: 5px;
border-top-width: 0px;
border-right-width: 2px;
border-bottom-width: 2px;
}

div.rightCol
{
margin: 0 0 0 177px;
background: #ff0000;
}

div.nav
{
margin: 0 170px 0 0px;
width: auto;
background: #999999;
}

div.login
{
float: right;
width: 170px;
background: #6f80bf;
border-left-width:0px;
border-top-width:0px;
border-right-width:0px;
border-bottom-width:2px;
border-style:solid;
border-color:#999999;
}

div.clear
{
clear: left;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}
-->
</style>

</head>
<body>

<div class="mainBox">

<div class="banner">banner</div>

<div class="leftCol">leftCol
     <div class="subNavi">subNavi</div>
</div>

<div class="rightCol">
     <div class="login">login</div>
     <div class="nav">nav</div>
     rightCol
</div>

<div class="clear">&nbsp;</div>

</div>

</body>
</html>
  • Browsercheck: FF 1.0.7, IE 6.0, MOZ 1.6, NN 7.0, OP 8.50
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück