Hilfe bei Layout mit CSS

[CSSNEWBIE]

Hallo !!!

Bin neu hier und bin gerade dabei meine alte Website auf CSS Layout umzustellen... sofern ich dass kann....

Hangele mich gerade per SELFHTML usw durch die neue Aufgabe...

Jetzt habe ich ein Problem:

Möchte gerne eine kleine Grafik als Rand auf der rechten Seite zur Abgrenzung erscheinen lassen. Bekomme das aber irgendwie nicht hin...

Vielleicht könnte Ihr mir ja helfen:

Quelltext CSS:

#wrapper {
color: black;
background-color: white;
width: 1024px;
margin: auto;
}

address {
font-size: 80%;
font-style: normal;
letter-spacing: 2px;
padding-top: 10px;
border-top: 1px solid #003399;
margin-top: 20px;
}

#kopf {
color: white;
background-color: #000000;
height: 150px;
}

#kopf img {
float: left;
width: 1000px;
}

a img {
border: 0;
}

#rechts {
position:absolute;
top:165px;
background-image:url(rightsclimage.gif);
background-repeat:repeat-y;
width: 100%;
height: 100%;
float: right;
}


#navi {
color: white;
background-color: #5F5F5F;
list-style: none;
padding: 20px;
margin: 0;
float: left;
width: 145px;
height: 100%;
}

#inhalt {
margin-left: 200px;
 #navi: 100%;
}

Quelltext HTML:

<div id="kopf">
<img src="topsclimage2.gif" alt="Topimage SC Langenhagen"  width="1000" height="150" />
</div>
<div id="rechts">
<img src="abstand.gif" width="1" height="1" border="0" alt="">
</div>

<div id="navi">
<div class="menu">
   <a class="menu" href="#">Index</a>
   <a class="menu" href="#">Mannschaften</a>
   <a class="menu" href="#">Tabellen</a>
   <a class="menu" href="#">Spielplan und Ergebnisse</a>
   <a class="menu" href="#">Spezial</a>
</div>
 <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" ALIGN="left" VALIGN="top">
        <TR>
                <TD><IMG SRC="abstand.gif" ALIGN="left" VALIGN="top" WIDTH="15" HEIGHT="15"></TD>
                <TD>&nbsp;</TD>
        </TR>

Was mache ich falsch ???

Gruss und Dank im voraus.

CSS NEWBIE

 

[matibaski]

#wrapper {
color: black;
background-color: white;
width: 1024px;
margin: auto;
}

.address { /* Ist das eine Klasse? */
font-size: 80%;
font-style: normal;
letter-spacing: 2px;
padding-top: 10px;
border-top: 1px solid #003399;
margin-top: 20px;
}

#kopf {
color: white;
background-color: #000000;
height: 150px;
}

img#kopf  { /* img kommt vor die ID */
float: left;
width: 1000px;
}

a, img { /* Hier das komma vergessen. Falls du Linkformatierungen willst, setz den Bildern eine Klasse. */
border: 0;
}

#rechts {
position:absolute;
top:165px;
background-image:url(rightsclimage.gif);
background-repeat:repeat-y;
width: 100%;
height: 100%;
float: right;
}


#navi {
color: white;
background-color: #5F5F5F;
list-style: none;
padding: 20px;
margin: 0;
float: left;
width: 145px;
height: 100%;
}

/* Das hier ist falsch: */
#inhalt {
margin-left: 200px;
 #navi: 100%;
}

/* So ist es richtig: */
#inhalt {
margin-left:200px;
}

#navi {
margin-left:100%;
}

Mit der Formatierung von a img musst du mich aufklären, wie du das haben willst.
Den Rest habe ich dir korrigiert.

Dein Problem:
Du musst right:0px; oder 0% setzen beim Container #rechts. ;)


MfG, matibaski

 

[CSSNEWBIE]

@matibaski !!!

Hallo !!!

Danke für den Tip, es hat aber leider nicht geholfen... zur Zeit sieht es im Web so aus Startseite - SC Langenhagen Offizielle Basketball Website

Da ich aber die Grafik rechts mit absolute definiert habe... wird sie nicht auf allen Bildschirmauflösungen richtig positioniert.......

Noch einen Tip ???

Gruss

CSSNEWBIE

 

[matibaski]

Schon klar.
Bei deiner Seite muss man rechts scrollen, sodass es doch stimmt.
Es zeigt es einfach nicht ganz rechts an, weil die Seite in Pixel unterteilt ist.
Also 0px ist also an einem bestimmten Punk bei jeder Auflösung.

(Mann ist das schwer zu erklären).

Also right:0px ist dort, wo die Seite beim ersten Anblick ist, ganz rechts.
Willst du es dort haben, wo du willst, dann musst du die Angabe in Minus machen.
Sprich: right:-xx px;


MfG, matibaski