[css] img + margin - Softwareontwikkeling

woensdag 20 oktober 2004 18:28

Acties:

Topicstarter

Ik probeer tussen 3 images de margin wweg te krijgen die standaard aanwezig is. Echter als ik margin:0px; zet op img dan blijven de margins aanwezig. float:left helpt wel alleen krijg ik dan problemen met de elementen die volgen want die worden gepostioneerd aan het begin(bovenkant) van de pagina over de images heen.

code:

<div id="main">
    [img]"images/top.gif"[/img]<br />
    [img]"images/f3.jpg"[/img]<br />
    [img]"images/bot.gif"[/img]
    <div class="container">
    <?php include 'inc/header.inc';?>
    <p>Dit is een test tekst</p>
    </div>
</div>

zonder float: http://paragonxls.xs4all.nl/php/pulpo/alt.php

code:

body {  
    padding:10px;
    margin:0px;
    font-family:sans-serif;
    font-size:12px;
    color:#000;
}

#main { 
    position:absolute;
    left:50%;
    width:660px;
    height:454px;
    margin-left:-330px;
}

#nav {
    position:relative;
}

ul { 
    margin:0px;
    padding:0px;
    list-style:none;
}

    ul li {
        width:115px;
            padding:3px 0 3px 4px;
        border-top:1px solid #eee;
        border-right:1px solid #aaa;
        border-bottom:1px solid #aaa;
        border-left:1px solid #eee;
            background-color:#ddd;
        float:left;
        text-align:center;
    }

    ul li.spacer {
        width:14px;
    }

img {
    margin:0px;
}

met float: http://paragonxls.xs4all.nl/php/pulpo/alt2.php

code:

1
2
3

img {
    float:left;
}

De margins waren zowel in firefox als in ie6 aanwezig maar sinds ik 1x die float heb toegepast zijn ze in beide versie in ie6 verdwenen maar klopt er niks meer van de postionering van de menu balk.

Is er nog een andere manier om die margins weg te krijgen?

woensdag 20 oktober 2004 18:30

Acties:

X-Lars

Just GoT it.

Whitespace in HTML weghalen en

Cascading Stylesheet:

1	img { margin:0; }

should do the trick...

woensdag 20 oktober 2004 18:36

Acties:

paragon

Topicstarter

heb whitespaces inclusief weggehaald maar nogsteeds de margins.

woensdag 20 oktober 2004 18:47

Acties:

X-Lars

Just GoT it.

Is de hoogte van de containing div (#main) wel goed? Die hoogte hoeft er op zich niet bij lijkt me. De width en height attributes van img-tag instellen zal het ook wel niet zijn... Ik vind het wel vreemd eigenlijk.

woensdag 20 oktober 2004 18:49

Acties:

paragon

Topicstarter

Heb het probleem van de menubalk in de versie met floats iig opgelost kwestie van absolute in relative veranderen van de positie van de menubalk Echter vraag ik me nog steeds af waarom die margins erin zitten. Volgens mij heeft die height van #main er niks mee te maken maar kan het nog wel even weg halen

woensdag 20 oktober 2004 19:09

Acties:

Clay

cookie erbij?

Maak de images display:block; en haal de 's weg.
_{Was dit niet een restant van replaced-inline quirks gedrag van IE?}

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 20 oktober 2004 19:12

Acties:

paragon

Topicstarter

Clay schreef op 20 oktober 2004 @ 19:09:
Maak de images display:block; en haal de 's weg.
_{Was dit niet een restant van replaced-inline quirks gedrag van IE?}

display:block; is de oplossing over dat replaced inline quirks gedrag weet ik niet want het probleem deed zich vooral voor in firefox

woensdag 20 oktober 2004 19:14

Acties:

Clay

cookie erbij?

dan is het een algemeen replaced-inline "probleem". Ik weet het preciese gedrag van die dingen niet, maar dan zou b.v. n keer de line-height kunnen zijn. iig fundamenteel anders dan block.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 20 oktober 2004 19:52

Acties:

Verwijderd

... maar dan zou b.v. n keer de line-height kunnen zijn ...

Als je plaatjes minder hoog zijn dan de line-height dan genereert een bij mijn weten inderdaad witruimte. Het is dus een poging waard om de line-height op 1px te zetten.

woensdag 20 oktober 2004 20:16

Acties:

Clay

cookie erbij?

Dat lijkt me echt niet nodig. display:block; moet prima volstaan om images marginloos onder elkaar te zetten.

Instagram | Flickr | "Let my music become battle cries" - Frédéric Chopin

woensdag 20 oktober 2004 20:26

Acties:

paragon

Topicstarter

Verwijderd schreef op 20 oktober 2004 @ 19:52:
[...]

Als je plaatjes minder hoog zijn dan de line-height dan genereert een bij mijn weten inderdaad witruimte. Het is dus een poging waard om de line-height op 1px te zetten.

Ik had de breaks al weg gehaald en dat hielp niet. Ook hoad ik line-height:0px geprobeerd maar dat had echt geen effect. display:block is tot nu toe het enige wat helpt ne float:left dan.

woensdag 20 oktober 2004 23:56

Acties:

paragon

Topicstarter

Lijkt me onnodig om een nieuw topic te openen maar ik heb dus weer een probleem met een image:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>:.: Restaurant Pulpo :.:</title>
<link id="style" rel="stylesheet" type="text/css" href="js/alt.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="main">
    [img]"images/top.gif"[/img]
    [img]"images/f3.jpg"[/img]
    [img]"images/bot.gif"[/img]
    <div id="nav">
        [img]"images/left.gif"[/img]
        <ul>
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>
            <li>...</li>    
        </ul>
        [img]"images/right.gif"[/img]
    </div>
    <div id="container">
        [img]"images/top.gif"[/img]
    </div>
</div>
</body>
</html>

De img in #container komt in firefox(block of geen block) rechts na de menu balk , maar in IE wordt die er wel onder geplaatst. Alleen reageert IE weer niet op de top en left waardes van #nav(de menu balk) Ik wordt een beetje gek

code:

#nav {
    position:relative;
    top:5px;
    left:17px;
}

    #nav img {
        float:left;
}

#container {
    position:relative;
    height:265px;
    width:646px;
    padding:0px;
    border:0px solid #a9a9a9;
    margin:0px;
}

    #container img {
        display:block;
    }

wederom helpt het om #container img {float:left} te doen maar volgens mij hoorrt ie gewoon eronder te komen zonder die float

[ Voor 20% gewijzigd door paragon op 20-10-2004 23:58 ]

donderdag 21 oktober 2004 09:27

Acties:

SuperRembo

Kan je de images als top.gif en bot.gif niet beter met CSS op de achtergrond zetten?

| Toen / Nu

donderdag 21 oktober 2004 10:19

Acties:

paragon

Topicstarter

hmm heb ik geprobeerd, maar dan doet IE weer raar ok al zet ik de height van de div waarin de images zitten lager dan de image zelf blijf ik dat extra randke van een pixel houden

http://paragonxls.xs4all.nl/php/pulpo/alt3.php

Afbeeldingslocatie: http://www.xs4all.nl/~paragonx/got/ie.jpg

[ Voor 30% gewijzigd door paragon op 21-10-2004 10:22 ]