zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit padding und margin

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.09.2009, 20:33
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 20:34 Uhr) Grund: was vergessen...
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 16.09.2009, 09:27
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

informatives über grafische Menüs findest du in der FAQ.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 16.09.2009, 10:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2009
Beiträge: 3
webba befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 16.09.2009, 10:53
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von webba Beitrag anzeigen
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.)
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
  #5 (permalink)  
Alt 16.09.2009, 11:04
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

Zitat:
Zitat von webba Beitrag anzeigen
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?
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #6 (permalink)  
Alt 16.09.2009, 12:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2009
Beiträge: 3
webba befindet sich auf einem aufstrebenden Ast
Standard

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....
Mit Zitat antworten
Antwort

Stichwörter
abstände, links, margin, padding

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Dynamische Größen Killhunter CSS 0 14.05.2011 17:56
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
z-index hoch, dennoch grafik nicht ganz oben bergg CSS 6 27.10.2010 17:02
Mysteriöse weiße Linie Xethon CSS 3 27.02.2010 16:50
Problem mit Boxendarstellung mit Bild Sordum CSS 6 22.06.2008 17:04


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:35 Uhr.