• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

DIVs bzw. Ebenen zentrieren

Status
Für weitere Antworten geschlossen.

thummy

Neues Mitglied
Hallo, ich suche mir einen Wolf, finde aber nicht viel funktionierendes, bzgl. Ebenen. Ich möchte eine Ebene auf einer Webseite zentrieren, so dass Sie bzw. der Inhalt mittig angezeigt wird. [wie man es bei Tabellen macht(e)]. Durch welche Attribute kann ich dieses im Quelltext einrichten? Danke. Thum
 
Hi, nun der Quelltext wäre ja erstmal die Existenz der Ebene, aber auch die Parameter "margin: 0 auto;" habe ich sogar über ein css eingebunden, aber...... nüscht! Die Eben kuschelt immer noch mit den Kordianten links/oben. Muss ich die anderen Attribute auch ändern bzw. löschen? QT:
 
Da hat wohl etwas nicht geklappt. Ich sehe nach "QT:" nichts weiter. Keinen Quelltext. :shock:
 
So, erstmal danke, das Beispiel auf der Webseite hat geholfen.

Jetzt bleibt nur eins noch.

Wie schaffe ich es, dass eine Ebene in 3px Höhe dargestellt wird?
In Browser, sprich IE, bleibt das Ding ca. 19-20px groß?!

Das verstehe ich nicht.

Nur der FF stellt es richtig dar.
Die Voreinstellung DOCTYPE habe ich auch im Quelltext.

hier der QT der index.html:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<title>Ohne_Titel_1</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="top">
</div>

</body> 
</html>


und hier der css:

Code:
body
{
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
} 

#top
{
    width: 500px;
    height: 3px;
    margin: 0px auto;
    border:1px solid #444444
}



Gruß
Thum
 
Zuletzt bearbeitet von einem Moderator:
Wird bei mir auch im IE7 korrekt angezeigt. Hast du im #top vielleicht ein Leerzeichen oder anderen Inhalt drin? Browser-Cache aktualisiert?
 
Der IE6 stellt Blockelemente mindestens so hoch die jeweilige font-size / line-height da.
Wenn keine Schriftgröße angegeben wurde sind das 1em (oft ~16px).
Code:
#top
{
width: 500px;
height: 3px;
margin: 0px auto;
border:1px solid #444444;
[COLOR=DarkRed]overflow: hidden;[/COLOR]
}
overflow: hidden; verhindert das mitwachsen von Blockelementen. Der überstehende Inhalt wird "abgeschnitten".
 
hach! So langsam komme ich meinem Ziel näher!
Danke bisher!

Doch dann noch eine Situation.

Ich habe nun ein Grundseite fertg.
Jetzt habe ich ein Verständnis Problem.

QT - css:
Code:
body
{
    margin: 0;
    padding: 0;
    width:100%;
    height:100%;
}


#top
{
    
    width: 100%;
    height: 110px;
    background-image: url('pics/index/bg-top.png');
    overflow: hidden
    
} 

#topline
{
    
    width: 100%;
    height: 3px;
    overflow:hidden;
    background-color: #99CC66;
    
}

#colorbody
{

    width: 100%;
    height: 194px;
    background-color: #99cc66;
    overflow: hidden
    
    
}


#btmline
{
    
    width: 100%;
    height: 3px;
    background-color: #99cc66;
    overflow:hidden
        
}


#btm
{
    width: 100%;
    height: 110px;
    background-image:url('pics/index/bg-index.png');
    overflow: hidden
    
}


#website

{
    width: 1000px;
    height: 100%;
    position:relative;
    margin: 0px auto;
    z-index: 1;
    background-color:blue
}


QT - Seite:
<div id="Ebene" style="position: absolute; width: 1000px; height: 100%; z-index: 1; top: 0px; left: 0px">
</div>

Nun, dass der letzte Quellcode die Ebene nicht zentriert setzt, ist klar.
Und auch die Position ist festgelegt.

Aber hier kann ich die Ebene über alle anderen drüber legen.
Setzte ich die Attribute um, legt sich die Ebene in die erste und zieht sie lang.

Wie kann ich eine Ebene erstellen, die sich über andere legt, sich aber zentriert verhält?

Danke.
 
Zuletzt bearbeitet von einem Moderator:
@ thummy

Bitte die Forenregeln durchlesen und die Code-Tags verwenden, wenn du Codes im Forum postest.
Danke.
 
Bitte verwende Code-Tags in deinen Forenbeiträgen. Ist sonst sehr schlecht lesbar.

Wie kann ich eine Ebene erstellen, die sich über andere legt, sich aber zentriert verhält?

Rein theoretisch indem du 2 Ebenen übereinander legst und den Inhalt der einen zentriert. Beispiel:

HTML
Code:
<div id="drunter">das hier steht drunter</div>
<div id="drueber">
<div id="zentriert">
das hier ist zentriert
</div>
</div>

CSS
Code:
#drunter { position: absolute;top: 0px;left: 0px;width: 200px;height: 200px;z-index: 10; }
#drueber { position: absolute;top: 0px;left: 0px;width: 200px;height: 200px;z-index: 100; }
#zentriert { margin: 0px auto;width: 120px; }
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben