fließende Divs bekomme ich nicht hin :-( [Archiv]

robbitop

2005-02-24, 11:28:17

Ich will an sich den außenframe (ID="mega") undefiniert lassen, damit ich bei unterschiedlichen Fenstergrößen und Auflösungen immer ein gutes Bild habe. Statisch bekomme ich das ja schon hin. Am liebsten würde ich feste Menüs haben aber für den Content Div (ID="Globalbanner") etwas dynamisches.
Könnt ihr mir helfen?
ich habe das ganze ersteinmal für den FireFox ausgelegt. Es soll später aber auch auf dem IE6 korrekt angezeigt werden

<html>
<head>
<style type="text/css">
h1 {color:#5B5B5B; font-size:10px; font-family:times new roman;}
h3 {color:black; font-size:11px; font-family:times new roman; font-style:italic;}

/*div {border:1px solid white;}*/
body{ font-family:arial; font-size:12px; color:#5B5B5B;}

#logo {position:absolute;
margin:10px;
height:87px;
width:145px;
background-image: url(logo.gif);
background-color:orange;
}

div#titel {

position:absolute;
float:left;
width:145px;
height:25px;
background-color:#F5F5F5;
}

#navi
{ position:absolute;

margin-top:25px;
height:130px;
width:145px;
border:1px solid #989898;
background-color:white;

}

#naviglobal {
position:absolute;
margin-top:140px;
margin-left:10px;
float:left;

height:155px;
width:145px;

background-color:#aaaaaa;
}

#searchglobal {
position:absolute;
margin-top:320px;
margin-left:10px;
float:left;
height:115px;
width:145px;
background-color:#aaaaaa;

}
#search {

position:absolute;
margin-top:25px;
float:left;
height:90px;
width:145px;
background-color:white;
border:1px solid #989898;

}

#globaltwo
{ position:absolute;
margin-top:470px;
margin-left:10px;
float:left;
top:145px,
left:20px;
height:145px;
width:140px;

background-color:#aaaaaa;
}

#globalbanner
{position:absolute;
margin-top:25px;
margin-left:170px;
float:right;
height:80%
width:80%

border:1px solid #989898;
background-color:white;
}

#stammdaten {position:absolute;
margin-left:175px;
margin-top:5px;
background-color:white;
width:100;
height:20;
z-index:3;
border-top:1px solid #FFAC11;
border-left:1px solid #FFAC11;
border-right:1px solid #FFAC11;
}

#kommunikation {position:absolute;
margin-left: 280px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;
}

#verwaltung {position:absolute;
margin-left:385px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;

}

#auswertung {position:absolute;
margin-left:490px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;
}

#berichte {position:absolute;
margin-left:595px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;
}

#administration {position:absolute;
margin-left:700px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;
}

#hilfe {position:absolute;
margin-left:805px;
margin-top:5px;
background-color: white;
width:50;
height:20;
border:1px solid #989898;
}

#mega {
border:1px solid #989898;
padding:5px;
clear:right;
background-color:#F5F5F5;
}
#sbutton {position:absolute;
margin-top:20px;
margin-left:40px;
}

ul { line-height: 1.5em; list-style-type: square; list-style-image:
url(tmp/bullet.gif); margin: 0.3em 0 0 1.5em; padding: 0 }

a.menulink:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000; text-decoration:none;
font-size:8pt;
}
a.menulink:visited{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#493AA3; text-decoration:none;
font-size:8pt;

}
a.menulink:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#0000FF;TEXT-DECORATION: underline;
font-size:8pt;

}
a.menulink:active{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000; text-decoration:none;
font-size:8pt;
background-color:#FFFF00;
}

</style>

</head>
<body>

<div id="mega">
<div id="logo">

<div id="naviglobal">
<div id="titel">
<p>  Navigation</p>
</div>
<div id="navi">
<p><ul>
<a class="menulink" href="#"><li>Pachten</a></li>
<a class="menulink" href="#"><li>Erlöse</a></li>
<a class="menulink" href="#"><li>ToDo Liste</a></li>
<a class="menulink" href="#"><li>Statuscodes</a></li>
<a class="menulink" href="#"><li>Maschinenlogbuch</a></li>
<a class="menulink" href="#"><li>Logalarmierung</a></li>
</ul></p>
</div>
</div>
<div id="searchglobal">
<div id="titel">
<p>  Suche</p>
</div>
<div id="search"><br><span> Suche:
</span><input name="search" size="10" id="filter" type="text">

<div colspan="2" align="center" id="sbutton"><input type="button" value="suche" onclick="search()"></div>
</div>
</div>
<div id="globaltwo">
<div id="titel">
<p>  Adresse</p>
</div>
<div id="navi"><br>
  softEnergy GmbH<br>
  Platz der Freundschaft 1<br>
  18059 Rostock<br>
<br>
  fon 0381 40587535<br>
  fax 0381 40587555<br>
  e-mail info@softenergy.de<br>
</div>
</div>
<div id="stammdaten">  Stammdaten</div>
<div id="kommunikation">  Kommunikation</div>
<div id="verwaltung">     Verwaltung</div>
<div id="auswertung">     Auswertung</div>
<div id="berichte">         Berichte</div>
<div id="administration">   Administration</div>
<div id="hilfe">      Hilfe</div>
<div id="globalbanner">
</div>
</div>
</body>
</html>

So sieht es statisch aus:

<html>
<head>
<style type="text/css">
h1 {color:#5B5B5B; font-size:10px; font-family:times new roman;}
h3 {color:black; font-size:11px; font-family:times new roman; font-style:italic;}

/*div {border:1px solid white;}*/
body{ font-family:arial; font-size:12px; color:#5B5B5B;}

#logo {position:absolute;
margin:10px;
height:87px;
width:145px;
background-image: url(logo.gif);
background-color:orange;
}

div#titel {

position:absolute;
float:left;
width:145px;
height:25px;
background-color:#F5F5F5;
}

#navi
{ position:absolute;

margin-top:25px;
height:130px;
width:145px;
border:1px solid #989898;
background-color:white;

}

#naviglobal {
position:absolute;
margin-top:140px;
margin-left:10px;
float:left;

height:155px;
width:145px;

background-color:#aaaaaa;
}

#searchglobal {
position:absolute;
margin-top:320px;
margin-left:10px;
float:left;
height:115px;
width:145px;
background-color:#aaaaaa;

}
#search {

position:absolute;
margin-top:25px;
float:left;
height:90px;
width:145px;
background-color:white;
border:1px solid #989898;

}

#globaltwo
{ position:absolute;
margin-top:470px;
margin-left:10px;
float:left;
top:145px,
left:20px;
height:145px;
width:140px;

background-color:#aaaaaa;
}

#globalbanner
{position:absolute;
margin-top:25px;
margin-left:170px;
float:right;
height:800px;
width:800px;

border:1px solid #989898;
background-color:white;
}

#stammdaten {position:absolute;
margin-left:175px;
margin-top:5px;
background-color:white;
width:100;
height:20;
z-index:3;
border-top:1px solid #FFAC11;
border-left:1px solid #FFAC11;
border-right:1px solid #FFAC11;
}

#kommunikation {position:absolute;
margin-left: 280px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;
}

#verwaltung {position:absolute;
margin-left:385px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;

}

#auswertung {position:absolute;
margin-left:490px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;
}

#berichte {position:absolute;
margin-left:595px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;
}

#administration {position:absolute;
margin-left:700px;
margin-top:5px;
background-color:white;
width:100;
height:20;
border:1px solid #989898;
}

#hilfe {position:absolute;
margin-left:805px;
margin-top:5px;
background-color: white;
width:50;
height:20;
border:1px solid #989898;
}

#mega {
position: absolute;
border:1px solid #989898;
padding:5px;
float:left;
width:990px;
height:900px;
background-color:#F5F5F5;
}
#sbutton {position:absolute;
margin-top:20px;
margin-left:40px;
}

ul { line-height: 1.5em; list-style-type: square; list-style-image:
url(tmp/bullet.gif); margin: 0.3em 0 0 1.5em; padding: 0 }

a.menulink:link{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000; text-decoration:none;
font-size:8pt;
}
a.menulink:visited{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#493AA3; text-decoration:none;
font-size:8pt;

}
a.menulink:hover{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#0000FF;TEXT-DECORATION: underline;
font-size:8pt;

}
a.menulink:active{
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000; text-decoration:none;
font-size:8pt;
background-color:#FFFF00;
}

</style>

</head>
<body>

<div id="mega">
<div id="logo">

<div id="naviglobal">
<div id="titel">
<p>  Navigation</p>
</div>
<div id="navi">
<p><ul>
<a class="menulink" href="#"><li>Pachten</a></li>
<a class="menulink" href="#"><li>Erlöse</a></li>
<a class="menulink" href="#"><li>ToDo Liste</a></li>
<a class="menulink" href="#"><li>Statuscodes</a></li>
<a class="menulink" href="#"><li>Maschinenlogbuch</a></li>
<a class="menulink" href="#"><li>Logalarmierung</a></li>
</ul></p>
</div>
</div>
<div id="searchglobal">
<div id="titel">
<p>  Suche</p>
</div>
<div id="search"><br><span> Suche:
</span><input name="search" size="10" id="filter" type="text">

<div colspan="2" align="center" id="sbutton"><input type="button" value="suche" onclick="search()"></div>
</div>
</div>
<div id="globaltwo">
<div id="titel">
<p>  Adresse</p>
</div>
<div id="navi"><br>
  softEnergy GmbH<br>
  Platz der Freundschaft 1<br>
  18059 Rostock<br>
<br>
  fon 0381 40587535<br>
  fax 0381 40587555<br>
  e-mail info@softenergy.de<br>
</div>
</div>
<div id="stammdaten">  Stammdaten</div>
<div id="kommunikation">  Kommunikation</div>
<div id="verwaltung">     Verwaltung</div>
<div id="auswertung">     Auswertung</div>
<div id="berichte">         Berichte</div>
<div id="administration">   Administration</div>
<div id="hilfe">      Hilfe</div>
<div id="globalbanner">
</div>
</div>
</body>
</html>

astanoth

2005-02-24, 13:12:17

Wenn ich dich richtig verstehe, dann suchst du sowas (http://stichpunkt.de/css/2-box.html).

Ich kann dir allerdings empfehlen, eine feste Größe(z.B. Breite:800px) zu verwenden, wie das auch viele offizielle Seiten tun, damit die Seiten auch bei einer Auflösung von >1600x1200 nicht zerfliessen.

Dein Quelltext ist noch sehr ineffizient, aber das wirst du sicherlich noch ändern.
(Doctype etc fehlen ja auch noch...)
Ich empfehle dir auch, padding anstatt " " zu benutzen.
<div id="berichte">         Berichte</div>
Das ist ein Graus sry ;(

robbitop

2005-02-24, 13:25:52

ich bin blutiger Anfänger und mache das erst seit ein paar Tagen sorry :(
Aber danke für deine Antwort. Mit Padding bekomme ich das nicht hin, da das Div dann wieder größer wird irgendwie :confused:

astanoth

2005-02-24, 13:44:45

Ich nehme mal an, dass du Englisch kannst ;)
http://www.w3schools.com/default.asp

Einfach ein paar Tuts lesen. (Deutschsprachige habe ich noch keine wirklich guten gefunden.) Es gibt auch noch keine Seite, die alles über CSS oder HTML zeigen kann, also solltest du einfach ein bischen googlen und dich einlesen - nimm dir vor allem die Beispiele zu Herzen.
Und IE kompatibel sollte es von Anfang an sein.
Dein padding-Problem kann ich leider nicht rekonstruieren..? Hast du dich eventuell verschrieben?
Die Blätterfunktion, die du als Kopfnavigationversuchst, ist schon etwas anspruchsvoller und sollte, wenn du dessen mächtig bist, imho mittels PHP gelöst werden. Ein reines a:active würde nihct den gewünschten Effekt verursachen.

robbitop

2005-02-24, 13:53:29

Ich nehme mal an, dass du Englisch kannst ;)
http://www.w3schools.com/default.asp

Einfach ein paar Tuts lesen. (Deutschsprachige habe ich noch keine wirklich guten gefunden.) Es gibt auch noch keine Seite, die alles über CSS oder HTML zeigen kann, also solltest du einfach ein bischen googlen und dich einlesen - nimm dir vor allem die Beispiele zu Herzen.
Und IE kompatibel sollte es von Anfang an sein.
Dein padding-Problem kann ich leider nicht rekonstruieren..? Hast du dich eventuell verschrieben?
Die Blätterfunktion, die du als Kopfnavigationversuchst, ist schon etwas anspruchsvoller und sollte, wenn du dessen mächtig bist, imho mittels PHP gelöst werden. Ein reines a:active würde nihct den gewünschten Effekt verursachen.

Padding funktioniert jetzt danke :)
Das ganze mache ich statisch über HTML. PHP ist mir eine Nummer zu schwierig. Das Menü oben werde ich mit a.active machen, jedoch soll nicht das Div aufleuchten sondern die Schrift wird halt unterstrichen -> siehe Wikipedia.org.