Ergebnis 1 bis 13 von 13
  1. #1
    Schneider ist offline Doppel-As
    registriert
    01-06-2005
    Beiträge
    124

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

    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>

  2. #2
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

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

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

  3. #3
    Schneider ist offline Doppel-As
    registriert
    01-06-2005
    Beiträge
    124

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

    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>
    Geändert von Schneider (30-01-2007 um 15:15 Uhr)

  4. #4
    Avatar von bubu-der-uhu
    bubu-der-uhu ist offline Routinier
    registriert
    03-05-2005
    Ort
    Ösireich
    Beiträge
    315

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

    Ä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{
    width60px;
    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
    Geändert von bubu-der-uhu (30-01-2007 um 15:23 Uhr)

  5. #5
    Schneider ist offline Doppel-As
    registriert
    01-06-2005
    Beiträge
    124

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

    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 {
    height120px
    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-position0px -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

  6. #6
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

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

    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.
    Geändert von dkdenz (30-01-2007 um 16:32 Uhr)

  7. #7
    Avatar von bubu-der-uhu
    bubu-der-uhu ist offline Routinier
    registriert
    03-05-2005
    Ort
    Ösireich
    Beiträge
    315

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

    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:
    aa:linka:visited {
    background-image:url(bild.jpg);
    background-position:top;
    width60px;
    height120px;
    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
    Geändert von bubu-der-uhu (30-01-2007 um 16:31 Uhr)

  8. #8
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

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

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

  9. #9
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

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

    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>

  10. #10
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

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


  11. #11
    Schneider ist offline Doppel-As
    registriert
    01-06-2005
    Beiträge
    124

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

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

  12. #12
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

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

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

  13. #13
    Schneider ist offline Doppel-As
    registriert
    01-06-2005
    Beiträge
    124

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

    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

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •