[s] HTML/CSS Übungen

MiBo21

MiBo21

Well-known member
ID: 325815
L
4 Mai 2007
187
19
Hi,
bin derzeit auf der Suche nach einer sinnigen Beschäftigungen um mir HTML/CSS studienbegleitend anzueignen.

Natürlich könnte ich versuchen jede beliebige Seite nachzubauen, aber irgendwie würds mich mehr freuen, wenn ich nach einer Designvorlage als *.psd arbeiten könnte.

Vielleicht hat noch wer ein nicht umgesetztes psd-design rumfliegen, wo ich mich mit einer Umsetzung dran versuchen kann.

Wie gesagt, ich bin nicht auf der Suche nach Umsetzungsaufträge, wie in Lose4Scripts... es geht hier mehr um Ausbau und Festigung meiner Fertigkeiten und ggf. Referenzaufbau.

Bin für jeden Support dankbar, da der Anfang bekanntlich am schwierigsten ist :)

LG
MiBo
 
Bau klamm.de nach. Gerundete Ecken kannst du wunderbar mit CSS3 darstellen. D.h. du brauchst kein komisches Photoshop-Ding.

Wie oft sieht man im Netz irgendwelche Effekte mit Photoshop-Grafiken, obwohl man das alles auch mit CSS bauen kann.
 
flaschenkind schrieb:
Liegt vllt daran, dass man auch dem IE schöne Ecken bieten will... Nicht jeder kann und will IE-User ignorieren.
Zum Vergrößern anklicken....

Das Argument zählt für tH nicht ;)


Generell ist der IE, auch wenn er oft verflucht wird, leider weit verbreitet und selbst in der 9er Version scheinen sich meine Freunde immer noch ein paar Extrawürste herauszunehmen, die extra behandelt werden müssen.

CSS ist schön und gut, aber eine Seite muss in möglichst vielen Browsern "gut" aussehen bzw. überhaupt darstellbar sein und das ist nicht immer mit CSS allein machbar. Ecken-Radius ist z.b. ein super Beispiel.


Zum Rumspielen, bau dir selbst ein kleines Projekt, was du bei Bedarf erweiterst. Schnapp dir 1-2 Designs aus dem Lose4 und setze die um, da kannst du üben bis zum Umfallen. ;)
 
Cybo schrieb:
Das Argument zählt für tH nicht ;)
Zum Vergrößern anklicken....
Richtig. Für den IE (und allgemein Browser, die kein CSS3 ausreichend können) kann man sich auch trotzdem mit CSS2-Mitteln runde Ecken basteln. Google hierzu, wen das interessiert.

Hier gehts ja um Übung und klamm.de war nur ein Beispiel. Bis jetzt hat nämlich keiner, der hier gefragt hat (und wir haben mittlerweile ne ganze Menge solcher Threads), was er umsetzen soll, sich jemals wieder gemeldet :LOL:
 
Schon mal vielen dank für die bisherigen Beiträge.
Um hinten anzufangen; habe schon vor nun hier am Ball zu bleiben und euch über etwaige Fortschritte oder Testumsetzungen auf dem Laufenden zu halten. ;)

Klamm.de ist natürlich schon interessant.... Kann mich ja mal daran versuchen und es dann zur Diskussion hier einstellen.

Klar, dachte ich im Vorfeld auch mehr an eine grafiklastigere Umsetzung, aber stimmt schon. Schließlich geht's hier ums Coden und nicht ums freestylen in Photoshop/GIMP whatever....

Viele grüsse
Mibo
 
also ich muss auch sagen, dass ich Designs, die auf .psd aufbauen, garnicht mag...

Internetseitenerstellung ist m.M.n. auch schon ein richtiges Handwerk ... was man alles mit CSS anstellen kann, kann man z.B. auf css Zen Garden: Die Schönheit der CSS-Gestaltung sehen, wobei ich das Gefühl habe, dass dort früher irgendwie tollere Designs waren...

Jedenfalls Bilder zusammensetzen und verlinken kann jeder, aber wer eine gut aussehende Internetseite bauen kann ohne Bilder, der kann schon ein wenig Stolz sein ;)

Und zum Thema IE ... ich geb den IE-Nutzern per CC nun auch ne Meldung, dass sie sich doch bitte nen modernen Browser zulegen sollen, wenn sie die "richtige" Seite sehen wollen...

[offtopic]Kann der IE9 nun eigentlich border-radius etc.? Der IE8 den ich hier hab, kanns noch nicht -.-[/offtopic]

Achso, klamm.de nachzubauen, find ich auch eine gute Idee, vor allem wenn man gleichzeitig noch lernen will, wie man eine Seite auch für IE-Nutzer gleich macht xD
 
Huhu,
also wen es interessiert...
https://dimicatio.de/ktest/

Bis hierher soweit sogut, nich sonderlich schick, aber ein Anfang! :)
Derzeit gibts nur in Chrome "runde Ecken"... IE und Mozilla ist noch 100% kantig. Aber damit kann ich leben, wenn ich das Positioning ordentlich hinbekommen würde.

Werde nun aus Zeitmangel Feierabend machen, würde mich aber freuen, wenn der ein oder andere mal reinschauen und feedbacken könnte (entweder Thread oder PN).

ToDo's & Herausforderungen:
  • Positioning von der rechten Boxreihe (derzeit graues a-box)
  • Hovermenu unterm Header

Liebe Grüße
MiBo
 
MiBo21 schrieb:
Huhu,
also wen es interessiert...
https://dimicatio.de/ktest/
Zum Vergrößern anklicken....
Netter Versuch, sieht schon ganz ähnlich aus, aber ab in die Tonne ;) Die Anzahl der Divs und Spans, die ein Webdesigner verbaut, hat nichts damit zu tun, wie gut er ist :p

Wenn du einen Absatz mit Text hast, dann benutze auch das Paragraph-Tag.
Wenn du eine Überschrift hast, dann benutze auch ein entsprechendes Heading-Tag.

Tipp für den Start: Lass CSS weg. Strukturiere deinen Inhalt, den du darstellen willst im Kopf und schreib ihn dann in XHTML runter. Erst danach mach dich ans CSS.
Mit je weniger Klassen und IDs du auskommst, desto besser. (Mit dieser "Regel" gewöhnst du dir nämlich erst gar nicht an, jedem Tag zig Klassen und ne ID zu geben)
 
Okay, vielen dank für dein ehrliches Feedback. Ich bin nun so an die Sache heran gegangen, weil ich es bis dato nicht besser wüsste solche Boxen mit dieser Formatierung ohne CSS zu erzeugen.

In der Literatur die ich bis jetzt gelesen habe steht meist:
trenne content von Layout. Daher die Idee diese Vorgabe ebenfalls mittels CSS umzusetzen.

Wie würde denn diese Textbox in XHTML aussehen?
Zunächst runde Oberecken, farblich hinterlegte Überschrift dann der Text und dann der eckige Abschluss am Ende. Kannst du / Könnt ihr mir auf die Sprünge helfen mit einem Code-Beispiel?

Danke

LG
Mibo
 
Nur das Markup schreiben (hier mal nur die erste Box):
HTML: 
<div class="box large">
  <h1>Thema des Tages</h1>
  <div class="content">
    <h2>Einziger Christ in Pakistans Regierung ermordet</h2>
    <img src="..." alt="schwarzes Auto" />
    <p>Islamabad <cite>(dpa)</cite> - Der einzige christliche Minister in der pakistanischen Regierung ist am Mittwoch wegen seiner Kritik am umstrittenen Blasphemie-Gesetz ermordet worden. Die Tat wurde international verurteilt. Die deutsche Politik reagierte mit Entsetzen auf den Tod von Minderheiten-Minister Shahbaz Bhatti. Bundeskanzlerin Angela Merkel (CDU) verurteilte den Anschlag, Außenminister Guido Westerwelle (FDP) zeigte sich tief ...</p>
  </div>
</div>
Jetzt mit CSS ran:
Code: 
div.box {
  /* nur Rahmen für die Box */
  border-bottom: 2px solid #0000ff;
  border-left: 2px solid #0000ff;
  border-right: 2px solid #0000ff;
  border-top: 18px solid #0000ff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
div.box.large {
  /* analog für kleinere Boxen small definieren */
  width: 500px;
}
div.box h1 {
  font-weight: bold;
  color: #ffffff;
  line-height: 16px;
  font-size: 14px;
  margin: 1px 0px 1px 20px; /* Text um 16+x nach rechts */
  background: url('hier16x16icon.png') no-repeat; /* Icon links hin */
}
div.box div.content {
  background: #dfdfdf;
}
div.box div.content h2 {
  font-weight: bold;
  font-size: 12px;
  margin: 6px;
}
div.box div.content img {
  /* Annahme: in Content-Boxen gibt es eh nur ein Bild */
  float: left;
  width: 80px; height; 60px;
  border: none;
  margin-left: 6px; /* damit es nicht links am Rand klebt */
}
div.box div.content p {
  margin: 4px 6px;
  text-align: justify;
}

cite {
  font-size: 0.9em;
  color: #6f6f6f;
}
Is jetzt from scratch geschrieben, irgendwo fehlt noch n clear, das sieht sicher nicht ganz perfekt aus und sind sicher auch noch x Fehler drin, aber der Ansatz is mal da.
 
Hey, das sieht schon gut aus... habe dem HTML Teil noch ein
Code: 
 <h1 style="padding-left:20px; margin-top:-18px">Thema des Tages</h1>
hinzugefügt, damit die Überschrift im Blauen Rand oben steht.

Werde mich mal weiter hieran versuchen. Gibts eine "goldene Regel" wie die classes & id's ermittelt werden? Du zerlegst die Box ja nun in etliche Einzelteile... was super flexibel ist, weil du nun verschiedene Boxgrößen kreiern kannst, wenn man nur
Code: 
div.box.large {  width: 500px;}
abändert....

Wie denkt der erfahrene CSS'er wenn er diese Struktur aufbaut?
Alles, was ich in verschiedenen Größen und mehrfach verwenden möchte ist eine Klasse? Alles was einen Bereich kennzeichnet ist eine ID ?

Auch wenn's langsam echt gestellt rüberkommt:
Wiedermal ein großes Dankeschön an euch und speziell tH, dass sich jemand um den willigen Nachwuchs kümmert... :)

LG MiBo
 
MiBo21 schrieb:
Hey, das sieht schon gut aus... habe dem HTML Teil noch ein
Code: 
 <h1 style="padding-left:20px; margin-top:-18px">Thema des Tages</h1>
hinzugefügt, damit die Überschrift im Blauen Rand oben steht.
Zum Vergrößern anklicken....
Keine Inline-Styles benutzen! Du verlierst den Überblick. Machst du es bei einer Box, kannst du es bei einer weiteren vergessen. Also gar nicht erst machen.
Alles CSS steht im Stylesheet.

MiBo21 schrieb:
Gibts eine "goldene Regel" wie die classes & id's ermittelt werden?
Zum Vergrößern anklicken....
Hirn benutzen. Grundsätzlich gibst du nur den Tags Klassen oder IDs, die du so nicht "erreichen" kannst.

Im Beispiel muss ich weder der Box-Überschrift, noch Content-Überschrift, noch dem Bild, noch dem Text einen Namen geben, da ich volle Kontrolle über die Box selber hab. div.box liefert mir die Box und alles, was drin is.
Doof, wenn es zwei verschiedene Typen von Boxen gibt, die ggf. unterschiedliche Überschriften haben. Und schon die Keyphrase "verschiedene Typen" impliziert, dass hier 2 Klassen ran müssen.

Versuch, mit so wenig Klassen wie möglich auszukommen.

Zu ID vs. Klasse: Is im Prinzip von der Funktion für CSS dasselbe, nur dass eine ID nur einmalig verwendet werden darf. ID is auf der Portal-Seite z.B. das Quickjumpmenü oder die Guthabenanzeige. Hingegen ist ein <ul>, was das "Mein Konto"-Menü anzeigt, eine Klasse, weil es da mehrere geben kann.
Besser ne Klasse nehmen, da schadet es nichts, wenn man sie doch ein zweites Mal braucht.
 
okay... neuer Versuch.
Inspiriert von deinem Beispielcode habe ich nun folgendes gefrickelt...
https://dimicatio.de/ktest/

Hier und da is natürlich einiges arg verwandt, aber ich habe versucht es mit dem KnowHow aus deinem Beispiel auf eine abgewandte Art nachzubauen.

@edit:
Hake jetzt an folgenden Dingen:
- Runde Ecken sehen doof aus, weil der Hintergrund nich voll ausgefüllt wird (fehlt blaue Farbe an den Ecken)

- Hoverboxen über die Graphnavi legen


Vielleicht hat hier ja jemand einen Gedankenanstoß für mich... *zu tH rüberschiel* :)


LG
MiBo
 
Zuletzt bearbeitet:
MiBo21 schrieb:
Niemand eine Idee, wie ich diese 2 Dinge bewerkstelligen kann?
Danke und LG
MiBo
Zum Vergrößern anklicken....

naja, zumindest für FF könnt ich für die runden Ecken noch was nachwinken...
PHP: 
-webkit-border-top-left-radius: 25px;
-moz-border-radius-topleft: 25px;
border-top-left-radius: 25px;
das is halt einmal direkt Chrome (und Verwandte), einmal Firefox (und Verwandte) und einmal Standard ... einfach alle drei rein, dann hast es auf allen modernen Browsern drin, >>sogar der IE9 soll es können<<

für IE<9 fällt mir nur die Möglichkeit einer Grafik ein, die du dann halt als Rundung nimmst ... ist zwar keine schöne Lösung, aber der IE is ja auch kein schöner Browser ...

und für das Hover-Menü wäre vielleicht dies hier hilfreich
 
kbot schrieb:
PHP: 
-webkit-border-top-left-radius: 25px;
-moz-border-radius-topleft: 25px;
border-top-left-radius: 25px;
Zum Vergrößern anklicken....

Klappt irgendwie net... naja ich schau mal ob ich einen Workaround finde... danke dir trotzdem.

kbot schrieb:
dies hier hilfreich
Zum Vergrößern anklicken....

Das sieht super aus, das werde ich mal testen... :D

Darklord schrieb:
Naja, man kann noch tricksen.
Zum Vergrößern anklicken....

Mmmh, das sieht schon seeehr advanced aus... Ich glaub ich muss erstmal mit eckigen Ecken leben ;)


LG
MiBo
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben