CSS Box Design: Unterstützung gesucht :)

[simcen]

Erstmal ein freundliche "Hallo alle!" aus der Schweiz.
Ich bin neu hier, obwohl ich schon oft interessante Beiträge mitverfolgt habe und auch schon einige gute Tipps entnehmen konnte.

Nun, ich stehe, für mich als Amateur, vor einer sicherlich lösbaren Aufgabe, ein etwas komplizierteres CSS Box Design ohne Tabellen umzusetzen.
Ich habe mit einer symbolischen Grafik (Anhang 1, design1.jpg) versucht, meine Anforderung zu schematisieren. Jeder Kasten mit eigener Farbe sollte ein Block-Element für sich sein, wobei die Grösse nicht eine Rolle spielen soll. Wichtig ist die vertikale Ausrichtung, dass die beiden <input> sowie das "text" übereinander liegen. Anhang 2 (design2.jpg) zeigt wie das ganze aussehen soll, vorerst mit Tabellen umgesetzt. Die roten Linien kennzeichnen die Grenzen der Boxen.

So, ich hoffe dass ihr nicht alle gleich erschlagen seid und meine Anforderung etwas klar ist, ansonsten einfach schreien :)

Danke schon jetzt für eure Unterstützung und Gruss,
Simon

 

[bronko]

ja und nu?

wenn das jemand für dich machen soll bist du in der jobsektion gut aufgehoben, ansonsten schau dir mal den ersten link in meiner signatur an, da wirst du fündig werden.

 

[Efchen]

CSS Box Design

Ein freundliches Hallo zurück in die Schweiz!

Aber im Prinzip hat mein Vorredner ja Recht. "Anforderung"? Das hört sich mehr nach Jobbörse an. Ansonsten fehlt die Frage.

Was ich Dir mitgeben kann ist, dass es sowas wie ein "CSS Box Design" nicht gibt. Angesichts Deines ersten Bildes drängt sich mir der Verdacht auf, dass Du auf dem besten Wege bist, Deine Tabellenlayouts durch <div> zu ersetzen. Damit änderst Du aber rein gar nichts an der Qualität Deines Codes. Ob Tabellenvergewaltigung oder div-Suppe ist einerlei. Beides ist schlecht.

Gehe das anders an: Nimm Deinen Inhalt und schreibe ihn auf. Dann zeichne ihn semantisch sinnvoll mit HTML aus. Ein <div> verwendet man nur, um damit mehrere (mindestens 2!) Elemente zwecks gemeinsamer Formatierung zu gruppieren. <div> verwendet man nicht "für das Layout". Erst dann schreibe das Stylesheet und designe Deine Seite.

Begeh nicht den selben Fehler, wie die meisten Umsteiger von Tabellenlayouts zu CSS. Wer auf diese Weise versucht, seine Seite zu machen, hat den Sinn von HTML und CSS-Design und Trennung von Inhalt und Layout noch nicht verstanden.

Gruß,
-Efchen

 

[simcen]

Hallo Leute

Sorry für das Missverständnis, ich habe auf keinen Fall erwartet, dass jemand alles für mich erstellt. Ich bräuchte lediglich einen Denkanstoss, wie ich am effektivsten und saubersten dieses Layout umsetzen kann. Habe mich mit dem vorherigen Post wahrscheinlich total als Newbie geoutet ;) Egal, da muss ich durch.

Gehe das anders an: Nimm Deinen Inhalt und schreibe ihn auf. Dann zeichne ihn semantisch sinnvoll mit HTML aus. Ein <div> verwendet man nur, um damit mehrere (mindestens 2!) Elemente zwecks gemeinsamer Formatierung zu gruppieren. <div> verwendet man nicht "für das Layout". Erst dann schreibe das Stylesheet und designe Deine Seite.

Danke, das hat geholfen.

Begeh nicht den selben Fehler, wie die meisten Umsteiger von Tabellenlayouts zu CSS. Wer auf diese Weise versucht, seine Seite zu machen, hat den Sinn von HTML und CSS-Design und Trennung von Inhalt und Layout noch nicht verstanden.

Als Umsteiger würde ich mich jetzt nicht bezeichnen, allerdings habe ich, wie du richtig vermutest, die Konzepte noch nicht ganz verstanden. Ich versuche meine Vorstellung vom Layout von Grund auf "am saubersten" aufzubauen.

So, ehrlich gesagt, bin ich jetzt ein wenig konfus und muss erst mal mit mir selber klar werden :) Ich melde mich wieder, wenn ich ein konkretes Problem habe.

Bis dann
Simon

 

[Efchen]

Ich versuche meine Vorstellung vom Layout von Grund auf "am saubersten" aufzubauen.

Am saubersten ist es, mit dem Inhalt anzufangen, dann das Markup zu machen (und dabei nicht zu vergessen, dass <div> kein Wundertag ist und man es sehr sparsam einsetzen sollte), und dann erst das Layout per CSS. Immer schön sauber Inhalt und Layout voneinander trennen (also keine Layouttechnischen Dinge ins HTML-File, keine Styles ins HTML-File, sondern das alles in ein externes Stylesheet).
Dann wirds am einfachsten, logisch und klar verständlich. Dann machst vielleicht *klick* und Du hast den Sinn von CSS-Layout verstanden. Die Erfahrung habe ich selbst gemacht und von vielen Menschen bestätigt bekommen: Es macht *klick* und mit einem Mal versteht man den Sinn dahinter. Alle, die sagen "ich glaub ich habs langsam kapiert" haben es wirklich noch nicht richtig kapiert und machen immer wieder ganz einfache Fehler. :-)

So, ehrlich gesagt, bin ich jetzt ein wenig konfus und muss erst mal mit mir selber klar werden :) Ich melde mich wieder, wenn ich ein konkretes Problem habe.

Fang einfach vorne an mit HTML und der Semantik. OHNE dabei das Layout oder Design im Kopf zu haben. Das ist an der Stelle irrelevant.

Viel Erfolg!
-Efchen

 

[simcen]

Hallo Leute

Ich habe mich heute intensiv mit mir selber aber auch vor allem mit den Tipps von Efchen beschäftigt und fühle mich nun im Stande, eine konkrete Frage zu stellen :)

So, nun meine Frage. Ich habe folgenden Einfachen Inhalt:

<div id="infobar_login">
<img src="graphics/infobar_webmail.jpg" id="infobar_login_title" width="70" height="12" />
<form action="/servlets/LoginServlet" method="post" name="login">
Benutzername: <input type="text" name="_user" size="10" /><br />
Passwort: <input type="password" name="_pass" size="10" />
<input name="_action" value="login" type="hidden" />
</form>
</div>

Wie schaffe ich es, dass die beiden Inputs innerhalb des div's "infobar_login" rechts ausgerichtet sind? In der CSS-Doku habe ich gelesen, mit "position: relative" die Ausgangsposition relativ zum Elternelement (in meinem Falle dass div, oder? Dem form habe ich keine Style-Eigenschaften gesetzt) zu setzen und mit "right: 0px" die rechtsbündige Ausrichtung hinzukriegen. Hat aber nicht geklappt :) Was mache ich falsch?
Hoffe, dass ich die richtigen Fragen nun stelle :)


PS: Efchen, ich meine, bei mir hats gKlick gemacht, deinen Tipp mit dem Ansatz vom Inhalt auszugehen hat mir sehr geholfen, echt! Grundsätzliche Dinge wie Auslagern von Style-Definitonen waren mit bereits vorher klar.
Und allgemein Danke fürs Einlenken in die richtige Richtung!

PPS: Entschuldigt den unleserlichen Code-Ausschnitt, habe es nicht geschafft, innerhalbs des HTML-BBCodes-Tags den Schnipsel anständig zu formatieren.

Liebe Grüsse
Simon

 

[Efchen]

HWie schaffe ich es, dass die beiden Inputs innerhalb des div's "infobar_login" rechts ausgerichtet sind?

Mit float:right;
"position" würde ich nicht empfehlen, weder relative noch absolute, da muss man genau wissen, was man tut. Mit float allein lassen sich die meisten Positionierungswünsche gut erfüllen. float ist auch nicht ganz ohne, aber deutlich leichter.
Es gab mal ne schöne Seite, die erklärt, wie man schön barrierefreie Formulare mit CSS machen kann. Das hier soltle helfen: Formulardesign : Einfach für Alle

... relativ zum Elternelement (in meinem Falle dass div, oder? Dem form habe ich keine Style-Eigenschaften gesetzt)...

Das Elternelement von <input> ist in Deinem Beispiel natürlich <form>. Ob Du es mit CSS formatiert hast, ist nicht von Belang. Hier gehts ja um HTML.

PS: Efchen, ich meine, bei mir hats gKlick gemacht, deinen Tipp mit dem Ansatz vom Inhalt auszugehen hat mir sehr geholfen, echt!

Das werden wir sehen, wenn wir mehr von Dir sehen :-)

Im Moment beobachte ich Dein <div> noch genauer, ich hätte das vielleicht eher so gemacht:

<form>
  <img>
  <input>
  <input>
</form>

Aber das kann natürlich im Gesamtzusammenhang anders notwendig sein.

PPS: Entschuldigt den unleserlichen Code-Ausschnitt, habe es nicht geschafft, innerhalbs des HTML-BBCodes-Tags den Schnipsel anständig zu formatieren.

Da bietet sich an "code" statt "html" zu benutzen.

Viel Spaß noch,
-Efchen

 

[simcen]

Es gab mal ne schöne Seite, die erklärt, wie man schön barrierefreie Formulare mit CSS machen kann. Das hier soltle helfen: Formulardesign : Einfach für Alle

Danke für den tollen Link. Habe mein Formular folgendermassen angepasst:

<div id="infobar_login">
	<form action="/servlets/LoginServlet" method="post" name="login">
		<fieldset>
			<legend><img src="graphics/infobar_webmail.jpg" id="infobar_login_title" width="70" height="12" alt="Webmail Login" /></legend>
			<label for="_user">Benutzername:</label><input type="text" name="_user" size="20" /><br />
			<label for="_pass">Passwort:</label><input type="password" name="_pass" size="20" />
			<input type="submit" name="_submit" value="Login" />
			<input name="_action" value="login" type="hidden" />
		</fieldset>
	</form>
</div>

Das div brauche ich um das Formular links zu float'en.

Eine Frage zum fieldset:
- Was spricht gegen das Verstecken des Rahmens des fieldsets?
- Ist es erlaubt, innerhalb des <legend> Tag ein Bild reinzupflanzen?

Liebe Grüsse
Simon

 

[Efchen]

Das div brauche ich um das Formular links zu float'en.

Nö. Unfug. Wer behauptet sowas? Du kannst doch auch das <form> links floaten.

Was spricht gegen das Verstecken des Rahmens des fieldsets?

Mir fällt nichts ein. Mir persönlich gefällt der Rahmen von der Optik, für mich wäre es also eine optische Verschlechterung. Aber ich denke, das ist Geschmacksache.

Ist es erlaubt, innerhalb des <legend> Tag ein Bild reinzupflanzen?

Das habe ich mich auf gefragt, als ich Deinen (sonst jetzt sehr schönen) Code angesehen habe.
Ich würde da zwei Dinge probieren:
a) Hat das optisch den gewünschten Effekt?
b) Was sagt der The W3C Markup Validation Service dazu?
Wichtig ist natürlich das alt-Attribut, um für nicht-visuelle Clients eine legend zu bekommen, aber alt ist ja ohnehin Pflicht.

Gruß,
-Efchen

 

[simcen]

Nö. Unfug. Wer behauptet sowas? Du kannst doch auch das <form> links floaten.

Korrigiert, danke.

Aber ich denke, das ist Geschmacksache.

Wenns valid ist, ja. W3C hat nichts gegen.

a) Hat das optisch den gewünschten Effekt?
b) Was sagt der The W3C Markup Validation Service dazu?
Wichtig ist natürlich das alt-Attribut, um für nicht-visuelle Clients eine legend zu bekommen, aber alt ist ja ohnehin Pflicht.

zu a: Ja. Passt genau.
zu b: W3C hat auch hier nichts dagegen. Ich checke nach jedem Minor Change am HTML mit dem Validator. Alt-Tags sind schon deswegen Pflicht.

So, bald habe ich eine Version meines HTML-Codes fertig, mit dem ich einigermassen zufrieden bin. Darf ich den Link dazu hier posten und um Feedback bitten?

Liebe Grüsse
Simon

 

[Efchen]

Ich schätze, dafür ist das "Websitecheck"-Forum hier besser geeignet, als HTML.

 

[simcen]

Gut.
Weiteres Grundlagen-Problem:

<h1 id="content_header">Mein hübscher Titel</h1>

Zugehörige Styles:

	h1 {
		font-size: 120%;
		font-weight: bold;
		color: #999999;
	}

	#content_header {
		background: url("../graphics/content/top_big_tab.jpg") no-repeat;
		width: 719px;
		height: 31px;
		margin-left: 40px;
		padding-left: 30px;
	}

Wie schaffe ich es, den Text im Heading am unteren Rand auszurichten? Das Heading ist wegen "height: 31px" (so hoch ist das Bild) höher wie der Text.
Da du "position" nicht empfiehlst, kommt auch "bottom" nicht in Frage. "vertical-align" nützt ja nichts, weil ich nicht nebeneinanderstehende Elemente habe. Trotzdem mit den Werten "baseline, bottom und text-bottom" getestet - ohne Erfolg.

Danke für Unterstützung und liebe Grüsse
Simon

//Edit:
Erstmal das CSS-Box-Modell verstehen, und dann klappts - selbst ist der Mann :)