CSS-Layout

[vicky-pag]

Hallo an alle,

nachdem ich lange so viel zu tun hatt, dass ich kaum die Zeit dazu gefunden habe, mich mit Contenido zu beschäftigen habe ich im Moment ein paar freie Minuten...

Naja, jetzt habe ich leider schon das erste Problem, aber vielleicht könnt ihr mir ja weiterhelfen.

Ich habe mich ein wenig an das Thema CSS herangetastet und würde jetzt gerne ein Testlayout, was ich erstellt habe, in Contenido einbauen. Und das ist auch schon mein Problem. Ich habe eine "format.css" in Contenido angelegt und aus dem Layout darauf verwiesen. Allerdings wird von dem Layout nur die Hintergrundfarbe angezeigt.

Ich gebe euch hier mal meinen CSS-Code:

Code: Alles auswählen

div
{
font-size:12px;font-family:Verdana;
color:#ffffff;
text-align: justify;
line-height:27px;
}

.div3
{
text-align:center;
background-color:#800040;
border:0px solid #000000;
position:absolute;
width:780px;min-height:50px;
left:10px;top:10px;
padding-left:5px;padding-right:5px;padding-top:5px;padding-bottom:5px;
-moz-border-radius:30px;
background-image:url(banner.jpg);
background-repeat:no-repeat;
background-position:center;
}

.div1
{
text-align:center;
background-color:#800040;
border:0px solid #000000;
position:fixed;
width:140px;min-height:240px;
left:10px;top:80px;
padding-left:20px;padding-right:20px;padding-top:80px;padding-bottom:20px;
-moz-border-radius:30px;
background-image:url(navigation10.jpg);
background-repeat:no-repeat;
background-position:center 27px;
}

.div2
{
background-color:#800040;
border:0px solid #000000;
position:absolute;
width:560px;min-height:900px;
left:200px;top:80px;
padding-left:20px;padding-right:20px;padding-top:18px;padding-bottom:20px;
-moz-border-radius:30px;
}

.div4
{
text-align:center;
background-color:transparent;
border:0px solid #000000;
position:fixed;
width:187px;height:180px;
left:700px;top:210px;
padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;
background-image:url(schmetterling2.gif);
background-repeat:no-repeat;
background-position:center;
}

.div5
{
text-align:center;
background-color:transparent;
border:0px solid #000000;
position:fixed;
width:187px;height:132px;
left:60px;top:460px;
padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px;
background-image:url(schmetterling3.gif);
background-repeat:no-repeat;
background-position:center;
}

h1
{
font-size:12px;font-family:Verdana;
color:#ffffff;
text-align: justify;
line-height:50px;
padding-left:20px;
text-indent:70px;
background-image:url(hauptüberschrift2.jpg);
background-repeat:no-repeat;
background-position:left top;
}

h2
{
font-size:12px;font-family:Verdana;
color:#ffffff;
text-align: justify;
line-height:50px;
padding-left:20px;
background-image:url(überschrift3.jpg);
background-repeat:no-repeat;
background-position:left top;
}

h3
{
font-size:12px;font-family:Verdana;
color:#ffffff;
text-align: justify;
line-height:50px;
padding-left:20px;
background-image:url(überschrift4.jpg);
background-repeat:no-repeat;
background-position:left top;
}

h4
{
font-size:12px;font-family:Verdana;
color:#ffffff;
text-align: justify;
line-height:50px;
padding-left:20px;
background-image:url(überschrift5.jpg);
background-repeat:no-repeat;
background-position:left top;
}

h5
{
font-size:12px;font-family:Verdana;
color:#ffffff;
text-align: justify;
line-height:50px;
padding-left:20px;
background-image:url(überschrift6.jpg);
background-repeat:no-repeat;
background-position:left top;
}

h6
{
font-size:12px;font-family:Verdana;
color:#ffffff;
text-align: justify;
line-height:50px;
padding-left:20px;
background-image:url(überschrift7.jpg);
background-repeat:no-repeat;
background-position:left top;
}

Und weil ich einige Grafiken eingebaut habe, die bei euch ja jetzt sicher nicht angezeigt werden, kommt hier der Link, wo ihr euch die Testseite ohne Contenido mal so ansehen könnt, wie sie denn hinterher auch mit Contenido mal aussehen sollte.

http://www.dailybrain.de (Bis jetzt wird die Seite aber nur im Mozilla Firefox richtig angezeigt, wie gesagt, nur eine Testseite, das wird noch geändert!!!)

Ich wäre euch wirklich dankbar, wenn ihr mir ein wenig unter die Arme greifen könntet...

Bis dahin viele liebe Grüße von Vicky

[Halchteranerin]

Hallo Vicky,

das reicht nicht aus ... wie sieht denn dein Layout aus? Hast du die CSS-Datei richtig eingebunden? Hast du die Definitionen aus der CSS-Datei im Layout richtig benutzt?

[vicky-pag]

Ok, hier also noch mein Layout, obwohl ich glaube (oder vielmehr sicher bin), dass das total falsch ist...

Allerdings habe ich gar keine Idee, wie es richtig wäre...

Beschreibung:

Code: Alles auswählen

Container 1: Navigation
Container 2: Überschrift
Container 3: Text

Quelltext:

Code: Alles auswählen

<html>

<head>
<title>Dailybrain</title>

<link rel="stylesheet" media="screen" href="format.css">

</head>

<body bgcolor=#610031>

<div class="div3"></div>

<div class="div1">CMS_CONTAINER[1]</div>

<div class="div2">
<h1>CMS_CONTAINER[2]</h1>
<BR>
CMS_CONTAINER[3]
</div>


<div class="div4"></div>
<div class="div5"></div>

</div>


</body>
</html>

Vielen Dank schon 'mal für's Lesen.

[vicky-pag]

Hallo noch 'mal an alle!

Jetzt habe ich 'mal ein paar Tage auf eine Antwort gewartet, aber leider scheint ihr mir nicht helfen zu können. Ich würde ja gerne noch nähere Infos geben, wenn ich nur wüsste, wo ich ansetzen soll...

Vielleicht helft ihr mir ja doch noch, ich gebe die Hoffnung jedenfalls nicht auf, denn ich habe ja bis jetzt immer Top-Ratschläge von euch bekommen.

Also, ich freu' mich auf einen kleinen Tipp.

[Halchteranerin]

keine Zeit, vicky. Aber klitzekleiner Tipp: setzt dich richtig mit css auseinander.
So etwas:

Code: Alles auswählen

<div class="div3"></div>

bringt z.B. nichts, wenn zwischen den beiden divs nichts steht. Was soll da formatiert werden? Genauso auch:

Code: Alles auswählen

<div class="div4"></div>
<div class="div5"></div> 

div und h1 zu verschachteln bringt auch nicht sehr viel, weil beide vollkommen unterschiedlich formatiert sind (unterschiedliche Background-Images usw.).

Guck dir z.B. den css-Lehrgang oder http://css4you.de (oder beides) an.

[HerrB]

Das ist leider so nicht ganz korrekt. Das geht sehr wohl:

Code: Alles auswählen

<div class="div3"></div>

Wenn ich nun der Klasse div3 eine Breite von 100px und eine Höhe von 100px gebe und ein Hintergrundbild zuweise - habe ich ein Bild an der Stelle...

Nur der IE macht da Murks, da für ihn ein DIV eine Mindesthöhe hat (so 16 Pixel, glaube ich). Macht man da ein 1 Pixel hohes Bild rein (mit <img>) - zeigt auch der IE das DIV nur mit 1 Pixel Höhe an...

Gruß
HerrB

[HerrB]

Viel wichtiger ist, dass im HTML-Code im Verweis zur format.css der Pfad css fehlt...

Code: Alles auswählen

<link rel="stylesheet" media="screen" href="css/format.css">

Gruß
HerrB

[mvf]

Nur der IE macht da Murks, da für ihn ein DIV eine Mindesthöhe hat (so 16 Pixel, glaube ich). Macht man da ein 1 Pixel hohes Bild rein (mit <img>) - zeigt auch der IE das DIV nur mit 1 Pixel Höhe an...

IE hack dafür:

dem div eine font-size von 0.1px zuweisen, dann machts auch der IE

[HerrB]

Cool, danke. Das ist ein echter Tipp...

Gruß
HerrB

[Halchteranerin]

Wenn ich nun der Klasse div3 eine Breite von 100px und eine Höhe von 100px gebe und ein Hintergrundbild zuweise - habe ich ein Bild an der Stelle...

aehm, ich habe mir die css-Definitionen nicht SO genau angeschaut und nicht darauf geachtet, dass da Hintergrundbilder benutzt werden.

[HerrB]

War ja auch nur ein Beispiel. Du hattest geschrieben, dass es grundsätzlich keinen Sinn macht...

Gruß
HerrB

[vicky-pag]

Hallo,

vielen vielen Dank für eure vielen Antworten. Ich werde jetzt auf jeden Fall versuchen, damit weiterzukommen und mich noch intensiver mit CSS beschäftigen. Ich fand eigentlich, dass das Layout ohne Contenido auf www.dailybrain.de mit dem Firefox für den ersten Versuch schon ganz brauchbar war... Naja, ich werde weiter daran arbeiten.

Nochmals vielen Dank.

[Halchteranerin]

War ja auch nur ein Beispiel. Du hattest geschrieben, dass es grundsätzlich keinen Sinn macht...

ja, weil ich an die Hintergrundbild-Moeglichkeit nicht gedacht habe. Und das trifft bei ihr auch zu, wobei ich mich frage, wozu die ganzen anderen Formatierungen bei den betreffenden DIVs gut sein sollen.