css und <div>

JEGO · 21.10.2004, 13:01

Morgen zusammen....

ich hab folgendes Prob...
ich möchte ein Layout erstellen mit css und <div>

jedoch hab ich probleme mit der anzeige des Footer
der eigendlich unten stehen sollte....

Code:

<?php    
error_reporting(E_ALL);
echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n";
echo "         \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";
echo "<html>\n";
echo "    <head>\n";
echo "        <title>Test Seite</title>\n";
echo "        <SCRIPT src=\"style/drop_down.js\" type=text/javascript></SCRIPT> \n";
echo "        <link href=\"style/style2.css\" rel=\"stylesheet\" type=\"text/css\"> \n";
echo "        <link rel=\"stylesheet\" type=\"text/css\" href=\"style/page.css\" />\n";
echo "        <meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" />\n";
echo "    </head>\n";
echo "    <body>\n";
echo "            <div id=\"head\">\n"; // head
include "banner.php";
echo "            </div>\n";
echo "            <div id=\"links\">\n"; // linkes Menu
include "template/navi.tpl.htm";
echo "            </div>\n";
echo "            <div id=\"mitte\">\n"; // In der Mitte der Inhalt
include "inhalt.php";
echo "            </div>\n";
echo "            <div id=\"rechts\">\n"; // rechtes Menu
include "rechts.php";
echo "            </div>\n";
echo "            <div id=\"footer\">\n"; // unten Footer
include "template/footer.tpl.htm";
echo "            </div>\n";
echo "            <br style=\"clear:both;\" />\n"; // css-float beenden
echo "       </div>\n";

echo "    </body>\n";
echo "</html>";
?>

Hier der css code

Code:

#head {
    height: 85px;
}
#links {
    width: 100px;
    float:left;
}
#mitte {
	margin-left:10px;
	width:65%;
	height:350px;
    float:left;
	overflow:auto;
	SCROLLBAR-TRACK-COLOR: #ffffff;
	SCROLLBAR-FACE-COLOR: #ffffff;
	SCROLLBAR-HIGHLIGHT-COLOR: #E35524;
	SCROLLBAR-SHADOW-COLOR: #E35524;
	SCROLLBAR-3DLIGHT-COLOR: #ffffff;
	SCROLLBAR-ARROW-COLOR: #E35524;
	SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
}
#rechts {
	margin-left:10px;
	width:100px;
	float:left;
}
#footer {
	height:20px;
}

leider steht der Footer immer rechts neben der rechts.php
seht ihr den Fehler?
ich leider nicht....

danke für eure Hilfe.....

21.10.2004, 13:04

Du musst die Bereiche mit position:absolute;left

??px;top

??px dahinsetzen, wo Du sie haben willst.

Überlappende Bereiche umgehst Du, wenn DU jedem div ein z-index

?? verpasst, wobei die ??? nicht die Verbrecherjäger sind, sondern Zahlenwerte.

Für z-index gilt: je kleiner desto untendrunter

JEGO · 21.10.2004, 13:21

danke dir

JEGO · 21.10.2004, 13:35

blöde frage aber giebt es noch ne andere Möglichkeit, als feste Positionen?
und wie genau geht das mit dem z-index?

21.10.2004, 13:40

zu 2: http://de.selfhtml.org/navigation/quickbar/index.htm - im Dropdown CSS aufrufen und im 2. Dropdown dann den letzten Eintrag.

zu 1: gibt es mit position:relative; anstelle von position:absolute;

position:relative und z-index im Verbund empfehle ich Dir aber nur, wenn Du einen HTML-Quelltext lesen kannst und ohne WYSIWYG-Editor weißt, wie der Code als Seite aussieht.

Mit position:relative; setzt Du jedesmal quasi (vereinfacht gesagt) einen neuen "Nullpunkt" für nachfolgende DIVs - das gibt ein Kuddelmuddel.

Dann gibt es noch <table>, aber das weißt Du ja selbst.

position:relative; ist natürlich bei Zentrier-Wunsch die erste Wahl

JEGO · 21.10.2004, 13:56

Zitat:

position:relative; ist natürlich bei Zentrier-Wunsch die erste Wahl

genau darum geht es mir...

das mit dem z-index hab ich mir angeschaut.... danke jetzt hab ich zumindestens
darüber einen einblick

ich möchte eigendlich ein simples layout machen.

oben Header darunter 3 spalten und darunter der footer
das ganze centriert . wobei wichtg seien sollte, das die 3 spalten in % angegeben sind. wegen der verschiedenen bildschirmauflösungen

kannst du mir dabei helfen?

21.10.2004, 14:09

logisch kann ich - was glaubst Du , was das da oben die ganze Zeit ist

Mit % arbeite ich persönlich nicht so gerne, da sich die Texte immer so über verschieben.

Aber selbstverständlich kannst Du statt left:100px; und so auch left:10% angeben - ist nur ungleich schwerer.

800x600 ergibt (mit Scrollbalken, Startleiste und Menü im Browser meist einen MAX-Wert von 770x440px, bei 1024x768 sind es logischerweise 224 bzw. 168 Pixel mehr.

Dein Problem wirst Du (schon alleine wegen des Footers) am einfachsten mit sowas hier lösen:

Code:

<div align=center>
<TABLE BORDER=0 WIDTH="Pixelwert oder Prozent>
<TR>
	<TD colspan=3> header </TD>
</TR>
<TR>
	<TD> left </TD>
	<TD> middle </TD>
	<TD> right </TD>
</TR>
<TR>
	<TD colspan=3> footer </TD>
</TR>
</TABLE>
</div>

JEGO · 21.10.2004, 14:16

das heisst du würdest das grund layout mit einer Tabelle machen und nicht mit div?
und in die spalten erst die Div einsetzen.....

Zitat:

logisch kann ich - was glaubst Du , was das da oben die ganze Zeit ist

Danke für die hilfe

21.10.2004, 14:18

Zu Vorzug Tabellen....
Ja klar - nur weil Ferrari ein bisschen Glück im Rennsport hat, schmeiss ich doch meinen Ascona nicht weg

JEGO · 21.10.2004, 15:19

danke funzt.....

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
<div> Container über <select> Boxen legen	Zergling-new	HTML, Usability und Barrierefreiheit	14	19.01.2008 01:12
[CSS]vertical-align bei <div> anwenden	Matze	HTML, Usability und Barrierefreiheit	2	21.01.2007 18:39
Javascript, Anzeige eines <div> ändern	heohni	HTML, Usability und Barrierefreiheit	2	06.06.2006 14:11
<div> oder <table>		HTML, Usability und Barrierefreiheit	10	17.10.2005 17:32
<div> wächst nicht mit Bild...	stf.stream	HTML, Usability und Barrierefreiheit	4	01.06.2005 16:28
[Erledigt] <div> layout funtzt nicht!!		HTML, Usability und Barrierefreiheit	7	20.04.2005 19:10
[Erledigt] CSS: <DIV> Positionieren		HTML, Usability und Barrierefreiheit	1	18.02.2005 21:05
css: <img> und <div>	flyingeagle	HTML, Usability und Barrierefreiheit	7	18.02.2005 15:35
<div> ohne break	andrew22	HTML, Usability und Barrierefreiheit	7	04.01.2005 12:27
<div> Tabellen	Kofi	HTML, Usability und Barrierefreiheit	5	23.12.2004 13:52
JavaScript <div> an ort und stelle öffnen		HTML, Usability und Barrierefreiheit	1	14.12.2004 18:58
<h1> in <div>	Kofi	HTML, Usability und Barrierefreiheit	2	22.11.2004 09:29
vertiakle/horizontale Zentrierung im <div>		HTML, Usability und Barrierefreiheit	19	22.10.2004 22:20
text-align:center wirkt nicht auf <div>		HTML, Usability und Barrierefreiheit	6	22.08.2004 15:11
[Erledigt] von Frames auf <div>, probleme mit den alten Scripten.		PHP Tipps 2004	6	01.06.2004 17:23


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

21.10.2004, 13:04
Gast Beiträge: n/a	Du musst die Bereiche mit position:absolute;left??px;top??px dahinsetzen, wo Du sie haben willst. Überlappende Bereiche umgehst Du, wenn DU jedem div ein z-index?? verpasst, wobei die ??? nicht die Verbrecherjäger sind, sondern Zahlenwerte. Für z-index gilt: je kleiner desto untendrunter

21.10.2004, 13:21
JEGO Erfahrener Benutzer Registriert seit: 01.12.2003 Beiträge: 2.555 PHP-Kenntnisse: Anfänger	danke dir __________________ Gruß JEGO Ein PHP Script tut, was Du schreibst, nicht was Du willst.

21.10.2004, 13:35
JEGO Erfahrener Benutzer Registriert seit: 01.12.2003 Beiträge: 2.555 PHP-Kenntnisse: Anfänger	blöde frage aber giebt es noch ne andere Möglichkeit, als feste Positionen? und wie genau geht das mit dem z-index? __________________ Gruß JEGO Ein PHP Script tut, was Du schreibst, nicht was Du willst.

21.10.2004, 13:40
Gast Beiträge: n/a	zu 2: http://de.selfhtml.org/navigation/quickbar/index.htm - im Dropdown CSS aufrufen und im 2. Dropdown dann den letzten Eintrag. zu 1: gibt es mit position:relative; anstelle von position:absolute; position:relative und z-index im Verbund empfehle ich Dir aber nur, wenn Du einen HTML-Quelltext lesen kannst und ohne WYSIWYG-Editor weißt, wie der Code als Seite aussieht. Mit position:relative; setzt Du jedesmal quasi (vereinfacht gesagt) einen neuen "Nullpunkt" für nachfolgende DIVs - das gibt ein Kuddelmuddel. Dann gibt es noch <table>, aber das weißt Du ja selbst. position:relative; ist natürlich bei Zentrier-Wunsch die erste Wahl

21.10.2004, 14:09
Gast Beiträge: n/a	logisch kann ich - was glaubst Du , was das da oben die ganze Zeit ist Mit % arbeite ich persönlich nicht so gerne, da sich die Texte immer so über verschieben. Aber selbstverständlich kannst Du statt left:100px; und so auch left:10% angeben - ist nur ungleich schwerer. 800x600 ergibt (mit Scrollbalken, Startleiste und Menü im Browser meist einen MAX-Wert von 770x440px, bei 1024x768 sind es logischerweise 224 bzw. 168 Pixel mehr. Dein Problem wirst Du (schon alleine wegen des Footers) am einfachsten mit sowas hier lösen: Code: <div align=center> <TABLE BORDER=0 WIDTH="Pixelwert oder Prozent> <TR> <TD colspan=3> header </TD> </TR> <TR> <TD> left </TD> <TD> middle </TD> <TD> right </TD> </TR> <TR> <TD colspan=3> footer </TD> </TR> </TABLE> </div>

21.10.2004, 14:18
Gast Beiträge: n/a	Zu Vorzug Tabellen.... Ja klar - nur weil Ferrari ein bisschen Glück im Rennsport hat, schmeiss ich doch meinen Ascona nicht weg

21.10.2004, 15:19
JEGO Erfahrener Benutzer Registriert seit: 01.12.2003 Beiträge: 2.555 PHP-Kenntnisse: Anfänger	danke funzt..... __________________ Gruß JEGO Ein PHP Script tut, was Du schreibst, nicht was Du willst.