✔ CSS Boxen

Comenius · 14. April 2005

Ok, dass mit "%" werde ich morgen mal probieren.

Aber ich verstehe nicht ganz, wo die DIV .box3 zweimal vorhanden sein soll.

Ich habe gerade nochmal alles durchgesehen, aber keinen Fehler gefunden.

Stehe ich vielleicht gerade aufm Schlauch ?

Gruss
Commi

Maik · 14. April 2005

Am Seitenende folgt ein zweites DIV.box3:

Code:

<html>
<head>
<title>Home</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css"> 
</head>
<body>

<!-- [########## LOGO-UHRZEIT-LOGOUT ##########] -->
<div class="box1">

<img src="logo.jpg" width="189" height="46" alt="pc-ag logo" border="0"> 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<IMG HEIGHT=48 WIDTH=397 SRC="logo2.jpg" BORDER=0 ALT="">

<font face="Arial,Helvetica,Geneva,sans-serif" color="#7484af" size="2"><B>
&nbsp;&nbsp;&nbsp;
14.04.2005 - 21:45 Uhr</B></font>

</div>

<br>

<!-- [########## LOGIN-NAVIGATION ##########] -->
<div class="box2">


<table cellpadding="0" cellspacing="0" width="130" style="border-style:outset; border-bottom-width:thin; border-left-width:thin;border-right-width:thin;border-top-width:thin; border-color:#FFFFFF;">
<tr>
<td bgcolor="#708090" align="middle" border="0"></td>
<td bgcolor="#708090" valign="middle" border="0">
<font face="Arial,Helvetica,Geneva,sans-serif" color="#F2F2F2" size="2">
&nbsp;<b>Login</b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="2">   
<font face="Arial,Helvetica,Geneva,sans-serif" color="#7484af" size="2">
<br>
<form name="actionlogin" method="post" action="/index.php"> 
<label class="leftkurz">&nbsp;&nbsp;<b>Nick:</b></label>  
<input name="Nickname" type="text" size="30" id="Nick" class="loginform" value=""> <br>
<label class="leftkurz">&nbsp;&nbsp;<b>Pass.:</b></label>  
<input name="Pass" type="password" size="30" id="Pass" class="loginform" value=""> <br>
<input type="hidden" name="login" value="1"> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="actionlogin" class="loginbutton" value="Login"><br>
&nbsp;&nbsp;<a href="forget.php" class="text3u">Passwort vergessen?</a><br>
&nbsp;&nbsp;<a href="registrieren.php" class="text3u">registrieren</a><br>
<br>
</font>
</td>
</tr>
</table>
</form>

<table cellpadding="0" cellspacing="0" width="130" style="border-style:outset; border-bottom-width:thin; border-left-width:thin;border-right-width:thin;border-top-width:thin; border-color:#FFFFFF;">
<tr>
<td bgcolor="#708090" align="middle" border="0"></td>
<td bgcolor="#708090" valign="middle" border="0">
<font face="Arial,Helvetica,Geneva,sans-serif" color="#F2F2F2" size="2">
&nbsp;<b>Navigation</b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="2">   
<font face="Arial,Helvetica,Geneva,sans-serif" size="2" color="#000000">
<br>
&nbsp;&nbsp;<a href="Home.php" class="navitext"><b><h6>Home</h4></b></a><br>
&nbsp;&nbsp;<a href="Hardware.php" class="navitext"><b><h5>Hardware</b></a><br>
&nbsp;&nbsp;<a href="Software.php" class="navitext"><b><h4>Software</b></a><br>
&nbsp;&nbsp;<a href="Zubehoer.php" class="navitext"><b><h3>Zubehör</b></a><br>
&nbsp;&nbsp;<a href="Gaestebuch.php" class="navitext"><h2><b>Gästebuch</b></a><br>
&nbsp;&nbsp;<a href="Forum.php" class="navitext"><b><h1>Forum</b></a><br>
&nbsp;&nbsp;<a href="Chat.php" class="navitext"><b>Chat</b></a><br>
&nbsp;&nbsp;<a href="Download.php" class="navitext"><b>Download</b></a><br>
<br>
</font>
</td>
</tr>
</table>
</div>


<!-- [########## MITTELÜBERSCHRIFT-MITTELTEIL ##########] -->
<div class="box3">
<table cellpadding="0" cellspacing="0" width="685px" style="border-style:outset; border-bottom-width:thin; border-left-width:thin;border-right-width:thin;border-top-width:thin; border-color:#FFFFFF;">
<tr>
<td bgcolor="#708090" align="middle" border="0"></td>
<td bgcolor="#708090" valign="middle" border="0">
<font face="Arial,Helvetica,Geneva,sans-serif" color="#F2F2F2" size=3">
<center><b>Home</b></center>
</font>
</td>
</tr>
</table>

<br>

</div>


<!-- [########## --- ##########] -->
<div class="box4">


<table cellpadding="0" cellspacing="0" width="130" style="border-style:outset; border-bottom-width:thin; border-left-width:thin;border-right-width:thin;border-top-width:thin; border-color:#FFFFFF;">
<tr>
<td bgcolor="#708090" align="middle" border="0"></td>
<td bgcolor="#708090" valign="middle" border="0">
<font face="Arial,Helvetica,Geneva,sans-serif" color="#F2F2F2" size="2">
&nbsp;<b>Login</b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="2">   
<font face="Arial,Helvetica,Geneva,sans-serif" color="#7484af" size="2">
<br>
<form name="actionlogin" method="post" action="/index.php"> 
<label class="leftkurz">&nbsp;&nbsp;<b>Nick:</b></label>  
<input name="Nickname" type="text" size="30" id="Nick" class="loginform" value=""> <br>
<label class="leftkurz">&nbsp;&nbsp;<b>Pass.:</b></label>  
<input name="Pass" type="password" size="30" id="Pass" class="loginform" value=""> <br>
<input type="hidden" name="login" value="1"> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="actionlogin" class="loginbutton" value="Login"><br>
&nbsp;&nbsp;<a href="forget.php" class="text3u">Passwort vergessen?</a><br>
&nbsp;&nbsp;<a href="registrieren.php" class="text3u">registrieren</a><br>
<br>
</font>
</td>
</tr>
</table>
</form>

<table cellpadding="0" cellspacing="0" width="130" style="border-style:outset; border-bottom-width:thin; border-left-width:thin;border-right-width:thin;border-top-width:thin; border-color:#FFFFFF;">
<tr>
<td bgcolor="#708090" align="middle" border="0"></td>
<td bgcolor="#708090" valign="middle" border="0">
<font face="Arial,Helvetica,Geneva,sans-serif" color="#F2F2F2" size="2">
&nbsp;<b>Navigation</b>
</font>
</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" colspan="2">   
<font face="Arial,Helvetica,Geneva,sans-serif" size="2" color="#000000">
<br>
&nbsp;&nbsp;<a href="Home.php" class="navitext">Home</a><br>
&nbsp;&nbsp;<a href="Hardware.php" class="navitext">Hardware</a><br>
&nbsp;&nbsp;<a href="Software.php" class="navitext">Software</a><br>
&nbsp;&nbsp;<a href="Zubehoer.php" class="navitext">Zubehör</a><br>
&nbsp;&nbsp;<a href="Gaestebuch.php" class="navitext">Gästebuch</a><br>
&nbsp;&nbsp;<a href="Forum.php" class="navitext">Forum</a><br>
&nbsp;&nbsp;<a href="Chat.php" class="navitext">Chat</a><br>
&nbsp;&nbsp;<a href="Download.php" class="navitext">Download</a><br>
<br>
</font>
</td>
</tr>
</table>
</div>


<!-- [########## MITTELÜBERSCHRIFT-MITTELTEIL ##########] -->
<div class="box3">
<table cellpadding="0" cellspacing="0" width="685px" style="border-style:outset; border-bottom-width:thin; border-left-width:thin;border-right-width:thin;border-top-width:thin; border-color:#FFFFFF;">
<tr>
<td bgcolor="#708090" align="middle" border="0"></td>
<td bgcolor="#708090" valign="middle" border="0">
<font face="Arial,Helvetica,Geneva,sans-serif" color="#F2F2F2" size=3">
<center><b>Home</b></center>
</font>
</td>
</tr>
</table>

<br>


</div>

</body>
</html>

Comenius · 14. April 2005

Ohha... Danke :-(

Das habe ich total übersehen.

Naja, wenn ich morgen mal Zeit habe, verusche ich das mit den "%" hinzubekommen.

Eine Frage noch, bevor ich wieder auf gut Glück los-bastle.

Muss ich nur den Mittelteil mit % machen oder alle ?

THX
Gruss
Commi

Maik · 15. April 2005

Wenn du mit %-Angaben arbeiten willst, müsstest du alle drei nebeneinander liegenden DIVs auf diese Weise formatieren. Oder wie willst du sonst den prozentualen Restwert für das mittlere DIV ermitteln, wenn die beiden äusseren eine feste Breite haben?

Eine andere Möglichkeit besteht darin, die beiden äusseren DIVs zu positionieren und dem mittleren DIV width:auto, sowie ein entsprechendes margin nach links und rechts zu geben:

Code:

body
{
padding: 0px;
margin: 0px;
}

#head
{
height: 50px;
margin: 10px;
padding: 0px;
border: 1px solid #000000;
}

#content
{
width: auto;
padding: 0px;
margin: 0px 150px; /* Aussenabstand oben-unten / links-rechts */
border: 1px solid #000000;
}

#leftMenu
{
position: absolute;
top: 70px;
left: 10px;
width: 130px;
height: 300px;
margin: 0px;
padding: 0px;
background-color: #000000;
}

#rightMenu
{
position: absolute;
top: 70px;
right: 10px;
width: 130px;
height: 300px;
margin: 0px;
padding: 0px;
border: 1px solid #000000;
}

Im HTML-Source ist für die DIVs folgende Reihenfolge zu beachten:

HTML:

<div id="head"></div>

<div id="content"></div>

<div id="leftMenu"></div>

<div id="rightMenu"></div>

Und hier der komplette Source:

HTML:

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

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

#head
{
height: 50px;
margin: 10px;
padding: 0px;
border: 1px solid #000000;
}

#content
{
width: auto;
padding: 0px;
margin: 0px 150px; /* Aussenabstand oben-unten / links-rechts */
border: 1px solid #000000;
}

#leftMenu
{
position: absolute;
top: 70px;
left: 10px;
width: 130px;
height: 300px;
margin: 0px;
padding: 0px;
background-color: #000000;
}

#rightMenu
{
position: absolute;
top: 70px;
right: 10px;
width: 130px;
height: 300px;
margin: 0px;
padding: 0px;
border: 1px solid #000000;
}
-->
</style>

</head>
<body>

<div id="head"></div>

<div id="content"></div>

<div id="leftMenu"></div>

<div id="rightMenu"></div>

</body>
</html>

[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]

Comenius · 15. April 2005

Hehe, Cool .... funktioniert alles super Danke dir.

Ein letztes Problem habe ich allerdings noch.

Wenn ich jetzt das ganze minimiere, dann geht die rechte Navi-Box mit dem Bildschirm mit.

Das gefällt mir eigentlich ja auch, aber je kleiner man dann das Fenster macht, umso mehr Platz (also mehr Zeilen) braucht der Mittlere Teil.

Kann man die Rechte und die Mittlere Box Fest machen / verankern ?

Das wäre super, denn dann kann ich beruhigt mit php weiter machen, da hab ich nicht so viele Probleme *g*

Ne, wäre echt Toll, wenn du mir das vielleicht noch zeigen könntest.

Gruss
Commi

- auf http://www.pc-ag-riedenburg.de kann man es auch nochmal sehen.
Das Logo besteht im mom noch aus 2 Bildern, deswegen verschiebt es sich auch, wenn man das Fenster zu weit nach links zieht. Werde ich demnächst ändern. -

Maik · 15. April 2005

Seltsam, um 14:49 Uhr habe ich von tutorial.de diese Email erhalten:

Hallo,

Comenius hat auf das von Dir abonnierte Thema 'CSS Boxen' im Forum 'CSS' von tutorials.de geantwortet.

Dieses Thema ist hier zu finden:
http://www.tutorials.de/forum/showthread.php?t=200276&goto=newpost

Dies ist der Beitrag, der gerade geschrieben wurde:
***************
Hehe, Cool .... funktioniert alles super Danke dir.

Ein letztes Problem habe ich allerdings noch.

Ich habe gerade versucht, den Blauen Balken in der Mitte, der Box-Grösse anzupassen.

Dazu habe ich % genommen.

bei 70%-Länge ist der Balken im IE genau passend und im Firefox gerade mal bei der Hälfte.

Kann man da vielleicht noch was machen ?

Wäre echt Klasse, wenn du mir da vielleicht nochmal helfen könntest.

Also, Danke nochmal, funktioniert alles prima

Gruss Commi

Aktuell hast du auf deiner Online-Version für den blauen Balken eine Tabelle mit dem Attribut width="700px". (rotmarkiert, weil die Einheit px dort nicht hingehört!) Diese feste Breitenangabe hebt aber die dynamische Breite -mittels width: auto und margin: 0 150px- für das contentDIV auf, und lässt die rechte NaviBox nun über ihm herschieben, wenn das Browserfenster in der Breite minimiert wird.

Wenn ich die Tabelle mit einer 100%-Weite in meinem zuletzt gezeigten HTML-Source im contentDIV einfüge, passt sich auch die Tabellenbreite der DIV-Breite an:

HTML:

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

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

#head
{
height: 50px;
margin: 10px;
padding: 0px;
border: 1px solid #000000;
}

#content
{
width: auto;
padding: 0px;
margin: 0px 150px;
border: 1px solid #000000;
}

#leftMenu
{
position: absolute;
top: 70px;
left: 10px;
width: 130px;
height: 300px;
margin: 0px;
padding: 0px;
border: 1px solid #000000;
}

#rightMenu
{
position: absolute;
top: 70px;
right: 10px;
width: 130px;
height: 300px;
margin: 0px;
padding: 0px;
border: 1px solid #000000;
}
-->
</style>

</head>
<body>

<div id="head">head</div>

<div id="content">
<table cellpadding="0" cellspacing="0" style="width:100%; border-style:outset; border-bottom-width:thin; border-left-width:thin;border-right-width:thin;border-top-width:thin; border-color:#FFFFFF;">
<tr>
<td bgcolor="#708090" align="middle" border="0"></td>
<td bgcolor="#708090" valign="middle" border="0">
<font face="Arial,Helvetica,Geneva,sans-serif" color="#F2F2F2" size=3">
<center><b>Home</b></center>
</font>
</td>
</tr>
</table>
</div>

<div id="leftMenu">leftMenu</div>

<div id="rightMenu">rightMenu</div>

</body>
</html>

[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]

Achtung: Bei deiner Online-Version fehlt die Doctype-Angabe, was im IE zu Darstellungsproblemen führen kann. Wie z.B. die dynamische Tabellenbreite mit 100%, die nach rechts so weit ausgedehnt wird, dass die Seite nun horizontal gescrollt werden kann ;-]

Mit deinem ursprünglichen CSS-Konzept wolltest du doch erreichen, dass das mittlere DIV eine dynamische Breite erhält:

Code:

.box3{
padding:3px; 
border:1px solid black;
margin-left:150px;
margin-right:150px;
margin-top:-350px;
padding:0px 0px 0px 0px;}

Wenn das Browserfenster in der Breite minimiert wird, dann zieht sich in meinem Beispiel das contentDIV zusammen. Darin enthaltende Texte werden dann im Textfluss umbrochen und erzeugen mehr Zeilenumbrüche, sprich die DIV-Höhe erhöht sich.

Du kannst diesem DIV eine feste Höhe geben und es mit overflow: auto scrollfähig gestalten.

Comenius · 15. April 2005

löl ... jo ich wollte es "editieren" und auf einmal war alles weg ... ich muss Windoof mal wieder neu machen. Es ruckelt nur noch alles so vor sich hin *g*

Hmmm, nagut. Hört sich ja nicht schlecht an. Dann werde ich mich mal ranmachen.

Danke erstmal.

Gruss
Commi

Comenius · 15. April 2005

Oki Doki, der Balken läuft mit und das mit dem Scrollbalken funktioniert auch

Hmmmm michaelsinterface .... Du hast mir wirklich sehr geholfen. Jetzt klappt alles.

Danke

Gruss
Commi

✔ CSS Boxen

Comenius

Maik

Comenius

Maik

Comenius

Maik

Comenius

Comenius

Neue Beiträge