Søg
Avatar billede the_edge Nybegynder
22. april 2007 - 14:37 Der er 21 kommentarer og
1 løsning

<p> tags giver en break

Hejsa

Hvordan får jeg ændret så min <p> tags ikke giver en break. har prøvet at ændre margin: -2px; men så trækker den det hele sammen.
Avatar billede mclemens Nybegynder
22. april 2007 - 14:48 #1
float:left; , float:right; eller display:inline;
Jeg anbefaler dog at du vælger et element der er
inline istedet, hvis du ikke skal bruge break.
Avatar billede the_edge Nybegynder
22. april 2007 - 15:06 #2
nu har jeg prøvet lidt med begge, men hvorfor rykker de hele tiden til venstre lige meget hvad jeg gør. det er denne linje her
echo '<td><p class="nyhederdato1">'.$date.'</p><p class="nyhederdato2"> '.$row["forfatter"].'</p></td>';

jeg vil have date i midten og forfatter til højre
Avatar billede mclemens Nybegynder
22. april 2007 - 15:33 #3
Tjah, så kan du vel bruge display:inline; ...
... Men, som jeg skrev så anbefaler jeg at du
vælger at bruger et element der passer til
dit behov som f.eks. et span element ...

- Du kan selvfølgelig også kaste noget margin
left / right (eller padding) på de to elementer
samtidig med float:left eller right og så få
det til at se ud som du ønsker, uden brug
af andet element eller display:inline.
Avatar billede mclemens Nybegynder
22. april 2007 - 15:40 #4
... Eksempel:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
td {width:300px;background:red;text-align:center;}
p {display:inline;}
</style>

</head><body><table><tr>
<td><p>date</p><p>forfatter</p></td>
</tr></table>

<table><tr>
<td><span>date</span><span>forfatter</span></td>
</tr></table>
</body></html>
Avatar billede madeindk Nybegynder
22. april 2007 - 16:16 #5
Sæt margin:opx; på :)
Avatar billede madeindk Nybegynder
22. april 2007 - 16:16 #6
* Sæt margin:0px; på.
Avatar billede mclemens Nybegynder
22. april 2007 - 16:42 #7
Spørsgmåls quote: "<p> tags giver en break
... har prøvet at ændre margin: -2px; men så trækker den det hele sammen."

- Umiddelbart går jeg udfra at problemet er at to p elementer
breaker ... altså at de er block elementer og derfor ikke står
udfor hinanden, men istedet står under hinanden og at det mere
er problemet med block tildelingen end problemet med margin.
Avatar billede the_edge Nybegynder
22. april 2007 - 16:56 #8
ja altså det er det der er problemmet. de skulle stå på samme linje men kom hele tiden under hinanden. hvordan ændre man block tildelingen ?
Avatar billede mclemens Nybegynder
22. april 2007 - 16:57 #9
Har du læst 22/04-2007 15:33:34 ?

- Du angiver p {display:inline;}
... Men som nævnt anbefaler jeg at
du vælger et andet element, f.eks.
span som i 22/04-2007 15:40:19.
Avatar billede the_edge Nybegynder
22. april 2007 - 17:24 #10
jo jeg har læst det men tror bare ikke jeg forstår det helt.

nu har jeg prøvet følgene
<td><p>date</p><p>forfatter</p></td>
<td><span>date</span><span>forfatter</span></td>

og men det virker ikke efter hensigt. Selv om jeg går ind og definere det i css, så kommer de på samme linje men, det bliver smidt til venstre jeg kan ikke få dato i center og forfatter til højre.. er det mig der er helt væk ?
Avatar billede mclemens Nybegynder
22. april 2007 - 17:41 #11
Du har ikke taget den text-align:center; med på den ydre td,
men når du skal have centreret den ene og højre justeret den
anden er det nok mere noget i denne stil du skal bruge:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.tden {width:300px;background:red;}
.pr {position:relative;}
.date {margin:0px auto;width:100px;background:blue;}
.writer {position:absolute;right:0px;top:0px;}
</style>

</head><body><table><tr>
<td class="tden"><div class="pr"><p class="date">date</p><p class="writer">forfatter</p></div></td>
</tr></table>

</body></html>

- Vær dog opmærksom på at hvis forfatter bliver for lang ryger
teksten ind under dato og du kan så ikke se forfatterens navn længere.
En alternativ løsning kunne være at lege med f.eks. margin eller padding:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.tden {width:300px;background:red;}
.date {float:left;padding-left:125px;width:50px;}
.writer {float:right;}
</style>

</head><body><table><tr>
<td class="tden"><p class="date">date 0 0</p><p class="writer"> . .. .. . . .forfatter</p></td>
</tr></table>

</body></html>
Avatar billede the_edge Nybegynder
23. april 2007 - 19:29 #12
hey der kan man bare se det nedester eksempel virked :) du skal have tusind tak for din hjælp og din tålmodighed :)

hvad er det lige dette gør {float:left;padding-left:125px;width:50px;}
Avatar billede the_edge Nybegynder
23. april 2007 - 19:31 #13
tror jeg var lidt for hurtig :) den stiller datoer sådan her nu ? nogen gode forslag 

16
-
04
-
07
Avatar billede mclemens Nybegynder
23. april 2007 - 19:35 #14
float:left; - Elementet "flyder" til venstre.
padding-left:125px; - Elementet har 125px indhold ekstra i venstre side.
width:50px; - Elementet er 50px bredt.

... Det ses nok bedst ved at teste eksemplerne:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

</head><body>
<div style="float:right;background:#ff0;">Flyder til højre (og gul baggrund)</div><br><br>
<div style="float:left;background:#ff0;">Flyder til venstre (og gul baggrund)</div><br><br>
<div style="background:#ff0;">Flyder ingensteder (og gul baggrund)</div><br><br>
<br>
<div style="width:50px;background:#ff0;">50px bredt (og gul baggrund)</div>
<div style="width:50px;padding-left:125px;background:#ff0;">50px bredt, 125px left padding (og gul baggrund)</div>
</body></html>
Avatar billede mclemens Nybegynder
23. april 2007 - 19:37 #15
"tror jeg var lidt for hurtig :) den stiller datoer sådan her nu ? nogen gode forslag"
Ja, udvid width (bredden) så datoen har mere plads at stå på ...
f.eks.: .date {float:left;padding-left:100px;width:100px;}
- Justeret padding ned, så den stadig skulle være centreret.
Avatar billede mclemens Nybegynder
23. april 2007 - 19:40 #16
- Husk dog på at ved brug af den nederste af løsningerne i 22/04-2007 17:41:16
vil forfatter hoppe ned, hvis der ikke er plads til hele forfatterens navn.
Udvid evt. selve boksen .tden {width:300px;background:red;} for at kompensere
for forfatternavnets længde, eller sæn padding på date ... det kan dog påvirke
centreringen hvis tallene ikke er balanceret af med hinanden.
Avatar billede the_edge Nybegynder
23. april 2007 - 19:43 #17
okay takker :)
Avatar billede the_edge Nybegynder
23. april 2007 - 19:52 #18
nej den flytter sig bare :S det er underligt hvis man rykker date helt ud til venstre bliver den vidst korrekt
Avatar billede mclemens Nybegynder
23. april 2007 - 20:00 #19
Ja, og årsagen er at der så ikke er plads til at dato kan være centreret på samme
linje som forfatter, medmindre det står oveni hinanden så man ikke kan se det
(eksempel 1 i 22/04-2007 17:41:16) - ikke så smart. Eller medmindre man gør
elementet som de to ting er i størrer, så der er mere plads til indholdet.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.tden {width:400px;background:red;}
.date {float:left;padding-left:160px;width:80px;}
.writer {float:right;}
</style>

</head><body><table><tr>
<td class="tden"><p class="date">16 - 04 - 07</p><p class="writer"> . .. .. . . .forfatter</p></td>
</tr></table>

</body></html>
Avatar billede the_edge Nybegynder
23. april 2007 - 20:14 #20
ahh tak nu virker det efter hensigt :=)

jeg bruger denne her

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<style type="text/css">
.tden {width:400px;background:red;}
.date {float:left;padding-left:160px;width:80px;}
.writer {float:right;}
</style>

</head><body><table><tr>
<td class="tden"><p class="date">16 - 04 - 07</p><p class="writer"> . .. .. . . .forfatter</p></td>
</tr></table>

</body></html>
Avatar billede mclemens Nybegynder
23. april 2007 - 20:23 #21
Super, og tak for point :o)
Avatar billede the_edge Nybegynder
23. april 2007 - 20:24 #22
det er mig der takker ^.^
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
25 min siden WINDOWS KOMPABILITET Af snestrup2000 i Windows
I går 20:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
20/0714:16 Smartwatch med faldalarm og sos Af hkv i Fitness & Smartwatches
20/0711:23 System til bordreservation Af Strawberry i PHP
White papers
Flere white papers »