13. januar 2004 - 16:15Der er
17 kommentarer og 1 løsning
Problem med padding
Jeg har en css hvor jeg har defineret en padding på 5 pixels, i en class. Det virker fint, men jeg kan ikke helt blive klog på det! Jeg har defineret min tabelcells/rows i pixels og det virker også fint, men attacher jeg class til de celler jeg ønsker forskyder den nogle af cellerne med en pixel eller to.
Forslag til hvad der kan være galt? Og er der evt. andre måder hvorpå jeg kan definere en padding/margin? (jeg har ikke CSS ved mig - først i aften)
det er selvfølgelig lidt svært at løse problemmet uden noget kode - så hvis du i hvert fald kunne vise den i aften eller sådan noget, så ville det være meget lettere.
Problemmet opstår nok med nogle mål der falder uheldigt ud i dit tilfælde, så mon ikke der bare skal justeres noget, medmindre tabellen er lavet på en mærkelig måde.
Hvis du bruger IE til at se arbejdet med så har du problemer. Det er et generelt problem med padding og margins på celler i tabeller. Eller rettere generelt. Et godt råd for at undgå de vilde problemer, er at lave padding på de indre elementer og "kun" bruge tabellen som skelet. css kunne se således ud
td.(class på en celle) * { padding-left:x px; padding-right: x px; } eller blot
#idnavn * {}
Så vil alle elementer indeni den celle have en venstre og højre indrykning på x px.
exp - span class´en rykker kun min første linie - resten af teksten rykkes ikke.
claus_jac - jeg får nøjagtig samme effekt ved defination direkte på cellen som jeg gør ved defination på td/table tagget. Den rykker simpelthen hele den tabel hvor den celle jeg sætter padding på, er indeholdt i.
Kan det have noget at gøre med at jeg køre med celler og rækker på fx. 4px højde/bredde? (ja, det kan det selvføleglig, men det burde det da ikke have i jeres tilfælde!?)
OK mikaelo du misforstod mig en lille smule. Du skal ikke bruge tabellen eller cellen. du definerer din celle som eks. navigation således #navigation {} som sådan skal der ikke være noget deri. For at få elementerne til at makke ret skal du skrive #navigation * eller nogle bruger #navigation>* {} efter du har lavet #nav... Det betyder at du ikke laver noget på cellen eller tabellen, men kun vil have indholdet i den angivne celle til at makke ret.
<html> <head> <title>Untitled</title> <style type="text/css"> table { width:500px; background-color:#ccc; padding:0; margin:0; text-align:left; } #content { vertical-align:top; } #content * { padding:0px; } </style> </head> <body> <table> <tr> <td id="content"><p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima.</p></td> </tr> </table> </body> </html>
MEN (!) det virker kun på "toppen af min side". Det er sådan at jeg har en top tabel med en masse celler (og det er så her, det virker!), nedenunder en ny tabel med en masser celler og rækker (og det er så her det ikke virker). Når jeg sætte id på den pågældende celle i den nederste tabel, rykker den hele tabellen/indholdet af tabellen/den celle det nu drejer sig om, med 1-4 pixels (er lidt svært at se;))
Mine tabeller og celler hænger ikke sammen på nogen speciel anderledes måde, men det virker altså bare ikk på selve indholdstabellen (den nederste)
har du husket at tjekket antallet af rækker og søjler. altså om antallet af celler passer hele vejen igennem. og ikke mindst skal du jo huske på, at ALLE celler i den pågældende celle arver det skal du selvfølgelig også tage højde for hvis du har nogle celler der har absolut bredde (altså sat med width.) fordi IE og andre browsere måler afstandene på mere eller mindre rigtig måde. et er et gedemarked. Nu ved jeg ikke hvilket program du bruger til at kode i, men htmlkit (www.chami.com/html-kit) har faktisk en "tabeleditor" plugin hvor du istedet for en tabel, laver <divs>, præcis som du ville opbygge en tabel. Når tabeller skal laves er det ofte en rigtig god ting at lave dem visuelt fordi det giver et bedre overblik.
det passer perfekt hele vejen igennem og de to tabeller er iøvrigt helt uafhængide af hinanden. Jeg bruger Dreamweaver - er fin til at kombinere kode visning med visuelle resultater samtidigt.
Det jeg finder virkeligt mystisk er, at når jeg sætter stylen målrettet på den ene pågældende celle, berører dette resten af tabellen. Det gør den når den er sat på hele tabellen og åebnbart også når paddingen er for stor til en celles definerede vidde (med små celler), men den burde ikke gøre det her! Jeg fatter det ikke - jeg angiver an style for én enkel celle og den burde da derfor bare lave margin indvendig i denne celle - det lader bare til at den lave padding også udvendig også (hvis man kan sige det sådan!);)
Kan du ikke prøve at poste dine tabeller, det er rimeligt svært at danne sig et overblik over hvad det er der går galt. Problemerne kan opstå fordi DW som regel bruger absolutte celler (altså fastsat med width="xxx"), især når man bruger designmode og den kan desværre også lave nogle underlige 1px celler hist og her! det kan give problemer hvis den ikke har nogle steder at gøre af pladsen. (blot for sjovs skyld prøv at give hele tabellen eller td en overflow:hidden i stylesheetet. Så må den ikke rykke på noget. SÅ burde det egentlig være til at finde ud af hvor der sker noget. hvis du har mulighed for at lægge det online, så kan vi også se på det.
claus - jeg fandt ud af det....efter lang tids tjekken-igennem! Det der i bund og grund var fejlen, var at jeg ikke viste at paddingen blev lagt til den absolutte vidde af cellerne og ikke bare automatisk blev "tilføjet"!
:)
tak for din hjælp
Synes godt om
Ny brugerNybegynder
Din løsning...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.