divs naast elkaar in css

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Willem van weesenbeek

willem van weesenbeek

09/07/2009 01:01:00
Quote Anchor link
zoals je kunt zien ben ik op www.koksgevraagd.nl met divs bezig. maar zoals je ook kunt zien worden de divs te groot als er veel tekst in komt nu wil ik dat alles netjes onder elkaar komt en de tekst binnen de div past zonder lelijke vervormingen van de website.

Quote:
Heeft niets met php te maken.
Topic verplaatst naar Webdesign.

SanThe.
Gewijzigd op 01/01/1970 01:00:00 door Willem van weesenbeek
 
PHP hulp

PHP hulp

28/03/2024 20:00:34
 
Mitchell

Mitchell

09/07/2009 01:23:00
Quote Anchor link
Lijkt me sterk dat je ooit zo'n lang woord gaat gebruiken, anders kan je hem met php breken of gewoon niet laten zien doormiddel van css (overflow: hidden).
 
Willem van weesenbeek

willem van weesenbeek

09/07/2009 01:25:00
Quote Anchor link
het is om te testen dat alles netjes blijft.
 
Tamara

Tamara

09/07/2009 09:09:00
Quote Anchor link
het langste nederlandse woord bestaat uit ongeveer 35-40 letters :P
 
Vdleije .

vdleije .

09/07/2009 09:29:00
Quote Anchor link
Ja, maar als het onwaarschijnlijk is dat je zulke lange woorden gebruikt, dan breekt hij niet open. Gebruik maar eens lipsum: http://www.lipsum.com/feed/html

Daar kan je voorbeeldtekst mee creëren om te kijken hoe je layout met tekst eruit komt te zien. Je zult zien dat deze netjes binnen de DIV blijft, aangezien hij split op kleine woorden.
 
Willem van weesenbeek

willem van weesenbeek

09/07/2009 23:00:00
Quote Anchor link
maar dan het volgende probleem hij trekt de overige div's niet naar beneden

zie website
 
Wouter De Schuyter

Wouter De Schuyter

09/07/2009 23:24:00
Quote Anchor link
Je moet het probleem niet negeren maar oplossen!

Vb: http://paradox-productions.net/projects/divsnaastelkaar/divsnaastelkaar.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!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" />
<title>css divs naast elkaar</title>
<style type="text/css">
body {
    color: #222;
    font-family: Lucida Grande, Lucida Sans Unicode, Lucida Sans, Arial, Helvetica, sans-serif;
    font-size: 12px;
}
div.container p {
    padding: 10px 5px;
    line-height: 20px;
}
div.container {
    width: 1000px;
    margin: 5px auto;
    border: 1px solid #AAA; /* VOOR DUIDELIJKHEID */
    background: #EEE; /* VOOR DUIDELIJKHEID */
}
div.leftcontent {
    width: 300px;
    margin: 0px; /* RESET CSS */
    padding: 0px; /* RESET CSS */
    float: left;
    background: #CCC; /* VOOR DUIDELIJKHEID */
}
div.rightcontent {
    width: 700px;
    margin: 0px; /* RESET CSS */
    padding: 0px; /* RESET CSS */
    float: right;
    background: #DDD; /* VOOR DUIDELIJKHEID */
}
.clear {
    clear: both;
}
</style>
</head>
<body>
<div class="container">
    <div class="leftcontent">
      <h2>Lipsum</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam mattis  condimentum imperdiet. Quisque mattis euismod aliquet. Curabitur  pellentesque lacus sit amet ante luctus adipiscing. Aliquam ultricies  consequat neque, eget rhoncus enim facilisis ut. Fusce lobortis  vulputate purus vitae scelerisque. Nunc nulla est, mattis quis pharetra  vitae, consectetur sagittis tellus. Donec in mi non enim venenatis  egestas non et felis. Nunc consectetur nisi ut purus lacinia sit amet  varius tellus consectetur. Integer tristique, tortor sit amet tincidunt  gravida, tellus felis euismod sem, vitae mollis ligula est ut erat.  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices  posuere cubilia Curae; Praesent tellus ante, dapibus ac fermentum  vitae, posuere non purus. Nulla dignissim pretium lectus, quis blandit  turpis ornare quis. Proin vitae massa quis nulla mollis vestibulum. In  nisl mauris, faucibus quis scelerisque eu, auctor pretium tellus.  Pellentesque vitae quam quis eros scelerisque iaculis id sed turpis.  Fusce non ante vel quam scelerisque iaculis.</p></div>
    <div class="rightcontent">
      <h1>Lipsum</h1>
      <p>Integer a quam sit amet est scelerisque euismod et sit amet mi. Aliquam nulla nisi, tincidunt sodales fringilla in, facilisis eget mauris. Etiam sit amet mi nisl. Morbi aliquet ligula vel sem ultrices condimentum non nec nunc. Pellentesque non tortor augue, in sodales tellus. Donec eu consequat dolor. Integer dictum erat ut augue elementum pellentesque. Duis sem metus, laoreet ut euismod sit amet, mollis et diam. Duis vel ligula in dolor tincidunt posuere in quis massa. Etiam mollis mi a risus consequat eu accumsan odio pretium. Suspendisse hendrerit luctus turpis, quis facilisis nibh interdum in. Sed a arcu quis tortor semper ornare. Nulla vel lorem orci. Praesent placerat odio et purus blandit aliquet.</p>
      <p>Etiam volutpat, risus id sagittis ultrices, enim eros blandit nulla, vitae placerat velit nisl non libero. Aenean ut risus sapien. Etiam condimentum velit quis nisi malesuada ultricies. Proin nec rutrum mauris. Pellentesque in eros non mauris placerat rutrum at sed nisl. Vivamus rutrum suscipit risus vel tincidunt. Vivamus tristique metus a nunc vehicula condimentum. Fusce purus lorem, mattis at sodales eu, gravida feugiat est. Quisque dignissim lacus vel magna aliquam ultrices. Sed ornare posuere tortor id semper. Suspendisse ullamcorper, metus quis dapibus placerat, nisl lorem auctor metus, vel fermentum velit ante nec nisl. Vivamus porta arcu eu eros feugiat a feugiat arcu blandit.</p>
      <p>Quisque sed turpis eget odio scelerisque porttitor. Morbi id placerat libero. Quisque metus est, dictum a congue facilisis, faucibus in sem. Etiam felis ante, vulputate vel convallis et, hendrerit quis neque. Phasellus condimentum placerat nunc quis vehicula. Praesent rhoncus quam sed mi pretium non aliquam est euismod. Integer et interdum nulla. Ut et velit id turpis eleifend pellentesque condimentum ut velit. Mauris sollicitudin ultrices justo, ac euismod ante malesuada nec. Aliquam malesuada est vel eros mattis convallis. Quisque mattis sollicitudin blandit. Donec ornare posuere purus, eget luctus purus imperdiet sit amet. Ut ac mi orci, a mattis lorem. </p>
    </div>
    <div class="clear"></div>
</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Wouter De Schuyter
 
Pieter Jansen

Pieter Jansen

10/07/2009 00:41:00
Quote Anchor link
Niet echt ontopic, maare.. wat een crappy site man.. Heb je weleens naar je bron gekeken? Overal, maar dan ook OVERAL inline css.. Bovendien is het ook nog eens allemaal tables. Ik bedoel, dude, seriously.. Nu mag het wel AJAX zijn, maar echt, dat moet veranderd worden hoor.
 



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.