Ergebnis 1 bis 7 von 7

Thema: float left funktioniert nicht richtig

  1. #1
    Youngster
    Registriert seit
    02.10.2014
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Cool float left funktioniert nicht richtig

    Hallo,


    mein Problem ist folgendes: Wenn ich im css die ausrichtung der Internetlinks mit float: left auf links
    setze bleibt eine eine ungewollte breite von 20px etwa übrig, setzte ich bei gleichen code mein float: right,
    so funktionert es bestens und die links sind rechtbündig und schön kanpp am rand verstehe nicht warum.
    Danke für eure Hilfe.

    Hier mein html snippet;


    HTML-Code:
     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
    
    <head>
    
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    
      <title>Weltkarte</title>
    
      <link href="styleWeltkarte.css" type="text/css" rel="stylesheet" />
      
      <link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
      
    </head>
    
    
    <body>
      <script type="text/javascript" src="Wooltip/wz_tooltip.js"></script>
      
      <div  class="mainBody" >
      <header class="mainHeader">
        
        <nav>
          <ul>
            <li>
              <a href="#">LINK 1</a>  
              <a href="http://www.w3schools.com/html/">LINK 2</a>        
              <a href="http://www.w3schools.com/html/">LINK 3</a>
              <a href="http://www.w3schools.com/html/">LINK 4</a>
            </li>
          </ul>
        </nav>  
      </header>
      
      
        
      <p>
        <img class="Weltkarte" src="Weltkarte.svg" alt="Karte" usemap="#Landkarte">
        
        <map name="Landkarte">
          <!-- Tooltips per JavaScript--> 
          <area shape="poly" coords="7,77,29,61,63,71,63,123,63,129,6,116,19,99"
             href="http://www.web.de/" onmouseover="Tip('United States of America', BGCOLOR, '#FF6600',BORDERCOLOR, '#FFFFFF', FONTFACE,          'Oswald', FONTCOLOR,'#FFFFFF',FONTSIZE, '7pt', SHADOW, true, SHADOWWIDTH, 5, TEXTALIGN, 'center', WIDTH, 92)" 
             onmouseout="UnTip()">
         
        </map>
      
      </p>
      </div>
      
    
    
    </body>
    </html>
    



    Und hier die css Datei, das Bild liefere ich nicht mit, es ist aber 800px breit



    Code:
    
    
    body {
       
         font-family: 'Oswald';
         background-color: #E6E6E6;    
    
    }
    
    a {
        
        text-decoration: none;
        
    }
    
    .mainBody  {
    
         width: 800px;
         margin: 0 auto;
         background-color: #E6E6E6;    
    
      
    }
    
    
    .mainHeader nav {
        margin-top: 2%;
        background-color: #666666;
        height: 30px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
    
    
    .mainHeader nav ul {
        
        list-style: none;
        margin: 0 auto;
    }
    
    
    .mainHeader nav ul li {
         
        float: left;   GENAU HIER IST DIE STELLE, DIE ICH MEINE left geht nicht, right ohne probleme
        display: inline;
        
    }
    
    
    .mainHeader nav a:link, .mainHeader nav a:visited {
        
        color: #FFFFFF;
        display: inline-block;
        padding: 3px 10px;
        height: 24px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px; 
    }
    
    
    .mainHeader nav a:hover, .mainHeader nav a:active {
        
        background-color: #FF6600;
          
        
    }
    Danke für eure Hilfe
    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
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: float left funktioniert nicht richtig

    Zunächst mal hast Du kein echtes Menü gebaut.

    Falsch:
    HTML-Code:
    <ul>
            <li>
              <a href="#">LINK 1</a>  
              <a href="http://www.w3schools.com/html/">LINK 2</a>        
              <a href="http://www.w3schools.com/html/">LINK 3</a>
              <a href="http://www.w3schools.com/html/">LINK 4</a>
            </li>
          </ul>
    Richtig:
    HTML-Code:
    <ul>
            <li><a href="#">LINK 1</a></li>
              <li><a href="http://www.w3schools.com/html/">LINK 2</a></li>
              <li><a href="http://www.w3schools.com/html/">LINK 3</a></li>
              <li><a href="http://www.w3schools.com/html/">LINK 4</a></li>
          </ul>
    Jetzt wäre die Frage wie dein Menü eigentlich aussehen soll - das geht aus deinem Text nicht hervor. Soll es die gesamte Breite horizontal einnehmen und jeweils die Menüpunkte darüber verteilt anzeigen? Oder soll es vertikal sein? Oder anders?

  3. #3
    Youngster
    Themenstarter

    Registriert seit
    02.10.2014
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: float left funktioniert nicht richtig

    Ich würde eigentlich gerne wissen warum der float befehl links nicht komplett bündig
    rechts aber schon, beim gleichen Code.

    Danke

    PS
    Warum muss ich die links umgebung immer neu setzten?

  4. #4
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: float left funktioniert nicht richtig

    Um dein float-Problem zu verstehen wäre ein Link zur Seite hilfreich.

    Bei einem Menü handelt es sich um eine Liste - folglich eine <ul>-Liste. Das darin Links stehen ist eher als Zusatz zu sehen, wg. der damit verbundenen Funktionalität.

  5. #5
    Youngster
    Themenstarter

    Registriert seit
    02.10.2014
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: float left funktioniert nicht richtig

    hier ist der link

    www.det-a.net/Weltkarte.htm

    ich habe jetzt die 4 links, also link 1, 2, 3, 4 links gefloatet und wie man sieht sind diese nicht komlpett links gebündet!

    Wenn ich dieselbe seite mit rechts float belege funktioniert das bestens!

    Warum!

  6. #6
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: float left funktioniert nicht richtig

    Dein UL benötigt noch ein padding:0;

  7. #7
    Youngster
    Themenstarter

    Registriert seit
    02.10.2014
    Beiträge
    12
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: float left funktioniert nicht richtig



    Das war es! Perfekt!!! DANKE!!! DANKE!!! DANKE!!!

Ähnliche Themen

  1. Problem mit Float (left,right)
    Von xtechnix im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 12.06.2014, 19:42
  2. Liste float left - ungewollter Umbruch
    Von Donjeta im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 18.02.2013, 15:57
  3. DIV Float:left funktioniert nicht
    Von 1234d1 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 29.07.2009, 11:51
  4. CSS: float:left; und overflow:auto; IE6 und kleiner==Problem
    Von LinuxMan im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 19.07.2008, 20:00
  5. float: left macht Probleme im FF
    Von aladin im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 08.03.2008, 23:10

Stichworte

Berechtigungen

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