✔ Float:left zentrieren?

Status
Nicht offen für weitere Antworten.
V

Vespillo

Grünschnabel
Hallo, bin neu hier und wollte fragen, wie ich float:left zentrieren kann.

habe' 3 Grafiken in div gesetzt und diese auf float:left gesetzt

in die mittige grafik will ich nun text ect einfügen: klappt alles wunderbar!
nur sie bleiben immer links :(

hier ist der code von der html- und cssdatei

Code: 
<html>
<head>
<link rel=stylesheet type=text/css href=style/style.css />
<title>home</title>
</head>
<body>
<div class=top></div><br style="clear:both">
<div class=middle>
<p class=text>
<ul id="minitabs">
    <li><a href="#">1</a></li>
    <li><a id="current" href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
</ul> 
</p>
<p class=text>


TEXT



<p class=text>
</div><br style="clear: both">
<div class=bottom></div><br style="clear:both">
<h5 class=copyright>©2008</h5>


</body>
</html>


Code: 
body {background-color:#ffffff;
      background-image: url(background.gif);
      background-attachment: fixed;}

div.top {float: left;
         width: 630px;
         height: 150px;
         background-image: url(top.gif);
         background-position: center center;}
div.middle {float: left;
            width: 630px;
            height: auto;
            background-image: url(middle.gif);
            background-position: center center;}
div.bottom {float: left;
            width: 630px;
            height: 40px;
            background-image: url(bottom.gif);
            background-position: center center;}

p.text {padding-left: 20px;
          padding-right: 20px;}

h5.copyright {color:#D10003;
              float: left;
              width: 630px;
              text-align: center;}


ul#minitabs{list-style: none;margin: 0;padding: 7px 0;
            font-weight: bold;
            text-align: center;white-space: nowrap}

ul#minitabs li{display: inline;margin: 0 2px}

ul#minitabs a{text-decoration: none;padding: 0 0 3px;
  border-bottom: 4px solid #FFF;color: #000000}

ul#minitabs a#current{border-color: #D10003;color: #000000}

ul#minitabs a:hover{border-color: #000000;color: #000000}


EDIT:
hier noch ein Bild:
http://elliott.kilu.de/images/rgh1224275864r.png
 
Zuletzt bearbeitet:
ich habe es auch schon mit
parent DIV mit margin: 0 auto 0 auto; versucht aber weiß nicht genau wo ich dies einfügen soll und habs mal überall versucht, aber geklappt hat dies aucht nicht^^

hmm... habe mir den link kurz angeschaut und habe auch nicht viel verstehen können... bzw habe mir nicht alles durchgelesen weil ichs eh nicht verstanden hätte.

nun das komplette gebilde (links) mit lienchen etc soll in die mitte :(

(kann nicht so gut englisch)
 
In deinem Fall wäre das zweite (blaue) Menü für dich interessant, denn ohne eine bekannte fixe Breite für das Menü lässt sich mit margin:0 auto auch nichts bewerkstelligen, um es in der Horizontalen zu zentrieren - diese Methode stellt Stu im ersten Menübeispiel ("a centered floated left menu (known width)") vor.

Ich poste dir hier einfach mal den relevanten Quellcode-Auszug für das zweite Menü:

Code: 
<style type="text/css">
#menu2 {
  display:table;
  padding:0; 
  margin:0 auto; 
  list-style-type:none;
  white-space:nowrap;
  }
#menu2 li {
  display:table-cell;
  }
#menu2 a {
  width:auto;
  display:block;
  padding:4px 16px;
  color:#fff; 
  background:#08c; 
  border:1px solid #fff; 
  text-decoration:none;
  }
#menu2 a:hover {
  color:#000; 
  background:#d4d4d4;
  }

.container {clear:both; text-decoration:none;}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#menu2 li {
  float:left;
  }
#menu2 a {
  float:left;
  }
.container {display:inline-block;}
</style>
<![endif]-->
Code: 
<del class="container">
<ul id="menu2">
<li><a href="#nogo">Tab One</a></li>
<li><a href="#nogo">Tab Two: Longer</a></li>
<li><a href="#nogo">Tab Three: Longest</a></li>
<li><a href="#nogo">Tab Four</a></li>
</ul>
</del>
Englischkenntnisse sind hier somit nicht mehr gefragt :-)

mfg Maik
 
Darf man so spät am Abend dann auch mal erfahren, weshalb du die drei Boxen überhaupt mit float:left auszeichnest, wenn nach jeder dieser drei Boxen
Code: 
<br style="clear:both">
folgt, womit die Floatumgebung umgehend wieder aufgehoben wird, bevor sie eigentlich überhaupt so richtig in Fahrt gekommen ist?

Denn mit clear:both erzwingst du, dass die nachfolgende Box unter der Box ausgerichtet wird, wo dann das gleiche Spiel von vorne beginnt.

Diese Logik muß ich jetzt aber nicht verstehen, oder? :suspekt:

mfg Maik
 
Die Lücken rühren von den Polsterungseigenschaften der Blockelemente, die du nicht auf null gesetzt hast.

Ich denke, dass ich mit dieser kleinen Umbau- und Ausbaumaßnahme den Nagel auf den Kopf getroffen habe :-)

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">
<link rel=stylesheet type=text/css href=style/style.css>

<style type="text/css">
* {
margin:0;
padding:0;
}
body {background-color:#ffffff;
      background-image: url(background.gif);
      background-attachment: fixed;}
div.wrapper {
width:630px;
margin:0 auto;
}
div.top {
         width: 630px;
         height: 150px;
         background: red url(top.gif);
         background-position: center center;}
div.middle {
            width: 630px;
            height: auto;
            background: yellow url(middle.gif);
            background-position: center center;}
div.bottom {
            width: 630px;
            height: 40px;
            background: green url(bottom.gif);
            background-position: center center;}

p.text {padding-left: 20px;
          padding-right: 20px;}

h5.copyright {color:#D10003;

              width: 630px;
              text-align: center;}


ul#minitabs{list-style: none;margin: 0;padding: 7px 0;
            font-weight: bold;
            text-align: center;white-space: nowrap}

ul#minitabs li{display: inline;margin: 0 2px}

ul#minitabs a{text-decoration: none;padding: 0 0 3px;
  border-bottom: 4px solid #FFF;color: #000000}

ul#minitabs a#current{border-color: #D10003;color: #000000}

ul#minitabs a:hover{border-color: #000000;color: #000; }
</style>
<title>home</title>
</head>
<body>

<div class="wrapper">
     <div class="top"></div>
     <div class="middle">
          <ul id="minitabs">
              <li><a href="#">1</a></li>
              <li><a id="current" href="#">2</a></li>
              <li><a href="#">3</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
          </ul>
          <p class="text">TEXT</p>
     </div>
     <div class="bottom"></div>
     <h5 class=copyright>©2008</h5>
</div>

</body>
</html>
mfg Maik
 
Achso, meine aktivierte Ampelfarbe als Hintergrundfarbe für die drei Boxen darfst du ruhig wieder ausschalten - ich brauchte eben ohne deren Hintergrundbilder nur einen visuellen Anhaltspunkt, wo die Boxen beginnen und enden, und ob sie kraftschlüssig sitzen :-)

mfg Maik
 
hmm -.-''

aaaaalso... bei mir gehts jetzt überhaupt nicht.... nur 3 farben, wo text drinne steht und das auch nciht zentriert... naja....


:) scherz am abend ;)

hat alles wunderbar geklappt... :):):) hab noch schnell die farben weg gemacht und den css code ins css dokument eingefügt :) ^^ könnt dich abknuddln ^___^

vielen Dank!

PS: hast den nagel aufm' kopf getroffen :):)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück