Antworten auf deine Fragen:
Neues Thema erstellen

Footer mit drei Boxen

chicco97

Nicht mehr ganz neu hier

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

Aktives Mitglied

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

Noch nicht viel geschrieben

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

Aktives Mitglied

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

Nicht mehr ganz neu hier

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
 
Zuletzt bearbeitet von einem Moderator:

j0ki

Noch nicht viel geschrieben

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>
 
Zuletzt bearbeitet:

B3nni

Nicht mehr ganz neu hier

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
 
Zuletzt bearbeitet:

chicco97

Nicht mehr ganz neu hier

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

zwo-eins-risiko!

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
 
Zuletzt bearbeitet:

chicco97

Nicht mehr ganz neu hier

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

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

Hat es drauf

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

Nicht mehr ganz neu hier

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.


Ja. Danke für den Tipp
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben