CSS Boxen

  • Themenstarter Themenstarter Comenius
  • Beginndatum Beginndatum
Status
Nicht offen für weitere Antworten.
C

Comenius

Guten Abend,
Ich habe zwar schon ein Thema angefangen, in dem es auch um meine Css-Problemchen ging, aber diesmal ist es ein neues Problem *nerv*

Ich habe mit css 4 Boxen gemacht.
eine fürs Logo, 2 Navigationen (links - rechts) und der Mittelteil.

Nun habe ich als logo ein Bild genommen es reingesetzt und angepasst.
Die linke Navigation ist auch soweit fertig - also auch mit in der Box.
Der Mittelteil besitzt nur eine Überschirft (in einen farbigen HTML-Balken geschrieben).
Und die linke Navigation ist noch leer.

soweit kein Problem... nur habe ich mich gewundert, dass die linke Navigationsbox 5px von links, 850px von rechts und 50px von oben steht und die linke Box, um auf genau der selben Höhe zu sein 5px von rechts, 850px von links und -38px von oben benötigt.

das -38px von oben, konnte ich irgendwie nicht richtig einortnen.
Natürlich sieht es so im IE 1A aus.
In Netscape, Opera und Firefox hingegen, ist es halt -38 von der linken Navigationsbox entfernt (So wie es ja normalerweise auch sein sollte!)

Dann frage ich mich nur, warum diese -38 auf der rechten seite genauso viel sind wie 50 auf der linken ...

Ich habe dann mal alle Boxen geleert und nur mit <br> gefüllt um zu sehen was passiert.
Naja, wenn ich es so mache, passt überhaupt nichts mehr.
Irgendwie gibt das alles für mich keinen sinn.

Ich packe mal den Code von der index.php und der style.css hier mit rein.

Code:
<html>
<head>
<title>Home</title>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css"> 
</head>
<body>
 
<div class="box1">
<img src="logo.jpg" width="189" height="46" alt="xxxx logo" border="0"> 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img src="logo2.jpg" width="397" height="48" alt="xxxx logo" border="0"> 
<?php
$timestamp = time();
$datum = date("d.m.Y",$timestamp);
$uhrzeit = date("H:i",$timestamp);
?>
<font face="Arial,Helvetica,Geneva,sans-serif" color="#7484af" size="2">
<B>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<?
echo $datum," - ",$uhrzeit," Uhr";
?>
</B>
</font>
</div>
 
 
<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>
<?echo "$status";?>
<form name="actionlogin" method="post" action="<?=$_SERVER[PHP_SELF]?>"> 
<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>
 
<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">
<br>
<br>
<br>
</div>
 
</body>
</html>

Eigentlich recht simpel.
In der ersten div-box sind Logo-Bild-Uhrzeit.
in der linken Navaigations-Box sind Login und Navigation.
Die Mitte hat nur eine Überschrift und die rechte Box besitzt nur
ein paar Zeilenumbrüche, damit man die Umrisse erkennen kann.

Nun habe ich mal alle Logos und Bilder etc. entfernt:

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

<div class="box1">
<br>
<br>
<br>
<br>
<br>
</div>
 
<div class="box2">
<br>
<br>
<br>
<br>
<br>
</div>
 
<div class="box3">
<br>
<br>
<br>
<br>
<br>
</div>
 
<div class="box4">
<br>
<br>
<br>
<br>
<br>
</div>
 
</body>
</html>

Warum ist nun alles total verzerrt ?
Wie kann ich es (mit Inhalt, also Logo etc.) machen, damit es in allen hier erwähnten Browsern (IE, Netscape, Mozilla, Opera) einigermaßen gleich aussieht ?

Ich Hoffe das sich jemand die mühe macht, den Code mal ein bisschen zu durchstöbern, denn ich weiss einfach nicht mehr weiter.

Danke :)
Gruss
Commi

 
Hi,

Ich denke schon, dass der HTML Code stimmt :)

Ich verstehe nur nicht, warum: wenn Logo etc. zwischen <div> und </div> stehen alles passt (naja passt ja auch nicht ... s.o.) und es bei den leeren boxen alles verschiebt.
 
Du hast mich gestern abend total missverstanden.

Es wäre interessant, den CSS-Code zu sehen, denn scheinbar liegt dort der Fehler ;-]
 
lol, sorry ... da bin ich wohl bissle aufm schlauch gestanden hrhr.

Ich wollte den CSS Code sowieso mit reinpacken, dass habe ich wohl verschwitzt :)

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

.box1{
padding:3px;
border:1px solid black;
margin-left:5px;
margin-right:5px;
margin-top:5px;
padding:0px 0px 0px 0px;}

.box2{
padding:3px;
border:1px solid black;
margin-left:5px;
margin-right:850px;
margin-top:50px;
padding:0px 0px 0px 0px;}

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

.box4{
padding:3px;
border: 1px solid black;
margin-left:850px;
margin-right:5px;
margin-top:-38px;
padding:0px 0px 0px 0px;}

Keine Ahnung, ob der gut oder schlecht ist ... Ich habe das mit diesen Boxen von einem Tutorial.
Vielleicht findest du ja da den Fehler ;)

Danke
Gruss
Commi
 
Du möchtest einen Header und darunter ein dreispaltiges Layout? Dann probier's mal hiermit:

Code:
.box1{
padding:3px;
border:1px solid black;
}

.box2{
padding:3px;
border:1px solid black;
float:left;
}

.box3{
padding:3px;
border:1px solid black;
float:left;
}

.box4{
padding:3px;
border: 1px solid black;
float:right;
}
 
Danke, aber ich verstehe nicht ganz wie ich die Boxen auf den gewünschten Platz bekomme ....

Kann man das einfach mit "left" "center" und "right" machen ?

Passen sich die Boxen dann der Grösse meines Inhalts an ?

Danke
Gruss
Commi
 
Comenius hat gesagt.:
ich verstehe nicht ganz wie ich die Boxen auf den gewünschten Platz bekomme ....

Kann man das einfach mit "left" "center" und "right" machen ?

Passen sich die Boxen dann der Grösse meines Inhalts an ?
  1. Auf welchen gewünschten Platz?
  2. Nein!
  3. .box2 und .box3 enthalten doch Tabellen mit festen Breiten, für die anderen DIVs müsstest du evtl. eine Weite bestimmen.
 
Hi,

Danke für den Code .... est ist wirklich "etwas" besser geworden.

Das Logo passt.

Linkes - und rechtes Navigations-Menü auch.

Aber der Mittelteil macht mir zu schaffen .... ich hab schon mit "relative" und "absolute" und auch mit Zahlen rumgespielt, aber irgendwie haut das nicht so hin.

Ich habe mal die index.php und die style.css auf den webspace geladen.

Ihr könnt es euch ansehen.

http://www.pc-ag-riedenburg.de

(beide Navi-Menüs sind gleich ... ist nur vorrübergehend, weil ich noch keinen Inhalt für das rechte habe)

Ich möchte es gerne so, dass der Mittelteil nicht doppelt vorhanden ist ...
Ausserdem habe ich festgestellt, - falls man es so lassen würde wie es jetzt ist - und dann das Fenster minimiert, sich alles verschiebt.

Es wird schon immer besser, aber das geht halt leider überhaupt nicht.

Ich habe jetzt gut ein paar Stunden hinprobiert mit Zahlen etc. Nunja, jetzt bin ich wieder hier :rolleyes:

Ich hoffe, dass mir wer helfen kann.

Danke :)
Gruss
Commi

- neuer css code -
- index.php hat sich nicht verändert. s.o. -
Code:
body{
margin:10px;
padding:0px;}
.box1{
padding:3px;
border:1px solid black;
}
.box2{
padding:3px;
border:1px solid black;
float:left;
}
.box3{
padding:3px;
border: 1px solid black;
float:left;
}
.box4{
padding:3px;
border: 1px solid black;
float:right;
}
 
Zuletzt bearbeitet von einem Moderator:
Ich möchte es gerne so, dass der Mittelteil nicht doppelt vorhanden ist ...
Du hast dieses DIV .box3 ja auch zweimal im Source stehen ;-]

Ausserdem habe ich festgestellt, - falls man es so lassen würde wie es jetzt ist - und dann das Fenster minimiert, sich alles verschiebt.
Bei floatenden DIVs mit festen Weitenangaben bzw. Inhalten (= bei dir Tabellen mit Weitenangabe) ist es normal, dass die DIVs nach unten umbrechen, sobald die erforderliche Gesamtbreite im Browserfenster unterschritten wird.

Dieses Problem lässt sich aber durch eine %-Angabe für die Weite der DIVs beheben.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück