Ergebnis 1 bis 4 von 4

Thema: Versatz zwischen div und Grafik in Firefox/IE

  1. #1
    HTML Newbie
    Registriert seit
    22.03.2010
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Versatz zwischen div und Grafik in Firefox/IE

    Hallo,
    ich bin gerade dabei meine erste Homepage zu gestalten. Das funktioniert auch eigentlich ganz gut, nur ein Problem bekomme ich nicht in den Griff:
    Mein horizontales Menü möchte ich so anordnen, dass es an der Unterkante mit einer nebenliegenden Grafik abschließt. Habe die Positionierung nur mit "float:left/right" gemacht, und im Safari (mac) klappt das auch einwandfrei.
    Im Internet Explorer und Firefox habe ich aber einen Versatz von einem Pixel zwischen Menü und Grafik. Dies kann ich mit "position:relative; top:1px;" zwar beheben, aber dann hab ich den Versatz in Safari. Ich denke mal es läuft auf eine Browserweiche hinaus, habe aber keine Ahnung wie das funktioniert, und lese überall nur, dass man ohne Weichen auskommen soll..
    wäre echt toll, wenn mir jemand helfen könnte..

    Danke und Viele Grüße!!!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Versatz zwischen div und Grafik in Firefox/IE

    Versuch's mal damit:
    http://www.ohne-css.gehts-gar.net/0009.php

    Evtl. auch
    Code:
    ul {margin: 0;}
    Ansonsten bitte Link zur Problemseite posten.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    22.03.2010
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Versatz zwischen div und Grafik in Firefox/IE

    hat leider nicht geholfen..
    hier mal meine HTML-Datei:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="css/standard.css"/>
    </head>
    
    <body>
    
    <div id="seite">
    	
    	<div id="header">
    		<h1>Header</h1>
    	</div>
    		<img style="float:left;" src="bilder/logo1.png" alt="logo1"/>
    		<img style="float:right" src="bilder/logo2.png" alt="logo1"/>
    	
    	<div id="menu">
    		<ul>
    			<li><a style="background-color:#fff; color:#f00;" class="direkt" href="#">Link</a></li>
    		</ul>
    		<ul>
    			<li><a class="direkt" href="#">Link</a></li>
    		</ul>
    		<ul>
    			<li><h3>Link</h3>
    				<ul style="padding-left:30px;">
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    				</ul>
    			</li>
    		</ul>
    		<ul>
    			<li><h3>Link</h3>
    				<ul style="padding-left:30px;">
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    				<li><a href="#">Link</a></li>
    				</ul>
    			</li>
    		</ul>
    	</div>
    	
    	<div id="inhalt">
    		<h2>Inhalt</h2><br/>
    	</div>
    	
    </div>
    
    </body>
    </html>
    und hier die dazugehörige CSS-Datei (hab nur die entscheidenden Einträge reinkopiert)

    Code:
    /*--Seite--*/
    
    * {
    margin: 0;
    padding: 0;
    font-family:Verdana;
    }
    
    body {
    background-color:#808080;
    }
    
    #seite {
    margin-left:auto; 
    margin-right:auto; 
    width:837px;
    background-color:#eee; 
    }
    
    #header {
    float:left; 
    padding:14px 0px 0px 15px;
    width:563px; 
    line-height:0.2;
    background-color:#fff;
    min-height:107px;
    }
    
    #inhalt {
    color:#f00;
    padding:60px 11px 15px 70px; 
    font: 13px Verdana;
    min-height:550px;
    clear:left;
    }
    
    /*--Navigation--*/
    
    #menu {
    float: left;
    /*position:relative; top:1px;*/ /*--Versatz-Ausgleich von Menü-Balken und Grafik für Internet Explorer und Firefox--*/
    width:646px;
    background-color:#f00;
    border:0;
    font:12px Verdana;
    cursor:default;
    }
    
    #menu ul {
    float: left;
    width: 92px;
    list-style-type: none;
    }
    
    /*--Überschriften--*/
    #menu h3 {
    background-color: #f00;
    border: 1px solid #f00;
    font:bold 12px Verdana;
    color: #fff;
    text-align: center;
    padding:3px;
    }
    noch ein paar Erläuterungen: also zuerst kommt links oben ein div-Container als eigentlicher Header. Recht daneben folgt dann die Grafik, die ich teilen musste, da die Grafik zwei verschiedene Höhen hat (Menü wird durch die Höhe der ersten Grafik vertikal positioniert). Unter dem Header und unter der ersten Grafik folgt dann das horizontale Menü, das eigentlich mit der zweiten Grafik eben abschließen soll. Hab auch mal ein Foto angehängt, da das alles irgendwie schwer zu erklären ist^^
    Angehängte Grafiken Angehängte Grafiken

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Versatz zwischen div und Grafik in Firefox/IE

    Ohne Link zur Seite kann man dir schwer helfen, da man auch die eingebundenen Grafiken sehen muss.
    Besorge dir ggf. Freewebspace bei einem Anbieter.

    Du kannst es auch mal damit versuchen, letztlich ist aber ohne Link alles nur Spekulation:
    Code:
    #header {
    float:left; 
    padding:14px 0px 0px 15px;
    width:563px; 
    background-color:#fff;
    height:107px;
    }

Ähnliche Themen

  1. Abstand zwischen Grafiken (Firefox)
    Von marco563 im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 12.10.2009, 09:34
  2. Unterchiedliche Anzeige zwischen Firefox & Internet Explorer?
    Von ruhrpottknipser im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 20.07.2009, 19:50
  3. Unterschiedliche Abstände zwischen FIREFOX UND IE 7
    Von Billbos im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 06.07.2008, 20:55
  4. Unterschied zwischen Firefox und I-Explorer
    Von Bischoff im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 12.02.2006, 12:13
  5. Firefox macht Abstand zwischen zwei Ebenene
    Von Emcee im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 05.10.2005, 17:50

Stichworte

Berechtigungen

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