Jump to content

CSS Problem


Der letzte Beitrag zu diesem Thema ist mehr als 180 Tage alt. Bitte erstelle einen neuen Beitrag zu Deiner Anfrage!

Empfohlene Beiträge

Hallo!

 

Ich habe ein Problem mit dem Erstellen einer Webseite. Und zwar mit dem CSS-Layout.

 

WIe es aussehen soll könnt ihr hier sehen. Genau ich möchte das der trenner_middle durchgehend ist und der trenner_links direkt rechts neben dem Bild ist so wie auf dem Beispielbild unten

 

http://nm.cgsolutions-online.de/fileadmin/templates/soll.jpg

 

Mein Script sieht so aus:

 

 

 

*{

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{

background:#97B0D5;

position:relative;

width:180px;

height:100%;

margin:0px 0px 0px 860px;

}

 

#trenner_middle{

background:#4B6EA1;

position:relative;

width:100%;

height:22px;

margin:201px 0px 0px 0px;

}

 

 

#seite{

background:#fff url(hintergrund.jpg) repeat-y;

margin:0 auto;

padding:10px 10px 5px 13px;

text-align:left;

width:775px

}

 

#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; }

 

 

LG CHRIS

Mit Zitat antworten

Link zu diesem Kommentar
Der letzte Beitrag zu diesem Thema ist mehr als 180 Tage alt. Bitte erstelle einen neuen Beitrag zu Deiner Anfrage!

Schreibe einen Kommentar

Du kannst jetzt antworten und Dich später registrieren. Falls Du bereits ein Mitglied bist, logge Dich jetzt ein.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung jetzt entfernen

  Only 75 emoji are allowed.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor-Fenster leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
×
  • Neu erstellen...