Zum Inhalt springen

Content und CSS-Problem

Erstellt am 29. Juli 2007 · 4 Antworten · letzte Antwort am 30. Juli 2007

Tags: Frage

typo3_hp ·

Hallo!

Ich mache gerade eine Homepage für eine Schule und habe 2 kleine Probleme.

1. Typo3 setzt mir den Content nicht um d.h. in dem per CSS und HTML-Datei gesetzen Bereich "Content" erscheint der Text nicht den ich im Backend eingegeben habe

Hier das TS:

subparts {
content < styles.content.get
rechts < styles.content.getRight
}

Und das 2. Problem ich habe 2 CSS-Bereiche "trenner_links" und "trenner_middle" welche im Firefox so angezeigt werden wie ich es möchte. Allerdings im Internetexplorer werden die Balken komplett verschoben.

Ein Bild davon könnt ihr euch unter www.nm.cgsolutions-online.de machen.

Was ist hier falsch?

Und hier meine CSS-Datei:

__________________________________________________________

*{
margin:0;
padding:0;
}

body{
background:#C4D3E9;
font:.8em "trebuchet ms", arial, sans-serif;
text-align:center;
}

#rechts{
position: absolute;
float:right;
margin:40px 0px 15px 720px;
width:235px;
z-index:5;
}

#trenner_links{
position: absolute;
background:#97B0D5;
position:absolute;
width:180px;
height:100%;
margin:0px 0px 0px 907px;
z-index:3;
}

#trenner_middle{
position: absolute;
background:#4B6EA1;
position:absolute;
width:100%;
height:22px;
margin:168px 0px 0px 0px;
z-index:4;
}

#seite{
background:#fff url(hintergrund.jpg) repeat-y;
margin:0 auto;
padding:10px 10px 5px 13px;
text-align:left;
width:880px
}

#rootline{
position:absolute;
background:#fff;
float:left;
width:500px;
padding:120px 0 4px 0
}

#oben{
background:#fff url(banner.jpg);
clear:both;
height:150px;
width:700px;
}

#content{
position: relative;
float:left;
margin:100px 100px 35px 0;
width:458px;
}

#unten{
background:#4B6EA1;
color:white;
clear:both;
width:700px;
}

#navigation{
background:#fff;
float:left;
width:500px;
padding:0 0 4px 0
}

#navigation ul{
}

#navigation ul li{
display:inline;
margin:0 10px 0 0
}

#navigation ul li a{
text-decoration:none;
border-bottom:4px solid #fff;
color:#666;
font-size:.9em;
font-weight:bold;
}

#navigation ul li a:hover{
text-decoration:none;
border-bottom:4px solid #666
}

#content p{
text-align:justify
}

#unten p{
color:white;
float:right;
font:.85em "trebuchet ms", verdana, sans-serif;
padding:5px;
}

#rechts ul{
list-style:none;
margin:0 0 0 0
}

#rechts ul li{
background:url(liste.jpg) no-repeat;
display:block;
margin:0 0px 0 0;
padding:0 0 0 16px
}

#rechts ul li a{
text-decoration:none;
color:#666;
}

#rechts ul li a:hover{
color:#000;
}

a:link,a:visited,a:active{
color:#000;
text-decoration:underline
}

a:hover{
text-decoration:none
}

#unten a{
color:#fff;
text-decoration:underline
}

#unten a:hover{
text-decoration:none
}

H1 {
font-family : Verdana, sans-serif;
font-size : 16px;
color : #808080;
margin-bottom : 0px;
margin-top : 10px;
}
H2 {
font-family : Verdana, sans-serif;
font-size : 15px;
color : #808080;
margin-bottom : 10px;
margin-top : 20px;
}
H3 {
font-family : Verdana, sans-serif;
font-size : 12px;
color : #808080;
margin-bottom : 0px;
margin-top : 10px;
}
H4 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : #808080;
margin-bottom : 0px;
margin-top : 10px;
}
.subhead1 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : black;
}
.subhead2 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : green;
}
.subhead3 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : red;
}
.headerdate {
font-family : Verdana, sans-serif;
font-size : 10px;
color : red;
font-weight: normal;
}

strong {
text-decoration: none;
color: white;
}
A { color:white; }
A:hover { color:red; }
A:active { color:red; }

typo3_hp ·

DANKE!

Genau das habe ich vergessen ;-)

Hast du auch noch eine Idee wegen dem CSS-Problem?

Vielen DANK!

lg chris

Michaelh74 ·

Hi Chris,

also ehrlich gesagt wird die Site bei mir weder im FF noch im IE richtig dargestellt. Von da her weiß ich auch nicht genau wie Du die Trenner haben willst. Grundsätzlich würde ich in Deinem Fall aber mit dem doktype XMTL 1.0 arbeiten und auch mit relativen anstatt absoluten DIVs. Damit sollte es eigentlich kein Problem sein.

Viele Grüße
Michael

typo3_hp ·

Hmm ok danke.

WIe kann ich den Doktype XMTL 1.0 einstellen?

Habe nun folgendes Script jetzt zeigt er es im IExplorer und im Firefox gleich an allerdings nicht richtig.
Der "trenner Middle" soll direkt unterhalb des Banners horizental angezeigt werden und der "trenner links" soll direkt rechts neben dem Banner vertikal angezeigt werden.

_________________________________________________________________________________

*{
margin:0;
padding:0;
}

body{
background:#C4D3E9;
font:.8em "trebuchet ms", arial, sans-serif;
text-align:center;
}

#rechts{
position: relative;
float:right;
margin:40px 0px 15px 720px;
width:235px;sx
z-index:5;
}

#trenner_links{
position: relative;
background:#97B0D5;
width:180px;
height:100%;
margin:0px 0px 0px 907px;
z-index:3;
}

#trenner_middle{
position: relative;
background:#4B6EA1;
width:100%;
height:22px;
margin:168px 0px 0px 0px;
z-index:4;
}

#seite{
background:#fff url(hintergrund.jpg) repeat-y;
margin:0 auto;
padding:10px 10px 5px 13px;
text-align:left;
width:880px
}

#rootline{
position:relative;
background:#fff;
float:left;
width:500px;
padding:120px 0 4px 0
}

#oben{
background:#fff url(banner.jpg);
clear:both;
height:150px;
width:700px;
}

#content{
position: relative;
float:left;
margin:100px 100px 35px 0;
width:458px;
}

#unten{
background:#4B6EA1;
color:white;
clear:both;
width:700px;
}

#navigation{
background:#fff;
float:left;
width:500px;
padding:0 0 4px 0
}

#navigation ul{
}

#navigation ul li{
display:inline;
margin:0 10px 0 0
}

#navigation ul li a{
text-decoration:none;
border-bottom:4px solid #fff;
color:#666;
font-size:.9em;
font-weight:bold;
}

#navigation ul li a:hover{
text-decoration:none;
border-bottom:4px solid #666
}

#content p{
text-align:justify
}

#unten p{
color:white;
float:right;
font:.85em "trebuchet ms", verdana, sans-serif;
padding:5px;
}

#rechts ul{
list-style:none;
margin:0 0 0 0
}

#rechts ul li{
background:url(liste.jpg) no-repeat;
display:block;
margin:0 0px 0 0;
padding:0 0 0 16px
}

#rechts ul li a{
text-decoration:none;
color:#666;
}

#rechts ul li a:hover{
color:#000;
}

a:link,a:visited,a:active{
color:#000;
text-decoration:underline
}

a:hover{
text-decoration:none
}

#unten a{
color:#fff;
text-decoration:underline
}

#unten a:hover{
text-decoration:none
}

H1 {
font-family : Verdana, sans-serif;
font-size : 16px;
color : #808080;
margin-bottom : 0px;
margin-top : 10px;
}
H2 {
font-family : Verdana, sans-serif;
font-size : 15px;
color : #808080;
margin-bottom : 10px;
margin-top : 20px;
}
H3 {
font-family : Verdana, sans-serif;
font-size : 12px;
color : #808080;
margin-bottom : 0px;
margin-top : 10px;
}
H4 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : #808080;
margin-bottom : 0px;
margin-top : 10px;
}
.subhead1 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : black;
}
.subhead2 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : green;
}
.subhead3 {
font-family : Verdana, sans-serif;
font-size : 10px;
color : red;
}
.headerdate {
font-family : Verdana, sans-serif;
font-size : 10px;
color : red;
font-weight: normal;
}

strong {
text-decoration: none;
color: black;
}
A { color:black; }
A:hover { color:red; }
A:active { color:red; }

_____________________________________________________________________________

Hoffe ich habe es einigermaßen verständlich ausgedrückt.

Lg chris