Zunächst das Seminar ist toll. Ich habe verschiedene Kapitel durchgearbeitet. Jetzt bin ich bei der Auslagerung der Steuerung des Boxmodels in die css-Datei gescheitert. Eine Programmierung für die Box auf der Html-Seite funktioniert einwandfrei; aber das ist ja nicht der gewollte Effekt. Es muss doch einen HTML-Befehl geben, in dem der css-Datei gesagt wird, sage mir wo und wie die Box erscheinen soll. Für einen Hinweis, wie das zu realisieren ist, wäre ich dankbar. Privatier-Rolf
Boxmodell aus dem Seminar
-
-
Hallo,
zum besseren verständnis für alle solltest Du zumindest mal den funktionierenden HTML-Code posten, damit man mal sieht was Du genau vor hast.
Viele Grüße
Lacido
-
Zitat
Es muss doch einen HTML-Befehl geben, in dem der css-Datei gesagt wird, sage mir wo
suche zB unter dem begriff
Zitatwie die Boxen erscheinen
farbe größe rand ?
steht alles auf der html-seminar seite
im allgemeinen ist es praktisch an konkreten beispielen zu arbeiten
erzähle uns was bisher unternommen hast um dein problem zu lösen
zeig uns die relevanten teile deines codes
aber vor allem
arbeite in aller ruhe die html-seminar seite durch
-
Zitat von "Privatier-Rolf"
Zunächst das Seminar ist toll. Ich habe verschiedene Kapitel durchgearbeitet. Jetzt bin ich bei der Auslagerung der Steuerung des Boxmodels in die css-Datei gescheitert. Eine Programmierung für die Box auf der Html-Seite funktioniert einwandfrei; aber das ist ja nicht der gewollte Effekt. Es muss doch einen HTML-Befehl geben, in dem der css-Datei gesagt wird, sage mir wo und wie die Box erscheinen soll. Für einen Hinweis, wie das zu realisieren ist, wäre ich dankbar. Privatier-Rolf
Ey... sorry... ich weiß nicht was du meinst.
Meinst du wie du deinem HTML Dokument sagen kannst wo die externe CSS Datei liegt?
Meinst du wie du einer Box ein Aussehen geben kannst?
-
Zitat von "Privatier-Rolf"
Zunächst das Seminar ist toll. Ich habe verschiedene Kapitel durchgearbeitet. Jetzt bin ich bei der Auslagerung der Steuerung des Boxmodels in die css-Datei gescheitert. Eine Programmierung für die Box auf der Html-Seite funktioniert einwandfrei; aber das ist ja nicht der gewollte Effekt. Es muss doch einen HTML-Befehl geben, in dem der css-Datei gesagt wird, sage mir wo und wie die Box erscheinen soll. Für einen Hinweis, wie das zu realisieren ist, wäre ich dankbar. Privatier-Rolf
Das System bleibt das selbe, wie vorher^^
Beispiel:Code
Alles anzeigen[...] <body> <div id="Header" style="height: 200px; background-color: #333;"> ... </div> <ul id="Navigation" style="list-style: none; width: 200px; float: left;"> <li><a href="#">Blabliblubla</a></li> <li><a href="#">Blabliblubla</a></li> <li><a href="#">Blabliblubla</a></li> <li><a href="#">Blabliblubla</a></li> </ul> <div id="Content" style="brackground-color: #123456;"> Lorem Ipsum, dolar ... </div> <div id="Footer" style="clear: both; height: 50px;"> <a href="Impressum.html">Impressum/Disclaimer</a> ... </div>
Nehmen wir an, dass wäre unser HTML-Code.
Wollen wir das ganze nun auslagern, so geben wir den Elementen keine Styleangaben mehr über das Style-Attribut (style="#") sondern sprechen die elemente über ihre ID oder Class an.
Unser Code sieht dann wie folgt aus:Code
Alles anzeigen/* Styleangaben in der CSS-Datei */[...] #Header { height: 200px; background-color: #333; } #Navigation { list-style: none; width: 200px; float: left; } #Content { background-color: #123456; } #Footer { clear: both; height: 50px; } <!-- HTML-Datei --> [...] <body> <div id="Header"> ... </div> <ul id="Navigation"> <li><a href="#">Blabliblubla</a></li> <li><a href="#">Blabliblubla</a></li> <li><a href="#">Blabliblubla</a></li> <li><a href="#">Blabliblubla</a></li> </ul> <div id="Content"> Lorem Ipsum, dolar ... </div> <div id="Footer"> <a href="Impressum.html">Impressum/Disclaimer</a> ... </div>
Dein 'Befehl' ist hier die ID/Class. Über ihr vermittelt die CSS-Datei die Eigenschaften an die HTML-Datei.
In der CSS-Datei benutzt man # um zu sagen, dass das Element mit der ID diese Eigenschaften bekommen soll und einen . um zu sagen, dass das Element mit der Class diese Eigenschaften bekommen soll. Bsp.:Code
Alles anzeigen#Header { ... } Trifft auf 'id="Header"' zu. .Rot { ... } Trifft auf 'class="Rot"' zu.
Ich hoffe ich konnte dir helfen
Wenn nicht, so versuche doch bitte dein Problem genauer zu beschreiben^^
Sarkkan -
Sorry, dass ich erst heute auf Eure Antworten schreibe. ersteinmal danke für die netten Antworten. Es ist nicht immer die Zeit dafür vorhanden. Trotz intemsivem Studium bin ich noch nicht weiter gekommen. Iversuche jetzt den Quelltext zu übermitteln. zunächst die htm.seite
HTML
Alles anzeigen<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <!--"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">--> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title>AGB</title> <link href="mystyle2.css" type="text/css" rel="stylesheet" > <style type="text/css"> body { color: purple; Border:3px green solid; padding-top: 1em; padding-left:20em; padding-bottom: 2.5em; background-color: white } </style> <!-- Dieser - Block steht für die kleine Box --> <div style="background-color:yellow; width:200px; height:80px; position: absolute; top: 20em; left: 2em; padding-top:15px; padding-left:20px; margin-right:5px; border:3px green solid"> Konto Nr. :000 000<br/> Bankleitzahl: 000 000 00 <br/> Institut : Irgendein </div> <!-- Ende der kleinen Box --> </head> <body> <ul class="navbar"> <li><a href="index.htm"><b><--</b> Startseite</a> </ul> <h2>AGB - Allgemeine Geschäftsbedingungen</h2> <h3> Wie bei einem natürlichem Flohmarkt,gibt es auch<br/> im virtuellen Flohmarkt keine Garantie beim <br/> Kauf gebrauchter Artikel. Jedoch sind alle Artikel<br/> mit Sorgfalt ausgesucht und soweit dies möglich war<br/> auf Fehler geprüft. </h3> <h2> Eine Rücknahme gekaufter Artikel<br /> wird ausdrücklich ausgeschlossen !</h2> <h3> Zahlungen<p> Nach Eingang der Vorauszahlung wird innerhalb von<br/> 3 Werktagen die bestellte Ware in den Versand gebracht.<br/> Sollte die Ware vergriffen sein, erhalten Sie eine Mail <br/> und dann Das Geld zurück. <h3/> Zahlungsmodi: Überweisung, Paypal </body> </html>
Ende de htm-seite.............................................................................................................
hier die CSS Seite
Code
Alles anzeigenbody { padding-left: 20em; padding-top : 5em; font-family: Georgia, "Times New Roman", Times, serif; color: green; background-color: #CCFFCC } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 5em; left: 2em; width: 9em } h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif } ul.navbar li { background: white ; <!-- Hintergrundfarbe navi-bar --> margin: 0.5em ; padding: 0.3em; border : 1px solid red } <!-- Navi-bar Rand + Hintergrund --> ul.navbar a { text-decoration: none } a:link { color: blue } a:visited { color: purple } address { margin-top: 5em; padding-top: 3em; border-top: thin dotted }
Ende der CSS-Seite.
Ich hoffe, ihr könnt mit meinem Programm etwas anfangen.
Liebe Grüsse an alle. privatier rolf -
Also wichtig ist:
Schreibe ALLES in die CSS-Datei, verwende kein <style>...</style>, beziehungsweise verwende kein style="#".
Das sieht man heute als unprofessionell an und außerdem, wenn man doch schon sowieso damit anfängt, warum zieht man es dann nicht direkt durch? (=Versuch außerdem nach Möglichkeiten auf Absolute Positionierung abzusehen =/
Das ist/kann (meiner Ansicht nach) eher unvorteilhaft sein, beziehungsweise Probleme erzeugen/..Ansonsten ganz nett
Evtl noch anzufügen ist, dass man in CSS Kommentare nicht <!-- Kommentar --> schreibt, sondern /* Kommentar */ :wink:
Außerdem kannst du dir evtl. schon mal angewöhnen, wenn du 3 Paddingwerte z.B. änderst, dass du diese dann in der Kurzschreibweise schreibst:
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!