[CSS] voorkomen van overlap - Softwareontwikkeling

woensdag 9 maart 2005 15:46

Acties:

Verwijderd

Topicstarter

Ik heb een probleem met de plaatsing van elementen (plaatjes en tekst) mbv. stylesheets. In Win IE gaat het wel goed , maar in Win/Mozilla en Mac/IE - Mozilla en Safari niet.

Opzet: ik heb een container-div met daarin een stukje tekst en een div met een foto met onderschrift. Die div (of tabel) met foto en onderschift steken in Mozilla en Mac over het volgende item (weer zo'n blok-div) heen, het overlapt dus, ook als ik allerlei margins heb aangegegeven.
Punt is blijkbaar dat die container-div-tag niet altijd als blok wordt weergegeven,Dat zie je ook duidleijk als je het blok afkadert dmv. een achtergrondkleur of border. Zie hieronde rmijn styleshete voor zo'n item.
Wie kan mij helpen om te zorgen dat deze items in met name Mozilla onder elkaar komen te staan, en dat het plaatje van het 1e item niet over het 2e items hene valt?

Dank alvast!

Moderator, wil je svp de titel aanpassen in CSS:voorkomne van overlap bij plaatsing blok-elementen in Mozilla(PC) en Mac. Zie voorbeeld http://www.sev.nl/test

code:

.item {
    width:450px;
    padding:30px 0px 5px 0px;
    margin-top:5px;
    margin-bottom:10px;
    border:dashed 1px silver;
    display: block;
}

[ Voor 8% gewijzigd door Verwijderd op 09-03-2005 16:00 . Reden: titel aanpassen svp ]

woensdag 9 maart 2005 15:54

Acties:

Morrar

Wellicht kun je even de titel van het topic verbeteren? En heb je een link naar de pagina waarop de gehele code + CSS te vinden is? Het verhaal is me zo nog niet helemaal duidelijk.

woensdag 9 maart 2005 15:57

Acties:

OkkE

CSS influencer :+

Euhmm inderdaad zou een linkje naar een voorbeeld wel handig zijn. Maar, gebruik je float:left;? Want dan zou het kunnen helpen om een div met clear:both; tussen de verschillende items te zetten.

// Edit

Misschien zoiets?

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Geen overlapping block-elementen</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Cache-Control" content="NO-CACHE">
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="Dogteam.nl">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="Copyright" content="&copy; 2005 Dogteam">
    <style type="text/css">
    #container {
        width: 400px;
        }
    
    h2 {
        margin: 0px;
        }

    p {
        float: left;
        }

    div.item {
        display: inline;
        float: left;
        border: 1px solid silver;
        padding: 3px;
        margin-right: 5px;
        }
    
    div.item img {
        width: 100px;
        height: 80px;
        }
    
    div.item p {
        display: inline;
        }
    
    div.clear {
        clear: both;
        height: 1px;
        font-size: 1px;
        background: black;
        margin: 5px 0px 5px 0px;
        }
    </style>
</head>
<body>

<div id="container">

<h2>titel</h2>
<p><div class="item">[img]""[/img]<p>tekst</p></div>Sed vel urna vitae justo viverra vulputate. Maecenas ipsum tellus, bibendum sit amet, vestibulum non, interdum tincidunt, erat. Aliquam leo. Nam id tortor id arcu auctor nonummy.</p>
<div class="clear"></div>

<h2>titel</h2>
<p><div class="item">[img]""[/img]<p>tekst</p></div>Sed vel urna vitae justo viverra vulputate. Maecenas ipsum tellus, bibendum sit amet, vestibulum non, interdum tincidunt, erat. Aliquam leo. Nam id tortor id arcu auctor nonummy.</p>
<div class="clear"></div>

<h2>titel</h2>
<p><div class="item">[img]""[/img]<p>tekst</p></div>Sed vel urna vitae justo viverra vulputate. Maecenas ipsum tellus, bibendum sit amet, vestibulum non, interdum tincidunt, erat. Aliquam leo. Nam id tortor id arcu auctor nonummy.</p>
<div class="clear"></div>

</div>

</body>
</html>

[ Voor 84% gewijzigd door OkkE op 09-03-2005 16:09 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 9 maart 2005 16:04

Acties:

Verwijderd

Topicstarter

Inderdaad, ik kan float:left gebruien, maar bijkomend probleem is dat de contentmanger zelf de plaatsing van die foto-blokken wil kunnen bepalen, dus ik moet iets verzinnen wat die vrijheid behoudt. Zie http://www.sev.nl/test - wederom dank!

woensdag 9 maart 2005 16:07

Acties:

Willem

done

@ title

Motor onderhoud bijhouden

woensdag 9 maart 2005 16:14

Acties:

OkkE

CSS influencer :+

Verwijderd schreef op woensdag 09 maart 2005 @ 16:04:
Inderdaad, ik kan float:left gebruien, maar bijkomend probleem is dat de contentmanger zelf de plaatsing van die foto-blokken wil kunnen bepalen, dus ik moet iets verzinnen wat die vrijheid behoudt. Zie http://www.sev.nl/test - wederom dank!

Je bedoelt dat de foto links of rechts geplaatst moet kunnen worden? Als je hem rechts wil moet je gewoon

code:

1
2
3

div.item {
float: right;
}

doen. Je kunt dus twee classes maken; div.itemleft en div.itemright. En door een script-taal de juiste class er aan hangen.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 9 maart 2005 16:48

Acties:

OkkE

CSS influencer :+

Euhmm bij mij niet. Het is alleen wel zo, dat er standaard ruimte onder de foto-container vrijgehouden wordt (de standaard line-height), maar als ik mijn voorbeeld met extra tekst open (in zowel IE als FF), dan loopt de tekst er gewoon omheen.

[ Voor 3% gewijzigd door OkkE op 09-03-2005 16:49 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

woensdag 9 maart 2005 16:57

Acties:

Verwijderd

Topicstarter

Lineheight is gene probleem, omloop werkt inderdaad goed nu. Nogmaals dank!