Css- problem
lima-city → Forum → Die eigene Homepage → Grafikdesign
background
beitrag
bereich
body
boxen
chartreuse
design
eins
hintergrundfarbe
link box
margin
navigation
none
recht
reihenfolge
right
startseite
test
tiger
yellow
-
hi zusammen.
hab dieses css-design:
#navi {
width:200px; /* Breite des Bereichs */
text-align:left; /* Textausrichtung */
margin-top:10px; /* Außenabstand oben */
margin-bottom:10px; /* Außenabstand unten */
margin-left:20px; /* Außenabstand links */
margin-right:15px; /* Außenabstand rechts */
}
#navi ul {
list-style:none; /* keine Aufzählungspunkte */
}
#navi li {
background-color:#82DF7B; /* Hintergrundfarbe */
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
border-left:25px green solid; /* Rahmenfarbe Auflistungpunkt links */
border-bottom:1px green solid; /* Rahmenfarbe unten */
border-right:2px green solid; /* Rahmenfarbe unten */
margin-top:10px; /* Außenabstand oben */
padding-top:8px; /* Innenabstand oben */
padding-bottom:8px; /* Innenabstand unten */
padding-left:8px; /* Innenabstand unten */
padding-right:8px; /* Innenabstand unten */
}
wie kann ich machen,dass die "link-box",wenn ich mit der maus drüberfahre,sich die farbe von hellgrün zu rot ändert?
Beitrag geaendert: 24.2.2007 12:13:36 von jocko -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
jenachdem was deine link-box is hängst du einfach hintendran ein ":hover"
dann halt noch angeben das es rot werden soll..
wenn z.B. #navi deine linkbox is dann halt so:
#navi:hover {background-color: #ff0000;}
-
und wie kann ich machen,dass die ganze box,die hier hellgründ ist als link benütz werden kann?
jetzt ist es nur der link z.b. startseite.. -
hmmm, das Thema hier passt, hab nämlich auch en kleines Prob... wie macht man nen Zeilenhover von ner Tabelle... also von <tr> und von <td> möcht ich des auch wissen.
-
Also mir fällt im Moment auch nicht ein, wie man das, was du willst realiesieren kann.
Guck doch mal unter forum.joomla.de. Da gibt es einige CSS Spezialisten. -
so in etwa?
http://outlawrocknroll.tiger-army.de/test.html
ja.nur das die ganze box noch ein link wäre.
-
wie schon gesagt wurde, musst du mit dem effekt hover arbeiten.
damit die gesammte box ein link wird, wie ich es auch hier gerade mache:
http://nils-werner.com/nusse/
musst du z.b. deinen link so schreiben
<a href="#"><div id="nav">link</div></a>
wenn ich deine frage falsch verstanden haben sollte und du was anderes meinst, oder probleme hast, dann schreib mir einfach ne pn -
ja so gefällt es mir!
kannst du mir mal den code senden? -
gib mir mal deinen, und ich bastel ihn dir um..
denn meiner ist speziel auf meine seite angepasst ;) und da is zu viel php zwischen ;)
hier ist schon mal dein code oben optimiert
#navi {
width:200px; /* Breite des Bereichs */
text-align:left; /* Textausrichtung */
margin:10px 15px 10px 20px; /* Außenabstand reihenfolge: oben rechts unten links*/
}
#navi ul {
list-style:none; /* keine Aufzählungspunkte */
}
#navi li {
background-color:#82DF7B; /* Hintergrundfarbe */
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
border-left:25px green solid; /* Rahmenfarbe Auflistungpunkt links */
border-bottom:1px green solid; /* Rahmenfarbe unten */
border-right:2px green solid; /* Rahmenfarbe unten */
margin-top:10px; /* Außenabstand oben */
padding:8px; /* Innenabstand bei nur einer angabe, wird es für alles übernommen.. */
}
Beitrag geaendert: 24.2.2007 14:35:32 von nilswerner -
body { background-color:yellow; }
#navi {
width:200px; /* Breite des Bereichs */
text-align:left; /* Textausrichtung */
margin-top:10px; /* Außenabstand oben */
margin-bottom:10px; /* Außenabstand unten */
margin-left:20px; /* Außenabstand links */
margin-right:15px; /* Außenabstand rechts */
}
#navi ul {
list-style:none; /* keine Aufzählungspunkte */
}
#navi li {
background-color:#82DF7B; /* Hintergrundfarbe */
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
border-left:25px green solid; /* Rahmenfarbe Auflistungpunkt oben */
border-bottom:1px red solid; /* Rahmenfarbe unten */
border-right:2px blue solid; /* Rahmenfarbe unten */
margin-top:10px; /* Außenabstand oben */
padding-top:8px; /* Innenabstand oben */
padding-bottom:8px; /* Innenabstand unten */
padding-left:8px; /* Innenabstand unten */
padding-right:8px; /* Innenabstand unten */
}
#navi li:hover {background-color:green;}
#navi a:hover {
color:chartreuse;
text-decoration: none;}
ich hätte am liebsten,dass es sich auch nach rechts verschibt und eben das mit dem ganzen kästchen..dankeschön
-
das mit ul und li hat nich so ganz geklappt, hab einfach alles mit divs gemacht..
die css datei:
body { background-color:yellow; }
#nav {
width:200px; /* Breite des Bereichs */
text-align:left; /* Textausrichtung */
margin:10px 15px 10px 20px; /* Außenabstand reihenfolge: oben rechts unten links */
}
.nav {
background-color:#82DF7B; /* Hintergrundfarbe */
border-top:1px black solid; /* Rahmenfarbe Auflistungpunkt oben */
border-left:25px green solid; /* Rahmenfarbe Auflistungpunkt oben */
border-bottom:1px red solid; /* Rahmenfarbe unten */
border-right:2px blue solid; /* Rahmenfarbe unten */
margin-top:10px; /* Außenabstand oben */
padding:8px; /* Innenabstand wird für alle übernommen, da es die gleichen sind */
}
.nav:hover {color:chartreuse;text-decoration: none;background-color:green;padding-left:15px /*kann erhöhtwerden, jenachdem wie weit der link wandern soll beim hover*/}
der html part
<div id="nav">
<a class="link" href="#"><div class="nav">link</div></a>
<a class="link" href="#"><div class="nav">link</div></a>
<a class="link" href="#"><div class="nav">link</div></a>
<a class="link" href="#"><div class="nav">link</div></a>
<a class="link" href="#"><div class="nav">link</div></a>
</div>
bekomm ich ein karma? ;)
Beitrag geaendert: 24.2.2007 15:01:04 von nilswerner -
sowas hab ich auch mal gesucht.
nur ohne diesen weissen rand.wie bringt mal den weg?
Hast von mir eins bekommen..vielleicht kommt jocko nochmals und gibt dir auch eins
Beitrag geaendert: 24.2.2007 15:04:42 von krska-vas -
hab das erneuert ;)
jetz nochma kopieren und einfügen hab ich im edit weg gemacht..
edit:
ansonsten einfach den
border:1px solid #fff;
befehl löschen..
Beitrag geaendert: 24.2.2007 15:05:19 von nilswerner -
danke!
wo hast du css gelernt?mit einem buch? -
nope alles selbst bei gebracht..hab mir css dateien angeschaut, ein wenig mit denen rumgespielt, und dabei gelernt ;)
ansonsten kannst dir ma
css4you.de anschauen dort sind noch nen paar gute sachen zu sehen..oder diese seite
http://css.fractatulum.net/
Beitrag geaendert: 24.2.2007 15:08:43 von nilswerner -
Nur zur Info nebenbei:
IE6 und andere dieser Sorte unterstützen :hover nur für Links, andere Browser erlauben :hover für alle Elemente wie es sich gehört...
MfG apollo13 -
echt?
scheiß microsoft ^^
wer will benutzt denn auch schon den IE ;)
sollte ich mich ma anschauen und ggf. ändern -
IE brät sich ja überall ne extrawurst...
http://alistapart.com/stories/taminglists/
http://www.thestyleworks.de/tut-art/ie7.shtml
Laut der Seite solls im IE7 eh behoben sein -
will ich ma hoffen ;) will mir ja nich scho wieder alles neu aneignen müssen nur damit die mit dem IE das auch sehn könn ;)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
