 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! |
|
|
|
|
15.09.2006 - 11:23
Beitrag
#11
|
|
|
hdb Gruppe: User Beiträge: 685 Mitglied seit: 26.10.2001 Wohnort: Köln Mitglieds-Nr.: 5 |
HTML sei keine Programmiersprache, wurde hier treffenderweise schon oft belehrend angeführt. Wer HTML-Neulingen mal eben nebenbei CSS empfiehlt, sollte dies bedenken, denn Cascading Style Sheets ist eine Programmiersprache, welche wie alle anderen Sprachen erlernt werden muss. Phonetisches Nachbrabbeln führt zwar im Einzellfall zum gewünschten Resultat, gewonnen ist damit aber nichts. Das gilt natürlich auch für HTML. Guckst du hier, guckst du da und guckst du weita, sind so lehrreich wie Verweise auf die Pinyin-Umschrift für einen nicht chinesisch Sprechenden.
Wer, aus welchen Gründen auch immer, CSS hier propagieren möchte, soll dies tun. Dann aber bitte richtig. Es gibt im Netz hervorragende Einführungen in CSS, die einem Bücherkauf zunächst, allein schon wegen der Preise, vorzuziehen sind. Zuerst http://de.wikipedia.org/wiki/Cascading_Style_Sheets besuchen, damit man ahnt um was es geht. Hilft auch Absurditäten wie "keine Tabellen" etc. zu verstehen. http://www.thestyleworks.de/index.shtml http://www.brings-online.com/webhilfe/index.php http://www.css4you.de/ http://www.stichpunkt.de/css/bereiche.html http://www.webmaster-resource.de/tutorials/css.php http://jigsaw.w3.org/css-validator/validator-uri.html |
|
|
|
|
15.09.2006 - 12:05
Beitrag
#12
|
|
|
is getting harder Gruppe: User Beiträge: 13 Mitglied seit: 06.09.2006 Mitglieds-Nr.: 6.258 |
ZITAT Na sorry, versuche es einmal mit der richtigen Schreibweise. Ich hatte in CSS "heigth" geschrieben! Es muss aber "height" heissen. Ich hab das schon richtig geschrieben, und nicht einfach nur per copy und paste eingefügt. Ich wollte und will hier aber keine Grundsatzdiskussionen vom Zaun brechen - auch wenn Ihr Euch freut *lol*. Ich bin für mich zu einer Lösung gekommen, und die heißt Tabelle. Ist am einfachsten und sieht (hoffentlich) überall gleich aus. Ist aber noch nicht hochgeladen, weil ich noch im Büro sitze. Claudia |
|
|
|
|
15.09.2006 - 12:18
Beitrag
#13
|
|
|
hdb Gruppe: User Beiträge: 685 Mitglied seit: 26.10.2001 Wohnort: Köln Mitglieds-Nr.: 5 |
ZITAT(claudettina @ 15.09.2006 - 13:05) ... Ich bin für mich zu einer Lösung gekommen, und die heißt Tabelle. Ist am einfachsten und sieht (hoffentlich) überall gleich aus. Ist aber noch nicht hochgeladen, weil ich noch im Büro sitze. Claudia Glückwunsch! :-) Zunächst mal mit einer Tabelle, zwei Zeilen mit je drei Spalten, keine Schnörkel wie Border etc.. Später vielleicht mit CSS "aufhübschen", denn, wer hätte das gedacht? CSS ist auch für Tabellen gemacht. |
|
|
|
|
16.09.2006 - 9:44
Beitrag
#14
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Moin Dieter,
ZITAT(db @ 15.09.2006 - 10:23) ... Guckst du hier, guckst du da und guckst du weita, sind so lehrreich wie Verweise auf die Pinyin-Umschrift für einen nicht chinesisch Sprechenden... Einspruch euer Ehren! Imho ist gerade das: ''Guckst du hier, guckst du da und guckst du weita'' eminent wichtig um den learning by doing Prozess voran zu treiben, ständiges nachsehen in der Quellcode von Webseiten an den man gefallen hat und den Versuch alsdann zu verstehen ''wie die das gemacht haben'', bring einem ungeheuer voran. So ist zumindest meine Erfahrung und das nicht nur in Sachen HTML, sondern auch im beruflichen Leben. Sicherlich sollte am Ende auch das theoretische Gerüst irgendwann mal stehen, schließlich sollte man wissen was man da tut ( B) ), da sind die von Dir angegebenen Links ungeheuer wichtig, hilf- und lehrreich. cu Conny |
|
|
|
|
16.09.2006 - 10:17
Beitrag
#15
|
|
|
hdb Gruppe: User Beiträge: 685 Mitglied seit: 26.10.2001 Wohnort: Köln Mitglieds-Nr.: 5 |
ZITAT(Conny @ 16.09.2006 - 10:44) ... Klar, Conny, lesen bildet, leider muss man dazu erst einmal lesen können. Verweise auf weitere Texte haben noch keinem Anfänger geholfen es zu erlernen. Weiter oben hatte ich ja ein Beispiel angefügt. Kann jeder „lesen", jedoch nicht jeder verstehen. Mal abgesehen von den Experten, die natürlich lauthals intervenierten. Spätestens ab dem Punkt müssen die noch nicht ganz CSS-Lesefesten die Segel streichen. Warum Du gerade mir, der ich doch auch hier immer für Hilfe zur Selbsthilfe eintrete und meine Beispiele dementsprechend gestalte, Learning bei Doing erklären möchtest, ist mir nicht ganz einsichtig.Sicherlich sollte am Ende auch das theoretische Gerüst irgendwann mal stehen, schließlich sollte man wissen was man da tut (  ), da sind die von Dir angegebenen Links ungeheuer wichtig, hilf- und lehrreich.cu Conny Sicher, man kann auch bei CSS Trial and Error praktizieren, die Kontrolle an den Browser abgeben - und dann versuchen die CSS-Logik zu verstehen. Ein mühsamer, wenig erfolgversprechender Weg! Natürlich sehe auch ich mir CSS-Files auf fremden Webseiten an. Man will ja wissen wie wer was gemacht hat und liest halt. |
|
|
|
|
16.09.2006 - 21:39
Beitrag
#16
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Hallo Dieter,
ZITAT(db @ 16.09.2006 - 9:17) ... Warum Du gerade mir, der ich doch auch hier immer für Hilfe zur Selbsthilfe eintrete und meine Beispiele dementsprechend gestalte, Learning bei Doing erklären möchtest, ist mir nicht ganz einsichtig... Mir auch nicht... denn das ist/war auch nicht meine Intension. Schließlich bist Du ein alter Hase, von dem die Meisten noch was lernen können (mich eingeschlossen). Ich dachte es war klar, habe ich doch nur das für mich wesentlich zitiert; im Kern und sinngemäß: Guckst Du hier sei nicht Lehrreich und DAS ist imho nicht richtig. Damit möchte ich nicht unbedingt was erklären, vielmehr ein gestatteter Hinweis zumal auch aus der eigenen Erfahrung entsprungen. cu Conny |
|
|
|
|
17.09.2006 - 11:41
Beitrag
#17
|
|
|
hdb Gruppe: User Beiträge: 685 Mitglied seit: 26.10.2001 Wohnort: Köln Mitglieds-Nr.: 5 |
Guckst du hier!
Damit man einen erfolgreichen Einstieg in CSS finden kann, hier noch eine Linkempfehlung. Bei fractatulum-CSS von Jan Heinicke finden sich leicht verständliche, didaktisch geschickte, einführende und erklärende Texte sowie praktische Beispiele als Vorlage für eigene Versuche. |
|
|
|
|
17.09.2006 - 16:02
Beitrag
#18
|
|
|
unser täglich Posting gib uns heute Gruppe: User Beiträge: 230 Mitglied seit: 28.01.2006 Wohnort: Braunschweig Mitglieds-Nr.: 5.804 |
[quote name='Auge' date='14.09.2006 - 21:02' post='23294']
Hallo Auge, das mit dem 'Programmieren' von HTML war nur eine Mißdeutung. Allerdings, wenn ich Code in HTML schreibe oder in C++ oder Visual Basic, wo ist der Unterschied? Naja, macht nichts, ich sehe das nicht so eng. Gruß von jomal
|
|
|
|
|
22.09.2006 - 6:51
Beitrag
#19
|
|
|
unser täglich Posting gib uns heute Gruppe: User Beiträge: 230 Mitglied seit: 28.01.2006 Wohnort: Braunschweig Mitglieds-Nr.: 5.804 |
Dieses nur, da ich neben dem Kampf den Tabellen auch den Kampf für "HTML strict" aufgenommen habe.
Hallo, stwie, wieso eigentlich Kampf gegen die Tabellen? Ich komme damit gut zurecht. Naja, was man einmal richtig kann, das schmeißt man kaum über Bord. Aber eine Überlegung ist es schon Wert. Ich habe früher auch kein CSS benutzt und es nun schätzen gelernt. Vielleicht bin ich da ein wenig träge. Allerdings sehe ich es so, dass eine Seite gut aussehen soll, und wie ich das erreiche, das spielt für mich kaum eine Rolle. Ich weiß, dass ich nicht immer den besten Stil beim programmieren habe (Hochsprache allerdings), aber wichtig ist doch, dass der User etwas Brauchbares findet, egal, ob da manchmal Spagetti-Code hintersteckt. Obwohl, meine alten Programme habe ich dann doch immer optimiert, aber der User merkt davon eigentlich nichts, lediglich die Wartung ist leichter. Apropos Wartung: viel wichtiger ist für mich das gute Kommentieren, zu dumm, dass das bei HTML-Code auch immer mit längeren Ladezeiten verbunden ist. Naja, bei meinem DSL2000 macht das nichts, aber es gibt ja auch noch Leute, die mit Modem arbeiten. Da in Phase5 keine Möglichkeut besteht, auch eine Version ohne Kommentare zu speichern, werde ich demnächst ein Programm schreiben, welches das für mich erledigt. Angeregt wurde ich von einem uralten Basic-Programm namens REMLINE. Ja, in Zeiten der alten DOS-Rechner war das nicht verkehrt, das Laden von Diskette wurde so schneller. Nun ja, ich werde erstmal bei den Tabellen bleiben, aber wenn Du ein vernünftiges Argument hast, überdenke ich diese Entscheidung natürlich. Gruß jomal
|
|
|
|
| Google Bot |
Beitrag
#
|
 Google Ads |
|
|
|
|
|
2 Besucher lesen dieses Thema (Gäste: 2 | Anonyme Besucher: 0)
0 Mitglieder:
|
Vereinfachte Darstellung | Aktuelles Datum: 06.07.2025 - 10:53 |