1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  2. Unsere jährliche Weihnachts-Banner-Aktion hat begonnen! Wir freuen uns auf viele, viele kreative Vorschläge.
    Mehr dazu könnt Ihr hier nachlesen: Weihnachtsbanner 2016

    Information ausblenden

CSS, Tabellen und Links

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von jkhkhvbjkhv, 25.04.06.

  1. jkhkhvbjkhv

    jkhkhvbjkhv Jerseymac

    Dabei seit:
    11.11.05
    Beiträge:
    450
    Moin, habe da mal eine Frage.

    Wie kann ich es verwirklichen, wenn ich auf einer Internetseite in einer Tabelle (Zellen) das Menü eingerichtet habe, und möchte quasi nicht nur, dass der Link selber eine Hintergrundfarbe annimmt, sondern die ganze Zellen-Ebene.

    Des Weiteren sollte man nicht nur auf den Link klicken können, sondern allgemein in der ganzen Zelle.

    :oops: :oops: :oops: :oops: :oops:

    Hoffe Ihr versteht was ich meine. Anders kann ich es irgendwie nicht erklären.

    Denke mal, dass es mit CSS möglich ist. Oder?

    Gruß Niko
     
  2. Gubbie

    Gubbie Damasonrenette

    Dabei seit:
    02.01.05
    Beiträge:
    485
    Code:
    <a style="width:100%;height:100%;background-color:red;color:white;" href="fvdf.html">Link</a>
    
    vielleicht?

    edit: geht nicht...

    edit 2:

    so:

     
    #2 Gubbie, 25.04.06
    Zuletzt bearbeitet: 25.04.06
  3. stoebe

    stoebe Uelzener Rambour

    Dabei seit:
    23.12.05
    Beiträge:
    371
    Ohne es vorher ausprobiert zu haben, versuch ich's mal...


    Was die Hintergrundfarbe der Zelle betrifft:
    Code:
    td { background-color: #000000 }
    Und schließlich, dass die ganze Zelle verlinkt ist:
    Code:
    <table>
    <tr>
    <a href="index.htm"><td>Beispieltext</td></a>
    </tr>
    </table>
    Kann dir nicht sagen, ob es funktioniert (denke auch nicht, dass es das tut).
    Evtl. schau ich mal nach und editiere bei Gelegenheit. Viel Glück.


    Grüße,

    stoeb :E
     
  4. stoebe

    stoebe Uelzener Rambour

    Dabei seit:
    23.12.05
    Beiträge:
    371
    Das ist nicht annähernd das, was er möchte... :eek:
     
  5. jkhkhvbjkhv

    jkhkhvbjkhv Jerseymac

    Dabei seit:
    11.11.05
    Beiträge:
    450
    Danke für die Antwort. Habe aber die Lösung durch Probieren. ;)

    text-decoration: none;
    font-size: 14px;
    color: #00CC33;
    font-family: Arial, Helvetica, sans-serif;
    height:42px;
    display:block;
    vertical-align:middle;
    line-height:42px;
    left:5px;
    padding-left:5px;

    Damit hat es geklappt.

    Gruß Niko
     
  6. Gubbie

    Gubbie Damasonrenette

    Dabei seit:
    02.01.05
    Beiträge:
    485
    ?? Muss er doch nur in die Betreffende zelle schreiben?:oops:
     
  7. stoebe

    stoebe Uelzener Rambour

    Dabei seit:
    23.12.05
    Beiträge:
    371
    Alles klar, viel Spaß.. :)
     
  8. jkhkhvbjkhv

    jkhkhvbjkhv Jerseymac

    Dabei seit:
    11.11.05
    Beiträge:
    450

    Ne dann ist ja nur die Hintergrundfarbe von der Schrift definiert. :) Aber nicht von der Tabelle.
     
  9. Timotheus

    Timotheus Gast

    Hallo,

    lege eine neue Klasse an. Z.B. direkt in deiner html Datei so:

    <style type="text/css">
    .tablink {background-color:#BED0FC; }
    </style>

    ansonsten nur den Teil mit .tablink ... in deine separate css Datei.

    Dann fügst die bei der Zelle folgendes ein:

    <td class="tablink"> Link </td>

    Um es aber auch zu sagen, zu Layoutzwecken sollten eigenltich keine Tabellen genutzt werden. Angenommen du definierst ein Box für dein Menü. Dann könntest die ganz einfach mit

    <p style="background-color:#BED0FC;">Link 1</p>
    <p style="background-color:#BED0FC;">Link 2</p>

    zwei Linkeinträge in diesem Menü erzeugen. Um es zunächst nicht ganz auf CSS umzustellen, kannst Du ja eine Zelle deiner Layouttabelle als Menü lassen und fügst dort das Beispiel mit den <p ..> ... </p> ein.

    EDIT: Wenn es die ganze Tabelle sein soll:

    <table style="background-color:#BED0FC;"> ... </table>

    Gruß, Tim.
     
  10. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    das entscheidende ist, das Du aus einem inline-Element (in dem Fall dem <a>) mittels display:block ein Blocklevel-Element machst. Erst damit erreichst Du das umliegende paddings auch Bestandteil des Links und damit clickable werden.

    Im übrigen solltest Du ernsthaft darüber nachdenken anstelle eines Tabellenkonstruktes für die Menüstruktur eine semantisch korrekte <ul> herzunehmen. Mittels li {float:left; list-style: none;} bekommst Du die Einträge ohne Punkte nebeneinander und kannst dann via width, height, margin und padding das Ausrichten und Formatieren anfangen.

    Gruß Stefan
     
    1 Person gefällt das.
  11. Timotheus

    Timotheus Gast

    @ stk

    Toller Tipmit der Liste. Hab ich so auch noch nicht gesehen. Ist aber sehr einfach und zielführend. Kann Dich leider nicht mehr mit Karma bewerten, da erst andere User bedacht werden müssen.:(

    EDIT: Jetzt geht es doch. Gestern noch nicht.:-D

    Gruß, Tim.
     
  12. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
  13. Timotheus

    Timotheus Gast

    Hallo,

    hab da ein Problem mit dem display:block; und natürlich IE. Bevor ich ein neues Thema aufmache, probier ich es erstmal hier.

    Also hab ein Menu gebastelt mit <ul><li> usw und in der css dem link <a> display:block; verpasst, damit der Bereich um die eigentliche Schrift auch clickable wird. Beim firefof klappt das wunderbar, leider beim IE nicht. Hab zunächst gedacht, es liegt an meiner (falschen) css Notation, aber selbst wenn ich allen links <a> das display:block; verpasse, funktioniert es im IE nicht. Ich gebe Euch mal den Quellcode:

    index.html:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Zahnarztpraxis Dr. Blablabla</title>
    <link rel="stylesheet" type="text/css" href="format.css">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body class="schrift"><div id="rahmen">

    <div id="kopf"><h1>Zahnarztpraxis Dr. Blablabla</h1></div>

    <ul id="menu">
    <li><a id="aktuell" href="index.html">Start</a></li>
    <li><a href="team.html">Team</a></li>
    <li><a href="leistung.html">Leistungen</a></li>
    <li><a href="anfahrt.html">Anfahrt</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
    <li><a href="impressum.html">Impressum</a></li>
    </ul>

    <div id="inhalt">
    <--Irgendein Text, aus Platzgründen gelöscht-->
    </div>

    </div></body>
    </html>

    und format.css

    a {text-decoration:none; color:blue;}
    a:visited {text-decoration:none; color:blue;}
    body {font-size: 100.01%;}
    ul#menu {float:left; width:8em; margin:0; padding:0;}
    ul#menu li {list-style:none; margin:0; padding:0; border-bottom:1px dotted royalblue; }
    ul#menu a {padding:0.5em; text-indent:1em; display:block;}
    ul#menu a#aktuell {color:oops:range;}
    ul#menu a:hover {background-color:royalblue; color:white;}
    div#rahmen {margin: 0 auto; width:800px;}
    div#kopf {width:100%; border-bottom:1px solid royalblue; padding:0.5em; text-align:right;}
    div#kopf h1 {font-size:1.8em; font-family:vivaldi,verdana;}
    div#inhalt {margin-left: 10em;}
    .schrift {font-family: verdana, sans-serif;}

    Hab schon ne Weile im Netz gesucht, aber nichts passendes gefunden. Vielleicht kann mir einer helfen.

    Schon mal vielen Dank und liebe Grüße, Tim.
     
    #13 Timotheus, 28.04.06
    Zuletzt von einem Moderator bearbeitet: 12.05.06
  14. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    hmm, bei mir tut's im IE einwandfrei - Cache gelöscht?

    präzisiere: IE6 ist ok, 5.5 auch, 5.0 tanzt etwas aus der Reihe, aber nichts für das ich mir 'nen extra Kopf machen würde.

    Gruß Stefan
     
  15. Timotheus

    Timotheus Gast

    Erstmal danke für deine Mühe stk.

    Ich hab es getestet hier im Büro mit dem IE 6 auf Windows XP Prof und zuhause mit dem IE 6 auf Windows XP Home. Mit beiden ging es nicht richtig. Der Link funktionierte nur, wenn ich auf die Schrift kam. Mit Firefox 1.5 hat es auf beiden Systemen funktioniert.

    Bin gerade noch im büro und habe eben mal alles geköscht im IE, aber leider verändert sich das Verhalten nicht. Hab die Seite einmal aus dem Netz und einmal über einen lokalen ApacheServer auf Windows getestet und jeweils ein negatives Ergebnis.

    Weiß auch nicht mehr weiter.

    Gruß, Tim.
     
    #15 Timotheus, 28.04.06
    Zuletzt von einem Moderator bearbeitet: 12.05.06

Diese Seite empfehlen