Problem mit abgerundeten Ecken

Status
Nicht offen für weitere Antworten.

Oetzicool

Erfahrenes Mitglied
Hey Leute ich will ein Menü mit abgerundeten Ecken, hab aber 2 Probleme:
1. Es klappt nicht alle Images so zusammenzufügen das es bündig aussieht
2. Der Begriff "Menü" steht mir viel zu weit links

hier hab ich den code
HTML:
<div class="teaser-round">
   <div class="oben">
Menü
</div>
	<div class="mitte">
<ul>
  <li><a href="index.php?section=home">Home</a></li>
  <li><a href="index.php?section=news&page=1">News</a></li>
</ul>
</div>

<div class="unten">
</div>

</div>
Code:
#banner {
    height: 80px;
}
#links {
    width: 200px;
    height: 100%;
    float: left;
    font-family: Verdana;
    font-size: 10px;
    color: #D4E5DB;
}
#mitte {
    width: 69%;
    float:left;
}
body {
    font-family: Verdana;
    font-size: 10px;
}
ul {
   list-style-type: none;
}


.teaser-round .oben {
background-image:url(oben.jpg);
background-repeat:no-repeat;
background-position:left;
}
.teaser-round .mitte {
background-image:url(mitte.jpg);
background-repeat:no-repeat;
background-position:left
}
.teaser-round .unten {
background-image:url(unten.jpg);
background-repeat:no-repeat;
background-position:left;
}

Ich hoffe ihr könnt mir helfen...!
 
Hi,

setz mal die voreingestellten Polsterungseigenschaften des ul-Listenelements zurück, die für die Lücken zwischen den drei DIVs verantwortlich sind:

Code:
ul {
   list-style-type: none;
   margin:0;
   padding:0;
}
Noch besser ist aber die Aufnahme des Universalselektors * zu Beginn des Stylesheets, um für alle im Dokument enthaltenen Block-Elemente deren Polsterungseigenschaften auf null zu setzen, denn beispielsweise ein eingebundenes p-Element, oder ein Überschriftenelement h[1-6] würde ebenfalls eine Lücke zwischen den Elementen aufreissen:

Code:
* {
margin:0;
padding:0;
}

Wenn der Schriftzug "Menü" zu weit links sitzt, definierst du eben für das Element einen entsprechenden linken Innenabstand:

Code:
.teaser-round .oben {
background-image:url(oben.jpg);
background-repeat:no-repeat;
background-position:left;
padding-left:10px; /* von mir frei gewählt */
}
 
Status
Nicht offen für weitere Antworten.
Zurück