CSS einbinden

Status
Nicht offen für weitere Antworten.
P

Pennywise09

Grünschnabel
Hallo

Ich bin noch absolut unerfahren, was CSS angeht.

Ich habe folgendes CSS :

Layout.css

html, body {
width: 100%;
height: 100%;
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #FF9900;
overflow: hidden; /* Scrollbalken im Fenster unterbinden */
}
#mitte {
position: absolute;
top: 150px; /* Abstand zum oberen Fensterrand */
left: 200px; /* Abstand zum linken Fensterrand */
bottom: 50px; /* Abstand zum unteren Fensterrand */
right: 100px; /* Abstand zum rechten Fensterrand */
overflow: auto; /* Scrollbalken, falls notwendig */
}
* html #mitte {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top-width: 150px; /* = Kopfzeilenhöhe */
border-left-width: 200px; /* = Spaltenbreite links */
border-bottom-width: 50px; /* = Fußzeilenhöhe */
border-right-width: 100px; /* = Spaltenbreite rechts */
border-style: solid ;
}
#mitte .inhaltDiv {
margin: 20px; /* Abstand des Inhalts zum Blockrand */
}
#oben {
position: absolute;
top: 0; /* Abstand zum oberen Fensterrand */
left: 0; /* Abstand zum linken Fensterrand */
right: 0; /* Abstand zum rechten Fensterrand */
height: 150px; /* Blockhöhe */
padding: 0; /* Interpretation Boxmodell! */
background-color: #FF9900;
overflow: hidden; /* Scrollbalken unterbinden */
z-index: 4; /* höchste z-Ebene! */
}
* html #oben {
width: 100%;
height: 150px;
}
#oben .inhaltDiv {
margin: 10px; /* Abstand des Inhalts zum Blockrand */
}
#links {
position: absolute;
top: 150px; /* Abstand zum oberen Fensterrand */
left: 0; /* Abstand zum linken Fensterrand */
bottom: 0; /* Abstand zum unteren Fensterrand */
width: 200px; /* Blockbreite */
padding: 0; /* Interpretation Boxmodell! */
background-color: #FF9900;
overflow: auto; /* Scrollbalken, falls notwendig */
z-index: 3;
}
* html #links {
top: 0;
width: 200px;
height: 100%;
border-top-width: 150px; /* = Kopfzeilenhöhe */
border-left-width: 0;
border-bottom-width: 0;
border-right-width: 0;
border-style: solid;
}
#links .inhaltDiv {
margin: 10px; /* Abstand des Inhalts zum Blockrand */
}
#unten {
position: absolute;
left: 200px; /* Abstand zum linken Fensterrand */
bottom: 0; /* Abstand zum unteren Fensterrand */
right: 0; /* Abstand zum rechten Fensterrand */
height: 50px; /* Blockhöhe */
padding: 0; /* Interpretation Boxmodell! */
background-color: #FF9900;
overflow: hidden; /* Scrollbalken unterbinden */
z-index: 2;
}
* html #unten {
left: 0;
width: 100%;
height: 50px;
border-top-width: 0;
border-left-width: 200px; /* = Spaltenbreite links */
border-bottom-width: 0;
border-right-width: 0;
border-style: solid;
}
#unten .inhaltDiv {
margin: 10px; /* Abstand des Inhalts zum Blockrand */
}
#rechts {
position: absolute;
top: 150px; /* Abstand zum oberen Fensterrand */
bottom: 50px; /* Abstand zum unteren Fensterrand */
right: 0; /* Abstand zum rechten Fensterrand */
width: 100px; /* Blockbreite */
padding: 0; /* Interpretation Boxmodell! */
background-color: #FF9900;
overflow: hidden; /* Scrollbalken unterbinden */
z-index: 1;
}
* html #rechts {
top: 0;
width: 100px;
height: 100%;
border-top-width: 150px; /* = Kopfzeilenhöhe */
border-left-width: 0;
border-bottom-width: 50px; /* = Fußzeilenhöhe */
border-right-width: 0;
border-style: solid;
}
#rechts .inhaltDiv {
margin: 10px; /* Abstand des Inhalts zum Blockrand */
}
Zum Vergrößern anklicken....

Nun möchte ich z.B. den Container #mitte bearbeiten.

Ich hatte daran gedacht eine "Logobox" zu integrieren.

Der CSS Code dafür:

Logobox.css

body {
background-color:#FF9900;
text-align:center; /*zentriert die Box horizontal*/
}
#aussenbox {
width:75%; /*bestimmt die Breite der Box*/
border:1px solid #000000; /*kann auch entfallen*/
margin:auto;
margin-top:50px; /*50px Abstand von oben; auch %-Angaben möglich*/
height:auto; /*Gesamthöhe der Box; möglich sind auch feste Angaben*/
text-align:left; /*Ausrichtung der Elemente innerhalb der Box*/
background-color:#eee
}
#logobox {
width:100px; /*Breite der Logobox*/
height:50px; /*Höhe der Logobox*/
background-color:#ffffff;
display:block;
float:left; /*lässt Logobox rechts von Text umfließen*/
margin-right:10px; /*Abstand rechts zwischen Logobox und Text*/
Zum Vergrößern anklicken....

Wie stelle ich das an, oder geht das garnicht so, wie ich es mir vorstelle.

Die html codes habe ich nicht gepostet, da der Post sonst zu lang wird. Bei Bedarf kann ich ihn aber posten.

Sowohl die Homepage mit dem Layout.CSS, als auch die Lobobox.html mit dem Logobox.CSS funktionieren einzeln ohne Probleme.

Nun möchte ich sie jedoch kombinieren und bekomme das nicht hin.

Vielen Dank

Penny
 
Hier die HTML dazu:

layout.html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>layout</title>


<link rel="stylesheet" type="text/css" href="style.css">

<link rel="stylesheet" type="text/css" href="layout.css">

</head>

<body>

<div id="mitte">
<div class="inhaltDiv">
<h1>#mitte:</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>

</div>

</div>

<div id="oben">
<div class="inhaltDiv">
<h2>#oben</h2>

</div>

</div>

<div id="links">
<div class="inhaltDiv">
<h2>#links:</h2>

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>

</div>

</div>

<div id="rechts">
<div class="inhaltDiv">
<h2>#rechts:</h2>

<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcor ...
</p>

</div>

</div>

<div id="unten">
<div class="inhaltDiv">Copyright &copy; osteinke.de
2005
</div>

</div>

</body>
</html>
Zum Vergrößern anklicken....

Logobox.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Logobox</title>


<link rel="stylesheet" type="text/css" href="Logobox.css">

<link rel="stylesheet" type="text/css" href="style.css">

</head>


<body>

<div id="aussenbox">
<div id="logobox">Logobox</div>

Deine &Uuml;berschrift
<p>Dein Text</p>

</div>

</body>
</html>
Zum Vergrößern anklicken....
 
Du kannst den CSS-Code doch in deine bestehende Datei einfügen:

Code: 
html, body {
width: 100%;
height: 100%;
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #FF9900;
overflow: hidden; /* Scrollbalken im Fenster unterbinden */
text-align:center; /*zentriert die Box horizontal*/
}
#mitte {
position: absolute;
top: 150px; /* Abstand zum oberen Fensterrand */
left: 200px; /* Abstand zum linken Fensterrand */
bottom: 50px; /* Abstand zum unteren Fensterrand */
right: 100px; /* Abstand zum rechten Fensterrand */
overflow: auto; /* Scrollbalken, falls notwendig */
}
* html #mitte {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top-width: 150px; /* = Kopfzeilenhöhe */
border-left-width: 200px; /* = Spaltenbreite links */
border-bottom-width: 50px; /* = Fußzeilenhöhe */
border-right-width: 100px; /* = Spaltenbreite rechts */
border-style: solid ;
}
#mitte .inhaltDiv {
margin: 20px; /* Abstand des Inhalts zum Blockrand */
}
#oben {
position: absolute;
top: 0; /* Abstand zum oberen Fensterrand */
left: 0; /* Abstand zum linken Fensterrand */
right: 0; /* Abstand zum rechten Fensterrand */
height: 150px; /* Blockhöhe */
padding: 0; /* Interpretation Boxmodell! */
background-color: #FF9900;
overflow: hidden; /* Scrollbalken unterbinden */
z-index: 4; /* höchste z-Ebene! */
}
* html #oben {
width: 100%;
height: 150px;
}
#oben .inhaltDiv {
margin: 10px; /* Abstand des Inhalts zum Blockrand */
}
#links {
position: absolute;
top: 150px; /* Abstand zum oberen Fensterrand */
left: 0; /* Abstand zum linken Fensterrand */
bottom: 0; /* Abstand zum unteren Fensterrand */
width: 200px; /* Blockbreite */
padding: 0; /* Interpretation Boxmodell! */
background-color: #FF9900;
overflow: auto; /* Scrollbalken, falls notwendig */
z-index: 3;
}
* html #links {
top: 0;
width: 200px;
height: 100%;
border-top-width: 150px; /* = Kopfzeilenhöhe */
border-left-width: 0;
border-bottom-width: 0;
border-right-width: 0;
border-style: solid;
}
#links .inhaltDiv {
margin: 10px; /* Abstand des Inhalts zum Blockrand */
}
#unten {
position: absolute;
left: 200px; /* Abstand zum linken Fensterrand */
bottom: 0; /* Abstand zum unteren Fensterrand */
right: 0; /* Abstand zum rechten Fensterrand */
height: 50px; /* Blockhöhe */
padding: 0; /* Interpretation Boxmodell! */
background-color: #FF9900;
overflow: hidden; /* Scrollbalken unterbinden */
z-index: 2;
}
* html #unten {
left: 0;
width: 100%;
height: 50px;
border-top-width: 0;
border-left-width: 200px; /* = Spaltenbreite links */
border-bottom-width: 0;
border-right-width: 0;
border-style: solid;
}
#unten .inhaltDiv {
margin: 10px; /* Abstand des Inhalts zum Blockrand */
}
#rechts {
position: absolute;
top: 150px; /* Abstand zum oberen Fensterrand */
bottom: 50px; /* Abstand zum unteren Fensterrand */
right: 0; /* Abstand zum rechten Fensterrand */
width: 100px; /* Blockbreite */
padding: 0; /* Interpretation Boxmodell! */
background-color: #FF9900;
overflow: hidden; /* Scrollbalken unterbinden */
z-index: 1;
}
* html #rechts {
top: 0;
width: 100px;
height: 100%;
border-top-width: 150px; /* = Kopfzeilenhöhe */
border-left-width: 0;
border-bottom-width: 50px; /* = Fußzeilenhöhe */
border-right-width: 0;
border-style: solid;
}
#rechts .inhaltDiv {
margin: 10px; /* Abstand des Inhalts zum Blockrand */
} 


#aussenbox {
width:75%; /*bestimmt die Breite der Box*/
border:1px solid #000000; /*kann auch entfallen*/
margin:auto;
margin-top:50px; /*50px Abstand von oben; auch %-Angaben möglich*/
height:auto; /*Gesamthöhe der Box; möglich sind auch feste Angaben*/
text-align:left; /*Ausrichtung der Elemente innerhalb der Box*/
background-color:#eee
}
#logobox {
width:100px; /*Breite der Logobox*/
height:50px; /*Höhe der Logobox*/
background-color:#ffffff;
display:block;
float:left; /*lässt Logobox rechts von Text umfließen*/
margin-right:10px; /*Abstand rechts zwischen Logobox und Text*/

[editpost]

In deinem nachträglich geposteten HTML-Code steckt doch schon die Lösung :suspekt:

Oder was willst du kombinieren? Die zwei HTML-Dokumente zu einer Seite?
 
Zuletzt bearbeitet von einem Moderator:
Also gut. Wie die layout.css nun aussieht verstehe ich ja.

Aber die 2 html codes sind doch 2 unterschiedliche.

Nochmal. Ich möchte da wo #mitte im ersten code ist, die Logobox haben.

Wie müsste denn dann der zusammengestelle html code aussehen ?
 
Vielleicht so?

HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>layout</title>


<link rel="stylesheet" type="text/css" href="style.css">

<link rel="stylesheet" type="text/css" href="layout.css">

</head>

<body>

<div id="aussenbox">
<div id="logobox">Logobox</div>

Deine &Uuml;berschrift
<p>Dein Text</p>

</div>

<div id="oben">
<div class="inhaltDiv">
<h2>#oben</h2>

</div>

</div>

<div id="links">
<div class="inhaltDiv">
<h2>#links:</h2>

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...
</p>

</div>

</div>

<div id="rechts">
<div class="inhaltDiv">
<h2>#rechts:</h2>

<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcor ...
</p>

</div>

</div>

<div id="unten">
<div class="inhaltDiv">Copyright &copy; osteinke.de
2005
</div>

</div>

</body>
</html>
 
Nein, klappt leider nicht.

Vielleicht sage ich einfach mal das Ziel, wo ich hin möchte.

Meine Homepage:

http://www.osteinke.de

Diese möchte ich nun komplett mit CSS erstellen.

Wie ihr seht, möchte ich auf der linken Seite ein festes Menü haben.

Das einzige, was sich immer ändert ist der Inhalt in dem Kasten.

Diesen Kasten hatte ich gehofft mit meiner Logobox.css zu erzeugen.

Ich weiß einfach nicht wo(wie) ich anfangen soll.
 
Zuletzt bearbeitet:
Habe deinen CSS-Code (layout.css + logobox.css) nicht getestet, aber vermutlich wirst du die Formatierungen der einzelnen DIVs überarbeiten / korrigieren müssen, damit das Seitenlayout (wieder) passt.

:confused: maik
 
So funktioniert's ;-]

CSS-Code für layout.css
Code: 
html, body {
width: 100%;
height: 100%;
margin: 0;
border: 0;
padding: 0;
}
body {
background-color: #FF9900;
overflow: hidden; /* Scrollbalken im Fenster unterbinden */
}
#mitte {
position: absolute;
top: 150px; /* Abstand zum oberen Fensterrand */
left: 200px; /* Abstand zum linken Fensterrand */
bottom: 50px; /* Abstand zum unteren Fensterrand */
right: 100px; /* Abstand zum rechten Fensterrand */
overflow: auto; /* Scrollbalken, falls notwendig */
}
* html #mitte {
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top-width: 150px; /* = Kopfzeilenhöhe */
border-left-width: 200px; /* = Spaltenbreite links */
border-bottom-width: 50px; /* = Fußzeilenhöhe */
border-right-width: 100px; /* = Spaltenbreite rechts */
border-style: solid ;
}

#aussenbox {
border:1px solid #000000; /*kann auch entfallen*/
margin:auto;
height:auto; /*Gesamthöhe der Box; möglich sind auch feste Angaben*/
text-align:left; /*Ausrichtung der Elemente innerhalb der Box*/
background-color:#eee
}
#logobox {
width:100px; /*Breite der Logobox*/
height:50px; /*Höhe der Logobox*/
background-color:#ffffff;
display:block;
float:left; /*lässt Logobox rechts von Text umfließen*/
margin-right:10px; /*Abstand rechts zwischen Logobox und Text*/  
}

#oben {
position: absolute;
top: 0; /* Abstand zum oberen Fensterrand */
left: 0; /* Abstand zum linken Fensterrand */
right: 0; /* Abstand zum rechten Fensterrand */
height: 150px; /* Blockhöhe */
padding: 0; /* Interpretation Boxmodell! */
background-color: #FF9900;
overflow: hidden; /* Scrollbalken unterbinden */
z-index: 4; /* höchste z-Ebene! */
}
* html #oben {
width: 100%;
height: 150px;
}
#oben .inhaltDiv {
margin: 10px; /* Abstand des Inhalts zum Blockrand */
}
#links {
position: absolute;
top: 150px; /* Abstand zum oberen Fensterrand */
left: 0; /* Abstand zum linken Fensterrand */
bottom: 0; /* Abstand zum unteren Fensterrand */
width: 200px; /* Blockbreite */
padding: 0; /* Interpretation Boxmodell! */
background-color: #FF9900;
overflow: auto; /* Scrollbalken, falls notwendig */
z-index: 3;
}
* html #links {
top: 0;
width: 200px;
height: 100%;
border-top-width: 150px; /* = Kopfzeilenhöhe */
border-left-width: 0;
border-bottom-width: 0;
border-right-width: 0;
border-style: solid;
}
#links .inhaltDiv {
margin: 10px; /* Abstand des Inhalts zum Blockrand */
}
#unten {
position: absolute;
left: 200px; /* Abstand zum linken Fensterrand */
bottom: 0; /* Abstand zum unteren Fensterrand */
right: 0; /* Abstand zum rechten Fensterrand */
height: 50px; /* Blockhöhe */
padding: 0; /* Interpretation Boxmodell! */
background-color: #FF9900;
overflow: hidden; /* Scrollbalken unterbinden */
z-index: 2;
}
* html #unten {
left: 0;
width: 100%;
height: 50px;
border-top-width: 0;
border-left-width: 200px; /* = Spaltenbreite links */
border-bottom-width: 0;
border-right-width: 0;
border-style: solid;
}
#unten .inhaltDiv {
margin: 10px; /* Abstand des Inhalts zum Blockrand */
}
#rechts {
position: absolute;
top: 150px; /* Abstand zum oberen Fensterrand */
bottom: 50px; /* Abstand zum unteren Fensterrand */
right: 0; /* Abstand zum rechten Fensterrand */
width: 100px; /* Blockbreite */
padding: 0; /* Interpretation Boxmodell! */
background-color: #FF9900;
overflow: hidden; /* Scrollbalken unterbinden */
z-index: 1;
}
* html #rechts {
top: 0;
width: 100px;
height: 100%;
border-top-width: 150px; /* = Kopfzeilenhöhe */
border-left-width: 0;
border-bottom-width: 50px; /* = Fußzeilenhöhe */
border-right-width: 0;
border-style: solid;
}
#rechts .inhaltDiv {
margin: 10px; /* Abstand des Inhalts zum Blockrand */
}
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>layout</title>

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="layout.css">

</head>
<body>

<div id="mitte">
     <div id="aussenbox">
          <div id="logobox">Logobox</div>Deine Überschrift
          <p>Dein Text</p>
     </div>
</div>


<div id="oben">
     <div class="inhaltDiv">
          <h2>#oben</h2>
     </div>
</div>

<div id="links">
     <div class="inhaltDiv">
          <h2>#links:</h2>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam ...</p>
     </div>
</div>

<div id="rechts">
     <div class="inhaltDiv">
          <h2>#rechts:</h2>
          <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcor ...</p>
     </div>
</div>

<div id="unten">
     <div class="inhaltDiv">
          Copyright &copy; osteinke.de 2005
     </div>
</div>

</body>
</html>
  • Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 8.01

[editpost 19:22] Selektor #mitte .divinhaltDiv aus dem CSS-Code entfernt.
 
Zuletzt bearbeitet von einem Moderator:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück