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

Wie mach ich das mit divs ?

Status
Für weitere Antworten geschlossen.
W

web673

Neues Mitglied
hallo

ich habe derzeit auf meiner homepage (star-gate-universe.de) ein tabellendesign, zumindest auf der ersten seite.

ich würde gerne wissen wie ich das horizontal und vertikal mit einer css datei zentriere und wie ich die divs anlegen kann, damit die startseite richtig zusammengesetzt ohne lücken ist.. (man sieht ja das es zz auf der ersten seite tabellenmäßig aufgebaut ist)

gruß

web673

und ja ich habe die sufu benützt.. (nichts funktionierendes gefunden)
 
xDDD

gehört zwar net hin aber stargate isd cool ich kenne alle folgen ;)

mit divs würde ich das so machen:


Code: 
<div style="overflow: auto; position: absolute; width: [COLOR=DarkOrange]"breite einfügen"[/COLOR]px; height: [COLOR=DarkOrange]"Höhe einfügen"[/COLOR]px; left: [COLOR=DarkOrange]"Wie groß der abstand von links sein soll"[/COLOR]px; top: [COLOR=DarkOrange]"Abstand von oben"[/COLOR]px">

</div>

P.S musst du halt bearbeiten ich machs net für dich :D

aber wenne hilfe brauchst mail mir einfach^^
 
ich würde den CSS-Code gleich in eine extra CSS-Datei auslagern, dann muss man nur diese Datei verändern, und nicht jedes mal die ganzen einzelnen Seiten, wenn man etwas an einem Div verändern will/muss.
 
Ich mache den Aufbau immer so:

<div id="main"> width:1000px
<div id="left"> float:left;width:200px </div>
<div id="left"> float:left;width:800px </div>
</div>

Das floaten bewirkt, dass die divs nebeneinander rücken - wenn der Platz reicht. Navigationen kann man gut mit ul+li aufbauen. Dem ganzen gibt man noch Attribute wie Hintergrundbild, padding usw. Und kümmert sich mit einem IE-Hack um den Internet Explorer, der sein eigenes Ding macht.
 
Eine Idee dazu:
Code: 
<div id="alles">
<div id="alles_innen">
<ul>
<li id="li_1"><a href="#"></a></li>
<li id="li_2"><a href="#"></a></li>
<li id="li_3"><a href="#"></a></li>
<li id="li_4"><a href="#"></a></li>
<li id="li_5"><a href="#"></a></li>
<li id="li_6"><a href="#"></a></li>
<li id="li_7"><a href="#"></a></li>
</ul>
</div>
</div>
  • #alles für height: 100%; die horizontale Zentrierung und die Grafik mit den Seiten.
  • #ul für position: relative;
  • #alles_innen für die vertikale Zentrierung.
  • #li_1 bis #li_7 werden absolute positioniert und bekommen die zerschnittenen Grafiken.
  • ul li a bekommen die Grafiken mit den Texten
Am schwierigsten dürfte die vertikale Zentrierung sein.
Lese dazu mal ab hier abwärts:
http://www.html.de/html-und-xhtml/20388-div-zentrieren-2.html#post163578


In deinem Fall passen alle dort beschriebenen Beispiele nicht so richtig.
Entweder basieren sie auf Boxen mit prozentueller Höhe oder sind nur für sehr kleine Boxen geeignet. Am ehesten würde der zweite Beispiel-Link von prm in Frage kommen.
Den müsstest du von em in px umschreiben.

Das Beispiel stammt (wenn ich mich nicht irre) von einer einer Autorin dieses Buchs:
dolphin's back - Debugging und fortgeschrittene CSS-Techniken
(noch nicht im Handel)
 
Zuletzt bearbeitet:
Der äußere div ist für die Zentrierung und Begrenzung. Eine Navigation neben dem Header und ein hochgerutschter Footer ist ja nicht das wahre.
 
danke für eure hilfe ^^

kann mir wer ein genaueres beispiel machen da ich nicht wirklich kapiere was ihr so durcheinander schreibt...

.....

grüße

web
 
Schau dir diesen Beitrag nochmal an:

neuroleptika schrieb:
Eine Idee dazu:
Code: 
<div id="alles">
<div id="alles_innen">
<ul>
<li id="li_1"><a href="#"></a></li>
<li id="li_2"><a href="#"></a></li>
<li id="li_3"><a href="#"></a></li>
<li id="li_4"><a href="#"></a></li>
<li id="li_5"><a href="#"></a></li>
<li id="li_6"><a href="#"></a></li>
<li id="li_7"><a href="#"></a></li>
</ul>
</div>
</div>
  • #alles für height: 100%; die horizontale Zentrierung und die Grafik mit den Seiten.
  • #ul für position: relative;
  • #alles_innen für die vertikale Zentrierung.
  • #li_1 bis #li_7 werden absolute positioniert und bekommen die zerschnittenen Grafiken.
  • ul li a bekommen die Grafiken mit den Texten
Am schwierigsten dürfte die vertikale Zentrierung sein.
Lese dazu mal ab hier abwärts:
http://www.html.de/html-und-xhtml/20388-div-zentrieren-2.html#post163578


In deinem Fall passen alle dort beschriebenen Beispiele nicht so richtig.
Entweder basieren sie auf Boxen mit prozentueller Höhe oder sind nur für sehr kleine Boxen geeignet. Am ehesten würde der zweite Beispiel-Link von prm in Frage kommen.
Den müsstest du von em in px umschreiben.

Das Beispiel stammt (wenn ich mich nicht irre) von einer einer Autorin dieses Buchs:
dolphin's back - Debugging und fortgeschrittene CSS-Techniken
(noch nicht im Handel)
Zum Vergrößern anklicken....

mit dem da geschriebenen kannst du schon sehr weit kommen.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben