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

Text Zentrierung

Bokii

Neues Mitglied
Hallo zusammen,

wie kann ich das div horizentral zentrieren? Also das ich die höhe noch selber ändern kann.


<div
style="position: absolute; margin-top: 294px; margin-left: 85px; top: 0px; left: 8px; width: 103px; height: 95px;">bliblablub</div>


Wäre sehr hilfreich wenn ihr mir ein Tipp geben könntet.
Bitte nicht so kompliziert!!

Danke schonmal für eure antworten!

MfG
 
Zuletzt bearbeitet:
Hallo zusammen,

wie kann ich das div horizentral zentrieren? Also das ich die höhe noch selber ändern kann.
Code:
<div
 style="position: absolute; margin-top: 294px; margin-left: 85px; top: 0px; left: 8px; width: 103px; height: 95px;">bliblablub</div>
Wäre sehr hilfreich wenn ihr mir ein Tipp geben könntet.
Bitte nicht so kompliziert!!

Danke schonmal für eure antworten!

MfG Jan

Hallo Jan,

vergiss absolute Positionierungen, solange Du nicht 100% fit mit CSS bist!
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="text">bliblablub</div>
</html>
CSS:
Code:
.text {
margin:294px auto 0;
padding:0;
}
Die CSS-Datei speicherst Du unter dem Namen style.css und legst sie in den
gleichen Ordner, in dem auch das HTML-Dokument liegt => fertig.

In diese Datei schreibst Du auch alle anderen Angaben, die mit dem Aussehen
zu tun haben, denn diese haben im HTML nichts zu suchen.

Grüße
Bernhard
 
Wenn ich den Quelltext habe, habe ich ja ganz viele <divs>, muss ich die dann in der .css alle definieren?
Danke für deine Erklärung!
 
Zuletzt bearbeitet:
Grundsätzlich ja.
Dabei gibst du ihnen eine sinnvoll-erklärende Bezeichnung.
Nehmen wir mal den ersten Div als Beispiel:
bisher:
Code:
<div style="margin: 0pt auto; width: 1000px;">
neu HTML:
Code:
<div id="wrapper">

neu in der CSS-Datei:
Code:
#wrapper {
margin: 0 auto;
width: 1000px;
}

Auf diese Weise wird alles viel übersichtlicher.
Vermutlich benötigst du aber sehr viele bisherigen Div's überhaupt nicht, weil du sie in ddie drei bis vier Hauptbereiche deines Layout zusammenfassen kannst. Dadurch sparst du nochmals enorm an Quelltext.
Fertige also zunächst mal nur das Grobgerüst. Dazu sollten 3 bis 5 Div's reichen.

Ein div ist darüber hinaus auch nicht immer notwendig, weil es speziellere Elemente gibt wie z.B. die Überschriften h1-h6, ul-Listen, Absätze usw. Auch die lassen sich per CSS formatieren, ohne dass es eines gesonderten Div's bedarf.

Noch ein kleiner Hinweis:
margin: 0pt auto;
Wenn du einen "Null-Wert" hast kannst du hinter der Null die Einheit weglassen. Deshalb kürzer:
Code:
margin: 0 auto;
 
So, hier ein Beispiel:

lol

Html:
<html><head>
<link href="style.css" rel="stylesheet" type="text/css"><title>test</title></head><body>
<div id="home">Home</div>
<div id="news">News</div>
<div id="junior">RoboCup Junior</div>
<div id="galerie">Galerie</div>
<div id="sponsoren">Sponsoren</div>
</body></html>
CSS:
#home
{
width: 990px;
margin: 30px auto;
}

#news
{
width: 990px;
margin: 30px auto;
}

#junior
{
width: 990px;
margin: 30px auto;
}

#galerie
{
width: 990px;
margin: 30px auto;
}

#sponsoren
{
width: 990px;
margin: 30px auto;
}
_____________________________

Dann habe ich aber das Problem das ich sie nicht in der Höhe verschieben kann. Sie reihen sich immer unter den anderen an, oder muss ich dann IRGENDWO in den minus bereich??

Bisher VIEL Übersichtlicher!! Danke
 
Hallo Bokii,

das geht noch viel übersichtlicher!

So, hier ein Beispiel:

lol

Html:
CSS:
_____________________________

Dann habe ich aber das Problem das ich sie nicht in der Höhe verschieben kann. Sie reihen sich immer unter den anderen an, oder muss ich dann IRGENDWO in den minus bereich??

Bisher VIEL Übersichtlicher!! Danke

Gewöhn Dir am besten gleich korrektes Einrücken an, dann behältst Du auch bei
umfangreichen Codes die Übersicht.

Eine Auflistung von Links zeichnest Du als Liste aus:

Code:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>test</title>
</head>
<body>
<ul class="navi">
       <li id="home"><a href="#">Home</a></li>
       <li id="news"><a href="#">News</a></li>
       <li id="junior"><a href="#">RoboCup Junior</a></li>
       <li id="galerie"><a href="#">Galerie</a></li>
       <li id="sponsoren"><a href="#">Sponsoren</a></li>
</ul>
</body>
</html>
Die IDs für die einzelnen Listenelemente brauchst Du nur, wenn Du sie unterschiedlich
formatieren willst (z.B. jedem ein anderes Hintergrundbild geben willst)...

CSS:

Code:
ul.navi {
margin:30px auto;
list-style-type:none;
}
ul.navi li {
float:left;
width:99px;
}
Grüße
Bernhard
 
Danke für deine Hilfe.

Eine Frage habe ich noch!

Wie kann ich 2 divs übereinander legen? Die margin Angaben beziehen sich ja immer auf den Vorgänger!

Vielen, vielen Dank
 
Zuletzt bearbeitet:
Das zum beispiel zwischen home und news nur 4 pixel sind und zwischen news und robocup 20 pixel.

Wenn home oben ist und news darunter, dann weise #news folgendes zu:
Code:
margin-top: 4px;

Entsprechend gibt es margin-right, margin-bottom und margin-left.
 
Wie kann ich 2 divs übereinander legen? Die margin Angaben beziehen sich ja immer auf den Vorgänger!

Wegen dem Hintergrundbild!
 
Zuletzt bearbeitet:
Da brauchst du lediglich ein Div, dem du dann ein Hintergrundbild zuweist.

CSS-Beispiel:

Code:
#container {
background-image: url(deinbild.jpg);
background-repeat: no-repeat; /*falls Wiederholung (Kachelung) nicht erwünscht*/
}
Ggf. noch eine bestimmte Höhe und Breite entsprechend der Grafik zuweisen.

HTML:
Code:
<div id="container">Text und Inhalt</div>

Wenn der Inhalt von #container etwas Innenabstand zum Rand haben soll, dann weise in CSS noch einen padding-Wert zu.
 
Zurück
Oben