[CSS-Problem]Bilder werden nich am oberen Rand positioniert

**Schneider** · 30-01-2007, 11:52

Hallo

Ich habe ein div welches 100% hoch ist in diesem div ist ein Header der 120px hoch ist. In den Header sollen jetzt Bilder reinkommen die ebenfalls 120px hoch sind, das Problem welches ich nun habe ist das ich irgendwo ein margin drinnen habe und der nun nicht genau im oberen-linken Eck anfäng das Bild reinzuladen.

Vielleicht kann mir jemand helfen:

Quellcode:

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="de">
<head>
<title>Testseite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="GENERATOR" content="Written by hand" />
<style type="text/css">
/* 100% Höhe in Opera, Firefox, IE 6,7 */
html, body { 
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 90%;
margin:0; 
padding:0; 
height:100%; 
}

div#wrapper  { 
min-height:100%; 
width:800px; 
border:1px solid black; 
border-top:0; 
border-bottom:0; 
background:#eee; 
margin:0 auto;
}

* html div { 
height:100%; 
}

#wrapper p { margin-top:0; margin-bottom; }

/* Ende 100 % Höhe*/

/*Head Bereich*/
div#header {
margin: 0;
height: 120px;
width:800px;
border-bottom: 1px solid black;	
background: #FFFF66;
}

#header ul{
margin: 0;
padding: 0;
list-style-type: none;
}

#header ul li {
margin: 0;
float: left;
display: inline;
padding: 10px;
}


/*Ende Head Bereich*/
</style>
</head>
<body>
    <div id="wrapper">
		<div id="header">
			<ul>
				<li><img src="images/logo.gif" alt="Logo"/></li>
				<li><img src="images/buerobedarf.gif" alt="B&uuml;robedarf"</li>
				<li><img src="images/bueromoebel.gif" alt="B&uuml;rom&ouml;bel"</li>
				<li><img src="images/buerogeraete.gif" alt="B&uuml;roger&auml;te"</li>
				<li><img src="images/hotelhygiene.gif 	" alt="Hotelhygiene"</li>
				<li><img src="images/verpackung.gif" alt="Verpackung"</li>
				<li><img src="images/saisonartikel.gif" alt="Saisonsartikel"</li>
				<li><img src="images/werbeartikel.gif" alt="Werbeatikel"</li>
			</ul>
		</div>
    </div>
</body>
</html>
</html>

**ein schlauer** · 30-01-2007, 12:46

du hast kein margin Wert, sondern einen padding Wert von 10px in deinem CSS Code.

**Schneider** · 30-01-2007, 14:59

danke für die Hilfe das wars dann auch :-) jetzt habe ich aber noch ein Problem und zwar will ich nun diese Bilder verlinken und mit einem Rollover versehen da hab ich bei Dr. Web folgenden Artikel gefunden
Rollover mit CSS

wenn ich nun versuche das in mein bestehendes Design einzu binden funktioniert das leider nicht ich bekomme kein Bild zu sehen vielleicht könnte mir nocheinmal jemand helfen

danke euch

Quellcode:

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="de">
<head>
<title>Testseite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="GENERATOR" content="Written by hand" />
<style type="text/css">
/* 100% Höhe in Opera, Firefox, IE 6,7 */
html, body { 
font-family: Verdana, Arial, Tahoma, sans-serif;
font-size: 90%;
margin:0; 
padding:0; 
height:100%; 
}

div#wrapper  { 
min-height:100%; 
width:800px; 
border-top:0; 
border-bottom:0; 
background-color:#eee; 
margin:0 auto;
}

* html div { 
height:100%; 
}

#wrapper p { margin-top:0; margin-bottom; }

/* Ende 100 % Höhe*/

/*Head Bereich*/

div#header {
margin: 0;
padding: 0;
height: 120px;
width:800px;
border-bottom: 1px solid black;	
background-color: #FFFFFF;
}

#header ul{
list-style-type: none;
display: inline;
overflow: hidden;
}

#header ul li {
margin: 0;
padding: 0;
display: inline;
}

#header ul li a {
float: left;
padding: 0;
overflow: hidden
height: 120px !important;
width: 60px;
}

#header a:hover {
background-position: 0 120px;
}




/*Ende Head Bereich*/


</style>
</head>
<body>
    <div id="wrapper">
		<div id="header">
			<ul>
				<li><a style="background: url(images/buerobedarf_a.gif);" href="#"></a></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div style="clear: left";>
			<div style="background-image:url(images/buerobedarf.gif); margin:0px; padding:10px">
		</div>
    </div>
</body>
</html>
</html>

**bubu-der-uhu** · 30-01-2007, 15:21

Ähhh Ich versteh nicht was du da machen willst?!

1.) du hast ein </html> zu viel
2.) Bei overflow: hidden fehlt ein ;
3.) nach margin-bottom kommt nix!

Ich denke du möchtest den Hintergrund des links ändern:

PHP-Code:


#header a, #header a:link, #header a:visited{

width: 60px;

color: #FFFFFF;                    /*Text-Farbe*/

background-color:#006699;     /*Hintergrundfarbe*/

/*Du kannst aber auch die Hintergrundbilder wechseln mit background-image:url(bspbild1.jpg);*/

}



#header a:hover {

color: #000000;                    /*Text-Farbe bei Mouseover*/

background-color:#009999;     /*Hintergrundfarbe bei Mouseover*/

/*Du kannst aber auch die Hintergrundbilder wechseln mit background-image:url(bspbild2.jpg);*/

}

im <header> schreibst du dann nur mehr <a href="#">LINK</a> ohne noch irgendwelche styles zu vergeben.

Ich hoffe Ich konnte dir helfen -
Ciao, bubu

**Schneider** · 30-01-2007, 16:02

danke für die Hilfe immer diese Fehler

aber leider hilft mir das noch nicht wirklich weiter ich versuch es nochmals zu erklären:

Ich habe eine Navigation mit 7 Bilder.
Das erste Bild ist das Logo das ist 60 x 170 (Breite x Höhe). Dies will ich als Link verwenden dass klappt auch wunderbar.
Jetzt habe ich noch 6 weitere Bilder die ich ebenfalls als Navigationselemente nutzen will. Diese Bilder sind in Wirklichkeit 60 (Breite) x 240 (Höhe) Pixel.
Jetzt werden die Bilder als Links dargestellt (jedes einzelne), die dargestellte Höhe ist 120 Pixel (da die anderen 120 Pixel den Hover darstellen sollen).

Jetzt will ich allgemein sagen das in der Navigation der a Tag nur 120px (Höhe) angezeigt werden. So ungefähr:

PHP-Code:


#header a {

height: 120px

width: 60px

}

Wenn ich nun Drüberfahr soll der hover die ersten 120px ausblenden und die anderen 120 Pixel (unten) einblenden

PHP-Code:


#header a:hover {

background-position: 0px -120px;

}

Somit habe ich ein Bild mit einem Hovereffekt (auch als Bild)drinnen

in den <a> Tag gebe ich darum ein Style damit ich hier das Bild (Navigationselement) wählen kann.

Code:

<a href="#" style="background: url(images/bild1.gif) 0px 0px no-repeat">
<a href="#" style="background: url(images/bild2.gif) 0px 0px no-repeat">
...

Leider klappt es noch nicht so ganze ich Probiere noch etwas rum falls ich es dann immer noch nicht hinbekomme melde ich mich nochmals

Danke für die bisherige Hilfe

**dkdenz** · 30-01-2007, 16:25

Um den Einsatz von class wirst Du nicht herumkommen...

Edit:
Außer Du machst ein 1440px hohes Bild und switchst durch Positionsverschiebungen durch's Bild.

**bubu-der-uhu** · 30-01-2007, 16:29

Aha...
also du willst, dass er dir das Bild quasi raufschiebt - die grösse des Links soll Gleichbleiben???
also erstmals bei background-position irgendwelche px angaben machen geht glaub ich garnicht.

So wie du das machen willst ginge es aber tatsächlich so:

PHP-Code:


a, a:link, a:visited {

background-image:url(bild.jpg);

background-position:top;

width: 60px;

height: 120px;

display:block;

color:FFFFFF;

}

a:hover

{background-position:bottom;}

aber Ich würde einfach die 240px Bilder mit nem Grafikprogramm auseinanderschneiden und 2x 120px Bilder draus machen - und diese dann einfach austauschen.... aber jedem das seine

-> dafür brauchst aber wirklich "class" wie dkdenz geschrieben hat

**dkdenz** · 30-01-2007, 16:33

@bubu-der-uhu:
Das geht! Selbst schon gemacht.
Hast Du den Dr.Web-Link nicht verfolgt?
Da ist ein Beispiel.

**dkdenz** · 30-01-2007, 17:06

Beispiel:

Code:

a.menu1:link {
    background:url(bild1.jpg) top;
    width: 60px;
    height: 120px;
    display:block;
    }
a.menu1:hover {
    background:url(bild1.jpg) bottom;
    }  

a.menu2:link {
    background:url(bild2.jpg) top;
    width: 60px;
    height: 120px;
    display:block;
    }
a.menu2:hover {
    background:url(bild2.jpg) bottom;
    }
usw

Code:

<a href="" class="menu1">Link</a>
<a href="" class="menu2">Link</a>

**ein schlauer** · 30-01-2007, 17:08

Das nennt sich Sliding Doors

[EDIT] oder besser A List Apart: Articles: Sliding Doors of CSS, Part II

**Schneider** · 30-01-2007, 17:35

danke für die Hilfe, ich werde mir das alles mal genauer anschauen.

**dkdenz** · 30-01-2007, 17:41

...nur würde ich auf Textlinks nicht verzichten wollen (SuMa's).

**Schneider** · 31-01-2007, 08:33

danke an alle
ich hab es jetzt so wie dekadenz beschrieben hat gelöst. Für jeden Link eine eigene Klasse. Jetzt funkioniert es wunderprächtig

Thema: [CSS-Problem]Bilder werden nich am oberen Rand positioniert

LinkBack

Themen-Optionen

Anzeige

[CSS-Problem]Bilder werden nich am oberen Rand positioniert

AW: [CSS-Problem]Bilder werden nich am oberen Rand positioniert

AW: [CSS-Problem]Bilder werden nich am oberen Rand positioniert

AW: [CSS-Problem]Bilder werden nich am oberen Rand positioniert

AW: [CSS-Problem]Bilder werden nich am oberen Rand positioniert

AW: [CSS-Problem]Bilder werden nich am oberen Rand positioniert

AW: [CSS-Problem]Bilder werden nich am oberen Rand positioniert

AW: [CSS-Problem]Bilder werden nich am oberen Rand positioniert

AW: [CSS-Problem]Bilder werden nich am oberen Rand positioniert

AW: [CSS-Problem]Bilder werden nich am oberen Rand positioniert

AW: [CSS-Problem]Bilder werden nich am oberen Rand positioniert

AW: [CSS-Problem]Bilder werden nich am oberen Rand positioniert

AW: [CSS-Problem]Bilder werden nich am oberen Rand positioniert

Lesezeichen

Lesezeichen

Berechtigungen

Swiper Slide Activ ID auslesen

Swiper Slide Activ ID auslesen

Swiper Slide Activ ID auslesen