|
|||
Bild neben Linkliste bei Hover über link
Hallo,
ich hab ne liste mit links zu ( in diesemFall) Profilseiten. Wenn ich auf einen Link gehe soll ein Foto rechts von der liste erscheinen, die Liste aber nicht durch die größe des bildes auseinander "gerissen" werden. Hier die seite: Das sind Wir Hat jemand ne Idee wie ich das anstellen soll? Bisher hab ich das Bild als background des links genutzt nur dann wird der Link so hoch wie das bild und die liste wird zerrissen ( lässt sich also nicht mehr schön bedienen): Hier noch mein kompletter css code: (der code abschnitt mit den bildern befindet sich unter "MItglieder Ansicht") Code:
/* ############################## Layout der Website: bachstelzen.net #################################*/ /* ############################ Kalibrierung ############################*/ * { padding: 0; margin: 0; } /* Abstände resetten*/ html { /* erzwingt Scrollbar im Firefox */ height: 101%; } /*############################## Allgemeine einstellungen #############################*/ body { background-color:#494544; /* Hintergrundfarbe */ color: white; /* Schriftfarbe */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: medium; /* Schriftgröße */ } h1 { font-size: 150%; } h2 { font-size: 130%; } a { text-decoration: none; } /* Unterstreichung entfernen */ a:link { color: white; } a:visited { color: #cc6666; } li { list-style-type: none; } /*################################ Bereiche - Allgemein #############################*/ #wrapper { background-color: #494544; color: white; width: 960px; margin-top: 10px; margin-right: auto; /* Abstand rechts */ margin-bottom: 10px; margin-left: auto; /* Abstand links */ } #header { background-image: url('../images/body-bg_onlygrey.jpg'); background-repeat: repeat-x ; color: black; } #header h1 { color: white; text-align: center; font-family: "Arial"; padding: 5px; letter-spacing: 2px } #banner { padding-top: 30px; } #navhorizontal{ text-align: center; padding-top: 20px; padding-bottom: 20px; background-image: url('../images/blacktile.gif'); background-repeat: repeat-x ; background-position: center; } #navhorizontal li{ display: inline; } #navhorizontal ul { padding-left: auto; padding-right: auto; } #navhorizontal a { color: white; font-size: 140%; padding-top: 3px; padding-bottom: 1px; padding-left:10px; /*Breite Navi Buttons*/ padding-right: 10px; /* Breite Navi Buttons*/ } navhorizontal a:visited { color: silver; } #navhorizontal a:hover, #navhorizontal a:focus { /*border-bottom: none;*/ background-image: url('../images/blackover.gif'); background-repeat: repeat-x ; } #navvertikal { width: 200px; float: left; padding: 10px 0px 10px 30px; margin: 20px 20px 20px 10px; background-color: #333333; } #navvertikal a { display: block; width: 174px; height: 33px; padding-top: 14px; padding-left: 30px; /*background-color: gray;*/ background-image: url('../images/navileiste_button_hover.png'); background-repeat: no-repeat; background-position: left; color:#333333; } #navvertikal a:hover, #navvertiakl a:focus{ background-image: url('../images/navileiste_button_actvie.png') } #inhalt{ width: 650px; min-height: 350px; margin-top: 20px; margin-left: 270px; padding: 20px; background-color: #333333; } #inhalt h3 { margin-bottom: 15px; } #inhalt p { padding-left: 15px; } #inhalt a { text-decoration: underline ; color: white; } #inhalt a:hover{ border: 1px white dotted; } /* ################################# Mitglieder Ansicht ###############################*/ #atze a:hover { display: block ; height: 250px; width: 650px; float: left; background-image: url('../profilfotos/atze.png'); background-position: right; background-repeat: no-repeat; } #ben a:hover { display: block ; height: 250px; width: 650px; float: left; background-image:url('../profilfotos/ben.png'); background-position:right ; background-repeat: no-repeat; } #herbert a:hover { display: block ; height: 250px; width: 650px; float: left; background-image: url('../profilfotos/herbert.png'); background-position: right; background-repeat: no-repeat; } #frank a:hover { display: block ; height: 250px; width: 650px; float: left; background-image: url('../profilfotos/frank.png'); background-position: right; background-repeat: no-repeat; } #franz a:hover { display: block ; height: 250px; width: 650px; float: left; background-image: url('../profilfotos/franz.png'); background-position: right; background-repeat: no-repeat; } #mirco a:hover { display: block ; height: 250px; width: 650px; float: left; background-image: url('../profilfotos/mirco.png'); background-position: right; background-repeat: no-repeat; } #karl a:hover { display: block ; height: 250px; width: 650px; float: left; background-image: url('../profilfotos/karl.png'); background-position: right; background-repeat: no-repeat; } #peter a:hover { display: block ; height: 250px; width: 650px; float: left; background-image: url('../profilfotos/peter.png'); background-position: right; background-repeat: no-repeat; } #stefan a:hover { display: block ; height: 250px; width: 650px; float: left; background-image: url('../profilfotos/stefan.png'); background-position: right; background-repeat: no-repeat; } #steven a:hover { display: block ; height: 250px; width: 650px; float: left; background-image: url('../profilfotos/steven.png'); background-position: right; background-repeat: no-repeat; } /* ################################### Bereiche - Klassen #############################*/ .datum{ text-decoration: underline ; font-size: 110%; } MFG DBZwerg Geändert von DBzwerg (09.02.2010 um 12:01 Uhr) |
Sponsored Links |
|
|||
Wer suchet der findet
Links mit zusätzlichen Informationen: Tipps und Tricks auf CSS 4 You - The Finest in Stylesheets Statt einer Info setzt du halt deine Bilder ein... könnten ja auch img-Tags sein. lg
__________________
Webprojekte sind momentan in der Überarbeitung. |
Sponsored Links |
|
|||
Natürlich kannst du denen die selbe Position geben, du solltest nur darauf achten das immer nur eins auf visible steht - sonst käme da ein Kaudawelsch raus
__________________
Webprojekte sind momentan in der Überarbeitung. |
|
|||
Oh hilfe!!!
Jetzt klappts garnicht mehr ... Ich hab irgendwie ne denkblockade... Hier mein code HTML-Code:
<li id="atze"><a href="profile/atze.html"><span class="profilbild">Joachim Matuszweski<img src="profilfotos/atze.png" "alt="Bachstelzen Banner" height="250px" width="250px" /></span></a> css Code:
a .profilbild{ visibility: hidden;} } a:hover .profilbild{ visibility: visible ; und hier die seite: Das sind Wir Bitte gebt mir mal nen den richtigen denkanstoss... |
|
|||
Was genau klappt den nicht? Mir zeigen die Browser deine Bilder rechts als Hover an - so wie du es doch wolltest? (FF 3.5, Safari, Opera 9, Google Chrome, IE 8, IE 7, IE 6)
__________________
Webprojekte sind momentan in der Überarbeitung. |
|
|||
Gleich mal meinen Opera geupdated -> hier passts leider auch..
Aber sonst kannst du auch statt mit visibility auch mit display: none/block etc. probieren. Das als Standard die Bilder auf display: none stehen und beim Hover setzt du den img-Tag auf display: inline-block -> sollte eigentlich genau den selben Effekt erzielen.
__________________
Webprojekte sind momentan in der Überarbeitung. |
|
|||
@ Frank W.
Ich hab gestern noch nen bissle gebastelt bis ichs hinbekommen habe... werd gleich mal die lösung beschreiben ... @plastiko ...och nööö hab gedacht ich komm um browser patchen drum rum... aber anscheinend hat frank da schon ne lösung. |
Sponsored Links |
|
|||
So hier die lösung für mein Problem:
zuerst bekommt das umgebene element (hier die ul die eigenschaft "postion:relative;" -> Das bewirkt das die bilder sich als "fixpunkt" die ul nehmen. ( großer dank dafür an Peter Müller und sein Buch "Little boxes 1") Jetzt der html teil für den listeneintrag (bzw. den Link) HTML-Code:
<li><a href="ben.html">Benjamin Jumpertz<span class="mitglieder" ><img src="profilfotos/ben.png" /></span></a></li> Und nun der css Teil Code:
span.mitglieder img { position: absolute; visibility: hidden; right:30px; top:0px; width:250px; height:250px; background-color: white; } a:hover span.mitglieder img{ visibility: visible;} So ich hoff das damit auch anderen geholfen wird. MFG DBzwerg |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Liste und Bild mit Float: wie? | Martu | CSS | 7 | 30.06.2009 13:40 |
Ungelöste Frage: Bild vertikal zentrieren (Liste) | sahara87 | CSS | 5 | 25.01.2008 15:34 |
Wie Liste am unteren Rand eines div darstellen? | Stadtmensch | CSS | 0 | 21.01.2007 01:18 |
ge-float-ete Listeneinträge - Liste mittig darstellen | Hasch | CSS | 3 | 03.11.2006 16:56 |
Liste (inline) Umbruch erzeugen | Steakfred | CSS | 3 | 09.05.2006 13:27 |