Antworten auf deine Fragen:
Neues Thema erstellen

[GELÖST] CSS + HTML - Spalten nicht bündig?!

fneurieser

Noch nicht viel geschrieben

Hallo allerseits,

kurz zur Einstimmung: Ich habe vor einigen Jahren anhand eines Videotrainings von Matthias namens "Graphic Jungle" einen Nachbau für einen Freund vorgenommen der auch super funktioniert. Nun habe ich aber einige Änderungen durchzuführen und stosse dabei auf ein Problem das ich so nicht lösen kann.
Vielleicht hat ja jemand von euch hier einen Denkanstoß für mich damit ich zu einem Ergebnis komme. Es betrifft den Footer der Site von dem ich hier mal einen Screenshot reinstelle:

Footer:
footer.png


Der Footer setzt sich, wie so üblich aus einem container- und dem eigentlichen footer-Bereich zusammen:

bg-footer-container (10 x 290)
bg-footer-container.jpg


bg-footer (960 x 290)
bg-footer.jpg


der Abstand vom linken bwz. rechten Rand zu den weißen Strichen beträgt jeweils 10 px, die Striche selbst haben eine Länge von jeweils 300 px und der Abstand zwischen den Linien beträgt jeweils 20 px; ergibt also genau die 960 px.

Bereits im content Bereich wird die class column verwendet die eine Breite von 300 px aufweist. Diese class findet auch für den Text im Footer Verwendung.

hier der source-html
HTML:
    <div id="footerContainer">
   
        <div id="footer">
       
            <div class="column">
                  <h3>&Uuml;ber uns</h3>
                  <p>Das Unternehmen wird in der bereits 3. Generation von Muster Mustermann jun. gef&uuml;hrt. Unsere "Flotte" umfa&szlig;t derzeit 4 PKWs, 3 Minivans, 2 Siebensitzer und einen Achtsitzer.</p>
             </div><!-- END Footer Spalte 1 -->
     
              <div class="column">
                  <h3>Sitemap</h3>
                <ul>
                      <li><a href="../index.html">Home</a></li>
                    <li><a href="../aktuell.php">Aktuelles</a></li>
                    <li><a href="http://www.carlifting.at">Carlifting</a></li>
                      <li><a href="../transport.html">Krankentransporte</a></li>
                      <li><a href="../leistung.html">Leistungen</a></li>
                      <li><a href="../reisen.html">Reisen</a></li>                              
                      <li><a href="../wir.html">&Uuml;ber uns</a></li>               
                      <li><a href="mailto:office@mustermann.com?subject=Info">Kontakt</a></li>
                      <li><a href="../impressum.html">Impressum</a></li>
                </ul>
              </div><!-- END Footer Spalte 2 -->
     
              <div class="column noMargin">
                  <h3>Kontaktdaten</h3>     
                  <p>Muster Mustermann<br />
                      Musterstrasse 123<br />
                      1234 Musterort</p>       
                <dl>
                      <dt>Tel.:
                          <dd>+43 (0)1234 - 5678-0</dd>
                    </dt>
                      <dt>Fax:</dt>
                          <dd>+43 (0)1234 - 5678-9</dd>
                      <dt>E-Mail:</dt>
                          <dd><a href="javascript:linkTo_UnCryptMailto('nbjmup;pggjdfAubyj.tdimbdl/dpn');">office[at]mustermann[dot]com</a></dd>
                      <dt class="noText">.</dt>
                          <dd><a href="javascript:linkTo_UnCryptMailto('nbjmup;tdimbdl.upvstAubyj.tdimbdl/dpn');">muster-tours[at]mustermann[dot]com</a></dd>             
                </dl>
              </div><!-- END Footer Spalte 3 -->
           
        </div><!-- END of footer -->

    </div><!-- END of footerContainer -->

und hier der entsprechende css-code
Code:
h3 {
   font-size:1.2em;
   text-transform:uppercase;
   font-weight:normal;
   margin:0 0 18px 0;
}

/* ----------   Spaltenbreite   ---------- */
.column {
    width:300px;
    float:left;
    margin:0 25px 0 0;
}

.noMargin {
   margin:0!important;
}

.clear {
   float:none;
   clear:both;
}

/* --------------------------------   FOOTER   -------------------------------- */

#footerContainer{
    width:100%;
    height:300px;
    background:url(../images/bg/bg-footer-container.jpg) 0 0 repeat-x;
    font-size:1.1em;
    color:#fff;
}

#footerContainer #footer {
    width:960px;
    height:290px;
    padding:30px 0 0 0;
    background:url(../images/bg/bg-footer.jpg) 0 0 no-repeat;
    margin:0 auto 30px;
}

#footer ul {
    list-style:inside;   
}

#footer a {
    color:#fff;   
    text-decoration:none;
}

#footer a:hover {
    color:#CCC;
    text-decoration:none;
}

#footer dl dt {
    width:55px;
    float:left;
}

#footer dl dd {
    width:245px;
    float:left;
}

Jetzt die Frage: Wie schaffe ich es, dass die Text in den Spalten immer genau in einer Flucht mit der Linie ausgerichtet sind?

Ich habe schon mit margin rumprobiert, dann wieder mit padding, aber es verschiebt mir lediglich die mittlere und rechte Spalte aber nicht die linke.
Habe echt keine Ahnung mehr was ich hier falsch mache bzw. wo ich falsch ansetze.

Deshalb meine Bitte an euch um Unterstützung zur Lösung dieses Knoten.

Ich bedanke mich schon im Voraus für eure tatkräftige Unterstützung.
 

der-tim

Nicht mehr ganz neu hier

Hallo,
gibt es einen Link zur Seite? Das ließe sich dann leichter nachvollziehen.
Hast Du auch schon padding im footerContainer probiert?
Edit:
Bzw.: Ich könnte mir vorstellen, dass der margin nach rechts von .column alles um 25px nach links verschiebt.
 

fneurieser

Noch nicht viel geschrieben

@der-tim
ja padding hatte ich auch schon probiert, aber auch das läuft nicht.
Link kann ich leider keinen anbieten da ich die Site ja neu aufbaue und das obige excerpt nur auf meinem Testserver läuft und derzeit auch nur eine Seite umfasst. Aber gib mir bitte 10 Minuten, dann stell ich das auf meinen Testserver und stell den LInk hier nochmal rein.
 

hub

nicht ganz neu hier

Moin moin,
das geht, wenn padding footer änderst und die weite der Container:

HTML:
#footerContainer #footer {
...
padding: 30px 0 0 10px;
...}

.column {
...
width: 295px;
...
}
Aber warum machst du das so umständlich? Ein border-bottom in deinen Footer-Überschriften hätte dich dieses Problems entledigt (und dile Linien im Background-Image raus, es ginge sogar ganz ohne Bild)

Gruß Ulli
 

cebito

undefined

Code:
.column{
    margin: 0 20px 0 0;
}
#footerContainer #footer {
    padding: 30px 10px 0;
}

... dann passts ;)



...ansonsten wie Ulli sagt, border-bottom für die h3 wäre viel einfacher.
 

der-tim

Nicht mehr ganz neu hier

Hallo,
also folgende Lösung wäre möglich:
Wenn Du in den footer noch einmal einen Container legst, der die drei Spalten umschließt, und diesem die 10px Rand zu den weißen Linien im Bildals padding vorgibst, definierst du schonmal den Startpunkt für die erste Spalte direkt an der ersten Linie. Dann musst Du lediglich noch für .column statt 25px margin nach rechts 20px zuweisen, da ja der Abstand zwischen den Linien auch nur 20px hat.

Hier mal html:
Code:
<div id="footerContainer">

      <div id="footer">
       <div id="footerinhalt">
            <div class="column">
                  <h3>&Uuml;ber uns</h3>
                  <p>Das Unternehmen wird in der bereits 3. Generation von Muster Mustermann jun. gef&uuml;hrt. Unsere "Flotte" umfa&szlig;t derzeit 4 PKWs, 3 Minivans, 2 Siebensitzer und einen Achtsitzer.</p>
             </div><!-- END Footer Spalte 1 -->
  
              <div class="column">
                  <h3>Sitemap</h3>
                <ul>
                      <li><a href="../index.html">Home</a></li>
                    <li><a href="../aktuell.php">Aktuelles</a></li>
                    <li><a href="http://www.carlifting.at">Carlifting</a></li>
                      <li><a href="../transport.html">Krankentransporte</a></li>
                      <li><a href="../leistung.html">Leistungen</a></li>
                      <li><a href="../reisen.html">Reisen</a></li>                           
                      <li><a href="../wir.html">&Uuml;ber uns</a></li>            
                      <li><a href="mailto:office@mustermann.com?subject=Info">Kontakt</a></li>
                      <li><a href="../impressum.html">Impressum</a></li>
                </ul>
              </div><!-- END Footer Spalte 2 -->
  
              <div class="column noMargin">
                  <h3>Kontaktdaten</h3>  
                  <p>Muster Mustermann<br />
                      Musterstrasse 123<br />
                      1234 Musterort</p>    
                <dl>
                      <dt>Tel.:
                          <dd>+43 (0)1234 - 5678-0</dd>
                    </dt>
                      <dt>Fax:</dt>
                          <dd>+43 (0)1234 - 5678-9</dd>
                      <dt>E-Mail:</dt>
                          <dd><a href="javascript:linkTo_UnCryptMailto('nbjmup;pggjdfAubyj.tdimbdl/dpn');">office[at]mustermann[dot]com</a></dd>
                      <dt class="noText">.</dt>
                          <dd><a href="javascript:linkTo_UnCryptMailto('nbjmup;tdimbdl.upvstAubyj.tdimbdl/dpn');">muster-tours[at]mustermann[dot]com</a></dd>          
                </dl>
              </div><!-- END Footer Spalte 3 -->
        

        </div><!-- END of footer inhalt-->
        </div><!-- END of footer -->

    </div><!-- END of footerContainer -->


und css:
Code:
.column {
    float: left;
    margin: 0 20px 0 0;
    width: 300px;
}
#footerinhalt {
    padding-left: 10px;
    padding-right: 10px;
    width: 960px;
}


[Eigentlich hätte ich gedacht, dass man das padding von 10px direkt dem #footer zuweisen kann, jedoch wird dan das Hintergrundbild verkleinert - warum auch immer, kann ich gerade nicht nachvollziehen - aber mit dem zusätzlichen Container geht es].

Hoffe, es hilft Dir weiter.
Weiterhin viel Erfolg!

Edit: oh, da waren ja schon zwei schneller - aber so wie oben schon gesagt: bei der Lösung von cebito wird der Hintergrund scheinbar verkleiner, sonst würde eigentlich die rechte Linie in firebug betrachtet genau am dunkelbklauen Bereich vom padding enden müssen ... verstehe ich gerade nicht, wieso das so ist.
http://abload.de/image.php?img=unbenannt8zu4o.jpg
 
Zuletzt bearbeitet:

fneurieser

Noch nicht viel geschrieben

@All
danke danke danke für die rege Mithilfe. Das Problem ist gelöst. Ich habe es genauso gemacht wie cebito geschrieben hat. die 25px margin waren zuviel und ich hatte padding-left total vergessen.

Danke nochmal an alle, ihr seid wirklich der Hit, so schnell so viele zielführende Antworten, Danke euch allen.

LG
Franz-Georg
 
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