nicole.kowalski
Threadersteller
Dabei seit: 01.04.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 20.01.2009 11:01
Titel Background für Link und Div auf volle Höhe austreiben |
  |
|
Hallo Leute,
habe zwei Problemchen mit meinem css.
Das Erste:
Für Links, die in Texten erscheinen möchte ich ein Background-image
zuweisen. Das klappt soweit auch, nur leider liegt das Bild immer direkt
hinter dem Link, was ja zunächst auch logisch ist.
Das Bildchen ist ein kleiner Pfeil und soll links neben dem Link im
Text erscheinen. So als kleiner Hinweis nochmal auf den Link.
Kann ich dem Bildchen irgendwie einen negativen Wert zuweisen, so dass
es dann so ausschaut?
Text Text Text Pfeilchen Link Text Text
Das Zweite ist ein altes Problem. Leider bin ich bei der Suche hier und in Google
nicht so recht auf eine Lösung gestoßen:
Folgendes Layout:
HEADER_HEADER_HEADER_HEADER
DIV Eins DIV Zwei DIV Drei
FOOTER_FOOTER_FOOTER_FOOTER
Im DIV Zwei befindet sich der Text. Wenn dieser länger wird, dann sollen die beiden
äußeren Divs bis hinunter zum Footer reichen, auch wenn kein (oder wenig) Inhalt
vorhanden ist. Background-images haben die beiden äußeren schon, die sich dann
entsprechend bis unten hin wiederholen würden.
Hier noch mein css
| Code: | div#layout {
width: 995px;
margin: auto auto;}
/* Kopfbereich */
div#header {
text-align: left;
width: 995px;
height: 105px;
background-image:url(../images/layout_header.jpg);
background-position: top left;
background-repeat: no-repeat;
}
/* Link zu Home auf dem Banner */
.transparent
{
width: 280px;
height:45px;
margin-top:20px;
margin-left:20px;}
/* Hauptnavi */
div#navi {
text-align: left;
width: 995px;
height: 34px;
margin:0;
padding:0;}
/* Inhaltsbereich Subnavi und Marginalbereich - Weite weg, wenn Inhalt da css2.1*/
div #center{
width:995px;}
/* Folgendes Div beinhaltet subnavi, background_left und text */
div#content {
text-align: left;
width: 829px;
background-image:url('../images/layout_background_subnavi.jpg');
background-position: top left;
background-repeat: no-repeat;
background-color:#fff;
margin:0px;
float:left;}
.subnavi{
width:650px;
height:20px;
text-align: left;
line-height: 120%;
font-size:75%;
float:left;
margin-top:0px;
margin-left: 175px;}
.subnavi ul{
margin:0;
padding:0;
list-style-type:none;
display: inline;}
.subnavi ul li{
margin:0;
padding:2px;
display: inline;}
.subnavi ul li a{
text-decoration:none;}
.subnavi ul li a:hover{
text-decoration:underline;}
/* Div mit Säulenbild und Säulenfortsatz im Hintergrund */
div #background_left{
width: 420px;
text-align: left;
font-size:70%;
line-height:120%;
float:left;
margin:0;
clear:both;
background-image:url('../images/layout_saeulenfortsatz.jpg');
background-position: top left;
background-repeat:repeat-y;
xoverflow:visible;
}
div #text{
width: 385px;
text-align: left;
font-size:70%;
line-height:130%;
margin-left: 0px;
}
div #text p{
font-size:100%;
margin-bottom: 5px;
}
h1{
font-size: 140%;
font-weight: normal;
line-height:140%;
color: #ae7414;
margin-top: 30px;
margin-bottom:30px;
}
h2{
font-size: 120%;
font-weight: normal;
line-height:140%;
color: #ae7414;
}
h3{
font-size: 100%;
line-height:140%;
font-weight: normal;
color: #75889b;
margin-left:100px;
margin-top:0px;
}
.image_border{
border: 2px solid #ae7414;
margin-top:5px;}
div #text a {
background-image:url('../images/kleiner_Pfeil.jpg');
background-position: center left;
background-repeat: no-repeat;
padding-left:-20px; }
div #sidebar {
text-align: left;
width: 166px;
background-color:#e9edf0;
margin-left:829px;
margin-top:0;
xoverflow:visible;}
/* News in sidebar */
div #sidebar #news {
width: 166px;
height: 300px;
margin:0;
background-image:url(../images/layout_news.jpg);
background-position: top left;
background-repeat: no-repeat;}
div #sidebar #news p {
line-height: 140%;
font-size:65%;
color:#000;
margin-left:30px;
margin-right:10px;
margin-top:5px;}
/* Events in sidebar */
div #sidebar #events {
width: 166px;
height: 312px;
margin:0;}
div #sidebar #events p {
line-height:140%;
font-size: 65%;
color: #000000;
margin-left:30px;
margin-top:5px;}
/* Fußzeile */
div#footer {
text-align: left;
width: 995px;
height: 27px;
clear:both;
background-image:url(../images/layout_footer.jpg);
background-position: top left;
background-repeat: no-repeat;
margin:0;}
div#footer .left {
width: 400px;
float:left;
text-align: left;
margin-left: 20px;
margin-top:7px;
font-size: 60%;
color: #000000;}
div#footer .right {
height:24px;
margin-right:5px;
text-align: right;
line-height:10px;
font-size: 70%;
color: #000000;
width:280px;
float:right;
margin-top: 7px;
} |
Danke im Voraus!
Nicole
|
|
Willkommen auf dem Portal für Mediengestalter
