XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem mit padding und margin (http://xhtmlforum.de/showthread.php?t=58482)

webba 15.09.2009 20:33

Problem mit padding und margin
 
Hey Leute.
Ich bin gerade dabei eine Webseite zu erstellen. Jedoch scheitere ich bereits bei der Darstellung eines Submenues.
Ich hab das Ganze mit <div> Tags realisieren wollen.

Hier erstmal der Code der index.htm:



HTML-Code:

<body>

        <div class="logo"><img src="img/logo.png" alt="webdesign logo" /></div>
       
    <!-- RECHTE SEITE -->
    <div class="rightcontainer">
         
      <!-- MENUE -->
     
      <div class="menue">
     
                      <!-- MAINMENUE -->
     
                <div class="mainmenue">
                  <a href=""><img src="img/menue/home.png" alt="Startseite" /></a>
            <img src="img/menue/line.png" />
            <a href=""><img src="img/menue/webdesign.png" alt="Startseite" /></a>
            <img src="img/menue/line.png" />
            <a href=""><img src="img/menue/seo.png" alt="Startseite" /></a>
            <img src="img/menue/line.png" />
            <a href=""><img src="img/menue/marketing.png" alt="Startseite" /></a>
            <img src="img/menue/line.png" />
            <a href=""><img src="img/menue/leistungen_preise.png" alt="Startseite" /></a>
            <img src="img/menue/line.png" />
            <a href=""><img src="img/menue/referenzen.png" alt="Startseite" /></a>
            <img src="img/menue/line.png" />
            <a href=""><img src="img/menue/kontakt.png" alt="Startseite" /></a>
          </div>
         
          <!-- MAINMENUE ENDE -->
          <!-- SUBMENUE -->
         
          <div class="submenue">
                 
                  <a href="">Individuelles Design</a>
                <img src="img/menue/sub_line.png" />
         
           
          </div>
         
          <!-- SUBMENUE ENDE -->
         
      </div>
       
    <!-- MENUE ENDE -->
   
    <div class="maincontent">TEST</div>
        </div>
   
    <!-- RECHTE SEITE ENDE -->
</body>

So weit, so gut.

In der CSS-Datei steht folgender Code:

Code:

body{

background-color:#252525;}
img {border:0px;}

.logo{margin:25px 0 0 25px; float:left; width:140px;}
.rightcontainer{ float:left;}
.menue{height:75px; width:790px; margin:25px 0 0 15px;}
.mainmenue{
                        height:40px;
                        width:770px;
                        background-image:url(../img/menue/menue_bg.png);
                        background-repeat:no-repeat;
                        margin:0px;
                        padding-left:20px;
                        }
.mainmenue a img{
                                        margin-left:5px;
                                        margin-bottom:8px;
                                        margin-right:5px;
                                        }
.submenue{
                        height:35px;
                        width:770px;
                        background-image:url(../img/menue/submenue_bg.png);
                        background-repeat:no-repeat;
                        padding-left:20px;
                        margin:0px;
                       
                       

                        }
.abstand {}
                       
.submenue a {
                                padding-left:5px;
                                padding-bottom:10px;
                                padding-right:5px;
                                font-family:Verdana;
                                font-size:14px;
                                color:#ffffff;
                                text-decoration:none;
                               
}
.submenue img{ padding:0 5px 0 5px;}
.maincontent{ margin:45px 0 0 15px; height:500px;}


Das Problem ist der Link innerhalb des Submenues. Ich hätte gerne, dass er mittig, also mit gleichem Abstand nach oben und unten dargestellt wird. ich dachte,
Code:

.submenue a {
                                vertical-align:middle;

                                padding-left:5px;
                                padding-right:5px;
                                font-family:Verdana;
                                font-size:14px;
                                color:#ffffff;
                                text-decoration:none;
                               
}

würde das Problem lösen, nur das tuts nicht. also probierte ich es mit:

Code:

.submenue a {
                                padding-bottom:10px;
                                padding-left:5px;
                                padding-right:5px;
                                font-family:Verdana;
                                font-size:14px;
                                color:#ffffff;
                                text-decoration:none;
                               
}

Der Link wird trotz "padding-bottom:10px;" nicht dementsprechend dargestellt. Es ist als hätte ich geschrieben: padding-bottom:0px;
Ich persönlich tippe auf irgendeine Unverträglichkeit zwischen den Padding und Margin Angaben in den anderen DIV-Containern, aber hab keinen Plan.

Ich hab schon so einiges ausprobiert, aber bisher wirkt nix. Ich hoffe ihr habt eine Idee.

Grüße
ED

Achja, ihr könnt euch unter www.kreativwebdesign.com/test das Ganze mal vor augen führen.

hubspe 16.09.2009 09:27

Moin,

informatives über grafische Menüs findest du in der FAQ.

webba 16.09.2009 10:47

hhm, interessantes Tutorial, aber nicht wirklich das was ich suche.
Wie gesagt, es geht um das untere Menü. Die Links sitzen einfach zu weit unten und ich weiss nicht warum.
Allerdings werde ich jetzt einfach mal versuchen das ganze mit ner Liste umzusetzen, vielleicht löst sich das Problem dann wie von allein.
Also Danke erstmal. Und falls noch jemandem etwas ein- oder auffällt, raus damit.

Gruß
ED

heiko_rs 16.09.2009 10:53

Zitat:

Zitat von webba (Beitrag 444982)
falls noch jemandem etwas ein- oder auffällt, raus damit.

Außer dem Logo stehen bei Dir ausschließlich Deko-Grafiken im HTML-Code, und die gehören allesamt ins CSS. Daher ist die FAQ-Variante doch genau was Du suchst, bzw. suchen solltest ;) (auch wenn sie deutlich aufwendiger ist, als die Link-Grafiken einfach als img ins Markup zu schreiben.)

hubspe 16.09.2009 11:04

Moin,

Zitat:

Zitat von webba (Beitrag 444982)
Wie gesagt, es geht um das untere Menü. Die Links sitzen einfach zu weit unten und ich weiss nicht warum.

Weil a ein Inline-Element ist und die erzeugen keine eigene Zeile sondern fließen nur im Text mit.
Außerdem reagieren sie nur schlecht auf vertikale Verschiebungen.

Wenn Grafiken ausgeschaltet sind heißen deine Links alle Startseite.

Deine Versuche zeigen das dir wichtige Grundlagen fehlen.
Schau dir doch mal diesen Kurs an oder arbeite Little Boxes 1 durch.

Übrigens, ist das deine Seite und beabsichtigst du Webdesign, SEO als Dienstleistung anzubieten?
Ich nehme jetzt mal zu deinen Gunsten an, das ist eine Testseite und du hast die Linkbezeichnungen nur mal probehalber so gewählt, oder?

webba 16.09.2009 12:14

Danke erstmal für eure Tipps. Ich werd eure Ratschläge befolgen und erstmal die Tutorials durcharbeiten um ein besseres Verständnis zu bekommen.

Zitat:

Übrigens, ist das deine Seite und beabsichtigst du Webdesign, SEO als Dienstleistung anzubieten?
Ich nehme jetzt mal zu deinen Gunsten an, das ist eine Testseite und du hast die Linkbezeichnungen nur mal probehalber so gewählt, oder?
Ja, es ist meine Seite und ja, du hast vollkommen recht, eine solche Dienstleistung anzubieten (zumindest in einem solchen Umfang), davon bin ich weit entfernt. Die Seite ist vorerst als Testseite zu sehen, allerdings habe ich schon vor früher oder später mit Webdesign mein täglich Brot zu verdienen.
Aber es ist ja noch kein Meister vom Himmel gefallen. Ich hab zwar schon einige Webseiten gestaltet, allerdings bin ich was sauberen und effektiven Quelllcode angeht definitiv übelster Anfänger. Gerade was die Arbeit mit CSS angeht.
Deswegen geh ich jetzt erstmal üben....;)


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:36 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023