✔ Float:left zentrieren?

Vespillo · 18. Oktober 2008

uhh und was WÄRE wenn ich jetzt 3 images in einer zeile und 3 in einer spalte habe

Image oben links | image oben mitte * | image oben rechts
Image mitte links | image mitte mitte ** | image mitte rechts
Image unten links | image unten mitte | image unten rechts

* Hier kommt die Überschrift hinein
**Hier kommt Text hinein (navigation, inhalt, bilder etc)

wie auf dieser, von mir erstellten seite:
http://www.wittenwarriors.kilu.de

(da habe ich genau das gleiche wie ganz am Anfang angewendet.)

Index

Code:

<html>
<head>
<link rel=stylesheet type=text/css href=style.css />
<title>Witten Warriors - News</title>

</head>
<body>
</body>



<div class=wwbanner></div>

<table><center><tr><td>
<div class=barleft></div>
<div class=barcenter><h2>News</h2></div>
<div class=barright></div>
<br style="clear:both">

<div class=ml></div>
<div class=mc>

<ul id="minitabs">
    <li><a id="current" href="index.html">news</a></li>
    <li><a href="training.html">training</a></li>
    <li><a href="history.html">history</a></li>
    <li><a href="mannschaft.html">mannschaft</a></li>
    <li><a href="regeln.html">regeln</a></li>    
    <li><a href="sponsoren.html">sponsoren</a></li>
    <li><a href="gaestebuch.html">gästebuch</a></li>
    <li><a href="presse.html">presse</a></li>
    <li><a href="kontakt.html">kontakt</a></li>
</ul>


<p>



<p class="wichtig"></p>
(25.08.2008)<br>
<a href=news/news-25-08-2008.html>
>Auf Witten Warriors ohne Probleme Surfen!
</a><br><br>
<hr color=black></hr>



<p class="neu"></p>
(20. Jul 2008)<br>
<a href=news/news20jul08.html>
>Es geht wieder mit dem Training los!
</a><br><br>
<hr color=black></hr>



</p>
</div>
<div class=mr></div>
<br style="clear:both">

<div class=bl></div>
<div class=bm></div>
<div class=br></div>
</td></tr><tr><td><center><h5>© 2008</h5></center></td></tr></center></table>

</html>

Css

Code:

body {background-color: white;
      padding-top: 50px;
      padding-right: 0px;
      background-image: url(pics/background.jpg);
      background-position: center center;
      background-attachment: fixed;}


a:link {color: black;
        text-decoration:none;}
a:visited {color: black;
           text-decoration:none;}
a:active {background-color: none;
          text-decoration:none;}
a:hover {color:#002D6B;
         text-decoration:underline;}




div.barcenter {float: left;
        background: transparent url('pics/bar1.gif');
        background-position: center center;
        background-attachment: scroll;
        display: block;
        width: 650px;
        height: 50px;
        text-align: center;
        color: white;}

div.barright {float: left;
        background: transparent url('pics/bar2.gif');
        background-position: center right;
        background-attachment: scroll;
        display: block;
        width: 40px;
        height: 50px;
        text-align: center;}

div.barleft {float: left;
        background: transparent url('pics/bar3.gif');
        background-position: center right;
        background-attachment: scroll;
        display: block;
        width: 40px;
        height: 50px;
        text-align: center;}






div.mc {float: left;
        background: transparent url('pics/mm.gif');
        background-position: center center;
        background-attachment: scroll;
        display: block;
        width: 650px;
        height: 700px;
        text-align: left;
        color: #002D6B;
        padding-top: 0px;}

div.mr {float: left;
        background: transparent url('pics/mr.jpg');
        background-position: center right;
        background-attachment: scroll;
        display: block;
        width: 40px;
        height: 700px;
        text-align: center;
        padding-top: 0px;}

div.ml {float: left;
        background: transparent url('pics/ml.jpg');
        background-position: center right;
        background-attachment: scroll;
        display: block;
        width: 40px;
        height: 700px;
        text-align: center;
        padding-top: 0px;}






div.bm {float: left;
        background: transparent url('pics/bm.gif');
        background-position: center bottom;
        background-repeat: repeat-x;
        background-attachment: scroll;
        display: block;
        width: 650px;
        height: 50px;
        text-align: center;
        color: white;}

div.br {float: left;
        background: transparent url('pics/br.gif');
        background-position: center right;
        background-attachment: scroll;
        display: block;
        width: 40px;
        height: 50px;
        text-align: center;}

div.bl {float: left;
        background: transparent url('pics/bl.gif');
        background-position: center right;
        background-attachment: scroll;
        display: block;
        width: 40px;
        height: 50px;
        text-align: center;}

h2 {font-family: "Microsoft Sans Serif";
    color: white;}


div.main {
          float:left;
          display: block;
          width: 780px;
          height: auto;
          background-color: white;
          color: #002D6B;
          padding-left: 0px;
          padding-bottom: 40px;
          padding-right: 0px;
          padding-top: 40px;
          height: auto;
          border-width: 1px;
          border-style: solid;
          border-color: #002D6B;
          border-top-width: 0px;}

table {float: left;
       display: block;}








ul#minitabs{list-style: none;margin: 0;
            padding: 7px 0;
            border-bottom: 1px solid #CCC;
            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: #5882B6}

ul#minitabs a#current{border-color: #5882B6;
                      color: #002D6B}

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

p {font-family: "Microsoft Sans Serif";
   padding-top: 40px;
   font-size: 12px;
   text-transform:;
   text-align: justify;}

p.bilder {font-family: "Microsoft Sans Serif";
   padding-top: 0px;
   font-size: 12px;
   text-transform:;
   text-align: center;}

#picture1 {
  float:right;
  width: 130px;
  clear:both;
  padding-top: 15px;}

#unterschrift {background-image: url();
                  background-position: center center;
                  heigt:20px;
                  width:119px;
                  display: block;}

div.unterschrift {position: absolute;
        float: left;
        background: transparent url('pics/unterschrift.gif');
        background-position: center right;
        background-attachment: scroll;
        display: block;
        width: 153px;
        height: 18px;
        text-align: center;}

img.bilder {border-width: 1px;
  border-style: solid;
  border-color: white;
}


div.ecke {position: absolute;
          right: 5px;
          top: 5px;
          background-color: white;
          border-width: 1px;
          border-color: black;
          border-style: solid;
          padding: 5px;
          padding-top: 2px;
          padding-bottom: 2px;
          font-family: "microsoft sans serif";
          font-size: 14px;}

div.wwbanner {position: absolute;
              left: 5px;
              top: 5px;
              background-image: url(pics/bilder/banner.gif);
              width: 150px;
              height: 119px;}

p.neu {font-weight: bold;
       background-image: url(pics/neu.png);
       width: 80px;
       heigth: 50px;
       background-position: top left;
       background-repeat: no-repeat;
       float: left;}

p.wichtig {font-weight: bold;
       background-image: url(pics/wichtig.png);
       width: 80px;
       heigth: 50px;
       background-position: top left;
       background-repeat: no-repeat;
       float: left;}

p.alt {color: black;
       width: 80pX;
       float: left;
       heigth: 50px;}



#download_button  {
background : transparent url(dateien/button-normal.jpg) no-repeat 0 0;
height : 36px;
width : 36px;
} 

#download_button:hover  {
background : transparent url(dateien/button-hover.jpg) no-repeat 0 0;
color : #001100;
height: 36px;
width: 36px;
}

muss man mir nicht direkt beantworten... weiß ja, wie ichs mit nur 3 statt 9 Grafiken machen kann.

Maik · 18. Oktober 2008

Wenn du hier ebenfalls eine horizontale Zentrierung anvisierst:

Code:

.wrapper {
width:730px;
margin:0 auto;
}

Code:

<body>

<div class=wwbanner></div>

<div class="wrapper">
     <div class=barleft></div>
     <div class=barcenter><h2>News</h2></div>
     <div class=barright></div>
     <br style="clear:both">

     <div class=ml></div>
     <div class=mc>

     <ul id="minitabs">
         <li><a id="current" href="index.html">news</a></li>
         <li><a href="training.html">training</a></li>
         <li><a href="history.html">history</a></li>
         <li><a href="mannschaft.html">mannschaft</a></li>
         <li><a href="regeln.html">regeln</a></li>
         <li><a href="sponsoren.html">sponsoren</a></li>
         <li><a href="gaestebuch.html">gästebuch</a></li>
         <li><a href="presse.html">presse</a></li>
         <li><a href="kontakt.html">kontakt</a></li>
     </ul>

     <p class="wichtig"></p>
     (25.08.2008)<br>
     <a href=news/news-25-08-2008.html>
     >Auf Witten Warriors ohne Probleme Surfen!
     </a><br><br>
     <hr color=black></hr>

     <p class="neu"></p>
     (20. Jul 2008)<br>
     <a href=news/news20jul08.html>
     >Es geht wieder mit dem Training los!
     </a><br><br>
     <hr color=black></hr>

     </p>
     </div>
     <div class=mr></div>
     <br style="clear:both">

     <div class=bl></div>
     <div class=bm></div>
     <div class=br></div>
     <h5>© 2008</h5>
</div><!-- // .wrapper -->

</body>

mfg Maik

Vespillo · 18. Oktober 2008

cool danke

dann versteh ich jetzt alles

^^

danke nochmals

lg Vespi

✔ Float:left zentrieren?

Vespillo

Grünschnabel

Maik

Vespillo

Grünschnabel

Neue Beiträge