 CSS, ich steh auf'm Schlauch... |
|
Willkommen, Gast ( Anmelden | Registrierung )
HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML  |
 12.09.2006 - 7:22
Beitrag
#1
|
|
|
is getting harder Gruppe: User Beiträge: 13 Mitglied seit: 06.09.2006 Mitglieds-Nr.: 6.258  |
Beispiel
Wie schaffe ich es, dass ich genau unter die Thumbnails auch noch Bildunterschriften habe? Wenn ich div-container nehme, stehen die Unterschriften untereinander. Bei float:left steht eine an der linken Seite. Ich steh echt auf'm Schlauch - ich brauch einen Denkanstoß... Ansonsten habe ich die Seite jetzt komplett ohne Tabellen *grins*, und den Scroller sieht man auch wieder  Claudia |
 |
 
|
|
12.09.2006 - 14:00
Beitrag
#2
|
|
|
is getting harder Gruppe: User Beiträge: 13 Mitglied seit: 23.08.2006 Wohnort: Halstenbek Mitglieds-Nr.: 6.197 |
ZITAT(claudettina @ 12.09.2006 - 7:22)  Beispiel Wie schaffe ich es, dass ich genau unter die Thumbnails auch noch Bildunterschriften habe? Wenn ich div-container nehme, stehen die Unterschriften untereinander. Bei float:left steht eine an der linken Seite. Ich steh echt auf'm Schlauch - ich brauch einen Denkanstoß... Ansonsten habe ich die Seite jetzt komplett ohne Tabellen *grins*, und den Scroller sieht man auch wieder Claudia Ich würde ´mal vorschlagen, dass für jedes Bild ein separater div-Container notwendig ist, dann klappt es auch mit den Unterschriften. Beispiel: QUELLTEXT <div id="content"> <p>Our day trips - please choose, where you want to go:</p> <div class="gallery"> <div class="bildcontainer"> <!-- Das ist neu --> <a href="linum.html"> <img src="tnLinum 023.JPG" alt="Linum"></a> <span>Linum</span> </div> <div class="bildcontainer"> <!-- Zweites Bild --> <a href="dresden.html"> <img src="tnDresden 26.JPG" alt="Dresden 2005"></a> <span>Dresden</span> </div> <!-- Weitere Bilder --> </div> </div> Wenn die div.bildcontainer nun etwas länger sind, als die Bilder, z.B. width 100, height 120, dann sollte der Text direkt unter dem Bild erscheinen. Weitere Formatierungen (zentrirt etc) sind möglich. Wichtig ist nur, dass die div.bildcontainer die Werte float:left zugeordnet bekommen. im übrigen würde ich die Breiten- und Höhenangaben der Bilder in der CSS-Datei definieren, dann wird der html-code schlanker und besser lesbar. Ich habe das oben gleich einmal gemacht. Die zugehörige CSS-Schnippel lauten: QUELLTEXT div.bildcontainer { float:left; margin:0; border:0; padding:0; width:100px; heigth:120px; } div.bildcontainer img { border:0; width:100px; heigth:100px; } Zuletzt noch ein Tip. Nimm um aller User-Willen die Leerzeichen aus den Dateinamen! Ich fürchte, dass sonst bei den meisten Providern Schluss mit lustig ist. Außerdem aufgepasst mit der Groß- und Kleinschreibung bei Dateinamen. Bei manchem Provider wird das alles "klein" gemacht, mit der Folge, dass die Dateien nicht mehr aufrufbar sind. |
|
|
|
|
14.09.2006 - 9:20
Beitrag
#3
|
|
|
is getting harder Gruppe: User Beiträge: 13 Mitglied seit: 06.09.2006 Mitglieds-Nr.: 6.258 |
Nee, klappt nicht. Ich hab mal einen Screenshot angehängt, wie es jetzt aussieht. Anscheinend greift die class der gallery nur noch beim ersten Bild. Außerdem will ich alle drei nebeneinander zentriert haben und nicht einen ganz links. Deswegen denke ich mal, dass float:left nicht geeignet ist.
 Claudia |
|
|
|
|
14.09.2006 - 9:35
Beitrag
#4
|
|
|
unser täglich Posting gib uns heute  Gruppe: User Beiträge: 230 Mitglied seit: 28.01.2006 Wohnort: Braunschweig Mitglieds-Nr.: 5.804 |
Tja, eigentlich schon Alles gesagt.
Aber das mit der Groß-/Kleinschreibung kann ich nur bestätigen, die Leerzeichen ebenso. Auf dem heimischen PC läuft Alles prima, manchmal dann auch im Netz. Aber anscheinend passiert beim Routing ab und zu, dass eben die Kleinschreibung zwingend erforderlich ist. Bei meiner Page ist es mal passiert, dass ich sie mehrfach aufgerufen habe, ohne Probleme, plötzlich fehlten Dateien. Da ist Phase5 leider zu sehr Windows orientiert, wäre mal 'ne Überlegung, ihn mehr an Unix anzubinden. Und für alle, die HTML programmieren: die Unix (und auch Linux) Konventionen, die man wissen sollte: keine Leerzeichen nur Kleinschreibung macht die Sache eigentlich einfach. Gruß von Jomal  ZITAT(claudettina @ 14.09.2006 - 10:20) Nee, klappt nicht. Ich hab mal einen Screenshot angehängt, wie es jetzt aussieht. Anscheinend greift die class der gallery nur noch beim ersten Bild. Außerdem will ich alle drei nebeneinander zentriert haben und nicht einen ganz links. Deswegen denke ich mal, dass float:left nicht geeignet ist. Claudia Und wie wäre es mit der verpöten Tabelle? Scheint mir am einfachsten zu sein. Gruß, jomal |
|
|
|
|
14.09.2006 - 12:41
Beitrag
#5
|
|
|
hdb Gruppe: User Beiträge: 685 Mitglied seit: 26.10.2001 Wohnort: Köln Mitglieds-Nr.: 5 |
HTML <html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Auch ich kämpfe für ein tabellenfreies web, was es auch koste!</title> <style type="text/css"> #con { text-align: center; width:340px; margin:auto; } #col1 { float: left; height: 100px; width: 100px; border: 1px solid #000000; margin: 0px 5px; } #lnk1 { float: left; height: 12px; width: 100px; font: 9px Arial, Helvetica, sans-serif; color: #993300; margin: 5px 5px 0px; } </style> </head> <body> <div id="con"> <div id="col1"></div> <div id="col1"></div> <div id="col1"></div> <div id="lnk1">link</div> <div id="lnk1">link</div> <div id="lnk1">link</div> <br clear="all" /> </div> </body> </html> |
|
|
|
|
14.09.2006 - 16:29
Beitrag
#6
|
|
|
is getting harder Gruppe: User Beiträge: 13 Mitglied seit: 23.08.2006 Wohnort: Halstenbek Mitglieds-Nr.: 6.197 |
Ohne besserwisserisch wirken zu wollen, die Lösung funktioniert zwar, aber 2 Anmerkungen:
ZITAT(db @ 14.09.2006 - 13:41) <div id="col1"></div> <div id="col1"></div> <div id="col1"></div> <div id="lnk1">link</div> <div id="lnk1">link</div> <div id="lnk1">link</div> Die mehrfache Verwendung der gleichen id ist nicht HTML/CSS-konform, auch wenn die meisten Browser das akzeptieren. Der richtige Weg ist hier die Definition von Klassen und die Einbindung mit "class"  ZITAT <br clear="all" /> Nicht gut, da XHTML, nicht HTML, dann muss auch eine entsprechende Definition im Header erfolgen Dieses nur, da ich neben dem Kampf den Tabellen auch den Kampf für "HTML strict" aufgenommen habe. ZITAT(claudettina @ 14.09.2006 - 10:20) Nee, klappt nicht. Ich hab mal einen Screenshot angehängt, wie es jetzt aussieht. Anscheinend greift die class der gallery nur noch beim ersten Bild. Außerdem will ich alle drei nebeneinander zentriert haben und nicht einen ganz links. Deswegen denke ich mal, dass float:left nicht geeignet ist. Claudia Na sorry, versuche es einmal mit der richtigen Schreibweise. Ich hatte in CSS "heigth" geschrieben! Es muss aber "height" heissen.  Gegebenenfalls muss die Definition der class .gallery angepasst werden bzw. die Eigenschaften von "span" neu definiert werden, falls sie zuvor andere Eigenschaften zugewiesen bekommen hat. |
|
|
|
|
14.09.2006 - 17:25
Beitrag
#7
|
|
|
hdb Gruppe: User Beiträge: 685 Mitglied seit: 26.10.2001 Wohnort: Köln Mitglieds-Nr.: 5 |
ZITAT(stwie @ 14.09.2006 - 17:29) Ohne besserwisserisch wirken zu wollen, die Lösung funktioniert zwar, aber 2 Anmerkungen: ... Sorry, als Ketzer kann ich mich hier nur am Rande um Konformisten kümmern. Mach Dir Kopien von lnk1 und img1 und ändere die Zeilen. Dann noch validieren und das entsprechende Logo einbinden. Ganz wichtig! Wenn's dann immer noch funktioniert, tja, dann funktioniert es halt. |
|
|
|
|
14.09.2006 - 20:02
Beitrag
#8
|
|
|
Anwärter auf W3.org Mitgliedschaft Gruppe: User Beiträge: 550 Mitglied seit: 28.11.2001 Wohnort: Berlin Friedrichshain Mitglieds-Nr.: 107 |
Hallo
ZITAT(jomal @ 14.09.2006 - 10:35) Und für alle, die HTML programmieren: die Unix (und auch Linux) Konventionen, die man wissen sollte: keine Leerzeichen nur Kleinschreibung So, jetzt will ich auch mal Korinthen kacken. - HTML programmiert man nicht - Dateinamen mit Leerzeichen (und auch Umlauten) werden von UNIX/Linux akzeptiert, sind aber im HTTP-Kontext schwierig, da sie maskiert werden müssen. Leider wissen und tun das viele nicht (so es der Browser nicht von allein tut), das ist das Problem. - Die Kleinschreibung ist eine Empfehlung (aber eine sehr gute), kein Muss. ZITAT(db @ 14.09.2006 - 18:25) ... Dann noch validieren und das entsprechende Logo einbinden. Ganz wichtig! ... Was soll der polemische Quatsch? Eine ID muss dokumentweit eindeutig sein, Punktum. Auch wenn das in Bezug auf CSS und die Fehlertoleranz der Browser funktionieren sollte, wenn die ID zusätzlich per JavaScript angesprochen werden oder als Sprungziel dienen soll, ist Schluss. Dann doch bitte gleich richtig, damit es nicht hinterher zu unnötigen Nachfragen kommt. Tschö, Auge |
|
|
|
|
14.09.2006 - 22:11
Beitrag
#9
|
|
|
hdb Gruppe: User Beiträge: 685 Mitglied seit: 26.10.2001 Wohnort: Köln Mitglieds-Nr.: 5 |
ZITAT(Auge @ 14.09.2006 - 21:02) ... Was soll der polemische Quatsch? Eine ID muss dokumentweit eindeutig sein, Punktum. Auch wenn das in Bezug auf CSS und die Fehlertoleranz der Browser funktionieren sollte, wenn die ID zusätzlich per JavaScript angesprochen werden oder als Sprungziel dienen soll, ist Schluss. Dann doch bitte gleich richtig, damit es nicht hinterher zu unnötigen Nachfragen kommt. Tschö, Auge Ich erlaube mir gelegentlich Scherze. Wenn Du die schon nicht verstehst, sei doch wenigstens dankbar für die Vorlage zu Deiner allabendlichen Selbstbalsamierung. Punktum und Basta! |
|
|
|
|
15.09.2006 - 6:08
Beitrag
#10
|
|
|
Weiss zuviel!!  Gruppe: Mods Beiträge: 668 Mitglied seit: 19.04.2002 Wohnort: Grimmen Mitglieds-Nr.: 385 |
Hallo,
jaaaaaa, endlich mal wieder was los hier!  ZITAT(stwie @ 14.09.2006 - 17:29) Ohne besserwisserisch wirken zu wollen, die Lösung funktioniert zwar, aber 2 Anmerkungen: ZITAT(Auge @ 14.09.2006 - 21:02) Dann doch bitte gleich richtig, damit es nicht hinterher zu unnötigen Nachfragen kommt. Die Ritter der Web-(Tafel-)Runde rüsten zum ultimativen Kampf.  Das Säbelrasseln ist deutlich zu hören, die Pferde scharren nervös den Boden auf, das buntgeschmückte Volk wartet in Ehrfurcht auf das Aufeinandertreffen der hochgerüsteten Giganten. Und daaa, die Lanzen brechen, aber die Helden sitzen noch im Sattel. Wer wird wohl als erstes zu Boden gehen? Wer wird endlich die Gunst der angebeteten Jungfrau Hypera Markup gewinnen, um der zukünftige Nachfolger auf dem Weberia-Thron zu sein? ....Demnächst in diesem Forum. Die neue Serie vom amerikanischen Starregisseur Cascading Stylesheet. An der Kamera Divless Construct. Schauen Sie wieder rein, verpassen Sie nichts! |
|
|
|
| Google Bot |
Beitrag
#
|
 Google Ads |
|
|
|
|
|
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:
|
Vereinfachte Darstellung | Aktuelles Datum: 21.05.2025 - 22:31 |