Reactie hoogte (CSS)
iemand ideën?
Ik zelf dacht toch misschien table maar daar wacht ik nog ff mee
Alvast bedankt, Ivo
Gewijzigd op 01/01/1970 01:00:00 door Ivo K
Gesponsorde koppelingen:
Kan je dit iets beter toelichten met misschien een klein code voorbeeld van wat je al hebt?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
echo '<div id=\'reactie\'>';
echo '<div id=\'linksreactie\'>';
echo '<div id=\'reactieid\'>';
echo $id;
echo '</div>';
echo '<div id=\'persoonid\'>';
echo '<a href=\'/forum/files/gebruikers.php/'.$userid.'/\'>'.$naam.'</a>';
echo '<br />';
echo $posts.' posts';
echo '</div>';
echo '</div>';
echo '<div id=\'rechtsreactie\'>';
echo '<div id=\'reactietijd\'>';
echo $datum;
echo '</div>';
echo '<div id=\'reactietekst\'>';
echo $tekst;
echo '</div>';
echo '</div>';
echo '</div>';
?>
echo '<div id=\'reactie\'>';
echo '<div id=\'linksreactie\'>';
echo '<div id=\'reactieid\'>';
echo $id;
echo '</div>';
echo '<div id=\'persoonid\'>';
echo '<a href=\'/forum/files/gebruikers.php/'.$userid.'/\'>'.$naam.'</a>';
echo '<br />';
echo $posts.' posts';
echo '</div>';
echo '</div>';
echo '<div id=\'rechtsreactie\'>';
echo '<div id=\'reactietijd\'>';
echo $datum;
echo '</div>';
echo '<div id=\'reactietekst\'>';
echo $tekst;
echo '</div>';
echo '</div>';
echo '</div>';
?>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
CSS:
#reactie
{
margin-top : 10px;
margin-left : 25px;
width : 550px;
border : 1px solid #aaa;
display : block;
}
#linksreactie
{
height : 150px;
width : 100px;
border-right : 1px solid #aaa;
background-color : #ccc;
}
#rechtsreactie
{
margin-top : -150px;
float : right;
width : 447px;
}
#reactieid
{
font-weight : bold;
}
#reactietijd
{
text-align : right;
font-size : 8pt;
border-bottom : 1px solid #aaa;
height : 14px;
}
#reactietekst
{
font-size : 9pt;
height : 135px;
overflow : auto;
}
#persoonid
{
padding-top : 10px;
padding-left : 10px;
text-align : center;
}
#reactie
{
margin-top : 10px;
margin-left : 25px;
width : 550px;
border : 1px solid #aaa;
display : block;
}
#linksreactie
{
height : 150px;
width : 100px;
border-right : 1px solid #aaa;
background-color : #ccc;
}
#rechtsreactie
{
margin-top : -150px;
float : right;
width : 447px;
}
#reactieid
{
font-weight : bold;
}
#reactietijd
{
text-align : right;
font-size : 8pt;
border-bottom : 1px solid #aaa;
height : 14px;
}
#reactietekst
{
font-size : 9pt;
height : 135px;
overflow : auto;
}
#persoonid
{
padding-top : 10px;
padding-left : 10px;
text-align : center;
}
Ik heb het nu met scrollbars opgelost, maar ik wil dat als ik dus een erg grote reactie invoer dat de div groter wordt.
Gewijzigd op 01/01/1970 01:00:00 door Ivo K
Code (php)
1
2
3
4
2
3
4
#reactietekst
{
font-size : 9pt;
}
{
font-size : 9pt;
}
Zo dus..
Overigens, waarom gebruik je negatieve margins?
Bij dynamische content moet je nooit height of negatieve getallen gebruiken (persoonlijke ervaring).
die negative margins had ik omdat anders de rechterkant eronder komt
Edit: Dat hoef je dus niet meer die lelijke negatieve margin te gebruiken..
Edit 2: Haal ook meteen de width er vanaf. (links reactie)
Edit 3: Plaats op #reactie; "overflow: hidden;" en haal dan eens de height van die tekst houder af..
( Een online voorbeeldje zou ook erg handig zijn.. )
Edit 4: Maak er classes van, aangezien je meerdere reactie's gaat maken op 1 pagina, neem ik aan..
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
heb je ook een oplossing voor het probleem dat hij bij een te lange tekst gewoon buiten het vak doorgaat ?
==edit==
Top!, doet het nu, bedankt
PS; waarom classes ipv id's ? ikzelf zag het verschil niet
Gewijzigd op 01/01/1970 01:00:00 door Ivo K
Ivo schreef op 23.10.2008 12:04:
Edit 3.. Door die overflow:hidden op "reactie", zorgt hij ervoor dat de floats gecleared worden.Ok, bedankt,
heb je ook een oplossing voor het probleem dat hij bij een te lange tekst gewoon buiten het vak doorgaat ?
heb je ook een oplossing voor het probleem dat hij bij een te lange tekst gewoon buiten het vak doorgaat ?
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
Quote:
waarom classes ipv id's ? ikzelf zag het verschil niet
Dat kan véél korter:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<?php
echo '<div class="reactie">';
echo ' <a name="'.$id.'" class="id">' . $id . '</a>';
echo ' <a href="/forum/files/gebruikers.php/'.$userid.'/">'.$naam.'</a>';
echo $posts.' posts';
echo ' <div class=\'rechtsreactie\'>';
echo ' <p class="datum">' . $datum . '</p>';
echo ' <p class="tekst">' . $tekst . '</p>';
echo ' </div>';
echo '</div>';
?>
echo '<div class="reactie">';
echo ' <a name="'.$id.'" class="id">' . $id . '</a>';
echo ' <a href="/forum/files/gebruikers.php/'.$userid.'/">'.$naam.'</a>';
echo $posts.' posts';
echo ' <div class=\'rechtsreactie\'>';
echo ' <p class="datum">' . $datum . '</p>';
echo ' <p class="tekst">' . $tekst . '</p>';
echo ' </div>';
echo '</div>';
?>
Alle tekst staat standaard links, en met id="rechtsreactie" float je de datum en tekst gelijk uit.
Gebruik divs, spans, en p's waar ze voor zijn. Niet alles in divs zetten.
Enige css wat je nu kan toevoegen is: <h3><a><p>
En dan kan er ook een hoop weg.
Een div met id om tekst vet te maken heeft ook geen nut!
En om het ID weer te geven, koppel er gelijk een <a> aan (zonder link), dan kan je ook naar pagina.php#93 gaan, om direct bericht 93 te laten zien.
ID's gebruik je maar 1 keer!
Dus een id="datum" is heel fout, omdat je dat meerdere keren neerzet.
Gebruik dan een class.
Een id="iets" gebruik je maar 1x, zoals hierboven bij $id.
Om je a-tag hoeft geen div-tag te komen.
Gebruik dit soort CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
div.reactie *
{
display: table;
}
div.reactie a.id
{
font-weight: bold;
}
div.reactie div.reactierechts
{
display: block;
float: right;
width: 200em;
}
div.reactie p.datum
{
font-weight: bold;
color: #333;
}
{
display: table;
}
div.reactie a.id
{
font-weight: bold;
}
div.reactie div.reactierechts
{
display: block;
float: right;
width: 200em;
}
div.reactie p.datum
{
font-weight: bold;
color: #333;
}
Helaas wordt :first-child etc nog niet ondersteund, anders zou het nog veel makkelijker/korter kunnen.
Dan zou je namelijk de <p>-tags helemaal geen class/id meer hoeven te geven.
Gewijzigd op 01/01/1970 01:00:00 door Eddy Erkelens
Eddy Erkelens schreef op 23.10.2008 13:29:
Hier had ik hem al op aangewezen, als je het had gelezen zag je ook dat hij het al had ge-edit.ID's gebruik je maar 1 keer!
Edit: Wtf? display: table word nog niet door alle browsers ondersteunt gozer..
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
En ja: jij wees op id/classes verhaal, maar de TS heeft het nog niet gevat en gewijzigd (in de beginpost!). Dus wijs ik hem er nog een keer op.
In het begin-post is het nog steeds id's. Vandaar.
Eddy Erkelens schreef op 23.10.2008 14:34:
Je moet ook altijd nog rekening houden met IE 6.. :)display:table-ondersteuning? Ik dacht dat gewoon CSS 1.1 was en dus ondersteund wordt door alle (fatsoenlijke, moderne) browsers. Zelfs IE7 schijnt het te ondersteunen....
Gewijzigd op 01/01/1970 01:00:00 door - -
iChris schreef op 23.10.2008 14:51:
Gewoon heel IE door de wc spoelen, gezamenlijk met de rest van al die slechte browsers. (Powah to the webdevelopers, lol.)Helaas wel ja... Bannen die hap! (@ IE < 7) Of gewoon gelijk heel IE.... :/
