Dann halt einfach ein Div um den Text und das Div einfach so ausrichten, dass es nich hinter sondern ebend über/unter/neben dem Bild ist.
Beiträge von Foster
-
-
Das hier sollte es lösen:
<!-- m --><a class="postlink" href="http://www.html-seminar.de/_forum/viewtopic.php?p=2815#2815">https://www.html-seminar.de/_forum/viewt ... =2815#2815</a><!-- m -->Zentrieren kannst du ein Element mit margin-left: auto; und maring-right:auto
-
-
Zitat von "Scart"
darauf soll dann die bannerrotation...
Und was erhoffst du dir von so einer "Bannerrotation" ? -
Ich würde vorschlagen du machst ganz einfach auf Seite1 Banner1, auf Seite2 Banner2, usw.
Das ist die unkomplizierteste Lösung. -
Hast du mal ein Beispiel, wie das aussehen soll?
-
Nebenbei: Imperativ von "schau" bleibt "schau!"
Bin zwar eigentlich kein Grammatik-Freak aber sowas tut beim Lesen schon ein bischen weh
-
Einfacher auf jeden Fall. Besser aber auch.
Man hat mit CSS eine viel breitere Palette der Gestaltungsmöglichkeiten zur Verfügung.
Zum Beispiel kann man mit CSS den Rahmen von Elementen vielfältigste Farben verpassen und dann noch einen border-style, wie zB gestrichelt oder doppelt anfügen. Mit HTML dagegen kann man lediglich border="X" einstellen und hat dementsprechend einen dickeren oder dünneren Rahmen.
Außerdem kann man mit CSS diese schönen Hover-Effekte erzeugen (zB Farbwechsel beim Überfahren eines Links).
All solche Sachen sind mit HTML ganz einfach nicht möglich, da es, wie der Name schon andeutet, eigentlich nur eine Sprache für das Layout ist (HTML = Hypertext Markup Language = Hypertext Auszeichnungssprache).
CSS (das Cascading Stylesheet) dagehen ist entwickelt worden, um HTML in rein optischer Hinsicht zu ergänzen.
Meiner Meinung nach ist CSS auch einer wirklich sehr feine Sache, da sich damit, wenn man es nur richtig anwendet, die schönsten Webseiten erstellen lassen und es auch sehr leicht anwendbar ist (das einzige, was man wirklich lernen muss, sind die einzelnen Eigenschaften, die man zuweisen kann und deren Werte). -
Wenn dieses Kreuzchen angezeigt wird, ist normalerweise das Bild laut HTML "vorhanden", der Pfad zu dem Bild, in dem Fall einfach nur der Dateiname, aber falsch...
Sieht also so aus, als wenn unter der Angabe "html-seminar.jpg" kein Bild vorhanden wäre.
Du musst also darauf achten, dass die HTML-Datei und das Bild im gleichen Ordner liegen. Sollte das nicht der Fall sein, musst du das bei src="" mit angeben (zB src="Beispielordner/html-seminar.jpg").
Oder du hast im Bildnamen selbst irgendeinen Fehler. Überprüf also einfach, ob das Bild, das du auf der Seite haben willst, genau den Namen html-seminar.jpg trägt. -
Wie "ohne CSS" ? oO
-
Also... Jeder Block steht für ein HTML-Element und gibt dessen Formatierungen an.
Das was immer vor { und } steht ist der Name des Element, also zB h1 für eine große Überschrift oder .headline für ein Div-Element, dem ich den Namen headline zugeordnet hab (in der HTML-Datei also: <div class="headline">. Der . (Punkt) dann in der CSS-Datei ist notwendig, um zu sagen, dass es eine Klasse ist; .headline bedeutet also: "Element, das das Wort 'headline' als Klasse hat ").Alles, was dann in den geschwungenen Klammern ( { } ) steht, sind die Angaben für das Element, die sich wie folgt aufbauen:
Eigenschaft: Wert;
Nach der Eigenschaft ganz einfach immer ein Doppelpunkt und nach dem Wert ein Semikolon ( ; ), damit weitere Eigenschaften dazugefügt werden können (ist nach dem letzten Wert in der Klammer nicht zwingend notwendig, aber empfehlenswert).
Das ist eigentlich schon alles, was es zum CCS-Syntax zu sagen gibt. Beispiele für Eigenschaften und Werte kannst du dir ja aus dem Quelltext oben raussuchen und anschauen.Zum allgemeinen Aufbau einer CSS-Datei gibts eigentlich überhaupt nichts zu sagen
Es gibt weder Header- noch Footer-Bereiche oder ähnliches.
Alle Blöcke für die Elemente werden ganz einfach aneinander gereiht und solange der oben beschriebene Syntax eingehalten wird, kann eigentlich auch garnix schief gehen.[/code] -
Ist nich unbedingt normal.
Eine Hälfte ist nur von einem CSS-Dropdownmenü von <!-- w --><a class="postlink" href="http://www.cssplay.co.uk">http://www.cssplay.co.uk</a><!-- w --> und ein anderer großer Teil auch von einem ziemlich verkorksten LayoutFür den Syntax kannst du dir ja einfach irgendein Element raussuchen und es dir genau anschaun.
Eine so lange CSS-Datei hab ich aber glaub ich vorher auch noch nie gehabt und ich beschäftige mich mit HTML und CSS ja nun auch schon ein Weilchen...
Du brauchst solltest dir deswegen also nicht allzu viele Gedanken machen. An CSS kann man sich ja ganz langsam rantasten...Edit:
Hier hätte ich beispielsweise den Inhalt einer etwas kürzeren und überschaubareren CSS-Datei:Code
Alles anzeigenh1 {font-size: 18pt;} h2 {font-size: 14pt;} h3 {font-size: 13pt;} #vbsp .head { font-size: 12px; } .vbsphr { width: 100%; border-bottom: 5px double #5868A8; } .gmbh { border: 5px double #000000; width:500px; height: 300px; background-image: url(../bilder/sindel.jpg); padding: 8px; } .headline { font-color: #000000; font-size: 20px; } .inhalt a.link, .inhalt a.link:visited { color: #000; background: #D6ECFF; text-decoration: none; padding: 0px 2px 0px 2px; } /* .inhalt a.link:hover { color: #FFF; background: #A0C0FF; text-decoration: underline; padding: 0px 2px 0px 2px; }*/ .inhalt a.link:hover { color: #000; background: #FFF; text-decoration: underline; padding: 0px 2px 0px 2px; } /* padding: 10px 10px 10px 10px; padding: top right bot left; */ #vbsp .vbsptop, #vbsp .vbsptop img { font-size: 12px; padding: 0px 70px 0px 70px; border: 0px; } .slider { title: nacasdfh oben; }
Die Einrückungen haben nichts zu bedeuten. Die dienen nur der Überschaubarkeit...
Manchmal sind diese auch etwas durcheinander, weil ich zT auch mit verschiedenen Editoren arbeite, die die Zeilen entsprechend immer etwas unterschiedlich weit einrücken -
Wenns weiter nichts ist
Code
Alles anzeigenbody { font-family: "Century Gothic", Verdana, Arial; font-size: 16px; background: url(bilder/bg/metal3.jpg); background-repeat: repeat; background-attachment: scroll; scrollbar-track-color: #EAEAEA; scrollbar-arrow-color: #000; scrollbar-darkshadow-color: #000; scrollbar-face-color: #DDD; scrollbar-highlight-color: #DDD; scrollbar-shadow-color: #EEE; scrollbar-3dlight-color: #FFF; overflow-x: hidden; } /* */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~ LAYOUT - ANFANG ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .layout { filter: alpha(opacity=75); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75); -moz-opacity: 0.75; opacity:0.75; } #z1{ position: absolute; top: 50px; left: 50px; } #sl { position: absolute; top: 100px; left:52px; } #sr { position: absolute; top: 100px; left: 902px; } #z2 { position: absolute; top: 1200px; left: 50px; } /* ~~~~~~~~ SCHATTEN - ANFANG ~~~~~~~~ ................................. ................................. ................................. ................................. ................................. ................................. ................................. .................................*/ .layout2 { filter: alpha(opacity=20); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); -moz-opacity: 0.20; opacity:0.2; } #sz1{ position: absolute; top: 37px; left: 44px; } #ssl { position: absolute; top: 99px; left: 47px; } #ssr { position: absolute; top: 99px; left: 909px; } #sz2 { position: absolute; top: 1211px; left: 46px; } .schatten{ position: absolute; top: 99px; left: 97px; width: 812px; height: 1112px; background: #9F9F9F ; filter: alpha(opacity=20); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); -moz-opacity: 0.20; opacity:0.2; } /*................................ ................................. ................................. ................................. ................................. ................................. ................................. ~~~~~~~~ SCHATTEN - ENDE ~~~~~~~~ */ .bg{ position: absolute; top: 100px; left: 102px; width: 800px; height: 1100px; background: #FBFBFF; filter: alpha(opacity=75); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75); -moz-opacity: 0.75; opacity:0.75; } .main { position: absolute; top: 100px; left: 102px; width: 800px; height: 1100px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~ LAYOUT - ENDE ~~~~~~~~~~~~~~~~~~~~~~~~~~~ ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ~~~~~~~~~~~~~~~~~~~~~~~~~~ INHALT - ANFANG ~~~~~~~~~~~~~~~~~~~~~~~~~~*/ a:link, a:visited, a:active{ color: #7C0 ; text-decoration: underline; } a:active, a:hover{ color: #7C0; text-decoration: none; } #ausblenden { position: absolute; top: 90px; right: 90px } /* .bgprofile{ position: absolute; top: 61px; left: -36px; width: 800px; height: 800px; background: url(bilder/bg/profile.gif) no-repeat; } */ .cl { font-size: 30px; font-family: "Bookman Old Style"; } .datum { position: absolute; top: 130px; left: 0px; width: 800px; height: 30px; border-bottom: 2px solid #29E; padding: 9px 10px 0px 5px; text-align: right; } .focused{ background-color: #AACAEA;; display: block; height: 23px; width: 190px; margin: -7px; padding-top: 7px; vertical-align:bottom; cursor: pointer; border-bottom: 1px solid #000; } .gruppe { } h1 { font-size: 30px; font-family: "Century Gothic"; color: #333; text-decoration: none; font-weight: normal; } h2 { color: #9D0; font-size: 17px; font-weight: normal; } .infobild{ position: absolute; top: 20px; right: 100px; } .inhalt { width: 810px; height: 100%; font-family: "Century Gothic"; color: #222; border: 0px solid #000; position: absolute; top: 250px; left: 20px; } .quote { color: #9D0; font-weight: bold; } .seite { width: 200px; font-weight: bold; position: absolute; bottom: 0px; left: 390px; } .text { font-size: 17px; text-align: justify; width: 360px; vertical-align:top } .titel { width: 800px; height: 130px; font-family: "Curier"; font-size: 58px; position: absolute; top: 20px; left: -60px; } .titelbild{ width: 105px; height: 105px; position: absolute; top: 0px; right: 25px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~ INHALT - ENDE ~~~~~~~~~~~~~~~~~~~~~~~~~~~ ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ..................................................................... ~~~~~~~~~~~~~~~~~~~~~~~~~~ DROPDOWN MENU - ANFANG ~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .menu ul{ list-style-type: none; padding: 0px; margin: 0px; position: absolute; top: -70px; left: 0px; } .menu li{ float: left; position: relative; z-index: 100; } .menu table{ position: absolute; border-collapse: collapse; z-index: 80; left: -1px; top: 25px; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .menu a, .menu a:visited, menu:visited{ display: block; font-size: 12px; width: 190px; padding: 7px 0px 7px 0px; color: #000001; background: #CDE; text-decoration: none; margin-right: 1px; text-align: center; } .menu a:hover{ color: #000; background: #AACAEA; } .menu ul ul, .menu ul ul:visited{ visibility: hidden; width: 149px; height: 0; position: absolute; top: 30px; } .menu ul a:hover{ color: #000; } /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .menu ul ul a, .menu ul ul a:visited{ background: #FFFFFD; filter: alpha(opacity=95); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.95; opacity: 0.95; } .menu ul ul a:hover{ background: #EAF0F7; } /* .menu ul ul a:visited{ background: #FFFFFE; } */ /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ .menu ul li:hover ul, .menu ul a:hover ul{ visibility: visible; } /* ================================================================ The original version of this menu and the associated (x)html is available at http://www.cssplay.co.uk/menus/basic_dd.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. =================================================================== */ /* ADDS AND CHANGES */ .mmtitel{ color:#555; text-align: center; border: 0px solid #000; }
-
Hm, echt eigenartig.....
Ohne den Quellcode kann dir da aber wohl nicht geholfen werden
(ich kann es jedenfalls nich ^^) -
Naja mit background-color: sorgst du ja dafür, dass der gesamte Hintergrund des Feldchens weiß ist und nicht nur die Schrift...
Wenn du nur für die Schrift einen Hintergrund haben willst, bräuchstest du ein CSS-tag wie font-background: aber das gibts afaik nich; also musst du das dann doch mit dem HTML-font-tag machen.
Da kannst du theoretisch einfach ganz am Anfang deines Textes ein font-tag mit den CSS-Angaben machen und am Ende des Textes wieder ein schließendes tag.Eine elegantere Lösung wäre natürlich transparenter Hintergrund.
Den kannst du entweder hinbekommen, indem du den gesamten Hintergrund als ein einziges großes Bild machst, was allerdings sehr zu lasten der Ladezeit gänge, für Webprojekte also eher ungeeigntet ist.
Folgendes Bild ist aus einem Projekt, das wohl nie das Licht des Internetz' erblicken wird, und nur auf CD veröffentlicht wird. Ladezeit spielt da also keine Rolle:
[Blockierte Grafik: http://foster116.fo.funpic.de/zeug/htmlseminar/dbg_max.jpg]Auf dem weißen Feldchen lässt sich dann auch schwarze Schrift prima erkennen.
Möglichkeit für dich wäre also die Transparenz per speziellem CSS-Code (also der kommt in die CSS-Datei; ob es wirklich CSS ist weiß ich nicht):
Codefilter: alpha(opacity=75); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75); -moz-opacity: 0.75; opacity:0.75;
Keine Ahnung, was das im einzelnen bedeutet aber das ist jedenfalls alles notwendig, damit es in allen Browsern schön angezeigt wird. Die 75 bzw 0.75 ist ganz einfach der Grad der Transparenz... in dem Fall also zu 75% transparent.
Angewandt könnte das dann so aussehen:
[Blockierte Grafik: http://foster116.fo.funpic.de/zeug/htmlseminar/transparent.jpg]Sieht halt sehr schick aus, wenns auch etwas kompliziert ist.
Den Code hab ich glaube von <!-- w --><a class="postlink" href="http://www.cssplay.co.uk">http://www.cssplay.co.uk</a><!-- w --> , was für mich eigentlich immer eine vertrauenswerte Seite war, daher nehme ich ganz einfach an, dass der obige Code valide ist... -
Richtig, wäre ja sonst blöd, wenn es eh ignoriert wird
Ich empfehle aber CSS-Angaben, die du in allen Dateien deines Webprojekts brauchst (wie zB angaben vom Layout oder Navigationsmenü), in einer ausgelagerten CSS-Datei zu platzieren. So kannst du dann mit ein paar Handgriffen in der CSS-Datei die Änderungen für alle HTML-Dateien wirksam machen und musst es nicht in jeder Datei ändern -
Hi, scheint so, als ob h2 ganz einfach hervorruft, dass die gesamte Zeile weiß hinterlegt wird.
Mach also am besten die Überschrift, so wie ich, in ein <font>-Tag und formatiere alles so, dass es wieder aussieht wie die h2-Überschrift (also einfach font-size und evtl. font-weight ändern (Attribut von font-weight wäre bold; die Schrift wird also fett)). -
Quellcode und evtl. Screenshot wären nicht schlecht.
Wie das mit der Hintergrundfarbe bei dir aussehen soll, kann ich mir nicht ganz vorstellen...
Bei mir kommt mit diesem Quellcode:HTML<html> <body> <font style="background-color: black; color: white;">Das ist Text! <br /> Das hier auch!</font> </body> </html>
das hier raus:
[Blockierte Grafik: http://xs224.xs.to/xs224/08075/unbenannt513.jpg] -
Ein ICQ-Forum kann dir da sicher besser weiterhelfen aber <input type=hidden name=post value=ja> sieht ohne die "" auf den ersten Blick schonmal falsch aus....
-