nicht angemeldet
Hallo selfhtml community,
ich fange zur zeit an mich mit css zu befassen und hätte da eine wichtige frage zu der ich bisher keine antwort gefunden habe.
Ist es möglich in der externen css Datei neben den Definitionen der Tags, IDs und Klassen auch die Struktur des Layouts zu bestimmen, sodass jede Blanko HTML Datei, die auf das externe Stylesheet zurückgreift automatisch so aussieht.
Also kann ich in der css datei auch definieren wann welches div mit wlecher id geöffnet werden kann? (siehe unten)
Weil nach meinem Könnensstand könnte ich zwar die einzelnen parameter der IDs ändern, allerdings müsste ich bei jeder neuen Datei den quelltext kopieren und bei einer änderung alle dateien extra ändern (z.b. die überschrift)
Falls das überhaupt möglich ist, könntet ihr mir das ja vll direkt an meinem Beispiel erklären?
Hier ist die derzeitige css datei:
@charset "utf-8";
<style type="text/css">
body {
background-image: url(farbverlauf4.gif);
text-align: center;
}
#container {
width: 780px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
background-color: #FFF;
border-top-width: 0px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #900;
border-right-color: #900;
border-bottom-color: #900;
border-left-color: #900;
}
body {
text-align: center;
background-image: url(farbverlauf4.gif);
margin: 0px;
padding: 0px;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666;
background-color: #FFF;
text-align: left;
width: 780px;
}
#header {
width: 840px;
}
#menu {
height: 40px;
width: 780px;
margin-top: 0px;
margin-bottom: 5px;
border-top-width: 2px;
border-right-width: 0px;
border-bottom-width: 2px;
border-left-width: 0px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #900;
border-right-color: #900;
border-bottom-color: #900;
border-left-color: #900;
text-align: center;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#inhalt {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 10px;
width: 780px;
}
</style>
#logo {
background-image: url(hintergrund.gif);
height: 100px;
width: 780px;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
}
#logo {
background-image: url(hintergrund2.gif);
height: 140px;
width: 780px;
border-top-color: #333;
border-right-color: #333;
border-bottom-color: #333;
border-left-color: #333;
text-align: center;
}
a {
font-size: 18px;
color: #960;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #960;
}
a:hover {
text-decoration: none;
color: #960;
}
a:active {
text-decoration: none;
color: #960;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
Und hier nun der Layout quelltext, dessen <div>.... angaben möglichst in die css datei rein sollten:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style></head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<pre>
</pre>
<pre><br /><img src="flysurferlogo.png" width="118" height="51" alt="flysurferlogo" /> <img src="ueberschrift.png" width="232" height="44" alt="kiteinfo.de logo" /> <img src="northlogo.png" width="150" height="25" alt="northlogo" /></pre>
</div>
<div id="menu">
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="middle"><a href="start.html">Start</a></td>
<td align="center" valign="middle"><a href="kites.html">Kites</a></td>
<td align="center" valign="middle"><a href="Videos.html">Videos</a></td>
<td align="center" valign="middle"><a href="Testberichte.html">Testberichte</a></td>
<td align="center" valign="middle"><a href="Kontakt.html">Kontakt</a></td>
</tr>
</table>
</div>
</div>
<div id="inhalt">
<p><a href="kites.html">Kites...s</a> fdffffd</p>
<p> </p>
<p> </p>
</div>
<div id="footer">
<p>Der Inhaber...<br />
ssda </p>
</div>
</div>
</body>
</html>
Vielen Dank schonmal für eure Hilfe.
Gunnar Bittersmann