Avatar billede mikaelo Nybegynder
13. januar 2004 - 16:15 Der 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)
Avatar billede skovenborg Nybegynder
13. januar 2004 - 16:38 #1
Kunne du vise et link til siden du prøver at få til at virke???
Avatar billede mikaelo Nybegynder
13. januar 2004 - 16:40 #2
jeg sidder ikke ved min egen comp. i øjeblikket og siden er ikke online:(
Avatar billede skovenborg Nybegynder
13. januar 2004 - 16:58 #3
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.
Avatar billede mikaelo Nybegynder
14. januar 2004 - 10:54 #4
arh, fik ikk kopieret tingene herind igår! Prøver igen i aften!;) Men er der andre måder man kan lave margin/padding på?
Avatar billede exp Juniormester
14. januar 2004 - 12:19 #5
Du kan omkranse dine tekster med en <span class="td_tekst">tekst</span>

.td_tekst {
margin:5px;
padding:5px;
}
Avatar billede claus_jac Nybegynder
14. januar 2004 - 15:47 #6
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.

Håber det hjælper

Claus
Avatar billede mikaelo Nybegynder
16. januar 2004 - 01:55 #7
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!?)

hjælp:(

;)
Avatar billede mikaelo Nybegynder
16. januar 2004 - 01:57 #8
og det skal siges at min side ser identisk ud i IE, opera og netscape. og jeg får således også de samme fejl...
Avatar billede claus_jac Nybegynder
16. januar 2004 - 08:24 #9
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.

håber det hjælper

Claus
Avatar billede mikaelo Nybegynder
16. januar 2004 - 12:16 #10
åhhh....er ikk sikker på at jeg er helt med!;)

Hvor i HTML´en skal jeg definere min celle som eksempelvis "navigation"? Kan du prøve at skrive en hel kode linie?

forhånd tak
Avatar billede claus_jac Nybegynder
16. januar 2004 - 14:22 #11
i css skriver du blot de ovenstående ting

#nav {
}
#nav * {
padd.....
}

i tabellen

<table>......<tr><td id="nav">indhold</td></tr>......

håber det hjælper

Claus
Avatar billede mikaelo Nybegynder
16. januar 2004 - 14:34 #12
Ok, forstår jeg det rigtigt, når jeg i css´en skriver sådan her:

}
#nav {
}
#nav * {
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
}

og så id="nav" på td som du skriver.


Anyways - der sker ingenting, så jeg må gøre noget forkert/misforstå noget?
Avatar billede claus_jac Nybegynder
16. januar 2004 - 17:40 #13
prøv at skifte lidt med padding i flg kode:

<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>

Claus
Avatar billede mikaelo Nybegynder
17. januar 2004 - 13:47 #14
ok, det virker.....sådan nogenlunde! Dvs. at stylen blev nød til at se sådan ud for at virke:

#content {
padding-left: 3px;
padding-top: 2px;
}
#content * {
padding-left: 0px;
}

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)

Men du kan vel næsten ikke give flere forslag!?;)

tak for hjælpen indtil hvertfald!
Avatar billede claus_jac Nybegynder
18. januar 2004 - 00:01 #15
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.

Håber det hjælper

Claus
Avatar billede mikaelo Nybegynder
18. januar 2004 - 01:19 #16
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!);)

U-n-d-e-r-l-i-g-t, virkeligt....
Avatar billede claus_jac Nybegynder
18. januar 2004 - 19:39 #17
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
Avatar billede mikaelo Nybegynder
26. januar 2004 - 18:38 #18
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
Avatar billede Ny bruger Nybegynder

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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester