Noch ne Anfängerfrage zu CSS

Hallo,

riskierend, dass mich jemand rüffelt, weil ich die Lösung nicht selber suche, sondern hier frage, Folgendes: In HTML zu programmieren, was in CSS geht, ist ja verpönt. Also möchte ich ein simples Layout, das ich bisher per Tabelle gemacht hätte, per CSS realisieren:

 

Titel

Menü

Inhalt

Fußzeile

Was ich nicht schaffe, ist, die „Zellen“ richtig anzuordnen. Vor allem mit der „position“ komme ich nicht klar. Mit dem Internet Explorer stimmt die Darstellung, mit Firefox überhaupt nicht. Ich stelle mir vor, dass es CSS-Profis gibt, für die die Lösung ein Klacks ist. Und sogar solche, die mir den aufschreiben. Wenn ich das endlich geschafft habe, komme ich ganz gut alleine weiter.

Danke im Voraus,

Anselm

hi
rüffeln tu ich dich definitv nicht, aber was du möchtest ist die beste Methode dir Schwierigkeiten einzuhandeln.
Warum?
a) wenn dein Layout funktioniert lass es noch eine Weile - tabellen sind - und da schimpfen alle - zweckentfremdet aber es funktioniert.
b) wenn bei einer neuen Browserversion irgendeine Elementeigenschaft verändert wird - bist du vollkommen hilflos, weil du keine Ahnung hast was du überhaupt machen sollst.
c) Das Layout mittels css zu positionieren ist eine Sache, aber was machst du mit allen anderen Formatierungen, wie schrift, abstände, farben und links? die müssen irgendwie ja in das bestehende css rein.

Also wenn du es mit css machen möchtest, dann solltest du wenigstens die Grundlagen kennen.
Ist meine Meinung, weil auch in div. Bereichen leidgeprüft :wink:

Das wichtigste für die positionierung sind 2 attribute die gar nicht soooo schwer sind.
Entweder positionierst du „fix“ im sinne von immer xxx px vom einer Seite entfernt --> position:absolute oder
fix aber relativ zu den umgebenden Elementen also fix xxx px vom vorigen Div entfernt --> position relative.

dann gibt es noch das Float Element mit dem du bestimmen kannst, das ein Element immer am linken oder rechten rand des vorherigen (nicht umgebenden) Elementes dran klebt --> float:left bzw. float:right.
Und wer floatet muss auch clearen, was heisst, wenn die float:left unterbrochen werden soll damit nichts mehr am linken rand klebt --> clear:left (oder clear:right ode clear:both).

Das ist schon das aller wesentlichste. Natürlich gibt es Unterschiede bei den Browsern (wie gehabt), hierfür gibt es sogenannte IE HACKS oder du machst 2 Stylesheets eines für FF basierende und eines IE basierende Layouts.

lg
aya

in der Hoffnung daß du den vorigen Artikel zuerst gelesen hast:

html{width:100%}
div {border:1px solid #999999}
.clearen{
clear:both;}
div.clearen{border:none;}
#topleft{
float:left;
width:28%;}
#topmain{
background-color:#CCCC00;
width:70%;
float:left;}
#navi{
width:28%;
float:left;}
#content{
width:70%;
float:left;}
#footer{
width:98.5%;
height:20px}
Untitled Document top left bereich
Titel
navi
content

Footer

und hier noch eine einfache und gute Referenz zum layouten mit float:
http://www.thestyleworks.de/tut-art/layout_div_2.shtml

Hi,

Wie aya schon geschrieben hat, ist es natürlich nicht weise eine Tabelle zu benutzen und ich würde dir empfehlen zum Thema CSS auch ein bischen auf http://de.selfhtml.org zu lesen.

Aber direkt zu deiner Frage:
momentan haßt Du die Tab so:

 

Titel

Menü

Inhalt

Fußzeile

Um das so in CSS umzusetzen würde ich an die einzelnen id’s vergeben also so:

und in CSS machst Du dann zu ID1 solche Angaben:

#1 {
display: block;
width: 140px;
background: #0000FF;
align: center;
}

Du kannst dann in CSS auch angaben zu Schriftgröße, -style und -farbe machen aber wie gesagt, ich würde auf andere Methoden zurückgreifen z.B. oder
. Und bitte, bitte schau dir noch was zu dem Thema auf selfHTML an.

hoffe ich konnte dir helfen,
lg. Meganova

in der Hoffnung daß du den vorigen Artikel zuerst gelesen
hast:

[…]

und hier noch eine einfache und gute Referenz zum layouten mit
float:
http://www.thestyleworks.de/tut-art/layout_div_2.shtml

Vielen Dank für die Mühe, die Du Dir mit Deinen beiden Antworten gemacht hast. Mit dem „Laien“ habe ich ein bisschen tiefgestapelt. In HTML bin ich ziemlich firm und CSS wende ich bereits insbesondere für globale Einstellungen (insbesondere Schrift, Link-Formatierung usw.) an.

Auf CSS-Layouts bin ich durch Vorlagen von MS Expression Web, mit dem ich arbeite, gestoßen. Obwohl ich die Funktion bisher unbekannter CSS-Funktionen aus SELFHTML herausgesucht und die Erklärungen gelesen habe, habe ich bei „position“ nur Bahnhof verstanden. Es heißt ja dort auch „Besonders das Verhalten der Angaben absolute und relative ist anfangs etwas verwirrend.“

Meine Hoffnung war, hier für ein simples HTML-Layout das Äquivalent in CSS zu bekommen, das ich nachvollziehen kann, und das hast Du ja freundlicherweise gemacht. Und Dein Link sieht sehr vielversprechend aus. Natürlich muss ich mir jetzt erst einiges richtig zu Gemüte führen, aber ich bin sehr zuversichtlich.

Noch mal vielen Dank!

Anselm

Wie aya schon geschrieben hat, ist es natürlich nicht weise
eine Tabelle zu benutzen und ich würde dir empfehlen zum Thema
CSS auch ein bischen auf http://de.selfhtml.org zu lesen.

[…]

hoffe ich konnte dir helfen,

Eine gute Ergänzung, danke. Bitte lies meine Antwort an aya, sie trifft im Wesentlichen auch für Dich zu. Mein Ehrgeiz ist, ganz ohne HTML-Tabelle auszukommen. Ob ich das dann künftig immer so mache, ist noch offen. Aber mich foppt, dass ich die Layout-Geschichte in CSS nicht richtig verstehe, geschweige denn beherrsche. SELFHTML nütze ich schon lange, aber manchmal sind anderweitige Ergänzungen fürs Verständnis hilfreich.

Dank und Gruß,

Anselm

ah - du bist 'n Tiefstapler - so ist das :wink:

ne spass beiseite, ich hätt es anders geschrieben, wenn du deine eigentlichen Kenntnisse erwähnt hättest und wäre besser auf die position eingegangen.

lg
aya

ah - du bist 'n Tiefstapler - so ist das :wink:

ne spass beiseite, ich hätt es anders geschrieben, wenn du
deine eigentlichen Kenntnisse erwähnt hättest und wäre besser
auf die position eingegangen.

Mir ist es lieber, wenn ich bei Erklärungen manches schon weiß, als dass ich nur die Hälfte verstehe.

Nichts für ungut,

Anselm :smile: