Div probleem
Ik heb expres een template gebruikt om al zoveel mogelijk gepruts met div te voorkomen, maar het is nu uit eindelijk zover.
Het gaat over dit stuk code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php
echo '<div id="rightscontent">';
echo '<div class="post">';
echo '<h2 class="title">' . $result->titel . '</h2>';
echo '<p class="byline"></p>';
echo '<div class="entry">';
echo '<div class="leftsentry"><p>' . $result->beschrijving . ' ...</p></div>';
echo '<div class="rightsentry"><IMG SRC="images/armbanden/tumb-' . $result->id .'.jpg" TITLE="' . $result->titel . '" ALIGN="right"></div>';
echo '</div>';
echo '<p class="meta"><a href="?p=gallery&n=2&id=' . $result->id . '" class="more">Bekijk</a></p>';
echo '</div>';
echo '</div>';
?>
echo '<div id="rightscontent">';
echo '<div class="post">';
echo '<h2 class="title">' . $result->titel . '</h2>';
echo '<p class="byline"></p>';
echo '<div class="entry">';
echo '<div class="leftsentry"><p>' . $result->beschrijving . ' ...</p></div>';
echo '<div class="rightsentry"><IMG SRC="images/armbanden/tumb-' . $result->id .'.jpg" TITLE="' . $result->titel . '" ALIGN="right"></div>';
echo '</div>';
echo '<p class="meta"><a href="?p=gallery&n=2&id=' . $result->id . '" class="more">Bekijk</a></p>';
echo '</div>';
echo '</div>';
?>
Je kunt het voorbeeld zien @ http://monkey.trabot.net/?p=gallery&n=2
Zoals je ziet komt het plaatje niet netjes tussen de twee lijnen, zoals de tekst.
Het css gedeelte is als volgt:
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
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
.post {
padding: 0 0 20px 0;
}
.title {
margin: 0;
border-bottom: 2px solid #4A3903;
}
.byline {
margin: 0;
}
.meta {
border-top: 1px solid #4A3903;
text-align: right;
color: #646464;
}
.meta a {
padding-left: 15px;
background: url(images/img06.gif) no-repeat left center;
font-weight: bold;
}
#leftscontent {
float: left;
width: 350px;
}
#rightscontent {
float: right;
width: 350px;
}
.leftsentry {
width: 250px;
}
.rightsentry {
float: right;
width: 100px;
}
padding: 0 0 20px 0;
}
.title {
margin: 0;
border-bottom: 2px solid #4A3903;
}
.byline {
margin: 0;
}
.meta {
border-top: 1px solid #4A3903;
text-align: right;
color: #646464;
}
.meta a {
padding-left: 15px;
background: url(images/img06.gif) no-repeat left center;
font-weight: bold;
}
#leftscontent {
float: left;
width: 350px;
}
#rightscontent {
float: right;
width: 350px;
}
.leftsentry {
width: 250px;
}
.rightsentry {
float: right;
width: 100px;
}
Edit: Ik vind het trouwens echt een supermooie layout :)
Gewijzigd op 01/01/1970 01:00:00 door Jurgen assaasas
Als ik in firefox het bekijk, komt het plaatje rechts van "Bekijk". Het moet rechts van de beschrijving komen, tussen de twee lijntjes. In IE komt "Bekijk" ter hoogte van het midden van het plaatje. Ook dit is niet goed. Het plaatje moet eigenlijk gewoon boven "Bekijk" staan, tussen de twee lijnen.
Hoop dat je het zo snapt.
misschien dit eens even proberen, ik weet het ook niet zeker hoor. Kijk eens even wat het doet.
Code (php)
1
2
3
2
3
.rightsentry img{
margin-top: 15px;
}
margin-top: 15px;
}
Gewijzigd op 01/01/1970 01:00:00 door Mr.Moe
Heeft dit iets te maken met position relative/absolute? En zoja, hoe werkt het dan precies, want ik heb nogal wat div's in elkaar, dus welke div moet dan de container worden? (waarschijnlijk die met de lijn?)
Edit: In IE ziet het er naar uit dat het plaatje onder een ander div schiet (overlapt). Kan het dus zijn dat het niet werkt doordat mijn leftsentry te breed is?
Edit2: Ik heb de negatieve margin weggehaald, nu doet hij in IE alles wel tussen de twee lijnen weergeven, maar niet op de zelfde hoogte.
In FireFox staat hij nu weer onder de lijn.
Gewijzigd op 01/01/1970 01:00:00 door Steven Hack
Container moet volgens mij inderdaad die div zijn met de lijn, maar schiet me niet dood als het niet zo is he.
groeten Thomas
Alle hulp is welkom. Sorry voor de bump maar mijn vorige post loopt nogal vol van mijn edits.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
echo '<div id="leftscontent">';
echo '<div class="post">';
echo '<h2 class="title">' . $result->titel . '</h2>';
echo '<p class="byline"></p>';
echo '<div class="entry">';
echo '<div class="sentry">';
echo '<div class="entryspace"></div>';
echo '<div class="leftsentry"><p>' . $result->beschrijving . ' ...</p></div>';
echo '<div class="rightsentry"><IMG SRC="images/armbanden/tumb-' . $result->id .'.jpg" TITLE="' . $result->titel . '"></div>';
echo '<div class="entryspace"></div>';
echo '</div>';
echo '</div>';
echo '<p class="meta"><a href="?p=gallery&n=2&id=' . $result->id . '" class="more">Bekijk</a></p>';
echo '</div>';
echo '</div>';
?>
echo '<div id="leftscontent">';
echo '<div class="post">';
echo '<h2 class="title">' . $result->titel . '</h2>';
echo '<p class="byline"></p>';
echo '<div class="entry">';
echo '<div class="sentry">';
echo '<div class="entryspace"></div>';
echo '<div class="leftsentry"><p>' . $result->beschrijving . ' ...</p></div>';
echo '<div class="rightsentry"><IMG SRC="images/armbanden/tumb-' . $result->id .'.jpg" TITLE="' . $result->titel . '"></div>';
echo '<div class="entryspace"></div>';
echo '</div>';
echo '</div>';
echo '<p class="meta"><a href="?p=gallery&n=2&id=' . $result->id . '" class="more">Bekijk</a></p>';
echo '</div>';
echo '</div>';
?>
en de css:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.sentry {
width: 350px;
}
.entryspace {
clear: both;
}
.leftsentry {
width: 150px;
float: left;
}
.rightsentry {
width: 100px;
float: right;
padding-top: 5px;
}
width: 350px;
}
.entryspace {
clear: both;
}
.leftsentry {
width: 150px;
float: left;
}
.rightsentry {
width: 100px;
float: right;
padding-top: 5px;
}