zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden 250*250px bild neben liste darstellen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.02.2010, 02:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2010
Beiträge: 18
DBzwerg befindet sich auf einem aufstrebenden Ast
Standard 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)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.02.2010, 21:13
Programmierer
neuer user
 
Registriert seit: 21.05.2009
Beiträge: 26
FrankW. befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.02.2010, 22:28
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2010
Beiträge: 18
DBzwerg befindet sich auf einem aufstrebenden Ast
Standard

Kann man denn mehrere Bilder an der gleichen Position setzen?

Sonst klingt das mit visi bility nicht schlecht
Mit Zitat antworten
  #4 (permalink)  
Alt 08.02.2010, 00:27
Programmierer
neuer user
 
Registriert seit: 21.05.2009
Beiträge: 26
FrankW. befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 08.02.2010, 20:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2010
Beiträge: 18
DBzwerg befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #6 (permalink)  
Alt 08.02.2010, 23:36
Programmierer
neuer user
 
Registriert seit: 21.05.2009
Beiträge: 26
FrankW. befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 08.02.2010, 23:49
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Im Opera 10 sehe ich die Kampftruppe auch ohne :hover.
__________________
MfG
Jens
Mit Zitat antworten
  #8 (permalink)  
Alt 09.02.2010, 11:30
Programmierer
neuer user
 
Registriert seit: 21.05.2009
Beiträge: 26
FrankW. befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 09.02.2010, 11:36
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2010
Beiträge: 18
DBzwerg befindet sich auf einem aufstrebenden Ast
Standard

@ 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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.02.2010, 12:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.02.2010
Beiträge: 18
DBzwerg befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:04 Uhr.