nicht angemeldet
Strukturumsetzung
Gunnar BittersmannHallo, ich versuche aufgrund der Layoutaufzeichnung
http://www.formfalt.net/css_aufbau.gif
die Struktur in css umzusetzen.
Beim masthead-container fängst schon an zu haken.
<div id="masthead">
<h2 id="pageName"><img src="bild.gif" width="150" height="60">
Überschrift</h2>
<div id="info">Link<br/>Link</div>
</div>
Der div-Bereich "info" soll eine Hintergrundfarbe bekommen. Wie ichs jetzt habe, fängt "info" von ganz links an.
Dieser "info" Bereich muss immer gleich groß der 3. Spalte unten sein.
Wie kann ich das lösen?
Könnt Ihr mir Tipps geben wie ich den gesamt Aufbau angehen soll.
Danke.
-
Hi,
Hallo, ich versuche aufgrund der Layoutaufzeichnung
http://www.formfalt.net/css_aufbau.gif
die Struktur in css umzusetzen.das ist Unfug. Die Struktur wird in HTML umgesetzt, und zwar aufgrund der zu erwartenden Inhalte.
Beim masthead-container fängst schon an zu haken.
<div id="masthead">
<h2 id="pageName"><img src="bild.gif" width="150" height="60">
Überschrift</h2>Handelt es sich bei dem Bild tatsächlich um einen zu vermittelnden Inhalt, oder ist es nur eine Verzierung? Im letztgenannten Fall hat das Ding im HTML-Code nichts verloren, im erstgenannten fehlt das zwingend benötigte alt-Attribut. Zudem ist zu überlegen, ob es tatsächlich Teil der Überschrift ist.
<div id="info">Link<br/>Link</div>
Hast Du nun XHTML oder nicht? Beim <img> war es noch HTML. Darüber hinaus werden Listen von Links genauso wie andere Listen mit <ol>, <ul> oder <dl> strukturiert, nicht mit Zeilenende-Markierungen.
Der div-Bereich "info" soll eine Hintergrundfarbe bekommen. Wie ichs jetzt habe, fängt "info" von ganz links an.
Wie hast Du's denn? Darstellungsbezügliche Informationen sind im HTML-Code nicht zu finden, weil sie dort nichts zu suchen haben.
Dieser "info" Bereich muss immer gleich groß der 3. Spalte unten sein.
Komisch, auf der von Dir gezeigten Grafik ist die dritte Spalte sehr viel größer als der Info-Bereich.
Wie kann ich das lösen?
Solange Du nur HTML-Code nennst, muss die Antwort lauten: Mit CSS. Aufgrund der etwas spärlichen Informationen, die Du noch innerhalb der Grafik untergebracht hast, vermute ich, dass Du Dich mit der float-Eigenschaft noch sehr viel intensiver beschäftigen möchtest, und dabei evtl. auch an z.B. margin denkst.
Könnt Ihr mir Tipps geben wie ich den gesamt Aufbau angehen soll.
ad 1: http://aktuell.de.selfhtml.org/artikel/design/reihenfolge/
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
Hallo, ich versuche aufgrund der Layoutaufzeichnung
http://www.formfalt.net/css_aufbau.gif
die Struktur in css umzusetzen.das ist Unfug. Die Struktur wird in HTML umgesetzt, und zwar aufgrund der zu erwartenden Inhalte.
Danke für den sehr nützlichen Link http://aktuell.de.selfhtml.org/artikel/design/reihenfolge/
Ich werde also die ContainerPositionierung nach der logischen Inhaltsreihenfolge richten.Beim masthead-container fängst schon an zu haken.
<div id="masthead">
<h2 id="pageName"><img src="bild.gif" width="150" height="60">
Überschrift</h2>Handelt es sich bei dem Bild tatsächlich um einen zu vermittelnden Inhalt,
Ja, das ist das Logo (alt-Text ist natürlich wichtig). oder ist es nur eine Verzierung? Im letztgenannten Fall hat das Ding im HTML-Code nichts verloren, im erstgenannten fehlt das zwingend benötigte alt-Attribut. Zudem ist zu überlegen, ob es tatsächlich Teil der Überschrift ist.
<div id="info">Link<br/>Link</div>
Hast Du nun XHTML oder nicht? Beim <img> war es noch HTML. Darüber hinaus werden Listen von Links genauso wie andere Listen mit <ol>, <ul> oder <dl> strukturiert, nicht mit Zeilenende-Markierungen.
Das habe ich alles noch nicht berücksichtigt, weil ich erstmal die Positionierungen der Inhaltsboxen richtig erstellen wollte.
Der div-Bereich "info" soll eine Hintergrundfarbe bekommen. Wie ichs jetzt habe, fängt "info" von ganz links an.
Wie hast Du's denn? Darstellungsbezügliche Informationen sind im HTML-Code nicht zu finden, weil sie dort nichts zu suchen haben.
Die Positionierung habe ich im masthead container, pageName mit float: left, info ohne positionsangabe.
<div id="masthead">
<h2 id="pageName"><img src="logo.gif" width="150" height="60">
Überschrift</h2>
<div id="info">Hier kommt die Navigation Kontakt und Impressum hin</div>
</div>Dieser "info" Bereich muss immer gleich groß der 3. Spalte unten sein.
Sorry, ich meinte die gleiche Breite.
Wie sollte ich das am Besten lösen?Komisch, auf der von Dir gezeigten Grafik ist die dritte Spalte sehr viel größer als der Info-Bereich.
Wie kann ich das lösen?
Solange Du nur HTML-Code nennst, muss die Antwort lauten: Mit CSS. Aufgrund der etwas spärlichen Informationen, die Du noch innerhalb der Grafik untergebracht hast, vermute ich, dass Du Dich mit der float-Eigenschaft noch sehr viel intensiver beschäftigen möchtest, und dabei evtl. auch an z.B. margin denkst.
Könnt Ihr mir Tipps geben wie ich den gesamt Aufbau angehen soll.
ad 1: http://aktuell.de.selfhtml.org/artikel/design/reihenfolge/
Cheatah
-
Hi,
Handelt es sich bei dem Bild tatsächlich um einen zu vermittelnden Inhalt,
Ja, das ist das Logo (alt-Text ist natürlich wichtig). oder ist es nur eine Verzierung?Logos sind ein klassischer Streitfall. Meiner Ansicht nach sind beide Interpretationen legitim, wähle also wie Du es für sinnvoll hältst. Aber: Ist das Logo Teil dieser Überschrift?
Hast Du nun XHTML oder nicht? Beim <img> war es noch HTML. Darüber hinaus werden Listen von Links genauso wie andere Listen mit <ol>, <ul> oder <dl> strukturiert, nicht mit Zeilenende-Markierungen.
Das habe ich alles noch nicht berücksichtigt, weil ich erstmal die Positionierungen der Inhaltsboxen richtig erstellen wollte.Das ist nur selten eine gute Wahl; insbesondere dann, wenn Du den Code anderen nennst.
Die Positionierung habe ich im masthead container, pageName mit float: left, info ohne positionsangabe.
Somit ist der Info-Bereich also weiterhin im Elementfluss und also nicht gesondert positioniert. Folglich beginnt es dort, wo es ohne Betrachtung eventueller gefloateter Elemente beginnen muss.
Sorry, ich meinte die gleiche Breite.
Wie sollte ich das am Besten lösen?Indem Du eine Breite vergibst. Beachte auch, was ich in meiner vorherigen Antwort andeutete.
Solange Du [...]
Könnt Ihr mir Tipps geben wie ich den gesamt Aufbau angehen soll.
Und zitiere bitte nur das, worauf Du Dich auch beziehst, danke.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi Cheatah,
darf ich Dich noch um Tipps i. S.
float-Eigenschaft bzw. margin bitten.
Wann ist es sinnvoll float einzusetzen und wann unsinnig?
Sicher kann man das nicht generell sagen aber vielleicht gibts 'ne Faustregel ;-)
Danke.
Gruß, Maggie-
hi,
darf ich Dich noch um Tipps i. S.
float-Eigenschaft bzw. margin bitten.
Wann ist es sinnvoll float einzusetzen und wann unsinnig?Es ist sinnvoll, float einzusetzen, wenn du die Effekte erreichen willst, die float ermöglicht.
(Eine derart pauschale Frage lässt sich nur ebenso pauschal beantworten.)
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
wo finde ich ausführliche Beschreibungen und Anwendebeispiele für die float-Eigenschaften bei den css?
Danke.
Gruß, Maggie-
hi,
wo finde ich ausführliche Beschreibungen und Anwendebeispiele für die float-Eigenschaften bei den css?
http://de.selfhtml.org/css/
http://www.css4you.de/
http://www.w3.org/TR/CSS21/gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-
-
-
-
hi,
Hallo, ich versuche aufgrund der Layoutaufzeichnung
http://www.formfalt.net/css_aufbau.gif
die Struktur in css umzusetzen.Warum entfernst du sowas so schnell wieder? (Bekomme nur einen 404.)
Evtl. hättest du ja noch Tipps bekommen können.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hello out there!
Warum entfernst du sowas so schnell wieder? (Bekomme nur einen 404.)
See ya up the road,
Gunnar--
„Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
-