Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 15.09.2009, 19:33
webba webba ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2009
Beiträge: 3
webba befindet sich auf einem aufstrebenden Ast
Ausrufezeichen 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.

Geändert von webba (15.09.2009 um 19:34 Uhr) Grund: was vergessen...
Mit Zitat antworten
Sponsored Links