Probleme mitt css (li's, ul's -> flot: left;/text-align:left

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

17:12, 26.3.2013

hallo liebes Forum,
Ich bin dabei 2 Menüs zu gestalten. Das eine soll als Zeile oben die Seite kommen und das andere soll links als Block.

Oberes-Menü:
Mit meinem oberen Menü klappt es, wenn ich meine ul's, li's, a's an die rechte Seite klatsche (Kein Abstand zum rechten Ran).
Jedoch wenn ich versuche das alles an die linke Seite zu klatschen, sind nach links locker gesch. 2cm! Da soll aber auch kein Abstand zum linken Rand sein ...

Menü-linke-Seite:
An meiner linken Seite sind auch immer ca. 2cm platz und die auflistung ist nicht untereinander sondern nebeneinander - trotz "display: block;" ...
Sie sollen untereinander und - so wie oben - kein Platz zum linken Rand ...

Hier der html code für das obere menü (menuev):

<div id="menuev">
					<ul>
                                                <li>
							<a href="index.php" class="left">Home</a>
						</li>
                                                <li>
                                                        <a href="admin/management/user.php" class="admin_left">Benutzer verwalten</a>
						</li>
                                                <li>
							<a href="../core/logout/logout.php" class="rightright">Ausloggen</a>
						</li>
                                                <li>
							<a href="myprofile.php" class="right">Mein Profil</a>
						</li>
					</ul>
				</div>

Hier der für das linke menü:

<div id="sidemenu">
                                        <h2>Startseite</h2>
                                        <ul>
                                            <li>
                                                    <a href="#">ToDo</a>
                                            </li>
                                            <li>
                                                    <a href="#">Upload/ Download</a>
                                            </li>
                                            <li>
                                                    <a href="#">Chat</a>
                                            </li>
                                        </ul>
                                    </div>

und hier der css code:

#menuev {
	border-bottom-color: #99A37A;
	border-bottom-style: dashed;
	border-bottom-width: 1px;
        padding-bottom: 0px;
        height: 25px;
        background-color: white;
}
#menuev ul {
	text-decoration: none;
	list-style: none;
}
#menuev ul li {
	display: inline;
}
.left {
        margin-top: 6px;
        margin-bottom: 6px;
        float: left;
        color: #8AA8BD;
        font-size: 11px;
}
.admin_left {
        float: left;
        color: #8AA8BD;
        font-size: 11px;
        margin-top: 6px;
        margin-bottom: 6px;
        border-left-color: black;
	border-left-style: inset;
	border-left-width: 1px;
        margin-left: 7px;
        padding-left: 7px;
}
.right {
        float: right;
	color: #8AA8BD;
        font-size: 11px;
        margin-top: 6px;
        margin-bottom: 6px;
        margin-left: 7px;
	padding-left: 7px;
        
}
.rightright {
        float: right;
	color: #8AA8BD;
        font-size: 11px;
        margin-top: 6px;
        margin-bottom: 6px;
	margin-left: 7px;
	padding-left: 7px;
	border-left-color: black;
	border-left-style: inset;
	border-left-width: thin;
}
#sidemenu {
        width: 199px;
        height: 100px;
        float: left;
        border-right-color: black;
        border-right-style: dotted;
        border-right-width: 1px;
}
#sidemenu ul {
        text-decoration: none;
	list-style: none;
        text-align: left;
        padding-left: auto;
}
#sidemenu ul li {
        float: left;
        margin-left: auto;
        padding-left: auto;
        font-size: 12px;
        text-align: left;
        display: block;
        height: 20px;
        border-bottom-color: black;
        border-bottom-style: dotted;
        border-bottom-width: 1px;
}

Man muss dazu sagen das ich alle anderen divs die außenrum sind angeschaut habe, an denen liegt das nicht ...

Das wäre echt genial wenn mir jemand helfen könnte :)

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

pcw

pcw hat kostenlosen Webspace.

18:09, 26.3.2013

Das wäre echt genial wenn mir jemand helfen könnte :)

Mal auf die Schnelle. Bitteschön:

<div id="menuev">
  <ul class="left">
    <li><a href="#">Home</a></li>
    <li><a href="#">Benutzer verwalten</a></li>
  </ul>
  <ul class="right">
    <li><a href="#">Ausloggen</a></li>
    <li><a href="#">Mein Profil</a></li>
  </ul>
  <div class="clearfix"></div>
</div>
<div id="sidemenu">
    <h2>Startseite</h2>
    <ul>
        <li><a href="#">ToDo</a></li>
        <li><a href="#">Upload / Download</a></li>
        <li><a href="#">Chat</a></li>
    </ul>
</div>

#menuev {
  border-bottom: 1px solid #000;	
}
#menuev ul,
#sidemenu ul {
  padding: 0;  /* Das war mal dein Abstand zum Rand */
}
#menuev li {
  display: inline;
}
#menuev .left {
  float: left;
}
#menuev .right {
  float: right
}
#sidemenu {
  float: left;
  width: 200px;
  border-right: 1px solid #000;
}
#sidemenu li { 
  display: block;
}
.clearfix {
  clear: both;
}

Autor dieses Themas
bastitrial

bastitrial hat kostenlosen Webspace.

23:22, 26.3.2013
Vielen vielen dank :)
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city