Problem mit CSS-Layout Page

Ma-Ju · 3. April 2005

Hi, ich weiß nicht, ob ich hier im richtigen Forum bin oder ob das eher fürs CSS--Forum ist, weil ich nicht weiß, ob der Fehler im CSS Bereich oder im HTML Bereich liegt. Hier mein Problem:

Ich will meine HP zentriert haben, aber der Text soll von links kommen. Hier der Code: (head Bereich mit Link zu Stylesheets hab ich raus gelassen, um es lesbarer zu machen)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
</head> 
<body style="background-color:#FFB100;"> 
    <div id="header"> 
        <img src="img/banner.gif"> 
    </div> 
    <div id="menu"> 
                     Menü 
    </div> 
    <div id="content"> 
        Content 
    </div> 
                <div id="footer"> 
                    Footer 
                </div> 
<div style="clear:both;"> 

</body> 
</html>

Und hier die CSS Datei:

Code:

#header { 
width:600px; 
border:1px solid; 
} 
#menu { 
font-family:Verdana,Tahoma; 
font-size:12px; 
width:149px; 
height:400px; 
border-right:1px solid; 
border-left:1px solid; 
border-bottom:1px solid; 
float:left; 
text-align:left; 
} 
#content { 
font-family:Verdana,Tahoma; 
font-size:12px; 
width:450px; 
height:400px; 
border-right:1px solid; 
border-bottom:1px solid; 
float:left; 
overflow:auto; 
} 
#footer { 
font-family:Verdana,Tahoma; 
font-size:12px; 
width:600px; 
height:20px; 
border:1px solid; 
text-align:left; 
}

Help me please!

generador · 4. April 2005

Irgendwie hab ich dich nicht so ganz verstanden

Willst du alles zentrieren oder willst du den text von links einfliegen lassen
also das er in die page reinläuft

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
<head> 
</head> 
<body style="background-color:#FFB100;"> 
    <div id="header" align="center"> 
        <img src="img/banner.gif"> 
    </div> 
    <div id="menu" align="left"> 
                     Menü 
    </div> 
    <div id="content"> 
        Content 
    </div> 
                <div id="footer"> 
                    Footer 
                </div> 
<div style="clear:both;"> 

</body> 
</html>

hier ist der banner in der Mitte aber der Text steht links

um das zu erreichen kannst du align="left right oder center" einfügen

Gumbo · 4. April 2005

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
</head>

<body style="background-color:#FFB100;">
<div id="container">
	<div id="header"><img src="img/banner.gif"></div>
	<div id="menu">Menü</div>
	<div id="content">Content</div>
	<div id="footer">Footer</div>
	<div style="clear:both;">
</div>
</body> 
</html>

Code:

body {
	text-align:			center;
}
#container {
	margin:				0 auto;
	text-align:			left;
}

Maik · 4. April 2005

Ergänze dein DIV-Modell um ein weiteres DIV #center, das die vorhandenen DIVs umschliesst:

CSS-Code:

Code:

#center
{
position: absolute;
left: 50%;
width: 600px;
margin-left: -300px; /* negative Hälfte von width:600px = horizontal zentriertes DIV */
}

HTML-Code:

HTML:

<div id="center">

    <div id="header">
        <img src="img/banner.gif">
    </div>
    <div id="menu">
        Menü
    </div>
    <div id="content">
        Content
    </div>
    <div id="footer">
         Footer
    </div>
    <div style="clear:both;">

</div>

greez, maik.l

Ma-Ju · 4. April 2005

thx für die drei Auswahlmöglichkeiten, werde mal eine davon probieren.

Ma-Ju · 4. April 2005

Hmmm,komisch, keine der Antworten klappt. Also ich will das die ganze HP zentriert ist. Der Text soll aber nicht in der Mitte von diesen einzelnen div's sein, sondern links, aber noch im div drin.

Also entweder bleibt der ganze Text und auch der Rand links oder alle div's sind untereinander, Menü und Content sollen aber nebeneinander, also:

------------------------------Banner---------------------------------
------------------Menü-Content-----------------------------------
------------------Menü-Content-----------------------------------
------------------Menü-Content-----------------------------------
------------------Menü-Content-----------------------------------
------------------Menü-Footer-------------------------------------

Gumbo · 4. April 2005

Also bitte, natürlich funktioniert mein Vorschlag; allerdings beinhaltet er noch keinerlei Größenangaben.

Etwas mehr Eigeninitiative wäre nicht schlecht.

Maik · 4. April 2005

Wenn du mehrere Menü- und Content-DIVs verwenden willst, dann musst du die ID's #menu und #content in die CSS-Klassen .menu und .content umwandeln, da nur diese in einem Dokument mehrmals referenziert / eingebaut werden dürfen - ID's hingegen nur einmal ;-]

Hier der modifizierte HTML-Source mit vier DIV-Zeilen [ Browsercheck: FF 1.0.2, IE 5.5, MOZ 1.6, NN 7.0, OP 7.23 ]:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
#center
{
position: absolute;
left: 50%;
width: 602px;
margin-left: -301px; /* negative Hälfte von width:602px = horizontal zentriertes DIV */
}
#header {
width:600px;
border:1px solid;
}
.menu {
font-family:Verdana,Tahoma;
font-size:12px;
width:149px;
height:400px;
border-right:1px solid;
border-left:1px solid;
border-bottom:1px solid;
float:left;
text-align:left;
}
.content {
font-family:Verdana,Tahoma;
font-size:12px;
width:450px;
height:400px;
border-right:1px solid;
border-bottom:1px solid;
float:left;
overflow:auto;
}
#footer {
font-family:Verdana,Tahoma;
font-size:12px;
width:600px;
height:20px;
border:1px solid;
text-align:left;
}
-->
</style>

</head>
<body style="background-color:#FFB100;">

<div id="center">

    <div id="header">
        <img src="img/banner.gif">
    </div>

    <div class="menu">
         Menü
    </div>
    <div class="content">
        Content
    </div>
    <div class="menu">
         Menü
    </div>
    <div class="content">
        Content
    </div>
    <div class="menu">
         Menü
    </div>
    <div class="content">
        Content
    </div>
    <div class="menu">
         Menü
    </div>
    <div class="content">
        Content
    </div>
    
    <div id="footer">
         Footer
    </div>
<div style="clear:both;">

</div>

</body>
</html>

greez, maik.l

Ma-Ju · 4. April 2005

Gumbo hat gesagt.:
Also bitte, natürlich funktioniert mein Vorschlag; allerdings beinhaltet er noch keinerlei Größenangaben.

Etwas mehr Eigeninitiative wäre nicht schlecht.

Stimmt, deine Alternative klappt, ich habe allerdings ein Problem, den Content und den Footer neben das Menü zu bekommen, weil wenn ich float:right nehme, dann zeigt er mir den Bereich zwar rechts an, aber unter dem Menü. Wäre nett, wenn du mir noch den einen Code sagen könntest, da ich nicht so der Master in solchen Sachen bin.

@michaelsinterface
Nee, hast du falsch verstanden, ich wollte damit nur klar machen, dass der Footer unterden Content bereich und nicht auch noch unter das Menü sollte. Trotzdem thx

Und nochmal eine Frage an alle. Ich will den Contentbereich mit einem Scrollbalken machen. Sollte ich das mit der Eistellung "overflow:auto" machen oder sollte ich ein <textarea>-Textfeld dazu nehmen? Weil ich habe "overflow:auto" einmal benutzt und dann hat er mit dem Drehrad() nicht automatisch rntergescrollt, d.h. ich muss dann immer den Scrollbalken anklicken, was natürlich nicht so der Hype wäre.

Das wäre dann vorläufig alles.

Gumbo · 4. April 2005

Probier mal folgendes CSS:

Code:

body {
	text-align:			center;
}
#container {
	width:				50%;
	margin:				0 auto;
	text-align:			left;
}
#menu {
	float:				left;
	width:				33%;
}
#content {
	margin-left:			33%;
}

Problem mit CSS-Layout Page

Ma-Ju

Grünschnabel

generador

Erfahrenes Mitglied

Gumbo

Erfahrenes Mitglied

Maik

Ma-Ju

Grünschnabel

Ma-Ju

Grünschnabel

Gumbo

Erfahrenes Mitglied

Maik

Ma-Ju

Grünschnabel

Gumbo

Erfahrenes Mitglied

Neue Beiträge