Hallo
ich wollte mal wissen ob jemand weis wie ich css in html seiten einfüge
denn ich hab mir ein style runtergeladen (bla.css) aber ich weis nich wie ich die eifüge
freue mich auf antworten
danke schonmal
Mfg Motzki
css in html einfügen
-
Code
<link rel="stylesheet" href="ordner/datei.css" type="text/css" />
das einfach zwischen <head> und </head> einfügen.Wenn du deine css Angaben direkt
in der html machen willst, folgendes
zwischen <head> und </head> einfügen.Code<style type="text/css"> /*angaben*/ </style> -
Zitat
F:\motkzi\andere dinge\html progz\wow style\wowstyle/style.css
Wie soll denn die Website auf deinen
Rechner zugreifen? Du musst das
von deiner Datei in der du es einfügst
referenzieren.Beispiel:
Deine Datei test.html liegt im Hauptordner.
und deine css in einem Ordner darin names
docs, dann:Code<link rel="stylesheet" href="docs/datei.css" type="text/css" /> -
Mh ich stehe da auch aufm Schlauch. Habe mir ausm iNet fertige Css Layouts heruntergeladen. Möchte die nun testen wies ausschaut und dann natürlich auch benutzen. Habe die css datei in Style.css umbenannt und in der html datei habe ich wie oben genannt, den Link eingefügt
<link rel="stylesheet" href="style.css" type="text/css" />
So alles abgespeichert und sehe immer wieder nur den Hintergundraster. Was muss man denn noch machen damit alle ich genau die gleiche fertige Seite habe wie im iNet auf der Beispielseite?
-
Zeig mal nen Link
Ich hoffe du hast dir das Sheet
an einem dafür vorgesehen Ort
runtergeladen, denn auch diese
sind geschützt. -
naja, ich nehm an in der css datei stehen die definitionen diverser
div-container, schriften, tabellen etc. wenn du die nicht in deiner
html-datei hast, kann die css nix verändern.die css-datei zeigt dir nix an, sie verändert nur das aussehen von etwas.
wenn des nicht da is, hat se auch keinen einfluss... -
Das Layout von dem ich spreche gibts auf dieser Seite als bsp.: http://templates.arcsin.se/dark-ritual-website-template/
driver - Also die Codes in der .css datei sind sogesehen nur eine Vorgabe, und diese muss man dann in der html.datei bearbeiten?
-
hm....eine vorgabe... könnte man sagen.
bearbeiten weniger, ich würd sagen anwenden.du hast z.b in der css eine class namens "menue" definiert.
die beschreibt wie die höhe, größe, position usw dieser klasse ist.was du jetzt noch machen musst is diese klasse auf ein objekt,
z.b. ein div-container anwenden. also einen erzeugen in html, und
diesem dann in der html file sagen "du bist vom typ menue und
machst des was der dir sagt"beispiel:
Code.menue { position:absolute; top:100px; left:200px; width:400px;} <div class="menue">....</div> -
Ok, wenn ich das richtig verstanden habe. Muss man zu jedem Code(Baustein) eine Verbindung vom .html zum .css herstellen?
Das würde bedeuten zu jedem #"code" richjtig? - ich kopiere mal den text.
/* Structure */
#wrapper {
margin:0 auto;
width:780px;
background-color:#454943;
background-image:url(images/bg-wrapper.gif);
background-repeat:repeat-y;
background-position:right;
border-left:1px solid #CCDE8D;
border-right:1px solid #CCDE8D;
}
#header {
height:120px;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
padding:0 10px;
}
#nav {
height:35px;
line-height:35px;
background-image:url(images/bg-navigation-bar.gif);
background-repeat:repeat-x;
padding:0 10px;
}
#sidebar {
float:right;
width:180px;
background-color:#ffffff;
min-height:800px;
border:1px solid #2D302C;
margin:10px 10px 0 10px;
padding:5px;
min-height:800px;
}
#content {
width:545px;
background-color:#ffffff;
min-height:800px;
border:1px solid #2D302C;
margin:10px 10px 0 10px;
padding:5px;
}
#footer {
clear:both;
text-align:right;
padding:10px;
margin-top:-10px;
color:#ffffff;
font-size:11px;
line-height:15px;
}
#footer-links {
float:left;
line-height:30px;
}/* Navigation */
#nav ul {
list-style-type:none;
}
#nav li {
float:left;
text-align:center;
margin-right:10px;
text-transform:uppercase;
}
#nav li a {
display:block;
padding:0 15px;
font-size:10px;
color:#ffffff;
text-decoration:none;
}
#nav li a:hover {
background-image:url(images/bg-navigation-bar-hover.gif);
background-position:center;
background-repeat:no-repeat;
color:#222222;
}/* Sidebar */
#sidebar ul {
list-style-type:none;
margin-bottom:20px;
}
#sidebar li {
} -
jup, stimmt. die ganzen einstellungen in der datei zeigen selber nix an.
bestimmen nur wie etwas angezeigt werden soll. -
Dein HTML-Code müsste dann so lauten:
Code
Alles anzeigen<body> <div id="wrapper"> <div id="header"> hier kommt der header rein </div> <div id="nav"> hier kommt die horizontale Navi rein </div> <div id="sindebar"> hier kommt die rechte Sidebar rein </div> <div id ="content"> hier kommt der content rein </div> <div id="footer-links"> hier kommt der linke Footer rein </div> <div id="footer"> hier kommt der Footer rein </div> </div> </body>Wenn du die CSS-Angaben wie von xXx_BaSStar_xXx beschrieben richtig eingebaut hast, müssten dann die entsprechenden Formatierungen sichtbar werden.
-
Ju danke
Die Formatierungen sind schonmal sichtbar. Allerdings müsst ich für die anderen Codes über "/* Structure */" und darunter die Befehle herausfinden. Könnt ihr mich auf eine; für euch leicht bekannte iNet Seite verweisen. (außer selfhtml.de?) Oder aber einen kleinen html-code wie sejuma eingeben
Was ich meinte mit darüber und darunter ist das hier:
/* Misc. */
* {
margin:0;
padding:0;
}
body {
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#2D302C;
background-image:url(images/bg-body.gif);
color:#222222;
}
a {
color:#222222;
text-decoration:none;
}
a:hover {
color:#CCDE8D;
}
img {
border:0;
}
p {
margin-bottom:20px;
line-height:20px;
}--------------------------------------------------------------
Und darunter:
/* Headings */h1 a {
color:#A6C639;
text-decoration:none;
font-weight:normal;
font-size:24px;
}
h2 {
color:#A6C639;
text-decoration:none;
font-weight:normal;
font-size:20px;
}
h3 a {
font-size:30px;
font-weight:normal;
letter-spacing:-1px;
color:#ffffff;
text-decoration:none;
}/* Extra's */
.title1 {
color:#ffffff;
}
.title2 {
color:#222222;
font-style:italic;
}
.description {
font-size:12px;
font-style:italic;
color:#ffffff;
padding-left:20px;
}
.meta {
color:#777777;
border-bottom:1px dashed #777777;
padding-bottom:2px;
margin-bottom:8px;
}
.comments {
margin-top:-10px;
text-align:right;
margin-bottom:20px;
}
.comments a {
text-decoration:underline;
}
#footer-links a {
color:#ffffff;
text-decoration:none;
font-weight:bold;
}
#footer-links a:hover {
color:#CCDE8D;
} -
Jetzt solltest du dich mal etwas selbst bemühen, sonst lernst du gar nichts dabei.
Schließlich ist das hier ein Hilfeforum und kein "Mach-mir-mal-Forum"Füge mal in den Content-div einen Absatz (p-Tag), eine Überschrift h2 oder ein Bild (img) ein.
Dann setz in den Navi-Bereich mal einen Link.
Informiere dich bei http://www.css4you.de/ was eine Klasse ist und benutze die in der CSS definierten Klassen.
-
Nee Sejuma so war das nicht gemeint. Dachte man müsse zu den oben geposteten Sachen ebenfalls eine Verbindung herstellen. Die Inhalte der Seite wie Navi, Bilder, Texte usw. sind kein Problem . . .
-
Die Verbindung zu den übrigen Angaben wird überwiegend durch die gängigen HTML-Tags hergestellt.
-
teilweise is des etwas schwer. da du nicht genau erkennen kannst was
fürn objekt des darstellen soll. du siehst ja nur classe oder id.
oder wie oft das objekt auf der seite vorkommt.schau doch mal dort wo du das css-file herhast. da sollte es dann auch eine
zugehörige html-datei geben... -
Deshalb verwendet man für Klassen und IDs ja auch sinnvolle Namen....