[xhtml/css] Background-image/ padding probleem IE - Softwareontwikkeling

dinsdag 14 december 2004 10:32

Acties:

Verwijderd

Topicstarter

ik ben met een website bezig met het volgende probleem;

In de topframe wordt de padding genegeerd door IE. De background-image zit strak tegen de border aan.
Firefox geeft het frame weer zoals mijn bedoeling is. Hoe kan dit en hoe kan ik het oplossen. Waar het dus op neer komt is dat ik
een BG-image in center wordt gecentreerd en er een witruimte tussen BG-image en border onstaat. Code staat hieronder.
Tevens een gerelateerd probleem;
In de Navframe wordt het achtergrond plaatje van de body niet netjes in het midden gezet mbv; position: middle .
Ik heb dit opgelost door margin te geven, maar deze is links en rechts niet gelijk toch staat plaatje in het midden. Hoe kan dat?

Zie url: http://raymond.dynalias.net/Initia-nova/

Code topframe;



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="./stylesheet/initia.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
[img]"./images/Kleuren_logo.gif"[/img]
<p>Initia Nova<span> een nieuw begin</span>

</p>
</div>
</body>
</html>

/* CSS Topframe specifieke selectors */

#header {
margin-top : 5px;
margin-right : 3%;
margin-bottom : 1%;
margin-left : 0%;
padding-top : 2px;
padding-bottom : 5px;
border-width : 1px;
border-style : dashed;
border-color : #CCCCCC;
background-image : url(../images/HeaderBG.gif);
background-position : right;
background-repeat : no-repeat;}

#header img {
float : left;
margin-right : 10px;
margin-top: : 5px;
margin-right : 5px;
margin-bottom : 5px;
margin-left : 2%;}

dinsdag 14 december 2004 11:02

Acties:

Verwijderd

code:

#header {
border:1px dashed #ccc;
background:transparent url(01.jpg) center no-repeat;
margin:5px 3% 1% 0px;
padding:2px 0 5px 0;
}

#header img{
margin:5px 5px 5px 2%;
}

Bedoel je dit? Voor de achtergrond moet je geen middle gebruiken maar center. Je moet bij de img float:left weg laten want daardoor valt de img "buiten" de div of je moet je div ook een float:left geven.

Tevens heb ik wat styles samen gevoegd je kan background-image en background-color etc samenvoegen tot background:transparent url(01.jpg) center no-repeat; en dat kan je ook met de border doen.

[ Voor 98% gewijzigd door Verwijderd op 14-12-2004 11:31 ]

dinsdag 14 december 2004 11:15

Acties:

Verwijderd

Topicstarter

Ik denk dat ik dit bedoel. Is het echter niet zo dat de div default zijn "child" goed inkapselt?
Hu zit het dan met het align-probleem in mijn navigatieframe?

#navBG {
background-image: url(../images/NavBG.gif);
background-position: top left;
background-repeat: no-repeat;
margin-top: 0px;
margin-right: 1%;
margin-bottom: 0px;
margin-left: 1px;
padding : 0px;}

Alleen op deze manier komt de navigatie BG-image in het midden te staan.

dinsdag 14 december 2004 11:22

Acties:

Verwijderd

Is het de bedoeling dat de background image verticaal en horizontaal in het midden moet komen? zo ja dan moet je het volgende in je header plaatsen:

code:

1	background:url(../images/NavBG.gif) center center no-repeat;

Verwijderd schreef op dinsdag 14 december 2004 @ 11:15:
Ik denk dat ik dit bedoel. Is het echter niet zo dat de div default zijn "child" goed inkapselt?
Hu zit het dan met het align-probleem in mijn navigatieframe?

#navBG {
background-image: url(../images/NavBG.gif);
background-position: top left;
background-repeat: no-repeat;
margin-top: 0px;
margin-right: 1%;
margin-bottom: 0px;
margin-left: 1px;
padding : 0px;}

Alleen op deze manier komt de navigatie BG-image in het midden te staan.

[ Voor 6% gewijzigd door Verwijderd op 14-12-2004 11:46 ]

dinsdag 14 december 2004 11:28

Acties:

crisp

Devver

Pixelated

offtopic: waarom zet je in vredesnaam een Frameset DTD boven een normaal document?

en voor iedereen die hier post: gebruik aub de [code]-tags

Intentionally left blank

dinsdag 14 december 2004 11:30

Acties:

Verwijderd

Het is default wel zo dat de div zijn child goed "inkapseld" .

Het "probleem" van floats is als je een element float, je alles wat daarmee te maken heeft ook moet floaten, anders gaan er elementen buiten de normale flow staan waardoor in dit geval de img buiten de div valt.

Verwijderd schreef op dinsdag 14 december 2004 @ 11:15:
Ik denk dat ik dit bedoel. Is het echter niet zo dat de div default zijn "child" goed inkapselt?
Hu zit het dan met het align-probleem in mijn navigatieframe?

#navBG {
background-image: url(../images/NavBG.gif);
background-position: top left;
background-repeat: no-repeat;
margin-top: 0px;
margin-right: 1%;
margin-bottom: 0px;
margin-left: 1px;
padding : 0px;}

Alleen op deze manier komt de navigatie BG-image in het midden te staan.

[ Voor 3% gewijzigd door Verwijderd op 14-12-2004 11:47 ]

dinsdag 14 december 2004 12:47

Acties:

Verwijderd

Topicstarter

crisp schreef op dinsdag 14 december 2004 @ 11:28:
offtopic: waarom zet je in vredesnaam een Frameset DTD boven een normaal document?

en voor iedereen die hier post: gebruik aub de [code]-tags

Omdat ik framsets gebruik.

dinsdag 14 december 2004 12:49

Acties:

Woudloper

« - _ - »

Verwijderd schreef op dinsdag 14 december 2004 @ 12:47:
Omdat ik framsets gebruik.

Waar dan? Als ik even jou code pak uit je topic start, zie ik daar geen frameset staan:

HTML:

<!-- HTML code topframe -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="./stylesheet/initia.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
[img]"./images/Kleuren_logo.gif"[/img]
<p>Initia Nova<span> een nieuw begin</span>

</p>
</div>
</body>
</html>

dinsdag 14 december 2004 12:51

Acties:

OkkE

CSS influencer :+

Oftewel, een Frameset DTD moet alleen in de pagina met de eigenlijke frameset, alle pagina's die daar in geladen worden dienen gewoon de juiste DTD (Strict ofzo) te hebben.

“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.

dinsdag 14 december 2004 13:01

Acties:

Verwijderd

Topicstarter

OkkE schreef op dinsdag 14 december 2004 @ 12:51:
Oftewel, een Frameset DTD moet alleen in de pagina met de eigenlijke frameset, alle pagina's die daar in geladen worden dienen gewoon de juiste DTD (Strict ofzo) te hebben.

Is echt stom, dit is de eerste keer dat ik dit hoor. Als je dus een frameset delclaratie meegeeft aan een pagina, wordt dit als een soort van parent-declaratie aan je frames doorgegeven. Wat voor een deleclaratie geef je dan aan je frames? De elemetenten in de frames moeten toch conform zijn aan de doctype die men gebruikt?! ik dan toch niet zomaar bv. strict of transitional gebruiken.

dinsdag 14 december 2004 17:09

Acties:

Verwijderd

Is echt stom, dit is de eerste keer dat ik dit hoor. Als je dus een frameset delclaratie meegeeft aan een pagina, wordt dit als een soort van parent-declaratie aan je frames doorgegeven. Wat voor een deleclaratie geef je dan aan je frames? De elemetenten in de frames moeten toch conform zijn aan de doctype die men gebruikt?! ik dan toch niet zomaar bv. strict of transitional gebruiken.

Er is geen overerving. Elk document staat opzich en wordt als een zelfstandig document gevalideert.

Maar waarom je nu nog frames gebruikt is m'n raadsel.

dinsdag 14 december 2004 17:18

Acties:

Verwijderd

Topicstarter

Omdat ik deze site van een ander project heb gejat, die nooit operationeel wordt. Het is eens een keer iets anders.

"Er wordt niets overgerfd", Waarom zijn sommige elementen dan niet geschikt voor Frameset? Ik bedoel je gaat toch geen gecompliceerde <noframe> maken, toch?

dinsdag 14 december 2004 17:43

Acties:

Verwijderd

Waarom zijn sommige elementen dan niet geschikt voor Frameset? Ik bedoel je gaat toch geen gecompliceerde <noframe> maken, toch?

Geen idee wat je bedoelt. Het NOFRAMES element lijkt me echter altijd handig als je frames gebruikt, alleen is dat onderdeel van een frameset document met Frameset DTD.

dinsdag 14 december 2004 17:44

Acties:

Michali

Met overerven bedoelt hij dat de DTD van de pagina waarin je de frames zelf zet niet automatisch ook de DTD voor de pagina's wordt die in de frames geladen worden.

En ik zou er alles aan doen om frames te vermijden. Kijk bijvoorbeeld eens naar de overflow: auto / scroll property (css).

Noushka's Magnificent Dream | Unity

dinsdag 14 december 2004 20:17

Acties:

Verwijderd

Topicstarter

Verwijderd schreef op dinsdag 14 december 2004 @ 11:02:
code:
1
2
3
4
5
6
7
8
9
10
#header {
border:1px dashed #ccc;
background:transparent url(01.jpg) center no-repeat;
margin:5px 3% 1% 0px;
padding:2px 0 5px 0;
}

#header img{
margin:5px 5px 5px 2%;
}
Bedoel je dit? Voor de achtergrond moet je geen middle gebruiken maar center. Je moet bij de img float:left weg laten want daardoor valt de img "buiten" de div of je moet je div ook een float:left geven.

Wanneer ik de float : left; voor de img weglaat, valt de helft van de content in het frame weg!!!! De paragraph komt onder de img te staan en de achtergrond wordt dan precies rechts in het midden geposioneerd. Zonder float werkt dus niet

woensdag 15 december 2004 10:12

Acties:

Verwijderd

Dat zei ik al, maar we hoeven toch niet alles voor te kauwen. Waarom zet je de hoogte van je header div niet vast? Heb het aangepast in je css:

code:

 #header {
    border:1px dashed #ccc;
    background:transparent url(./images/HeaderBG.gif) center right no-repeat;
    height:81px;
    margin:5px 3% 1% 0px;
}

#header img{
    margin:7px 0 0 15px;
    float:left
}

#header p {  
    color   :   #666666;
    text-align:     left;
    margin:20px 0 0 10px;;
    letter-spacing:     3px;
    font: bold normal 2em Arial, Helvetica, sans-serif;
    float:left;
    }

#header p span 
{
    color:#CCCCCC;
    font-size:0.8em;
    font-style:normal;
    letter-spacing:3px;
}

[ Voor 22% gewijzigd door Verwijderd op 15-12-2004 10:19 ]