Probleem % en vaste breedte

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Robert Deiman

Robert Deiman

12/11/2008 11:06:00
Quote Anchor link
Hoi allen,

ik ben bezig met een lay-out waarbij ik een div (waarin tekst komt) naast een div waarin een afbeelding komt moet plaatsen.
Gezien de lay-out meerekt (liquid) met de grootte van je scherm, en het feit dat de afbeeldingsdiv een vaste breedte heeft, moet dus de div waarin de text staat altijd de ruimte opvullen tot aan de afbeelding.

Hoe doe ik dat? Het wil me nu echt niet lukken.
 
PHP hulp

PHP hulp

29/03/2024 06:49:24
 
Mitchell

Mitchell

12/11/2008 12:09:00
Quote Anchor link
Online voorbeeldje, want uit je tekst kan ik niet echt halen wat je wilt bereiken..
 
Robert Deiman

Robert Deiman

12/11/2008 13:43:00
Quote Anchor link
Ik kan helaas geen online voorbeeld verschaffen, maar ik heb:


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
____________________________
|                  |        |
|   Breedte in %   | pix    |
|__________________|________|


Hopelijk dat het zo wat duidelijker is.
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman
 
Tamara

Tamara

12/11/2008 13:50:00
Quote Anchor link
een div eromheen zetten met width:100% ?

edit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
<div style="width:100%; height:700px;">
<div style="background:#CCC; height:700px;">
<div style="float:right;">
<img src="plaatje.jpg" width="200" height="200" alt="" />
</div>
Test
</div>
</div>


ik ben te lui om de css apart erbij te zetten...
Gewijzigd op 01/01/1970 01:00:00 door Tamara
 
RvW Of toch niet

RvW Of toch niet

12/11/2008 14:09:00
Quote Anchor link
xD heb hem ook gemaakt maar zie al dat het opgelost

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
 body     {
     padding:0px;
    margin: 0px;}
#main   {
    width:100%;
     height: 700px;}
#vullend{ background:#CCC;
          height:700px;}
#vast   {
    width:100px;
    height:100px;
    background-color:#FF0000;
    float:right;}
</style>
<title>Untitled Document</title>
</head>

<body>
<div id="main">
    <div id="vullend">
    <div id="vast"></div>
    In deze tutorial gaan we in op een...
    </div>
</div>
</body>
</html>
 
Robert Deiman

Robert Deiman

12/11/2008 23:01:00
Quote Anchor link
Wat ik nog vergeten was: In de div met variabele breedte gebruik ik een <p> tag. Daar gaat het volgens mij ook op mis. De div met variabele breedte bevat de inhoud van de pagina (de eigenlijke content), welke is opgedeeld in alinea's.

Moet ik daar nog wat mee doen?
 
Mitchell

Mitchell

13/11/2008 11:06:00
Quote Anchor link
Wat je zou kunnen doen is <p><div id="vast"></div>tekst...</p>, want <p> is ook een block element..
 
Robert Deiman

Robert Deiman

13/11/2008 13:09:00
Quote Anchor link
Ik heb 't nu anders opgelost, het is namelijk de bedoeling dat de tekst (los van de afbeelding) in ons cms kan worden gewijzigd. Normaal hou ik niet zo van op deze manier positioneren, maar 't werkt bij mij prima in IE6, IE7 en FF. (de kunst was ook nog dat de div content tekst, voor de layout, altijd 122px vanaf rechts moet staan)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="content_tekst">

                
                <h2>U bekwame vakman voor een beter zicht</h2>
                <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. il molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </p>
                    <p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. il molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
                </p>            
                <div id="photo"><a href="#">
                <img src="bril.png" alt="bril" />
                    <p>Bekijk nu de mogelijkheden</p>

                    </a>
                </div>
    </div>


CSS
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
div.content_tekst{
    position:relative;
    margin-right:122px;
    left:0px;
    overflow:hidden;
    background-color:transparent;
    }

div.content_tekst p{
    position:relative;
    padding-left:15px;
    margin-right:360px;
    left:0px;
    font-size:12px;
    margin-bottom:15px;
    line-height:22px;
    }
div#photo{
    position:absolute;
    top:35px;
    right:0px;
    }
div#photo p{
    margin-right:0px;
    text-align:right;
    color:#ff0024;
    font-weight:bold;
    font-size:16px;
    }


edit:
Voor IE6 moest ik wel een kleine hack toepassen (de right moet daar op 122px staan) verder helemaal niets aan hoeven doen.

Toch erg bedankt voor het meedenken!
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.