Liste ganz links, padding, margin??

[hawkmaster]

Hallo zusammen,
trotz googlen und lesen vieler Beiträge schaffe ich es nicht eine Liste ganz linksbündig am Browserrand anzuordnen.
Überall liest man das es mit "padding=0" und "margin=0" funktionieren soll.

Bei mir wirkt sich es einfach nicht aus. Ich hätte gerne den gesamten Bereich ganz link am Browserrand. Bei mir ist immer ein Abstand von ca. 2cm.
Oder geht das event. garnicht?

Meine Versuche:
<ul id="MainNavigation1">
  <li>
 <input name="image_job" type="image"  id="image_job"  title="<? echo $jbtk_36; ?>" src="../image/job.gif" />
 <label for="image_job"><?php echo $jbtk_36; ?></label>
  </li>
  <li>
 <input name="image_document" type="image"  src="../image/document.gif"  title="<? echo $jbtk_37; ?>"  />
 <label for="image_document"><?php echo $jbtk_37; ?></label>
  </li>
  <li>
 <input  name="image_project" type="image"  src="../image/partitialjob.gif"  title="<? echo $jbtk_38 ?>"  />
 <label for="image_project"><?php echo $jbtk_38; ?></label>
  </li>
</ul>

#MainNavigation1 input{
  margin: 15px;
  display:block;
}
#MainNavigation1 li{
 float:left;
 padding: 0;
margin: 0;
list-style: none;
}
#MainNavigation1 ul{
list-style-position:inside;
padding: 0;
margin: 0;
}

vielen Dank und viele Grüße
hawk

[Gunnar Bittersmann]

@@hawkmaster:

trotz googlen und lesen vieler Beiträge schaffe ich es nicht eine Liste ganz linksbündig am Browserrand anzuordnen.
Überall liest man das es mit "padding=0" und "margin=0" funktionieren soll.

Vielleicht solltest du dies auch mal auf die _Liste_ anwenden. (Mit ':', versteht sich.)

Live long and prosper,
Gunnar

[hawkmaster]

Hallo Gunnar,

Vielleicht solltest du dies auch mal auf die _Liste_ anwenden. (Mit ':', versteht sich.)

ich verstehe deinen Einwand nicht ganz.
In meinem geposteten Beispiel habe ich es doch so richtig oder?
#MainNavigation1 ul{
list-style-position:inside;
padding: 0;
margin: 0;
}

natürlich habe ich es nicht so "padding=0"

vielen Dank und viele Grüße
hawk

[Gunnar Bittersmann]

@@hawkmaster:

Vielleicht solltest du dies auch mal auf die _Liste_ anwenden.

ich verstehe deinen Einwand nicht ganz.
In meinem geposteten Beispiel habe ich es doch so richtig oder?

Nein, du hast weder 'padding' noch 'margin' der _Liste_ gesetzt.

Live long and prosper,
Gunnar

[hawkmaster]

Hallo Gunnar,

Nein, du hast weder 'padding' noch 'margin' der _Liste_ gesetzt.

ach klar, du hast recht.
Ich hatte das ursprünglich mit einem Div versehen.

Wenn ich nun ein
<div id ="MainNavigation1">

davor setze, klappt es wie gewünscht.

vielen Dank und viele Grüße
hawk

[Gunnar Bittersmann]

@@hawkmaster:

Wenn ich nun ein
<div id ="MainNavigation1">

davor setze, klappt es wie gewünscht.

Nein, wenn du das davorsetzt, dann hast du kein valides HTML! IDs müssen eindeutig sein.

<div id="MainNavigation1">  
  <ul id="MainNavigation1">  
    <li>  
      ...  
    </li>  
  </ul>  
</div>

ist falsch.

Und das 'div'ist auch völlig überflüssig. Warum zum Geier formatierst du nicht die _Liste_ (das Element mit der ID "MainNavigation1")?

Live long and prosper,
Gunnar

[hawkmaster]

@Gunnar,

<div id="MainNavigation1">

<ul id="MainNavigation1">
    <li>
      ...
    </li>
  </ul>
</div>

  
so hatte ich es auch nicht, sondern die id nur im "<div id="MainNavigation1">" und nicht bei <ul>.  
Aber ich habe es nun ohne <div> gemacht, also so  
~~~html
  
<ul id="MainNavigation1">  
  <li>  
 <input name="image_job" type="image"  id="image_job"  title="<? echo $jbtk_36; ?>" src="../image/job.gif" />  
 <label for="image_job"><?php echo $jbtk_36; ?></label>  
  </li>  
  <li>  
 <input name="image_document" type="image"  src="../image/document.gif"  title="<? echo $jbtk_37; ?>"  />  
 <label for="image_document"><?php echo $jbtk_37; ?></label>  
  </li>  
  <li>  
 <input  name="image_project" type="image"  src="../image/partitialjob.gif"  title="<? echo $jbtk_38 ?>"  />  
 <label for="image_project"><?php echo $jbtk_38; ?></label>  
  </li>  
</ul>  

#MainNavigation1{
padding: 0;
margin: 0;
}
#MainNavigation1 input{
  margin: 10px;
  display:block;
}
#MainNavigation1 label{
padding: 5px;
}
#MainNavigation1 li{
 float:left;
 padding: 0;
 margin: 0;
 list-style: none;
}

Hast du es auch so gemeint?
Bei einer Sache weiss ich auch nicht weiter.
Wie könnte man es hinbekommen das die Beschriftung unten (also das was im Label steht) mittig zum Input oben hinbekommt?
Ein "<div align="center">" um jedes Input und Label ist ja auch keine gute Lösung.

Sorry wenn ich mich so ungeschickt anstelle aber ich experementiere erst seit gestern so richtig mit den ganzen CSS Eigenschaften.

vielen Dank und viele Grüße
hawk

[Harlequin]

Yerf!

Ein "<div align="center">" um jedes Input und Label ist ja auch keine gute Lösung.

Richtig. Denn es gibt ja schon ein Element um die Labels: die <li>s. Außerdem kennt CSS ein text-align:center

Gruß,

Harlequin

[hawkmaster]

Hallo Harlequin,

Richtig. Denn es gibt ja schon ein Element um die Labels: die <li>s. Außerdem kennt CSS ein text-align:center

super Tipp! Danke .
Damit sieht es ganz gut aus.

Vielleicht hast du ja auch dazu noch eine Idee?
Die ganze Seite ist ja mit PHP gemacht.
Bei einer bestimmten Bedingung blende ich einen Button aus.
Das sieht dann ungefähr so aus.
<li>
...erster input...
..
</li>
<li>
<input name="image_test" id="image_test" type="image" title="Test" src="../image/test.gif"  style="display:none;" />
<label for="image_test"></label>
</li>
<li>
...weitere input...
..
</li>

In diesem Fall, also wenn er ausgeblendet ist, rückt der nachfolgende
Input bzw. das Bild ganz auf zum ersten.
Bei einer Tabelle wie ich es zuerst hatte war die Spalte ja trotzdem fix da.
Wie könnte man dies lösen?
Ich dachte mir event. das man ein "leeres" bzw. transparentes Bild mit gleicher Größe einblendet?

vielen Dank und viele Grüße
hawk

[Harlequin]

Yerf!

Wie könnte man dies lösen?

Hm, mit visibility:hidden statt display:none? Dadurch wird der Platz für das Bild trotzdem freigehalten. Ansonsten müsste man dem <li> eine entsprechende Breite (width) zuweisen.

Gruß,

Harlequin

[Gunnar Bittersmann]

@@hawkmaster:

#MainNavigation1 ul{
list-style-position:inside;
padding: 0;
margin: 0;
}

Diese Regel kommt nirgends zur Anwendeung, weil es kein 'ul'-Element gibt, das Kind des Elements mit der ID "#MainNavigation1" ist.

Live long and prosper,
Gunnar