Gå til innhold

Hvordan gjøre en hel table cell til link?

WillY-

Av WillY-
i Programmering og webutvikling

Anbefalte innlegg

WillY-

WillY-

Skrevet
Skrevet

post-51807-1282301399,0936_thumb.png

Som dere kan se på bilde, så vil jeg ha hele den cellen til å bli en link. Akkurat nå er det bare teksten som er link. Jeg har sett en hel del om dette på nettet, og jeg må ærlig innrømme at jeg ikke klarer på fatte hva i CSS-en som får det til å bli en link. Alt jeg ser er bare style, ingenting som tilsier at den blir en link. Skjer det liksom automatisk bare man gjør noe ala table a {...} ??

 

Her er html tabellen min jeg vil ha til å bli linker (de med MenuBottom):

 

<table width="960" border="0" cellspacing="0" cellpadding="0" >
<tr>
 <td height="151" width="90"></td>
 <td id="MenuBottomBuy" width="260"><a href="buy.html"><span id="btn-buy" class="MenuTitle"></span> <br> <p style="padding-left:6.7em" id="btn-buy-text" class="MenuBottomText"></p></a></td>
 <td id="MenuBottomLang" width="260"><a href="../default.html"><span id="btn-lang" class="MenuTitle"></span> <br> <p id="btn-lang-text" class="MenuBottomText"></p></a></td>
 <td id="MenuBottomApp" width="260"><a href="app.html"><span id="btn-app" class="MenuTitle"></span> <br> <p style="padding-top:0.8em;padding-left:5em; font-weight:900" id="btn-app-text" class="MenuBottomText"></p></a></td>
 <td width="90"></td>
</tr>
</table>

 

Selve teksten bli hentet opp via id med javascript i <span> tagsa...

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Warz

Warz

Skrevet
Skrevet (endret)

Jeg lagde sånne bokser for ikke så lenge siden. Prøvde å finne noen god løsning, men det var mye rart, endte opp med: 

<a href="" class="ad" style="width: 125px; height: 125px;line-height:121px;">Advertise Here</a>

Altså sette en bredde og høyde på selve linken. Om det validerer hvis du har mye innehold mellom a taggene vet jeg ikke.

Endret av Warz
Lenke til kommentar
WillY-

WillY-

Skrevet
  • Forfatter
Skrevet (endret)

Ok. Kjenner ikke helt igjen den koden. nvm

 

Må jeg legge til width:100% og height:100% i CSS-en for hele tabbelen? Eller må jeg ha en egen CSS regel for akkurat <a href="../default.html">?

 

Bare et lite spørsmål: er det sånn at når man bruker class="" så applayer den det til elemente OG alle elementer inne I elementet? For, table dataen min har en egen class="MenuButton", kunne jeg ikke da bare gjøre .MenuButton a {..} i CSS-en så alle <a>tags får denne regelen? Mye jeg ikke helt skjønner med CSS enda heh..

Endret av WillY-
Lenke til kommentar
Warz

Warz

Skrevet
Skrevet

Du kan jo lage tabell cellen like stor som du lager linken. Men width/height 100% bør vel funke det å. Men du er nødt til å ha en width/height på selve linken (a href). Ellers vil den bare være akkurat som før, spiller ingen rolle om tabell cellen har 100%.

.MenuButton a {..} i CSS-en så alle tags får denne regelen?
Ja, det kan du gjøre. Altså alle "a" elementer som er innenfor "MenuButton" klassen vil få denne egenskapen.
Lenke til kommentar
Kaptein Snus

Kaptein Snus

Skrevet
Skrevet

Du må gjøre om anchor elementet til et block element. Og så sette høyde og bredde på det elementet. Jeg har satt høyde og bredde på img elementene også, fordi bildene fra google var litt for store.

 

<html>
 <head>
   <style type="text/css">
     ul {
       margin:0;
       padding:0;
     }

       ul li {
        list-style:none;
       }

         ul li a {
           display:block;
           float:left;
           width:100px;
           height:100px;
           margin:10px;
         }

           ul li a img {
             width:100px;
             height:100px;
             border:none;
           }
   </style>
 </head>
 <body>
   <ul>
     <li>
       <a href="#"><img src="http://t1.gstatic.com/images?q=tbn:snOdR_b8x4QfTM:http://www.jasiden.no/bilder/logo_int/buttonBig_green.jpg&t=1" title="download" /></a>
     </li>

     <li>
       <a href="#"><img src="
http://t0.gstatic.com/images?q=tbn:I3T8l_Xi_qTVpM:http://www.axialis.com/objects/ip_icon_03_ButtonDown.png&t=1" title="Yes!" /></a>
     </li>
   </ul>
 </body>
</html>

Lenke til kommentar
WillY-

WillY-

Skrevet
  • Forfatter
Skrevet

Men hvorfor bruke DIV istede? Ser veldig mange andre sider bruker div, men skjønner ærlig ikke hvorfor akkurat det brukes. Man kan jo ikke justere width eller height med dem.. eller dele dem opp. Høres litt knotete ut å drive å forme divs via CSS, når man kan bruke tables å strekke og dra i dem som man vil direkte i f.eks Dreamweaver. Men det hadde jo selvfølgelig blitt lettere å gjøre endringer på layouten senere via CSS...

 

Tar gjerne imot flere nybegynnertips :p

Lenke til kommentar
Warz

Warz

Skrevet
Skrevet (endret)

Vel, jeg ville i hvertfall aldri "strekke og dra" på noe som helst. Bruk en teksteditor og glem WYSIWYG. Du kan forressten uten problemer endre height og width på en div. Et element du bør lære deg er "display", forskjellen på display:block og display:inline ... Dessutten finn ut hva "clear" gjør.

 

Tabeller skal helst bare brukes til å vise data fra tabeller. F.eks noe du henter ut fra en database. Og min erfaring at CSS med DIV fungerer bra til det meste annet. Du må også lære deg float.

Endret av Runar
Slo sammen to innlegg.
Lenke til kommentar
WillY-

WillY-

Skrevet
  • Forfatter
Skrevet

Great.. Nå kom jeg over problemet hvor Firefox viser for mye padding på teksten. Noen som har en kjapp løsning på det? Har sett endel på nettet men finner ingen som fungerer.

 

Tror egentlig jeg burde lage hele sida på nytt, og bruke divs med css istede (hvis det muligens vil skape mindre problemer)...

 

 

Hadde det blitt veldig mye jobb å lage noe slikt med divs? Åssen blir det å dele inn?

post-51807-1282655625,6967_thumb.png

Her har jo jeg da brukt tables :p

Lenke til kommentar
Warz

Warz

Skrevet
Skrevet

Det bør være en grei layout å bruke div på. For å kunne svare på hvorfor paddingen er feil må du nesten poste CSS koden. Men det skal vel bare være å sette padding til 0px. Så kan du skrive vertical-align:top hvis du ønsker at teksten skal være øverst i diven.

 

Men ja, gjør det om til DIVer. Tabell skal ikke brukes til en sånn side.

Lenke til kommentar
Yawa

Yawa

Skrevet
Skrevet

prøv ut noe slkt (.CSS-dokument):

@charset "UTF-8";
/* CSS Document */
#_ELEMENT { height:auto; width:100%; position:relative; float:left; text-align:center; }
#_ELEMENT_alignCenter { height:64px; width:1024px; position:relative; margin:0 auto; text-align:left; }
 #_ELEMENT_left { height:100%; width:192px; position:relative; float:left; }
 #_ELEMENT_center { height:100%; width:640px; position:relative; float:left; }
 #_ELEMENT_right { height:100%; width:192px; position:relative; float:right; }

I .PHP eller .HTML-dokumentet ditt legger du inn dette:

<div id="_ELEMENT">
 <div id="_ELEMENT_alignCenter">
   <div id="_ELEMENT_left"><p> </p></div>
   <div id="_ELEMENT_center"><p> </p></div>
   <div id="_ELEMENT_right"><p> </p></div>
 </div><!--  #_ELEMENT_alignCenter  -->
</div><!--  #_ELEMENT  -->

I dette eksempelet har jeg delt siden inn i 3 kolonner (_LEFT, _CENTER, _RIGHT)

Jeg har justert innholdet til midten av nettleseren/skjermen

Det er definert bredder på kolonnene

En høyde er også satt...

 

Prøv deg litt frem og se hordan du kan lage noe lignende med CSS som passer til ditt oppsett.

 

Husk!

Alt handler om <div>'s når det kommer til elementer.

 

et element/boks til en knapp kan lages slik: (en grønn, medium, knapp med runde kanter)

.button { height:48px; width:112px; position:relative; float:left; background-color:#669933; padding:8px; border:1px solid #000000; -moz-border-radius:8px; -khtml-border-radius:8px; -webkit-border-radius:8px; margin:0 4px; text-align:center; }

NB! Kun et eksempel...

Lenke til kommentar
Warz

Warz

Skrevet
Skrevet

Det er litt dumt å bruke navn som "left", "right" osv i HTMLen. Plutselig en dag finner du ut at du vil bytte høyre menyen med venstre f.eks og da skal det ikke være nødvendig å gå inn i koden for å endre det. Typiske klassenavn som kan brukes er wrapper, content, sidebar-1, sidebar-2 og lignende. Og header, footer noe som sannsynligvis aldri vil mikses om :p

Lenke til kommentar
Yawa

Yawa

Skrevet
Skrevet

vil bare legge til at dette var ment som illustrasjon, så jeg slapp å bruke lange-forklarende setninger...

 

Og jeg er helt enig meg deg.

Under koding/programmering er det en ting som er sikkert: Generalisering, Generalisering og Generaliserer.

Gjør dine koder etc. så universale som mulig.

Sørg for å kunne bruke de samme "navnene" om igjen og om igjen ved å la dem være variable i bruk. Så mye det lar seg gjøre...

 

Igjen, lykke til videre...

Lenke til kommentar
WillY-

WillY-

Skrevet
  • Forfatter
Skrevet

Takker så mye Yawa! Det gjorde ting klarere. Men synes detta er litt mer knotete enn å bruke tables. Kanskje bare fordi jeg ikke skjønner det helt enda :p Og nå så nekter vertical-align:middle; å virke! Som på bilde:

post-51807-1282743998,6233_thumb.png

 

<div id="BACKGROUND">
 <div id="TOP_Left"><a href="http://www.agenius.no"><img src="http://www.4trav.com/common/Agenius_Logo.png"></a></div>
 <div id="TOP_Mid">   
  <a href="us/default.html"><img src="http://www.4trav.com/common/4trav_webUSA.png"></a>
  <a href="uk/default.html"><img src="http://www.4trav.com/common/4trav_webUK.png"></a>
  <a href="uk/default.html"><img src="http://www.4trav.com/common/4trav_webAU.png"></a>
  <a href="us/default.html"><img src="http://www.4trav.com/common/4trav_webCA.png"></a>
  <a href="fr/default.html"><img src="http://www.4trav.com/common/4trav_webFr.png"></a>
  <a href="de/default.html"><img src="http://www.4trav.com/common/4trav_webGer.png"></a>
  <a href="nl/default.html"><img src="http://www.4trav.com/common/4trav_webNL.png"></a>
  <a href="it/default.html"><img src="http://www.4trav.com/common/4trav_webIT.png"></a>
  <a href="es/default.html"><img src="http://www.4trav.com/common/4trav_webES.png"></a>
  <a href="no/default.html"><img src="http://www.4trav.com/common/4trav_webNor.png"></a>
  <a href="se/default.html"><img src="http://www.4trav.com/common/4trav_webSE.png"></a>
  <a href="dk/default.html"><img src="http://www.4trav.com/common/4trav_webDK.png"></a>
  <a href="fi/default.html"><img src="http://www.4trav.com/common/4trav_webFin.png"></a>
 </div>
 <div id="TOP_Right"><a href="../../default.html"><img src="http://www.4trav.com/common/4trav_weblogo2.png"></a></div>
</div>

 

#TOP_Left { height:52px; width:20%; float:left; text-align:left; vertical-align:middle; }
#TOP_Mid {  height:52px; width:60%; float:left; text-align:center; vertical-align:middle; }
#TOP_Right { height:52px; width:20%; float:right; text-align:right; vertical-align:middle; }

 

Hva er det som gjør at vertical-align:middle: ikke virker..?

Lenke til kommentar
Yawa

Yawa

Skrevet
Skrevet

du kan ikke benytte "vertical-align". Du må bruke padding: ?px 0;

 

VIKTIG!

du må trekke fra x-ant. px fra "height: ;" som du legger i padding.

 

eks:

 

height: 100px; padding:10px 0;

 

Dette utgjør at boksen din blir 120px i høyden.

For at dette fortsatt skal være 100px må du sette height til 80px...

 

Det er en vanesak og benytte <div>'s og CSS... Og mye mer korrekt

Du vil se på sikt at det er MYE lettere å jobbe med...

Lenke til kommentar
WillY-

WillY-

Skrevet
  • Forfatter
Skrevet (endret)

Ser ut til å fungere bra det her. Ble mye enklere når jeg forstår det. Men nå driver Dreamweaver og tuller:

post-51807-1282832499,0039_thumb.png

All browserne viser riktig, og med LiveView på. Håper det ikke er noe problem da siden det bare er i Design view? :S

 

edit: Åssen programmer bruker dere egentlig?

Endret av WillY-
Lenke til kommentar
Yawa

Yawa

Skrevet
Skrevet

jeg bruker Adobe Dreamweaver da, men kun red koding da det gjør økten mer efektiv med code-hints /automatisering etc. samt snippetsa...

 

Ser du som du har noe float:;'ing problem der. du kan prøve *clearfix*...

/* clearfix */
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;
}
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...