Aktives Mitglied
Ich habe mal versucht nach diesem Tuterial
eine Webseite zu erstellen...nun muss ich eine dumme Frage stellen....wie füge ich die externe, css in die Webseite ein?
Hab hier mal den Quelltext kopiert
und hier die css
Ich hoffe ihr könnt mir nen Tipp geben,denn das ist leider nicht angegeben und ich kriegs nicht hin eine Webseite zu erstellen
eine Webseite zu erstellen...nun muss ich eine dumme Frage stellen....wie füge ich die externe, css in die Webseite ein?
Hab hier mal den Quelltext kopiert
HTML:
<!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">
<head>
<title>Webdesign mit (x)html und css</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
</style>
</head>
<body>
<div id="layout">
<h1><span></span>Webdesing mit xhtml und css</h1>
<div id="navigation">
<ul>
<li class="blau"><a href="">Startseite</a></li>
<li class="grau"><a href="">Kontakt</a></li>
<li class="gruen"><a href="">Gallerie</a></li>
<li class="orange"><a href="">Impressum</a></li>
</ul>
</div>
<div id="inhalt">
<h2>Überschrift</h2>
<p>
Text
</p>
</div>
</div>
<div id="footer">
<p>
<span>xhtml und css</span>
</p>
</div>
</body>
</html>
und hier die css
Code:
/* #id, .class, html-tag { Anweisung; Anweisung2; } */
html,body {
height:100%;
margin:0;
padding:0;
font-size:100.01%;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align:center;
background:#ccc;
}
* html #layout {
height: 100%;
}
#layout {
margin:0 auto;
width:780px;
text-align:left;
min-height:100%;
height:auto;
border-left:1px solid #000;
border-right:1px solid #000;
background:#fff url(bilder/inhalt_bg.png) repeat-y;
}
h1 {
width: 100%;
height: 167px;
position: relative;
padding:0;
margin:0;
background:#fff;
}
h1 span {
background: url(bilder/header.png) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
h2 {
font-size:120%;
font-weight:normal;
border-bottom:1px solid #999;
margin:0 2em 0 0;
}
#navigation{
display:block;
height:25px;
font-size:0.9em;
background:#000 url(bilder/navi_bg.png) repeat-x;
border-bottom:2px solid #fff;
}
#navigation ul{
margin:0 auto;
padding:0;
list-style-type:none;
width:37em;
}
#navigation ul li{
display:block;
float:left;
margin:0;
}
#navigation ul li a{
display:block;
float:left;
color:#fff;
text-decoration:none;
padding:0 3.5em 0 1em;
line-height:25px;
}
#navigation ul li a:hover {
color:#000;
}
.blau {
background: url(bilder/navi_blau.png) repeat-x;
border-left:1px solid #fff;
}
.grau {
background: url(bilder/navi_grau.png) repeat-x;
border-left:1px solid #fff;
}
.gruen {
background: url(bilder/navi_gruen.png) repeat-x;
border-left:1px solid #fff;
}
.orange {
background: url(bilder/navi_orange.png) repeat-x;
border-left:1px solid #fff;
border-right:1px solid #fff;
}
#inhalt {
padding:4em 200px 8em 150px;
font-size:0.85em;
color:#666;
line-height:1.4em;
}
#footer {
background:url(bilder/footer_bg.png) repeat-x left bottom;
width:780px;
height:196px;
margin:-196px auto;
text-align:center;
font-size:0.7em;
color:#666;
}
#footer p {
padding:0;
margin:0;
height:196px;
background:url(bilder/footer.png) no-repeat right bottom;
}
#footer span {
position:relative;
top:160px;
}
Ich hoffe ihr könnt mir nen Tipp geben,denn das ist leider nicht angegeben und ich kriegs nicht hin eine Webseite zu erstellen
Zuletzt bearbeitet von einem Moderator: