Tabelle mit CSS gestalten??

[hawkmaster]

Hallo zusammen,
in meinen Webseiten kommen noch viele Tabllen vor die rein für die Gestaltung und das Layout da sind.
Ich habe bereits einiges gelesen das man dies nicht mehr gerne sieht und man es möglichst mit CSS umsetzen soll.
Ich möchte mal ganz einfach anfangen.
Es gibt z.b. eine Tabelle als Hauptnavigation.
Hier ist eine Zeile (<tr>) mit 12 Spalten.
Beispiel(gekürzt)
--------------------------------------------------------------------------------
  <table width="750">
        <tr>
          <td width="60">
            <div align="center">
              <input class='imgborder' name="image_document" type="image"  src="../image/document.gif"  title="Dokument"  />
              <br />
              Dokument            </div></td>
          <td width="50">
            <div align="center"> <img src="../image/note.gif" class="imgborder" alt="Note" title="Notiz" onclick="window.open('opmsg.php')"  />
              <br />
              Notiz              <br />
          </div></td>
          <td width="50">
            <div align="center"> <img src="../image/config.gif" class="imgborder"  alt="Config" title="Config" onclick="window.open('config.php')"   />
              <br />
              Config          </div></td>
          <td width="50">
            <div align="center"> <img src="../image/info.gif" class="imgborder"  alt="Info" title="Info" onclick="window.open('about.php')"   />
              <br />
              Info    </div></td>

</tr>
      </table>
------------------------------------------------------------------------

Wie könnte man dies nun am besten mit CSS umsetzen?
Ich weiss nicht so recht wie ich anfangen soll

vielen Dank und viele Grüße
hawk

[Harlequin]

Yerf!

Wie könnte man dies nun am besten mit CSS umsetzen?
Ich weiss nicht so recht wie ich anfangen soll

Am besten schrittweise. Der erste Schritt ist dabei immer semantischer HTML-Code. In diesem Fall sieht es stark nach einer Liste aus:

<ul>  
  <li><a href="...">Dokument</a></li>  
  <li><a href="...">Notiz</a></li>  
  <li><a href="...">Config</a></li>  
  <li><a href="...">Info</a></li>  
</ul>  

Darauf setzt man nun mit CSS an und richtet die Elemente wie gewünscht aus und verpasst ihnen die Bilder als Background.

Gruß,

Harlequin

PS: das mit den "normalen" Links ist Absicht, denn wenn man sich schon über eine Neugestaltung macht, sollte man auch überdenken, ob PopUps wirklich sein müssen. Außerdem ist die alte Version ohne JS nicht nutzbar...

[hawkmaster]

Hallo Harlequin

vielen Dank für deine Hilfe,

diesem Fall sieht es stark nach einer Liste aus:

<ul>

<li><a href="...">Dokument</a></li>
  <li><a href="...">Notiz</a></li>
  <li><a href="...">Config</a></li>
  <li><a href="...">Info</a></li>
</ul>

  
Solche Beispiele habe ich schon gefunden. Es ist jedoch so das es bei meinen Seiten um eine kleine Intranet Anwendung handelt die nie im Internet seinw ird und nur für wenige User nutzbar ist.  
Auch die PopUps und Javascript sind Bedingung.  
  
Ich brauche also eine Navigation mit den Inputs bzw. den Bildern so wie Tabelle es hergab.  
  
  
vielen Dank und viele Grüße  
hawk

[Harlequin]

Yerf!

Ich brauche also eine Navigation mit den Inputs bzw. den Bildern so wie Tabelle es hergab.

Die Bilder und Inputs innerhalb der <li>s zu verwenden sollte eigentlich auch kein Problem darstellen. Wobei man trotzdem versuchen sollte zumindest auf das DIV und die <br> zu verzichten, das sollte auch über CSS-Angaben realisierbar sein.

Nebeneinander bekommt man die Listenpunkte mittels float:left (das imho schönere display:inline-box verstehen leider noch nicht alle Browser). Der Rest is Spielerei mit width, height, margin, padding und den vielen anderen CSS-Angaben.

Gruß,

Harlequin

[hawkmaster]

Hallo,
danke dir nochmals für die Tipps.
Ich habe nun mal zum reinkommen und ausprobieren folgendes gemacht:
Ein Haupt DIV als Navigation und dann alle Inputs mit einem Label angegegen.
<div id="MainNavigation">
  <label for="image_job"><?php echo $tk_36; ?></label>
  <input name="image_job" type="image" id="image_job"  title="<? echo $tk_36; ?>" src="../image/job.gif"/>
  <label for="image_document"><?php echo $tk_37; ?></label>
     <input  name="image_document" type="image"  src="../image/document.gif"  title="<? echo $tk_37; ?>"  />
     <label for="image_project"><?php echo $tk_38; ?></label>
    <input  name="image_project" type="image"  src="../image/part.gif"  title="<? echo $tk_38 ?>"  />
 </div>

Die CSS sieht so aus:

div#MainNavigation {
    font-size: 0.9em;
    margin: 0 0 1.1em; padding: 0;
    background-color: #eee; border: 1px dashed silver;
}
div#MainNavigation label {
    margin: 5px;
 padding: 5px;

}

Jetzt sind die Bilder bzw. Inputs ja schon mal nebeneinander. Ich denke ich würde es auch hinbekommen das die ABstände gleich werden. Das Problem ist nun aber das die Beschriftung, also das Label immer links vom Bild ist.

Schöner wäre es aber wenn die Beschriftung unter dem Bild (input) ist so wie in der ursprünglichen Tabelle.
Mir ist nicht klar wie ich das hinbekommen könnte.

Event. ganz ohne Label und dafür eine neue Zeile?
Wie dann aber die Beschriftung genau unter das Bild bekommen?

vielen Dank und viele Grüße
hawk

[Harlequin]

Yerf!

Schöner wäre es aber wenn die Beschriftung unter dem Bild (input) ist so wie in der ursprünglichen Tabelle.
Mir ist nicht klar wie ich das hinbekommen könnte.

Event. ganz ohne Label und dafür eine neue Zeile?
Wie dann aber die Beschriftung genau unter das Bild bekommen?

Label ist doch eigentlich nicht mal schlecht. das mehrzeilige wird aber ohne zusätzliche Gruppierung nichts werden.

Dehalb komm ich doch noch mal auf die Liste zurück:

<ul id="MainNavigation">  
  <li>  
    <input name="image_job" type="image" id="image_job"  title="<? echo $tk_36; ?>" src="../image/job.gif"/>  
    <label for="image_job"><?php echo $tk_36; ?></label>  
  </li>  
  <li>  
    <input  name="image_document" type="image"  src="../image/document.gif"  title="<? echo $tk_37; ?>"  />  
    <label for="image_document"><?php echo $tk_37; ?></label>  
  </li>  
  <li>  
    <input  name="image_project" type="image"  src="../image/part.gif"  title="<? echo $tk_38 ?>"  />  
    <label for="image_project"><?php echo $tk_38; ?></label>  
  </li>  
</ul>  

Jetzt noch folgendes CSS:

#MainNavigation input{  
  display:block; /*Erzeugt einen Zeilenumbruch*/  
}  
#MainNavigation li{  
  float:left; /*damit sie nebeneinander sind*/  
}  

Gruß,

Harlequin

[hawkmaster]

Hallo Harlequin,

deine Lösung ist schon mal super.

Ich habe nun noch "list-style: none" eingebaut damit die Listenpunkte weg sind.

#MainNavigation li{
  float:left; /*damit sie nebeneinander sind*/
  list-style: none;
}

Was mir jetzt noch nicht ganz klar ist wie man am besten die Breite bzw. Abstand der einzelnen Inputs bzw. IMGs festlegt.

wenn ich z.b. padding= 50px angebe:
#MainNavigation input{
  padding:  50px;
  display:block; /*Erzeugt einen Zeilenumbruch*/

}

dann wird das Bild vergrössert. Das gleiche bei "width". Ich möchte ja eigentlich nur das zwischen den einzelnen Inputs und Bildern ein wenig Abstand.

Entschuldige bitte mein Nachfragen aber mit den vielen CSS Eigenschaften tue ich mich noch schwer.
vielen Dank und viele Grüße
hawk

[Harlequin]

Yerf!

Was mir jetzt noch nicht ganz klar ist wie man am besten die Breite bzw. Abstand der einzelnen Inputs bzw. IMGs festlegt.

wenn ich z.b. padding= 50px angebe:
#MainNavigation input{
  padding:  50px;
  display:block; /*Erzeugt einen Zeilenumbruch*/

}

dann wird das Bild vergrössert. Das gleiche bei "width". Ich möchte ja eigentlich nur das zwischen den einzelnen Inputs und Bildern ein wenig Abstand.

Das mit dem Padding wundert mich jetzt ein bischen. Aber mit Margin sollte es gehen (kann aber etwas seltsame Auswirkungen aufgrund der collapsing margins haben). Oder man gibt ihnen margin:auto und den <li>s eine Breite.

Entschuldige bitte mein Nachfragen aber mit den vielen CSS Eigenschaften tue ich mich noch schwer.

Das ist ganz normal, ist bei mir auch nicht anders (ich lern im Bezug auf CSS auch immernoch dazu). Den Umgang mit CSS kann man nur Stückweise durch Ausprobieren und Anwenden erlernen, da es nicht nur um die Eigenschaften an sich sondern auch deren Zusammenspiel geht.

Gruß,

Harlequin

[hawkmaster]

Hallo

mit "margin" sieht es jetzt ganz gut aus.

Was mich an der Lösung mit "ul" bzw. "li" ein wenig stört ist das der ganze Bereich eingerückt wird. Das erste Bild bzw. Input fängt also erst ca. 2c, links an.
Gibt es da auch event. eine Lösung das es ganz linksbündig anfängt oder ist das einfach so bei einem Listenelement?

Frage:
Ist der Inhalt vom Label Element, also die Beschriftung immer links vom Input wenn man es zuerst angibt bzw. die Beschriftung rechts, wenn man es nach dem Input angibt?
<input name="image_job" type="image" id="image_job"  title="<? echo $tk_36; ?>" src="../image/job.gif"/>
<label for="image_job"><?php echo $tk_36; ?></label>

Es gibt also keine Möglichkeit das Label Element bzw. die Beschriftung mittig unterhalb eines Inputs zu platzieren?

vielen Dank und viele Grüße
hawk

[Harlequin]

Yerf!

Was mich an der Lösung mit "ul" bzw. "li" ein wenig stört ist das der ganze Bereich eingerückt wird. Das erste Bild bzw. Input fängt also erst ca. 2c, links an.
Gibt es da auch event. eine Lösung das es ganz linksbündig anfängt oder ist das einfach so bei einem Listenelement?

Ja und ja. Die Browser haben für alle HTML-Elemente Default-Vorgaben fürs CSS. Unter anderem die Einrückung von Listenelementen, realisiert entweder mit Padding oder Margin (je nach Browser). Wenn man beides auf 0 setzt (für ul und li) ist die Einrückung weg.

Solche Vorgaben werden dir noch häufiger begegnen, z.B. bei überschriften oder Absätzen. Manche empfehlen, per

* {margin:0;padding:0;}  

Diese Defaults erst mal zu löschen, aber dann kann es passieren, das man sie an Stellen, an denen sie Sinnvoll wären, vermisst...

Frage:
Ist der Inhalt vom Label Element, also die Beschriftung immer links vom Input wenn man es zuerst angibt bzw. die Beschriftung rechts, wenn man es nach dem Input angibt?

Erst einmal ja, aber per CSS ist sehr viel machbar...

<input name="image_job" type="image" id="image_job"  title="<? echo $tk_36; ?>" src="../image/job.gif"/>
<label for="image_job"><?php echo $tk_36; ?></label>

Es gibt also keine Möglichkeit das Label Element bzw. die Beschriftung mittig unterhalb eines Inputs zu platzieren?

Eigentlich hätte das display:block für das <input> schon dafür sorgen sollen, dass der label darunter steht... ist dem nicht so? (habs grad nicht getestet)

Die Holzhammer-Methode mit position:absolute geht zwar fast immer, sollte hier aber eigentlich nicht notwendig sein.

Gruß,

Harlequin