Footer mit drei Boxen

chicco97 · 11.04.2013

Hallo Forum,

na gefühlten 100 Versuchen, muß ich mich jetzt an Euch wenden.

Folgendes Problem:

Ich habe eine Footer, in dem ich drei Dinge plazieren möchte:
1. Adresse
2. Logos
3. Links

und das ganze quasi als Block nebeneinnander. Ich kriege es nicht hin, vielleicht hat mir jemanden einen Tip ! Und bitte verzeiht nir Code-Fehler, ich bin noch am lernen.:'(

Danke schon mal.

VG
Micha

HTML:

<style>
footer {
    width:100%;
    margin-top:50px;
    font-size:12px;
    background:-moz-linear-gradient(bottom,#f1f1f1,#b3b3b3); /* Firefox */
    background:-webkit-gradient(linear,left top,left bottom,from(#b3b3b3),to(#f1f1f1)); /* Chrome, Safari */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3',endColorstr='#f1f1f1'); /* Internet Explorer */ 
    color:#6e6e6e;
}


.foot {
    width:960px;
    margin:auto;
    background-color:#F00;
}
    
    
.footer_box {
    color:#03C;
    background-color:#FFF;
    margin:auto;
    padding:10px;
    width:200px;
    height:300px;
}
</style

 <footer>
     
     <div class="foot">
     
     
     
         <div class="footer_box"><p>Das soll ein Footer Text sein</p>
          </div>
     
     </div>
     
     
    </footer>

lachender_engel · 11.04.2013

AW: Footer mit drei Boxen

Einen Tipp wofür? So, wie Dein Code aussiehst, werden das nie drei Boxen nebeneinander werden!
Poste den Link Deiner Seite, und erkläre genau was falsch läuft.

julimonda · 11.04.2013

AW: Footer mit drei Boxen

Guten Morgen Micha,

also zunächst einmal solltest Du den Style-Tag korrekt schließen und zwar mit </style>.
Und dann muss ich gestehen habe ich Deinen Code noch nicht so recht verstanden. Kannst Du vielleicht noch einmal genau erklären was Du vor hast und wie Das ganze aussehen soll?
Was wird Dir denn derzeit angezeigt? Also was unterscheidet Dein derzeitiges Ergebnis von dem was Du eigentlich haben möchtest?

Viele Grüße,
Mia

Trabilady · 11.04.2013

AW: Footer mit drei Boxen

Ich weiß nicht, ob ich Dich wirklich richtig verstanden habe und ob das wirklich der richtige Weg ist (bin selbst nur fortgeschrittener Anfänger),
aber ich würde es wahrscheinlich mit links floatenden Divs versuchen ...

chicco97 · 11.04.2013

Trabilady schrieb:
Ich weiß nicht, ob ich Dich wirklich richtig verstanden habe und ob das wirklich der richtige Weg ist (bin selbst nur fortgeschrittener Anfänger),
aber ich würde es wahrscheinlich mit links floatenden Divs versuchen ...

der Footer erstreckt sich über den ganzen Bildschirm. Wenn ich hier floate, hängt die erste Box (Bereich) ganz links am Bildschirm.

Ich glaube das wird hierrüber zu kompliziert. Ich wurschtel mal weiter...

Danke trotzdem.

VG
Micha

j0ki · 11.04.2013

AW: Footer mit drei Boxen

So gehts...

Code:

<style>
footer {
    width: 100%;
    margin-top:50px;
    font-size:12px;
    background:-moz-linear-gradient(bottom,#f1f1f1,#b3b3b3); /* Firefox */
    background:-webkit-gradient(linear,left top,left bottom,from(#b3b3b3),to(#f1f1f1)); /* Chrome, Safari */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3',endColorstr='#f1f1f1'); /* Internet Explorer */
    color:#6e6e6e;
}

.foot {
    width: 960px;
    height: 320px;
    margin: 0 auto;
    background-color: #F00;
}
    
.footer_box {
    float: left;
    color:#03C;
    background-color:#FFF;
    padding:10px;
    width:200px;
    height:300px;
}
</style>

<footer>
    <div class="foot">
      <div class="footer_box"><p>Das soll ein Footer Text sein</p></div>
      <div class="footer_box"><p>Das soll ein Footer Text sein</p></div>
      <div class="footer_box"><p>Das soll ein Footer Text sein</p></div>
  </div>     
</footer>

Trabilady · 11.04.2013

AW: Footer mit drei Boxen

@j0ki - Danke, dass Du meine Gedanken schriftlich umgesetzt hast

:blumen:

B3nni · 11.04.2013

AW: Footer mit drei Boxen

Moin Micha,
nicht die perfekte Lösung, aber vielleicht hilfts dir weiter

Code:

<style>
footer {
    width:100%;
    margin-top:50px;
    font-size:12px;
    background:-moz-linear-gradient(bottom,#f1f1f1,#b3b3b3); /* Firefox */
    background:-webkit-gradient(linear,left top,left bottom,from(#b3b3b3),to(#f1f1f1)); /* Chrome, Safari */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3b3b3',endColorstr='#f1f1f1'); /* Internet Explorer */ 
    color:#6e6e6e;
}
.foot {
    width:960px;
    margin:auto;
}
.alleBoxen{width:320px;float:left;}
.links {
    color:#03C;
    background-color:red;
    float: left;
    margin:auto;
    padding:15px;
    width:320px;
}
.mitte {
    color:#03C;
    background-color:blue;
    float: left;
    margin:auto;
    padding:15px;
    width:320px;
}
.rechts {
    color:#03C;
    background-color:yellow;
    float: left;
    margin:auto;
    padding:15px;
    width:320px;
}

</style>

Code:

<footer>
<div class="foot">
   
    <div class="alleBoxen">
        <div class="links">LINKS
        </div>
    </div>
         
    <div class="alleBoxen">
        <div class="mitte">MITTE
        </div>
    </div>
           
    <div class="alleBoxen">
        <div class="rechts">RECHTS
        </div>
    </div>
     
</div>
</footer>

Mfg

chicco97 · 11.04.2013

AW: Footer mit drei Boxen

Ihr seit der Wahnsinn !!!! Beide Varianten funktionieren, bei B3nni ist jedoch der Hauptfooter (ich nennen Ihn mal so) mit dem Grauverlauf weg. Das schaff ich aber).

DAAAAAAAnke !!

VG Micha

kleeaar · 11.04.2013

AW: Footer mit drei Boxen

ich persönlich würde da nicht floaten.
einfach die divs als inline-block elemente deklarieren.

http://jsfiddle.net/D84um/1/

ist kommt mit weniger div-elemente aus, und macht nicht das Problem, dass man clearen muss.

Grüße

chicco97 · 12.04.2013

AW: Footer mit drei Boxen

kleeaar schrieb:
ich persönlich würde da nicht floaten.
einfach die divs als inline-block elemente deklarieren.

http://jsfiddle.net/D84um/1/

ist kommt mit weniger div-elemente aus, und macht nicht das Problem, dass man clearen muss.

Grüße

Tausend Dank ! Nach dem Anfang hätte ich nicht gedacht, das das Thema so positiv endet.

Problem auf jedenfall gelöst und ne Menge dazugelernt. Ich hoffe ich werde auch mal so gut !!

Myhar · 12.04.2013

AW: Footer mit drei Boxen

Nachdem das Hauptproblem gelöst wurde, noch eine Kleinigkeit betreffend deines CSS Codes: Es gibt nicht nur Mozilla, Chrome & IE7 als Browser, es gibt auch noch IE8, 9, 10, Opera und ein Standardverhalten.
Füge also all die Werte für deine Gradients in dein CSS hinzu. Falls du die Syntax nicht auswendig weißt, verwende einen Generator dafür.

chicco97 · 12.04.2013

AW: Footer mit drei Boxen

Myhar schrieb:
Nachdem das Hauptproblem gelöst wurde, noch eine Kleinigkeit betreffend deines CSS Codes: Es gibt nicht nur Mozilla, Chrome & IE7 als Browser, es gibt auch noch IE8, 9, 10, Opera und ein Standardverhalten.
Füge also all die Werte für deine Gradients in dein CSS hinzu. Falls du die Syntax nicht auswendig weißt, verwende einen Generator dafür.

Ja. Danke für den Tipp