[rs-hax0r]

Hallo Boardler.
Ich habe ein Grundgerüst aufgebaut, wobei bereits die ersten Fehler auftreten:
index
Füge ich eine Zeile Mehr Text hinzu, verschieben sich die Divs wie folgt:
index2
Erst bei fünf Zeilen, passt die Ausrichtung.
index3
CSS

1.Wie stelle ich es an, dass es "immer passt", egal wie viel, oder wenig Text im Main-Div steht?

2. Die Seite wird im IE total anders dargestellt. Woran könnte das liegen?

[aNtiCHrist]

Wie stelle ich es an, dass es "immer passt", egal wie viel, oder wenig Text im Main-Div steht?

Endlich mal meine Ratschläge befolgen: die Finger von position lassen und die Elemente ineinander schachteln. Dann wächst das alles automatisch und du kannst dir deine fehleranfällige Rechnerei sparen.

Meinen Kommentar zu der zweiten Frage spare ich mir, du kannst dir sicherlich denken, wieso. Wenn nicht, hier ein Stichwort: Validieren

[godlike]

Ich weiß ist jetzt nicht gefragt aber dafür brauchst du doch nicht so ein Konstrukt.
Pack dir einfach die Grafik (Anhang) per CSS als Background zentriert in den body ... oder geht das nicht?

Gruss godlike

[rs-hax0r]

Zitat von aNtiCHrist

die Finger von position lassen und die Elemente ineinander Schachteln.
Meinen Kommentar zu der zweiten Frage spare ich mir, du kannst dir sicherlich denken, wieso. Wenn nicht, hier ein Stichwort: Validieren

Valide ist es nun, verschachtelt auch.

Letzte Fragen zu den Verläufen:
Wie setze ich die beiden, rechts am Header passend untereinander? (Der rechte Head-Verlauf besteht aus 2 Grafiken.)

Wenn ich den Content nun nochmals ca. 5-6 Zeilen länger mache, hört der Verlauf auf, klar er ist mit einer Höhe von 650px angegeben.
Wie lasse ich ihn automatisch verlängern? (height:auto klappt nicht.

Zitat von godlike

Ich weiß ist jetzt nicht gefragt aber dafür brauchst du doch nicht so ein Konstrukt.
Pack dir einfach die Grafik (Anhang) per CSS als Background zentriert in den body ... oder geht das nicht?

Gruss godlike

Du hast Recht, sollte eigentlich auch gehen, habe es aber ja nun auch so hinbekommen.
Danke

[Trek-Star]

Das is so kein Problem also wen du den boxen keine böhen angaben gipts sihe mal hier
http://webstyle88.we.ohost.de/ würde ich jetzt noch 100000 buchstaben oben bei den Bild einfügen würde die untere box immer mit fliegen da ich ihr einen margin apstand von 20px gegeben hab du könntest jezt 0px nehmen dan bleibt sie immer an der drüberen kleben

Gruß Trek-Star

[rs-hax0r]

Was meinst du, welcher Box ich keine Höhenangabe zuweisen sollte?
Dem linken Verlauf? Das klappt nicht. (Was ja auch logisch ist.)
Der Main Box habe ich eine min-height zugewiesen, damit diese nicht kleiner wird als vorgegeben, unabhängig vom Text.
Wird die min-height (in diesem Fall von 650px) überschritten, läuft der Verlauf nicht mit, da dieser nur 650px hoch ist.

[aNtiCHrist]

Wird die min-height (in diesem Fall von 650px) überschritten, läuft der Verlauf nicht mit, da dieser nur 650px hoch ist.

Deshalb solltest du ja dein div-Element mit dem Inhalt in die div-Elemente mit den Hinterrundbildern *schachteln*. Bei dir sehe ich weiterhin keine Schachtelung dieser Elemente. Dann lässt du dort wie empfohlen die Höhenangabe weg und die Dinger werden automatisch so hoch wie nötig.

[rs-hax0r]

Also den #Main Div in den #mainverlauflinks Div? (Was nicht klappt)

[aNtiCHrist]

Ja, und #mainverlauflinks dann in #mainverlaufrechts (oder umgekehrt). Halt so, dass #main das innerste Element in der Schachtelung ist. Das soll ja schließlich die Höhe bestimmen. Was soll daran nicht funktionieren?

[rs-hax0r]

Wenn ich es mache wie du es beschreibt sieht es so aus:
index

css

[aNtiCHrist]

Nun ist dein XHTML brauchbar, aber dein Stylesheet ist in keiner Weise darauf angepasst.

Schmeiß die floats da raus, entferne die width-Angaben (bis auf das äußerste Element, dort muss sie angepasst werden), positioniere die Hintergrundbilder entsprechend und setze sinnvolle padding-left/right-Werte. Und natürlich die height-Angaben entfernen, aber das sagte ich ja bereits ...

[rs-hax0r]

Zitat von aNtiCHrist

Schmeiß die floats da raus,.

Die FLoats hatte ich eigentlich schon entfernt.
- Es reicht aber, wenn ich diese nur bei mainverlauflinks, mainverlaufrechts, und main entferne, oder? (Der Rest, also Header und Footer, sind ja wie sie sollen)

Zitat von aNtiCHrist

entferne die width-Angaben (bis auf das äußerste Element, dort muss sie angepasst werden),

Bei mainverlaufrechts und main entfernen, bei mainverlauflinks beibehalten?

Zitat von aNtiCHrist

positioniere die Hintergrundbilder entsprechend und setze sinnvolle padding-left/right-Werte.

Was meinst du, soll ich wie ausrichten?
Wie muss beispielsweise das Hintergrundbild von #mainverlauflinks positioniert werden?

Zitat von aNtiCHrist

Und natürlich die height-Angaben entfernen, aber das sagte ich ja bereits ...

Jene, von mainverlaufrechts sowie mainverlauflinks?!
Wurden mittlerweile auch entfernt.

Danke für deine Beteiligung

[aNtiCHrist]

Die FLoats hatte ich eigentlich schon entfernt.

Dann hat mal wieder deine Nachlässigkeit zugeschlagen. Bitte prüfe doch den Kram den du hochlädst. Generell sehe ich keinen Anlass, bei diesem Layout irgendwo float zu verwenden.

Bei mainverlaufrechts und main entfernen, bei mainverlauflinks beibehalten?

Nein, sofern du das nicht zwischendurch geändert hast, momentan ist #mainverlaufrechts das äußerste der drei Elemente. Dort sollst du das auch nicht beibehalten sondern an die gewünschte Breite anpassen.

Wie muss beispielsweise das Hintergrundbild von #mainverlauflinks positioniert werden?

Äh, links? Sagt doch schon die ID ...

Da du offenbar das Konzept noch nicht verstanden hast: http://www.andreas-kalt.de/webdesign...ls/runde-ecken - Das ist praktisch der gleiche Ansatz, bloß dass du nur zwei Hintergrundbilder hast, die sich dafür wiederholen dürfen.

[Trek-Star]

mach mal ein Pic mit Paint wo du einen weißen hinter grund hast und für geden bereich eine schwarze box machst dann kann ich besser sehen wie du es später haben willst ,Code dir das dann, weiß CSS is voll der dreck und ohne Hilfe schwer zu verstehen !

Gruß Trek-Star

[gamerphil]

CSS ist weder Dreck noch schwer zu verstehen. Einzige Voraussetzung: Sprachkenntnisse in Englisch oder einen Übersetzer

Allerdings ist das Design viel zu umständlich umgesetzt.

Die verläufe links und rechts kann man zusammenfassen, so wie es godlike schon angesprochen hat.

für header, footer, content den verlauf als jeweils 1px*BREITE Bild speichern und dann nur noch einen Container und CSS Eintrag verwenden.Ist wesentlich einfacher.

Achso und die floats sind immernoch da. Nimm sie weg und es sieht wesentlich besser aus. Machs aber trotzdem so wie oben beschrieben!

[Trek-Star]

gamerphil
CSS ist weder Dreck noch schwer zu verstehen. Einzige Voraussetzung: Sprachkenntnisse in Englisch oder einen Übersetzer

Warum Englisch wer hat dir das den zu geflüstert ????

Hier mein Code Nutzte den Made by Trek-Star:

Hier kannste Online sehen http://webstyle88.we.ohost.de/test.html

Also das Cript kannste jetzt weiter arbeiten habe es mit festen Positionen gemacht
du sölltest aber nicht die ganzern verläufe extra dran hängen sondern sie gleich mit in das Logo einmalen Code HIER:

HTML(test.html)

PHP-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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="test.css" type="text/css" />
<title>Unbenanntes Dokument</title>
</head>

<body ><div id="main">

<div id="div1"><h1><center>Trek-Star</center></h1></div>
<div id="div2"><h1><center>Trek-Star</center></h1></div>

</div>
</body>
</html> 


CSS(test.css)

PHP-Code:

body {

background-color:#666666;
}
#main {
position:relative;
width: 800px;
margin: 20px auto;
 }

#div1 {position:absolute;
background-image:url(header.gif);
width:800px;
height:150px;
top:0px;
left:0px;
z-index:3;
}

#div2 {position:absolute;
background-color:#333333;
width:800px;
top:200px;
left:0px;
z-index:3;
} 


Wen de noch fragen hast nur fragen Gruß Trek-Star

[rs-hax0r]

Jetzt weiß ich gar nichts mehr.
Ständig wird mir von position abgeraten, du nutzt es.


Ich weiß derzeit nichteinmal, wo meine Verläufe des Main-Divs sind. :/
index
Sollten diese sich nicht in den Divs #mainverlauflinks bzw. #mainverlaufrechts befinden?

[aNtiCHrist]

Vielleicht hast du es noch nicht bemerkt, aber Trek-Star ist unser neuer Boardtroll, der sowohl inhaltlich als auch sprachlich eine Menge Unsinn zusammenschreibt. Offenbar hat er CSS selbst noch nicht so ganz verstanden, dazu passt auch die unqualifizierte Aussage, dass CSS "voll der dreck" sei. Den kannst du getrost ignorieren, solange er hier überhaupt noch schreiben darf.

Ich weiß derzeit nichteinmal, wo meine Verläufe des Main-Divs sind. :/

Die sind durch die Hintergrundfarbe von #main überdeckt, da du nicht wie von mir empfohlen die padding-Werte gesetzt hast. Außerdem liegen sie derzeit beide übereinander, da du auch meine Hinweise zur Positionierung der Hintergrundbilder mit background-position nicht umgesetzt hast. Darüber hinaus sind die 500px in #mainverlaufrechts zu wenig, das sollen doch sicherlich 800px sein? Auch fehlt dort noch ein margin:auto zum Zentrieren. In #main ist dafür die width-Angabe wie schon gesagt unnötig und führt höchstens zu Problemen, die 800px sind dort zumindest nicht korrekt, da du davon noch die zu setzenden paddings abziehen müsstest.

[rs-hax0r]

Also, der rechte Verlauf besteht nun.
1. Wie setze ich den linken Verlauf nun noch neben den Main-Div?
2. Wie ordne ich die beiden Verläufe im Header untereinander an?

Danke
index
style

[aNtiCHrist]

1. Wie setze ich den linken Verlauf nun noch neben den Main-Div?

Du hast weiterhin kein padding in dem #mainverlauflinks-Element definiert. Den background-repeat-Wert solltest du auch noch mal überdenken ...

Wann fängst du endlich mal an, DOM Inspector, Firebug, Dragonfly, Web Inspector oder ähnliche Werkzeuge zu nutzen? Damit hättest du diese Probleme sehr einfach selbst aufspüren können.

2. Wie ordne ich die beiden Verläufe im Header untereinander an?

Ich habe keine Lust mehr nachzuzählen, wie oft ich dir schon geraten habe, die Elemente zu schachteln und die Hintergrundbilder dann zu positionieren ... float ist hier ebenso unnötig, wie bei deinen Verläufen bei #main.

[rs-hax0r]

Die Verläufe stimmen nun.
Wieso ich nicht ans Padding gedacht habe, weiß ich auch nicht. *wallbash*
Das repeat hatte ich bewusst nicht gesetzt, was hin muss ist natürlich klar.

Danke