h1 og paragraf issue

Her kan du stille og svare på spørgsmål omkring CSS
Besvar
cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:
h1 og paragraf issue

Indlæg af cristian » 25. okt 2013, 12:05

Det virker åndsvagt.

Jeg har en tabel som er som følger

Kode: Vælg alt

<div style="display: table; width:100%;" class="table">

<div style="display:table-row"; class="row">

<div style="display: table-cell; width:25%, background-color:green;" class="cell1">

<h1>tekst</h1>

</div>

<div stule="display: table-cell; width:75%; background-color:yellow;" class="cell2">

<p>noget prøve tekst</p>

</div>

</div>

</div>
Problemet er at teksten i cell1, laver noget der ligner en padding på toppen af paragraf teksten i cell2. Altser teksten ligger sig ikke helt op af divens top i cell2 men det gør den i cell1.
Og jeg fatter ikke ligeeeeee hvorfor.

Samtidig bruger jeg et reset css

Kode: Vælg alt

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
Og når jeg kikker med firefox webudvikler værktøjet og kikker på boks model. Så er der ingen padding på paragraf teksten der burde fremkomme overstående.
Så jeg undrer mig, hvorfor kan tekst i cell1 skubbe tekst i cell2 ned fra toppen af diven?? Så det ligger der er en padding på toppen af teksten.

Og hvordan gør jeg så det ikke forekommer?

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: h1 og paragraf issue

Indlæg af Daniel » 25. okt 2013, 12:38

Når jeg tester det i jsFiddle, så ser det ud til at virke fint nok. :)

Du er kommet til at skrive u i stedet for y i denne linje, måske det hjælper:

Kode: Vælg alt

<div stule="display: table-cell; width:75%; background-color:yellow;" class="cell2">
Men hvorfor lave en table ud af divs og så style dem, ville det ikke være lige så nemt at lave dem som almindelige tables i stedet? :)

cristian
Moderator
Moderator
Indlæg:882
Tilmeldt:26. sep 2011, 21:31
Kontakt:

Re: h1 og paragraf issue

Indlæg af cristian » 25. okt 2013, 14:49

Danielh007 skrev:Når jeg tester det i jsFiddle, så ser det ud til at virke fint nok. :)

Du er kommet til at skrive u i stedet for y i denne linje, måske det hjælper:

Kode: Vælg alt

<div stule="display: table-cell; width:75%; background-color:yellow;" class="cell2">
Men hvorfor lave en table ud af divs og så style dem, ville det ikke være lige så nemt at lave dem som almindelige tables i stedet? :)
Det med style er bare mig der ikke kan stave :) Skrev det ind i kode feltet i stedet for at kopier det.
Men du kan se hvad jeg mener her.

http://mnrb.dk/

Det ligner cell2 teksten har en padding der skubber det ned fra toppen af diven.
Men hvorfor lave en table ud af divs og så style dem, ville det ikke være lige så nemt at lave dem som almindelige tables i stedet? :)
Sådan har jeg altid gjort :) Og mener også der er flere style options når du laver det på denne måde. Kontra almindelige tabeller.

Brugeravatar
Daniel
Admin
Admin
Indlæg:625
Tilmeldt:14. jun 2011, 09:27
Geografisk sted:Danmark, Fyn, Nørre Aaby
Kontakt:

Re: h1 og paragraf issue

Indlæg af Daniel » 25. okt 2013, 17:15

Hmm, det er godt nok noget underligt det der.
Jeg prøvede lige for sjov at lave h1 elementet om til et p element i stedet, den side stod stadig oppe i toppen, men den anden side var som før nede i bunden.
Så prøvede jeg at lave dem begge om til span elementer, da det ikke er blok elementer som p elementerne, men det gav fuldstændig samme resultat.
Så har jeg prøvet at fjerne CSS reset filen, og så style det hele selv, det gav også samme problem.
Så indtil videre må jeg lige melde pas, men tænker da over problemet, får lige gæster i aften, så nok først i morgen jeg får fundet en løsning, hvis jeg da kan. ;)
cristian skrev:Sådan har jeg altid gjort :) Og mener også der er flere style options når du laver det på denne måde. Kontra almindelige tabeller.
Nok mig der bare er gammeldags, forvirre mig selv når nogle gør noget nyt og spændende som jeg ikke selv normalt ville gøre! :D

Besvar