blutiger Anfänger - knopf geht nicht auf!

[Philo]

Hallo,

da mir dieses Forum CSS eingeredet hat, nerv ich euch jetzt mit meinen Anfängerfragen.

Hier die erste:

Das mit der Textbesbestimmung verstehe ich mittlerweile und ist nicht schwer, aber das mit den Tabellen bzw. vielmehr den nicht vorhandenen Tabellen verstehe ich auch nach der einschlägigen Lektüre noch nicht.

Ich versuche gerade meine Site in CSS nachzuempfinden www.starwars-collectorbase.com
Aber ich hänge bei diesen Boxen fest.

Obwohl ich einige Beispiele durchgearbeitet habe, geht mir der Knopf nicht auf, wie ich das bei mir machen muss?

Wie Reihe ich das jetzt? Wie kommt das LogoBild über den darunter liegenden Text und dann der Pfad und dann wieder die Box in der sich der Text befindet. Links und rechts nicht zu vergessen die zwei 100 Pixel breiten Zellen.

Vielleicht ist mein Hirn auch schon zu sehr auf Tabellen fixiert aber ich weiß einfach nicht wie ich es machen soll.

Mir fehlt der Anfang, als ob mein Hirn gerade auf Urlaub wäre ...

Wie geht das mit diesen Boxen, Tabellen die keine sind ... ich kenne mich nicht aus

[Mich@el]

Du arbeitest ja mit Dreamweaver.
Hier sind ein paar sehr gute Video-Workshops, die wohl auf DW CS3 aufgebaut sind, aber natürlich auch für DW 8 verwendet werden können. Nimm Dir einfach die Zeit und schaue mal rein. Ich finde sie ziemlich interessant gemacht. Und ich denke auch, dass Du großen Nutzen daraus ziehen kannst.

Grüße
Michael

[His.Master's.Voice]

Hallo Philo,

du kannst dir ein Schema von deinen Tabellen ableiten. Denke dir einfach einen Schuhkarton für deine Boxen.

1. Wo kommt der Header hin - nach oben, ok. dann fangen wir auch damit an (wäre die erste Zeile deiner ehemaligen Tabelle).

<div id="header">
...hier kommt dann die Headergrafik rein
</div>

2. Dann eine Box für den Pfad

<div id="pfad">
...Elemente für den Pfad
</div>

3.Als nächstes kommen die drei Spalten. Packen wir drei kleine Kartons in einen großen!

<div id="boxall">
    <div id="left">
    ...linke Spalte
    </div>
    <div id="content">
    ...mittlere Spalte für den Content
    </div>
    <div id="right">
    ...rechte Spalte
    </div>
</div>

Als letztes setzen wir noch um alles eine Box, um das ganze Layout später mittig zu zentrieren. So sieht dann das Grundgerüst aus. Alle weitere Formatierungen, wie Höhe, Breite der Boxen, etc. erfolgt per css im Stylesheet.

<div id="total">

<div id="header">
...hier kommt dann die Headergrafik rein
</div>
<div id="pfad">
...Elemente für den Pfad
</div>
<div id="boxall">
    <div id="left">
    ...linke Spalte
    </div>
    <div id="content">
    ...mittlere Spalte für den Content
    </div>
    <div id="right">
    ...rechte Spalte
    </div>
</div>

</div>

Ist doch gar nicht so schwer, oder?

[Philo]

Nein, wirklich nicht

Aber ich komme sicher noch mit anderen Fragen daher


Danke
Philo

[Philo]

hab schon die nächste Frage!

Ich versuche gerade die div#total zu bestimmen (hab den Titel belassen, ist sehr aussagekräftig).

Ziel von div#total ist folgendes

Es soll nicht breiter als 930 Pixel und mittig sein.

"width: 930px;" habe ich und war recht simpel nur wie zentriere ich das?

Ich finde den Befehl für Texte aber gibt es auch einen für diese Boxen? Bei z.B. www.css4you.de finde ich keine Wort darüber wie man etwas anderes als Texte zentrieren kann.

Ach ja, wenn ich "width: 930px;" eingebe, ist der Wert dann fix oder kann eine Box innerhalb der total-Box die 930 Pixel sprengen?

Thanks

[Philo]

OK, das mit dem zentrieren habe ich gefunden!

margin:auto;

[hero-master]

Zitat von Philo

OK, das mit dem zentrieren habe ich gefunden!

Vielleicht noch ein wenig mehr dazu

[Philo]

@hero-master:
habe mir das gerade durchgelesen aber mein IE 6 zentriert ohne Probleme mit "margin:auto;"

Das dürfte er laut diesem Tutorial gar nicht?

http://www.starwars-collectorbase.com/vorlage-css.html

Ich bin gerade am herumexperimentieren und weiß nicht so recht wie ich das anstellen soll?

Wenn ihr euch den Rahmen der normalen Site anseht http://www.starwars-collectorbase.com dann sieht man einen roten Rahmen und einen gelben Texthintergrund. Dazwischen ist eine feine, schwarze Linie.

Wie bekomme ich die dahin?

Ich hatte das mit zwei Tabellen gelöst, die ineinander verschachtelt waren.

Wie mache ich das hier? Soll ich in den einen Container noch einen Container setzen und dem geben ich einen ganz feinen, schwarzen Rand?
Oder geht das einfacher mit CSS?

[Philo]

Ich habe das jetzt mit den verschachtelten div's gemacht. Wirkt nicht ganz so schön. Mit den Tabellen wirkt es besser, es ist weicher.

[Philo]

@hero-master:
habe mir das gerade durchgelesen aber mein IE 6 zentriert ohne Probleme mit "margin:auto;"

Das dürfte er laut diesem Tutorial gar nicht?

Habe gerade merken müssen, dass der IE kein Problem damit hat, aber wie immer ist der viel gerühmte FF der, der Probleme mit der Umsetzung hat, dort ist es nicht zentriert.

[Philo]

@hero-master:
Ich habe es jetzt mit Deinem Link probiert aber FF ist weiterhin sturr, nur der Text, der ist jetzt mittig.

Was kann man da machen?

div#total{
	width:930px;
	margin-left:auto;
	margin-right:auto;

}

div#links{
	width:100px;
	float:left;
}

div#roter-rand{
	width: 725px;
	border-color:#dc1c29; 
	border-style:solid;
	border-width:2px;
	margin-left: auto;
	margin-right: auto;
	float:left;
	
}

div#container{
	width:722px;
	border-color:#000000;
	border-style:solid;
	border-width:1px;
	background-color:#FFFF00;
	margin-left: auto;
	margin-right: auto;
}

div#rechts{
	width:100px;
	float:right;
	
}

[His.Master's.Voice]

Du bist ja ein Dauerposter, da komm ich ja kaum hinterher.

Probier bitte folgendes. Im Stylesheet für body folgendes ergänzen - text-align: center; wird Abhilfe schaffen zur Zentrierung der Seite. Ist allerding glaube ich nur für den IE. Der FF müsste z.B. margin: 0 auto 0 auto; korrekt interpretieren. Funktioniert bei mir prima.

body {
margin:0; padding:0;
text-align:center;
background:#000000;
}

div#total mit auto für margin-right und margin-left ist dann weiterhin OK.

Allerdings würde ich einfach die divs roter-rand, rechts und links mit float:left; einfach nebeneinander setzen. Dann kannst du wahrscheinlich auf margin-right und margin-left bei roter-rand und container verzichten. By the way: wer floatet muss auch clearen, sonst zerschießt es dir irgendwann ganz derbe das Layout. Füge einfach ein div#footer unten ein, innerhalb von total und schreibe für den footer folgendes.

div#footer {
width:930px;
height:10px;
clear:both;
}

[hero-master]

Zitat von Philo

@hero-master:
habe mir das gerade durchgelesen aber mein IE 6 zentriert ohne Probleme mit "margin:auto;"

Der IE6 (steht auch so auf der Seite) erkennt das margin:0 auto (brauchst es wie gesagt nur für margin-left und -right definieren), wenn er im Standardmodus gerendert wird (Doctype mit url, etc).
Wenn du ihn in den Quirksmodu schickst, dann erkennt er es nicht an und du brauchst die "Weiche" über text-align
Stichwort Doctype-Switching

[Boris]

Glaub uns, auch wenn du denkst der IE macht etwas "richtig" und der FF falsch - es ist exakt anders herum.

Der IE macht viele Standards schlichtweg falsch, daher solltest du deine Seiten erstmal so bauen, dass der Firefox es korrekt anzeigt.