[CSS] Tekst om Div (binnen cel) heen

[Verwijderd]

Ik heb in een tabel cel een div geplaatst en deze absoluut gepositioneerd. Gaat prima. Nu type ik text in die cel en wil ik dat de tekst mooi om de div heen loopt. Ben al een tijd aan het zoeken maar kan nog geen oplossing vinden.

Een div ernaast plaatsen voor de tekst is geen optie omdat de tekst er dan echt naast komt en dat wil ik niet. Onder de eerste div moet de tekst gewoon weer in de volle breedte van de cel doorlopen.

Heeft iemand dit al eens bij de hand gehad?

[disjfa]

Niet absoluut positioneren en gewoon je blokjes floaten?

[Verwijderd]

disjfa schreef op vrijdag 24 augustus 2007 @ 12:21:
Niet absoluut positioneren en gewoon je blokjes floaten?

Dan gaat ie waarschijnlijk schuiven in mijn cel op het moment dat ik de pagina resize, ben ik bang.

[OkkE]

Heb je een online voorbeeldje van wat je precies wilt bereiken? Zover ik het nu begrijp, is het prima op te lossen door de DIV een float: mee te geven. Maar dan is het handig een voorbeeldje te zien, hoe het er uit ziet en wat je wil doen.

Verwijderd schreef op vrijdag 24 augustus 2007 @ 13:13:
[...]

Dan gaat ie waarschijnlijk schuiven in mijn cel op het moment dat ik de pagina resize, ben ik bang.

Sja.. Test het eens.

[Verwijderd]

OkkE schreef op vrijdag 24 augustus 2007 @ 13:48:
Heb je een online voorbeeldje van wat je precies wilt bereiken? Zover ik het nu begrijp, is het prima op te lossen door de DIV een float: mee te geven. Maar dan is het handig een voorbeeldje te zien, hoe het er uit ziet en wat je wil doen.

Niet online maar het moet zoiets zijn:

Cel

code:

-------------------------------------------------------------------------------------
|                                      klkgflkflfgkflgkflg        -----------   
|                                      kgfdkjgfkjfgfkdkj          ----------   
|                                      kjkdjffkdjdfkjfdkjf        ----------   
|                                       hjfdkfkdfhdjhfjdfhf       -----------   
|                                      sfakjdfskjfkdfjkdjfkjfkfjfkfkjfjff      
|                                                                                   
------------------------------------------------------------------------------------

Beetje rare tekening maar het hokje (streepjes) rechtsboven is dus de div in de cel en die moet (in deze cel) altijd op dezelfde plaats staan. Ook als ik IE ga resizen.
De tekst moet er zo dus omheen lopen.

Ik kan nu even niet testen maar zal vanavond bovengenoemd idee ook testen

[BasieP]

de container waar het geheel in staat doet niet ter zake. Dit kan een cel zijn of een divje of whatever.

wat je wilt is je divje wat rechtsboven moet rechts floaten, en daarna gewoon je tekst toevoegen.
Dan ben je d'r al

welgeteld 1 regel css

[mithras]

Zo te horen probeer je sowieso al een site in elkaar te hacken met een tabel. Mijn eerste reactie: NIET DOEN!

Probeer een webpagina op te bouwen met semantisch correcte elementen. Gebruik <h1> t/m <h4> voor koppen en <p> voor blokken tekst. En positioneer je elementen als een <div> netjes met css gestyled. Probeer niet non-tabularaire data in een tabel te proppen, want dat maakt je pagina al per definitie fout.

Verder op je vraag ingaande: je moet het blok inderdaad floaten, eventueel met een overflow attribute op het parent element.

[disjfa]

Ik zou twee regels doen. Een beetje padding aan de linker en onderkant erbij, maar die is natuurlijk alleen voor visuele aspecten

[Verwijderd]

mithras schreef op vrijdag 24 augustus 2007 @ 15:35:
Zo te horen probeer je sowieso al een site in elkaar te hacken met een tabel. Mijn eerste reactie: NIET DOEN!

Probeer een webpagina op te bouwen met semantisch correcte elementen. Gebruik <h1> t/m <h4> voor koppen en <p> voor blokken tekst. En positioneer je elementen als een <div> netjes met css gestyled. Probeer niet non-tabularaire data in een tabel te proppen, want dat maakt je pagina al per definitie fout.

Het grafisch ontwerp in nogal vrij geweest dus (voor mij) uitdagend. Het contentdeel staat in het midden met een achtergrond met ronde hoeken en schaduw (lichtblauwe achtergrond, donkeblauwe schaduw). heb het met div-jes geprobeerd maar dat is mij niet gelukt. Vandaar de vlucht naar de tabel. Ik doe het nu met één tabel en verder div-jes

[Verwijderd]

Verwijderd schreef op vrijdag 24 augustus 2007 @ 15:56:
(...) heb het met div-jes geprobeerd maar dat is mij niet gelukt. Vandaar de vlucht naar de tabel. Ik doe het nu met één tabel en verder div-jes

Als je niet weet waarom je div-elementen gebruikt, gebruik dan alsjeblieft een tabel. Of beter nog, verdiep je in HTML.

[Verwijderd]

BasieP schreef op vrijdag 24 augustus 2007 @ 15:30:
de container waar het geheel in staat doet niet ter zake. Dit kan een cel zijn of een divje of whatever.

wat je wilt is je divje wat rechtsboven moet rechts floaten, en daarna gewoon je tekst toevoegen.
Dan ben je d'r al

welgeteld 1 regel css

Het ziet er nu zo uit

Html:

code:

<body>
<div id="content">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000">

    <tr>
      <td width="20" background="afbeeldingen/Achtergrond textgebied/menu_01.gif">&nbsp;</td>
      <td colspan="3" background="afbeeldingen/Achtergrond textgebied/menu_02.gif">&nbsp;</td>
      <td width="22" background="afbeeldingen/Achtergrond textgebied/menu_03.gif">&nbsp;</td>
    </tr>
    <tr>
      <td rowspan="2" background="afbeeldingen/Achtergrond textgebied/menu_04.gif">&nbsp;</td>
      <td colspan="3" valign="top" bgcolor="#9DB4C0"><p class="Titel">Test
        <strong><HR /> 
      <span class="Paragraaf">Blalalalalalala</span></strong></p>        </td>
      <td rowspan="2" background="afbeeldingen/Achtergrond textgebied/menu_06.gif">&nbsp;</td>
    </tr>
    <tr>
      <td width="220" align="center" bgcolor="#9DB4C0"><img src="Images/EU_Biologisch.gif" width="232" height="233" border="0"/>
      <%if button <> "off" then%><input name="Submit" type="submit" class="Button1" value="Inschrijven"/><%end if%>       </td>
      <td width="15" bgcolor="#9DB4C0">&nbsp;</td>
      <td width="656" valign="top" bordercolor="#000000" bgcolor="#9DB4C0" style="width: auto"><p class="Titel-wit">         Laat je verrassen en maak gratis kennis met heerlijke biologische  producten. </p>
        <div id="test2">Content for  id "test2" Goes Here</div>
        <p class="Text"><br />
          <span class="Menuopties"><strong>Wanneer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: </strong>maandag 17 september <br />
          <strong>Duur</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;: Tussen 12.00  uur en 13.30 uur<br />
        <strong>Locatie</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; : blabla </span></p>
        <p class="Text">&nbsp;</p>
        <p class="Text">&nbsp;</p>
        <p class="Text">&nbsp;</p>
        <p class="Text">&nbsp;</p>
        <p class="Text">&nbsp;</p>
        <p class="Text">&nbsp;</p>
        <p class="Text">&nbsp;</p>
        <p class="Text">&nbsp;</p>
        </td>
</tr>
    
    <tr>
      <td background="afbeeldingen/Achtergrond textgebied/menu_07.gif">&nbsp;</td>
      <td colspan="3" background="afbeeldingen/Achtergrond textgebied/menu_08.gif">&nbsp;</td>
      <td background="afbeeldingen/Achtergrond textgebied/menu_09.gif">&nbsp;</td>

    </tr>
</table>
</div>

css:

code:

#test2 {
    position: relative;
    left: -50%;
    top:30px;
    height: 50px;
    width: 50px;
    border:#000033;
    background:#3300CC;
    float:right;
    z-index:2;
    }

#content {
    position: relative;
    top: 20%;
    left: 0%;
    border:#000033;
    background:#3300CC;
    z-index:1;
    }

Positie is nu goed maar de tekstomloop is nog niet in orde

[ Voor 3% gewijzigd door Verwijderd op 26-08-2007 11:18 ]

[Verwijderd]

Ik heb nu de positie correct gekregen maar de tekst loopt niet om mijn div heen... Iemand nog een suggestie?

[ Voor 74% gewijzigd door Verwijderd op 26-08-2007 11:19 ]

[Verwijderd]

Volgens mij heb ik het:

code:

#test2 {
    top:30px;
    height: 50px;
    width: 50px;
    border:#000033;
    background:#3300CC;
    float:right;
    padding-left:1px;
    }

[Verwijderd]

Verwijderd schreef op zondag 26 augustus 2007 @ 11:32:
Volgens mij heb ik het:

In plaats van in het wilde weg in je code te gaan hacken, kun je beter je code opschonen.

Je HTML zit slordig en rommelig in elkaar. Hierdoor maak je het jezelf moeilijk: je verliest het overzicht. Maak meer gebruik van CSS om de boel vorm te geven. In onderstaand voorbeeld zie je hoe je dat zou kunnen doen (de achtergrondafbeeldingen heb ik niet meegenomen, aangezien dat een beetje lastig testen is gezien ik de afbeeldingen niet heb.).

HTML:

<!DOCTYPE html PUBLIC "-//W3D//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd">
<title>Bla</title>
<style type="text/css">
    
    html {
        background-color: #fff
    }
    
    body {
        margin: 1em auto;
        width: 800px;
        background-color: #9db4c0
    }
    
    div#links {
        float: left;
        height: 20em;
        margin-right: 1em;
        width: 232px
    }
    
    div#rechts {
        height: 20em
    }
    
    h1 {
        font-size: 100%;
        font-weight: bold;
        margin-bottom: 3em
    }
    
    p#header {
        padding-bottom: .5em;
        border-bottom: 1px solid #ddd
    }
    
    input {
        margin-left: 3em
    }
    
    dl {
        margin-top: 2em
    }
    
    dt {
        float: left;
        width: 7em;
        font-weight: bold
    }
    
    dd {
        margin-bottom: .1em /* Strange Firefox bug */
    }
    
</style>


<p id="header">Test

<div id="links">
    <h1>Blalalalalalala</h1>
    
    <img src="bla.jpg" alt="bla">
    
    <form method="post" action="bla.php">
        <p><input type="submit" value="Inschrijven">
    </form>
</div>

<div id="rechts">
    <p>Laat je verrassen en maak gratis kennis met heerlijke biologische producten.     
    <p>Content for id "test2" Goes Here
    
    <dl>
        <dt>Wanneer</dt>
        <dd>maandag 17 september</dd>
        <dt>Duur</dt>
        <dd>Tussen 12.00 uur en 13.30 uur</dd>
        <dt>Locatie</dt>
        <dd>blabla</dd>
    </dl>
</div>

[Fuzzillogic]

CSS biedt simpelweg niet de mogelijkheid om tekst rondom andere objecten te laten flowen. Als je dat wilt, zul je met ontzettende smerige oplossingen moeten komen (dagdag toegankelijkheid en zoekmachines) of een indrukwekkend stukje javascript schrijven.

Eerlijk gezegd kan ik zelfs geen ranzige oplossing bedenken, ook niet met archaïsche tabellen. Fonts worden door de verschillende systemen en zelfs browsers anders gerenderd. Je kunt er dus niet vanuit gaan dat een regel met lengte x ook binnen de y beschikbare pixels past.

Misschien dat het met SVG kan, maar IE ondersteunt dat (uiteraard) niet. Ik zou het zelf terugspelen naar de ontwerper. Als webdesigner zou hij/zij toch moeten weten dat zoiets als dit niet (goed) te realiseren is.

[Verwijderd]

Fuzzillogic schreef op zondag 26 augustus 2007 @ 16:28:
Ik zou het zelf terugspelen naar de ontwerper. Als webdesigner zou hij/zij toch moeten weten dat zoiets als dit niet (goed) te realiseren is.

Het is eigelijk meer een grafisch ontwerper dan webdesigner. Ik vond het zelf wel een uitdaging vandaar dat ik er mee aan de slag ben gegaan. Volgens mij berijk ik wel wat hij wil. Ik plaats rechts een div-je en laat daar de tekst tegen aan lopen. On der het div-je kan de tekst dan weer verder...

Mijn html was inderdaad niet erg netjes, was wat knip en plakwerk om te testen maar, toegegeven, overzichtelijk was het niet.

[Verwijderd]

Zo, heb jullie opmerkingen opgepakt en alles radicaal veranderd. Nu geen tabel meer maar alleen nog divjes en (schone) html. IK loop nu wel weer tegen een ander probleem aan. Binnen een dv heb ik twee andere div's geplaatst, die onder elkaar moeten blijven. Heb het eerst relatief geprobeerd maar toen gingen mijn (binnenste) div's schuiven op het moment dat ik tekst aan de buitenste div toe ging voegen. Ik dacht dat op te lossen door de div's absoluut te maken maar dat gaat ook niet werken. De div rightcontent is namelijk dynamisch en het wordt dus (denk ik) onmogelijk om de div rightbot daar netjes onder te positioneren.

Moet ik weer terug naar dynamisch? Hoe zorg ik er dan voor dat de div's niet gaan schuiven bij het toevoegen van tekst?

html:

code:

<div id="content">
    <div id="rightcontent"></div>
   <div id="rightbot"></div>
</div>

css:

code:

#content {
    position:relative;
    overflow:hidden;
    width: 728px;
    min-height:400px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-image:url(images/bgcontent.gif);
    left: 20%;
    }

#rightcontent {
    position:absolute;
    background-image:url(images/rightmid.gif);
    width:178px;
    min-height:125px;
    top:0px;
    right:50px;
    float:right;
}

#rightbot {
    position:relative;
    clear:both;
    background-image:url(images/rightbot.gif);
    right:50px;
    width:178px;
    height:17px;
    float:right;
}

Deze code geeft dus niet meer het gewenste resultaat. Rechtsbovenin de content div moeten de andere twee div's netjes onder elkaar komen en daar moet ik dan ook weer tekst in kwijt kunnen (vandaar dynamisch).

[Boelie-Boelie]

Bij positioneren met CSS gebruikt men meestal niet eens 'position', daar gebruikt men vaak slechts margins en paddings voor, al dan niet in combinatie met floats. (Daarom vroeg ik je - in een ander topic over wederom jouw positioneringsproblemen - waarom je de position-property gebruikt.)
http://css.maxdesign.com.au/floatutorial/
In dat andere topic meldde ik ook al dat min-height voor oudere IE's nix uithaalt, maar ach...

[Verwijderd]

Boelie-Boelie schreef op woensdag 29 augustus 2007 @ 00:55:
Bij positioneren met CSS gebruikt men meestal niet eens 'position', daar gebruikt men vaak slechts margins en paddings voor, al dan niet in combinatie met floats. (Daarom vroeg ik je - in een ander topic over wederom jouw positioneringsproblemen - waarom je de position-property gebruikt.)
http://css.maxdesign.com.au/floatutorial/
In dat andere topic meldde ik ook al dat min-height voor oudere IE's nix uithaalt, maar ach...

Punt is dat ik het zonder "position" nog niet voor elkaar krijg vandaar mijn vraag in dit topic. Die min-height heb ik nog even laten staan maar gaat er straks (op jouw advies) inderdaad uit. Ben de basis nog aan het opbouwen, zodra dat werkt ga ik het perfectioneren.

[Boelie-Boelie]

Een mogelijke oplossing is dat je ze onder elkaar laat floaten. Met width, float, clear kom je een heel eind. Een block-level element wordt overigens altijd vanzelf groter als er meer inhoud in komt (tenzij je CSS dat verhindert).

[Verwijderd]

Boelie-Boelie schreef op woensdag 29 augustus 2007 @ 19:22:
Een mogelijke oplossing is dat je ze onder elkaar laat floaten. Met width, float, clear kom je een heel eind. Een block-level element wordt overigens altijd vanzelf groter als er meer inhoud in komt (tenzij je CSS dat verhindert).

Dat gaat inderdaad prima. Ze staan goed onder elkaar

html:

code:

<div id="content">
<p>wjkwjewkjekwjkejkejekj</p>
   <div id="rightcontent"></div>
   <div id="rightbot"></div>
</div>

css:

code:

#content {
    position:relative;
    overflow:hidden;
    width: 728px;
    height:400px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-image:url(images/bgcontent.gif);
    left: 20%;
    }


#rightcontent {
    background-image:url(images/rightmid.gif);
    width:178px;
    height:125px;
    top:0px;
    margin-right:50px;
    float:right;
}

#rightbot {
    clear:both;
    background-image:url(images/rightbot.gif);
    margin-right:50px;
    width:178px;
    height:17px;
    float:right;
}

Wat ik nog niet helemaal begrijp (wat ik waarschijnlijk verkeerd doe) is dat op het moment dat ik tekst in mijn content div plaats dat dan de rightcontent en rightbot naar beneden gaan schuiven.
Wat doe ik daar dan verkeerd?

[Arjan90]

Beide divs even bóven de p zetten Dat zou het moeten fixen volgens mij..

[Verwijderd]

Sp!tF!re schreef op woensdag 29 augustus 2007 @ 20:03:
Beide divs even bóven de p zetten Dat zou het moeten fixen volgens mij..

Ongeloofelijk!!! Hoe simpel kan het wezen en ik maar zitten prutsen aan de instellingen van de div's.
Heel erg bedankt voor je hulp!!

[Fuzzillogic]

Sp!tF!re schreef op woensdag 29 augustus 2007 @ 20:03:
Beide divs even bóven de p zetten Dat zou het moeten fixen volgens mij..

Dat hangt helemaal af van de volgorde van de tekst. Het is voor de toegankelijkheid niet echt logisch als er eerst minder of irrelevant geneuzel en linkjes in allerlei sidebars in de HTML staan voor de echte content.

HTML'en is heel wat anders dan DTP'en! Bij DTP is "ziet er goed uit" goed genoeg; het is puur visueel. Maar bij HTML moet ook de structuur correct zijn. Althans, als je een fatsoenlijke site wilt maken.

[Verwijderd]

Fuzzillogic schreef op woensdag 29 augustus 2007 @ 20:52:
[...]

Dat hangt helemaal af van de volgorde van de tekst. Het is voor de toegankelijkheid niet echt logisch als er eerst minder of irrelevant geneuzel en linkjes in allerlei sidebars in de HTML staan voor de echte content.

HTML'en is heel wat anders dan DTP'en! Bij DTP is "ziet er goed uit" goed genoeg; het is puur visueel. Maar bij HTML moet ook de structuur correct zijn. Althans, als je een fatsoenlijke site wilt maken.

Helemaal mee eens maar op zich is het wel een uitdaging om dingen te doen die eigenlijk "niet kunnen". Ik laat de designer echter toch wel een kleine concessie doen want het moet wel werkbaar en stabiel blijven. Het houdt een keer op.

Ik heb eigenlijk nog één vraag. Hoe krijg ik een div helemaal onderaan in een andere div? Margin-top kan niet omdat de hoogte variabel is....