bei Bildwelchsel Größe des Bildes bestimmen

ani · 31. März 2006

Guten Morgen,
ich habe einen Bildwechsel für Navigationspunkte (nicht als ul) in den header eingebaut, die auch einwandfrei funktioniert. Nur werden die Bilder zu klein angezeigt. Leider weiß ich nicht, wo ich die Bildergröße bestimmen muss. Kann mir jemand einen Tipp geben?

im CSS sieht das momentan so aus:
#header { width:100%; height:350px; color: #fff; background: no-repeat; }

#header.current, #header div.current, #header span.current { background-image: url(../images/bluemchen_over.jpg); background-position: 0 0; background-repeat: no-repeat; display: block; }
#header a { background-image: url(../images/bluemchen.jpg); font-weight: lighter; background-color: transparent; background-repeat: no-repeat; margin: 0; padding-left: 70px; }
#header a:hover { background-image: url(../images/bluemchen_over.jpg); font-weight: lighter; background-position: 0px 0px; background-repeat: no-repeat; }

#header a { color: #fff; text-decoration: none; }

#header a:hover {
color: #c0c0c0;
text-decoration: none; }

und im html :
<div id="header">
<div class="link1"><a href="#">Home</a></div>
</div>

J-C · 31. März 2006

ich seh nirgends die klasse "link1" definiert ???

aber ansonsten regelst du die größe des Bildes eigentlich im HTML-Tag des bildes bzw dann in einer extra CSS-Classe
also zB

.linkimg { width: 100px; height 100px; }

ani · 31. März 2006

Hallo J-C,
danke für Deine Antwort, aber leider funktioniert das auch nicht. Darum gebe ich hier noch einmal das komplette Script:

Code:

#header { width:100%; height:350px; color: #fff; background: no-repeat; }

#header.current, #header div.current, #header span.current { background-image: url(../images/bluemchen_over.jpg); background-position: 0 0; background-repeat: no-repeat; display: block; }
#header a { background-image: url(../images/bluemchen.jpg); font-weight: lighter; background-color: transparent; background-repeat: no-repeat; margin: 0; padding-left: 70px; }
#header a:hover { background-image: url(../images/bluemchen_over.jpg); font-weight: lighter; background-position: 0px 0px; background-repeat: no-repeat; }

#header a { color: #fff; text-decoration: none; }
  
#header a:hover {
color: #c0c0c0;
text-decoration: none; }
/****************
Navigation Tags
****************/
.link1, .link2, .link3, .link4, .link5 {
position:absolute;
color: #fff;
font-weight: normal;
font-size: 1.4em;
font-family: trebuchet ms; }


.link1 {
top: 400px;
left: 2%; 
}
		
.link2 {
top: 93px;
left: 25%; 
}
		
.link3 {
top: 1px;
left: 53%; 
}
		
.link4 {
top:93px;
left: 67%; 
}
		
.link5 {
top: 380px;
left: 88%; 
}
.linkimg { width: 40px; height: 80px; }

im HTML steht:
<div id="header">
<div class="link1"><a href="#">Home</a></div>
<div class="link2"><a href="#">Bilder</a></div>
<div class="link3"><a href="#">Links</a></div>
<div class="link4"><a href="#">Impresseum</a></div>
<div class="link5"><a href="#">Kontakt</a></div>
</div>

Die Ergänzung .link img... hat leider keine Auswirkungen gezeigt. Die Bilder werden immer in der gleichen Höhe angezeigt, wie der Text. Gibt es noch eine andere Möglichkeit? Ich habe schon alles Mögliche ausprobiert. Aber nichts funktioniert. Danke im Voraus Ani

dkdenz · 31. März 2006

Wie wäre es denn mal mit einem Link?
Oder erwartest Du, das wir Deine Code-Fragmente mühevoll zusammen setzen, weil wir nix anderes zu tun haben, und Dir dann ein Ergebniss kredenzen?

ani · 31. März 2006

Na, nicht so freundlich.

J_C hat heute morgen nach dem Script für die Links gefragt, darum habe ich das jetzt zugefügt. Der Link zur Webseite ist noch nicht möglich, die Seite existiert im Web noch nicht. Ich bin gerade erst bei der Erstellung. Ich möchte über ein großes Hintergrundbild (100%) an vorbestimmten Stellen Menupunkte verteilen, die beim Anklicken noch ein Bild aktivieren. Das klappt soweit auch gut, nur dass das Bild nur die Höhe des Textes hat. Ich bekomme es einfach nicht größer.
Seht Ihr noch eine Möglichkeit?

Dank im Voraus Ani

pit-r · 31. März 2006

Moin!

Wenn Du keinen Link hast, rück mal allen relevanten Code raus (ZUSAMMENHÄNGEND!). Falls Du darauf keine Lust hast: ich würde mich geehrt fühlen, von Dir mit dkdenz in den gleichen Topf geschmissen zu werden. Stellt sich dennoch erneut die Frage: wie willst Du Hilfe erhalten, wenn Du selbst nicht bereit bist, potentiellen Helferleins unter die Ärmchen zu grapschen?

Ahoi - Pit

dkdenz · 31. März 2006

ani schrieb:
Na, nicht so freundlich.

Ich wollte nicht unfreundlich rüberkommen, aber es ist nicht ganz so trivial,
aus irgendwelchen Fragmenten einen Rückschluss ziehen zu können.
Viele Dinge sind im Kontext zu betrachten und wenn der fehlt, artet das in Raterei aus.
Offensichtlich hast Du vor dem Posten nichtmal das gelesen:
http://forum.jswelt.de/showthread.php?t=26808
Aber selbst das würde uns nix bringen, da Du Hintergrundgrafiken verwendest, die wir natürlich nicht haben.
Vorteilhaft wäre es deswegen in der Tat, wenn Du das mal probeweise auf Deinen Space laden könntest.
Es wäre damit nicht nur uns, sondern in erster Linie Dir geholfen.

ani · 31. März 2006

OK, den Code gebe ich gerne, ich dachte nur, das oben zitierte wäre der gesamte relevante Code gewesen.
Als im HTML steht momentan

Code:

<div id="sitebox">
	<div id="header">
		<div class="link1"><a href="#">Home</a></div>
		<div class="link2"><a href="#">Bilder</a></div>
		<div class="link3"><a href="#">Links</a></div>
		<div class="link4"><a href="#">Impresseum</a></div>
		<div class="link5"><a href="#">Kontakt</a></div>
	</div>
	
</div>
<div id="footer"></div>

im CSS steht

Code:

/*********************
Main Body tags
*********************/
body {
font-family: "trebuchet ms", verdana, arial;
background: #585858;}

* {
margin: 0;
padding: 1% 0 0;
}

h1{
color: #fff;
letter-spacing: 0.7em;
margin-top: 0px;
margin-left: 15px;
font-size: 1.2em;}

#sitebox{ width: 100%; margin:  0 auto; position:relative; background: #585858 url(../images/pusteblume.jpg); height: 500px; border-bottom: thick ridge #a10cae; }

/***********************
Header Tags
***********************/

#logo{
width:100%;
height:350px;
color: #fff;
background: no-repeat; }

#header { width:100%; height:350px; color: #fff; background: no-repeat; }

#header.current, #header div.current, #header span.current { background-image: url(../images/bluemchen_over.jpg); background-position: 0 0; background-repeat: no-repeat; display: block; }
#header a { background-image: url(../images/bluemchen.jpg); font-weight: lighter; background-color: transparent; background-repeat: no-repeat; margin: 0; padding-left: 70px; }
#header a:hover { background-image: url(../images/bluemchen_over.jpg); font-weight: lighter; background-position: 0px 0px; background-repeat: no-repeat; }

#header a { color: #fff; text-decoration: none; }
  
#header a:hover {
color: #c0c0c0;
text-decoration: none; }

#header h1 {
color: #fff;
letter-spacing: 0.7em;
margin-top: 0px;
margin-left: 15px;
font-size: 1.2em; }


	
/****************
Navigation Tags
****************/
.link1, .link2, .link3, .link4, .link5 {
position:absolute;
color: #fff;
font-weight: normal;
font-size: 1.4em;
font-family: trebuchet ms; }


.link1 {
top: 400px;
left: 2%; 
}
		
.link2 {
top: 93px;
left: 25%; 
}
		
.link3 {
top: 1px;
left: 53%; 
}
		
.link4 {
top:93px;
left: 67%; 
}
		
.link5 {
top: 380px;
left: 88%; 
}
.linkimg { width: 40px; height: 80px; }

Ich hoffe, das ist so OK
Ani

pit-r · 31. März 2006

Hi!

Aber die Bedeutung von 'ZUSAMMENHÄNGEND' ist Dir ein Begriff?

Ahoi - Pit

dkdenz · 31. März 2006

@ani: Das ist jetzt keine Boshaftigkeit Dir gegenüber, aber:
http://forum.jswelt.de/showthread.php?t=26808

ani · 31. März 2006

OK, in Zukunft weiß ich, wie ihr den Code sehen möchtet

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

	<title>website</title>
	
	<style type="text/css" media="all">
/*********************
Main Body tags
*********************/
body {
font-family: "trebuchet ms", verdana, arial;
background: #585858;}

* {
margin: 0;
padding: 1% 0 0;
}

h1{
color: #fff;
letter-spacing: 0.7em;
margin-top: 0px;
margin-left: 15px;
font-size: 1.2em;}

#sitebox{ width: 100%; margin:  0 auto; position:relative; background: #585858 url(../images/pusteblume.jpg); height: 500px; border-bottom: thick ridge #a10cae; }

/***********************
Header Tags
***********************/

#logo{
width:100%;
height:350px;
color: #fff;
background: no-repeat; }

#header { width:100%; height:350px; color: #fff; background: no-repeat; }

#header.current, #header div.current, #header span.current { background-image: url(../images/bluemchen_over.jpg); background-position: 0 0; background-repeat: no-repeat; display: block; }
#header a { background-image: url(../images/bluemchen.jpg); font-weight: lighter; background-color: transparent; background-repeat: no-repeat; margin: 0; padding-left: 70px; }
#header a:hover { background-image: url(../images/bluemchen_over.jpg); font-weight: lighter; background-position: 0px 0px; background-repeat: no-repeat; }

#header a { color: #fff; text-decoration: none; }
  
#header a:hover {
color: #c0c0c0;
text-decoration: none; }

#header h1 {
color: #fff;
letter-spacing: 0.7em;
margin-top: 0px;
margin-left: 15px;
font-size: 1.2em; }


	
/****************
Navigation Tags
****************/
.link1, .link2, .link3, .link4, .link5 {
position:absolute;
color: #fff;
font-weight: normal;
font-size: 1.4em;
font-family: trebuchet ms; }


.link1 {
top: 400px;
left: 2%; 
}
		
.link2 {
top: 93px;
left: 25%; 
}
		
.link3 {
top: 1px;
left: 53%; 
}
		
.link4 {
top:93px;
left: 67%; 
}
		
.link5 {
top: 380px;
left: 88%; 
}
.linkimg { width: 40px; height: 80px; }		
			
</style>
	

</head>

<body>
<h1>Wie geht das mit den Bildern?</h1><br/>
<div id="sitebox">
	<div id="header">
		<div class="link1"><a href="#">Home</a></div>
		<div class="link2"><a href="#">Bilder</a></div>
		<div class="link3"><a href="#">Links</a></div>
		<div class="link4"><a href="#">Impresseum</a></div>
		<div class="link5"><a href="#">Kontakt</a></div>
	</div>
	
</div>
<div id="footer">
	  	Copyright © 2006  
</div>
	</body>

</html>

pit-r · 31. März 2006

Hi!

Wir hätten auch gern ein Kästchen drum...

Ahoi - Pit

(P.S.: aber wir sind diesbezüglich nicht sehr verwöhnt)

dkdenz · 31. März 2006

Scheinbar ist heute kein guter Tag für Dich...
...denn wie geschrieben, Du verwendest Hintergrundgrafiken, um die es auch geht, aber wir haben die nicht und deswegen ist es ziemlich schwierig, da irgendwas zu lösen...
...aber ich versuche mir das mal vorzustellen.
Welche Ausmasse haben die Grafiken?

dkdenz · 31. März 2006

Also eigentlich müsste das schon hier definiert werden:

Code:

#header.current, #header div.current, #header span.current { background-image: url(../images/bluemchen_over.jpg); background-position: 0 0; background-repeat: no-repeat; display: block; }

Du gibst dem Element ein display:block, aber dazu fehlt definitiv eine Breite und eine Höhe.
Beispiel:

Code:

#header.current, #header div.current, #header span.current { background-image: url(../images/bluemchen_over.jpg);background-repeat: no-repeat; display: block; width:irgendwas; height:irgendwas; }

background-position brauchst Du in dem Fall nich (00), da ein bg-image immer bei 00 anfängt...

ani · 31. März 2006

Danke für eure Bemühungen. Leider klappt es so nicht. Ich habe jetzt die Seite eben hochgeladen:

http://www.kaus-online.de/temp/ck/css.html

vielleicht könnt Ihr daran sehen, warum das nicht funktioniert. Ich habe die Imagegröße schon überall eingefügt. Aber nichts spricht an. Das Bild bleibt wie es ist.

bei Bildwelchsel Größe des Bildes bestimmen

ani

New member

J-C

Lounge-Member

ani

New member

dkdenz

New member

ani

New member

pit-r

Guest

dkdenz

New member

ani

New member

pit-r

Guest

dkdenz

New member

ani

New member

pit-r

Guest

dkdenz

New member

dkdenz

New member

ani

New member