XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Div´s positionieren.... (http://xhtmlforum.de/showthread.php?t=51143)

Takko 28.03.2008 18:22

Div´s positionieren....
 
Liste der Anhänge anzeigen (Anzahl: 1)
Hi Zusammen,


ich hab folgendes Problem:

Ich möchte die oberste Box (Box für Logo) zentriert und vom oberen Rand ca. 50px entfernt haben. Zentrieren funktioniert in den Browsern nur beim Abstand funktioniert das nicht. Beim IE wird die Seite korrekt angezeigt nur bei FF und OP ziehts mir den gesamten Inhalt, sprich den "Hauptcontainer" mit nach unten. Den Quelltext hab ich als Datei angehängt weil ich nicht wusste obs erlaubt is den QT direkt ins Fenster zu schreiben.

Wo liegt der Fehler und wie behebe ich den???

Wie positioniert ihr eigtl. die Div´s?? Gibts da ne bestimme "Formel" wie man was wo anwendet oder bleibt das jedem selber überlassen.

Danke.....

Bye....

Crizzo 28.03.2008 18:25

Zitat:

Zitat von Takko (Beitrag 378718)
Den Quelltext hab ich als Datei angehängt weil ich nicht wusste obs erlaubt is den QT direkt ins Fenster zu schreiben.

Nicht nur erlaubt, sondern sehr erwünscht, siehe "Wie im Forum am besten geholfen werden kann". ;)

Um eine Box/ ein Blockelement zu zentrieren gibst du ihm:
Code:

#box {margin:0 auto; }
Einen Abstand nach oben regelst du per "margin": margin: Außenabstand: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Takko 28.03.2008 23:00

Danke erstmal BlackHawk,


leider beantwortet das auch nicht meine frage. Wie man DIV´s zentriert weiß ich bereits hehe...was ich genauer wissen wollte ist---> Was muss ich machen das ich die BOX FÜR LOGO z.B 50px von oben verschieben kann?

Wenn ich "margin 50px auto" benutz wird zwar das Div zentriert aber der Abstand stimmt nicht weils den gesamten HAUPTCONTAINER nach unten verschiebt. Ausser im IE da wirds richtig angezeigt. Bei FF und OP verschiebt sich alles.

Ich hab mal den QT mitreinkopiert...evtl. krieg ich ja mehr Antworten :mrgreen:

Danke....




<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XXX</title>

<style type="text/css" media="screen">

<!--


#Hauptcontainer { background-color: #333333;
color: #CCCCCC;
width: 100%;
height: 1200px;
margin: 0px auto; }

#Inhalt { background-color: FF9900;
color: #CCCCCC;
width: 900px;
height: 1200px;
margin: 0px auto; }

#Seitenelement { background-color: #0066FF;
color: #CCCCCC;
width: 60px;
height: 1200px;
float: left;
margin-left: 0px;
margin-bottom: 0px; }

#BoxfürLogo { background-color: #996633;
color: #CCCCCC;
width: 700px;
height: 80px;
margin: 0px auto;
text-align: center; }

#BoxfürÜberschrift { background-color: #00FF00;
color: #CCCCCC;
width: 700px;
height: 200px;
margin: 60px auto; }


-->




</style>

</head>

<body>

<div id="Hauptcontainer">

<div id="Inhalt">





<div id="Seitenelement">
</div>


<div id="BoxfürLogo">Box für Logo
</div>


<div id="BoxfürÜberschrift">
<img src="Überschrift.jpg" alt="Kurzbeschreibung" />
</div>


<div id="BoxfürFoto">
</div>


<div id="BoxfürTexte">
</div>





</div>

</div>


</body>
</html>
[/LEFT]

Crizzo 28.03.2008 23:10

Code:

#boxlogo {position:relative;
top:50px;
}

So besser?


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:35 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023