nicht angemeldet
LAyout in die Stylesheet datei?
0 0 
Gunnar Bittersmann
0
LAyout in die Stylesheet datei?
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.
-
Yerf!
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.
Nein. CSS kann nur vorhandene Elemente formatieren, keine neuen erzeugen (generated Content mal ausgenommen, das ist nicht für diese Zwecke gedacht und auch nicht ganz unproblematisch).
Also kann ich in der css datei auch definieren wann welches div mit wlecher id geöffnet werden kann? (siehe unten)
Was du suchst ist ein Template-System, bei der du das Gerüst vorgeben und dann die einzelnen Bereiche mit Inhalt füllen kannst. Das kann man mit einer entsprechenden serverseitigen Technik (PHP, Perl, Python etc.) selber bauen oder ein vorhandenes System nutzen (sollten sich per Google finden lassen).
Evtl. kann man auch einen Schritt weiter gehen und gleich ein komplettes CMS (Content Managment System) einsetzen.
Gruß,
Harlequin
--
<!--[if lt IE 8]>This page is best viewed with a webbrowser. Get one today!<![endif]--> -
@@Clemens:
nuqneH
Also kann ich in der css datei auch definieren wann welches div mit wlecher id geöffnet werden kann? (siehe unten)
Ich verstehe deine Frage nicht ganz. Und BTW: Deppenleerzeichen
@charset "utf-8";
<style type="text/css">HTML-Tags haben in einem Stylesheet (CSS-Datei) nichts zu suchen.
</style>
Weg damit!
Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch) -
Hi,
Also kann ich in der css datei auch definieren wann welches div mit wlecher id geöffnet werden kann? (siehe unten)
"Divs" und allgemein Elemente werden durch eine ID nicht "geöffnet" (was auch immer du darunter verstehen magst), sondern identifiziert.
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)
Deine Fragestellung ist mir viel zu unklar, um erraten zu können, was du eigentlich wissen willst.
Ich kann nur vermuten, dass du eventuell nach einer Möglichkeit suchst, in allen Dokumenten vorkommende Bestandteile zentral an einer Stelle pflegen zu können.
Wenn ja - </hilfe/faq.htm#quelltext-auslagern>MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
"Divs" und allgemein Elemente werden durch eine ID nicht "geöffnet" (was auch immer du darunter verstehen magst), sondern identifiziert.
Sie werden daruch leichter idenfizierbar - auch ohne einer ID kann jedes Element innerhalb des DOM eindeutig refernziert werden.
-
Hi,
"Divs" und allgemein Elemente werden durch eine ID nicht "geöffnet" (was auch immer du darunter verstehen magst), sondern identifiziert.
Sie werden daruch leichter idenfizierbar
Nein, eindeutig -
- auch ohne einer ID kann jedes Element innerhalb des DOM eindeutig refernziert werden.
- und zwar losgelöst vom konkreten Kontext.
Identifizieren != Referenzieren
MfG ChrisB
--
Light travels faster than sound - that's why most people appear bright until you hear them speak.-
Nein, eindeutig -
- und zwar losgelöst vom konkreten Kontext.
Identifizieren != Referenzieren
Ok, das ist ein halber Punkt für dich :p
- und zwar losgelöst vom konkreten Kontext.
-
-