Anmelden | Registrieren | FAQ
Anonymous

ul wie andere elemente links floaten

+ Antwort erstellen

4 Beiträge Seite 1 von 1


ul wie andere elemente links floaten

von yxyx136 » Do Nov 08, 2012 4:50 pm

Hallo ich habe ein Problem mit der CSS Positionierung:

Ich habe mir eine einfache lokale Website erstellt mit einfachem Login-System und User Verwaltung

Nun habe ich eine unordered list hinzugefügt mit float: left. als Account Optionen.
Mein Problem ist das die Liste nicht wie die anderen Elemente hintereinander positioniert wird sondern darunter.
Mein Ziel ist es die ul rechts oben in dem div zu zentrieren.

Hier mein HTML Code für die ul:

Code: Alles auswählen
<ul id="Account_Options"><p id="Account_Options_label" onclick="Show_li()">Edit</p>
         <form name="viewProfile" method="POST" action="viewProfile.php"><li id="Account_Options_view" onclick="javascript:document.viewProfile.submit();">View&nbsp;Profile</li></form>
         <form name="editProfile" method="POST" action="editProfile.php"><li id="Account_Options_edit" onclick="javascript:document.editProfile.submit();">Edit&nbsp;Profile</li></form>
         <form method="POST" action="Logout.php"><li id="Account_Options_logout" name="submit"><button name="submit" id="submit" type="submit"><img src="resources/Logout_button.png" /></button></li></form>
      </ul>


...und hier mein CSS Code für die ul:
Code: Alles auswählen
#Account_Options {
   float: left;
   list-style: none;
   display: inline;
   position: relative;
   margin-left: 20em;
   margin-right: 1em;
   border: 0.2em solid black;
   padding: 0.1em;
   cursor: pointer;
   background-color: gray;
}

#Account_Options form {
   background-color: silver;
   border: 0.1em solid black;
   position: relative;
}


Ich hoffe ihr könnt mir helfen!

Zuletzt geändert von yxyx136 am Sa Nov 24, 2012 11:01 pm, insgesamt 1-mal geändert.

Benutzeravatar

yxyx136

  • Beiträge: 4
  • Registriert: Do Nov 08, 2012 4:37 pm

Re: ul wie andere elemente links floaten

von XainPro » Fr Nov 09, 2012 9:22 am

fügen Sie einen neuen div nach ul-Menü und geben ihm einen css Stil clear: both
Benutzeravatar

XainPro

  • Beiträge: 3933
  • Registriert: Fr Feb 17, 2012 8:10 pm

Re: ul wie andere elemente links floaten

von yxyx136 » Fr Nov 09, 2012 1:17 pm

Danke für die schnelle Antwort! funktioniert trotzdem irgendwie nicht!
habe auch versucht den div in das ul zu stecken; funktioniert leider auch nicht.

alle anderen Elemente wie Profil-Bild und Username konnte ich mit float: left anordnen.
Nur eben die unordered list nicht!
Benutzeravatar

yxyx136

  • Beiträge: 4
  • Registriert: Do Nov 08, 2012 4:37 pm

Re: ul wie andere elemente links floaten

von XainPro » So Nov 11, 2012 7:21 am

ungeordnete Liste Standardwerte haben padding entfernen meinen mit CSS-Reset
in CSS-Datei hinzufügen, um dieses Skript oben
Code: Alles auswählen
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
   display: block;
}
body {
   line-height: 1;
}
ol, ul {
   list-style: none;
}
blockquote, q {
   quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
   content: '';
   content: none;
}
table {
   border-collapse: collapse;
   border-spacing: 0;
}
Benutzeravatar

XainPro

  • Beiträge: 3933
  • Registriert: Fr Feb 17, 2012 8:10 pm


+ Antwort erstellen

Seite 1 von 1