✔ Galerie mit CSS formatieren

Diese von mir übernommene Regel für den Universalselektor * setzt im Dokument nun die voreingestellten Polsterungseigenschaften aller enthaltenden Elemente zurück:
CSS: 
* {
margin:0;
padding:0;
}

mfg Maik
 
Wenn ich den entferne, werden die Bildunterschriften im Abstand zum Bild verändert. Gibt es eine andere Möglichkeit, den Abstand ähnlich wie mit dem Zürücksetzen hinzubekommen? Macht sic hnicht gut, wenn es auf einer Seite anders aussieht als auf allen anderen.

Sorry, das ich so nervig bin. Ist schon toll, was für eine Geduld du an den Tag legst. :)

lg,
kanecorpse
 
Nun, dann legst du eben explizit für das <p>-Element innerhalb der Galerie den gewünschten Abstand fest ;)

CSS: 
.gallery ul li p {
text-align:center;
margin:? ? ? ?; /* Du hast hier die freie Wahl */
}

And dont' panic - du nervst nicht :)

mfg Maik
 
Das klappt gut.

Allerdings bekomme ich die Bildunterschrift einfach nicht unter dem Bild zentriert. Dabei ist das doch für das <p>- Element notiert mit text-align:center;. Versteh ich nicht. Wie kriegt man das hin?

lg,
kanecorpse
 
Die Bildbeschreibung ist horizontal zentriert, jedoch nicht deine Thumbnails, denn die sind derzeit linksbündig ausgerichtet.

Lösung:
CSS: 
.gallery ul li {
float:left;
width:120px;
margin:5px;
display:inline;
text-align:center; /* Inhalt horizontal zentrieren */
}

mfg Maik
 
Ohhh mann. Hab wieder an der falschen Stelle gesucht. Jetzt bin ich dank deiner Hilfe schon sehr nahe an meiner Vorstellung dran. Sieh es dir nochmal an. So in etwa soll es sein. Den Rahmen um die Bilder, die durch den Link entstehen, noch mit border:0px; wegmachen.

Kann man die farbliche Absetzung vom Code her so lassen oder gibt es da etwas beanstanden?

lg,
kanecorpse
 
Ich meinte jetzt den Code an sich. Aber die Farbe passt gut dazu. Danke dafür!
So eine ähnliche Farbe suche ich noch für die horizentale Abgrenzung zwischen head, head1 und head2. Für maintilte, content und fuss könnte man die auch nehmen. Die derzeitige Farbe ist glaub ich etwas sehr stark, oder was meinst du?

Kann man eigentlich den Listen auch noch Namen geben? Wenn man unterschiedlich formatierte Listen nutzen möchte, wäre das ja von Vorteil.

Für's erste bin ich zufrieden mit der Galerie. Hab noch ein paar Dinge verändert. Dazu würd ich gern deine Meinung hören. Der Banner ist noch nicht das Gelbe vom Ei. Hast du noch eine Idee?

Den Links hab ich eine Hintergrundgrafik verpasst. Wenn man jetzt mit der Maus drüber geht, ändert sich nur noch Schriftfarbe. Vor dem Einfügen der Hintergrundgrafik änderte sich die komplette Hintergrundfarbe bei Mausberührung. Kann man das wieder hinbekommen, wenn man die Hintergrundgrafik transparent macht?

lg,
kanecorpse
 
Zuletzt bearbeitet:
Moin,

die neue Hintergrundfarbe für die Galerie-Thumbs würde sich auch in diesen Seitenbereichen gut machen, einfach mal ein wenig herumspielen und das Ganze auf sich wirken lassen.

Der Banner geht soweit schon in Ordnung (vom Motiv her), nur warum ist er so klein skaliert? Ich würde ihn darin schon bis zum Maximum aufziehen (vergrößern).

Selbstverständlich können die Listen einen Bezeichner (ID oder Klasse) erhalten, um sie innerhalb des (X)HTML-Dokuments in ihrer Formatierung voneinander unterscheiden zu können.

In meinem Beispiel habe ich die Formatierung der Galerie-Liste mit dem Selektor für Nachfahren (.gallery ul) vorgenommen, womit diese CSS-Regeln ausschließlich für die Liste innerhalb des DIVs mit der Klasse .gallery gelten, und alle übrigen Listenelemente im (X)HTML-Dokument von ihnen unberührt bleiben.

Was den Hintergrund der Links im Navigationsmenü betrifft, so steht es dir frei, mit der :hover-Pseudoklasse einen entsprechenden Hintergrund darzustellen.

Hierfür muß aber anstelle von background-image und background-color die allgemeine background-Eigenschaft genutzt werden, damit der Wechsel vollzogen wird. Ich hab hier zusätzlich die Regelblöcke und Pseudoklassen in der richtigen Reihenfolge notiert:
CSS: 
a.menu {
 display:block;
 padding:3px;
 border-top:1px solid #643200;
 background:url(conie.jpg);
 text-align:left;
 color:#000000;
 text-decoration:none;
}
a.menu:link, a.menu:visited {
 background:#E6DB8E;
}
a.menu:hover, a.menu:active {
  color:#737994;
 background:#eeeeee;
}


Sodele, ich wünsche dir vorab ein frohes Weihnachtsfest im Kreise deiner Familie und Freunde :)

Ich mach' mich dann im Laufe des Tages in den Urlaub, und kehre voraussichtlich am 28.12. wieder zurück.

mfg Maik
 
Moin,

Danke für dir Korrektur des Styles. Soweit war ich nocht nicht. Hab es dann vorgezogen und die Dateien aufgeräumt. Ist doch gleich viel übersichtlicher :)

Die Links klappten so leider nicht. Habs dann aber noch gefunden. Das macht sich echt prima. Damit bin ich zufrieden.

Ich wünsche dir und deinen Lieben frohe Weihnachten. Komm heil zurück ausm Urlaub ;)

lg,
kanecorpse
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück