abonnement bol.com Unibet Coolblue
pi_42229815
Waar moet ik het dan vraqgen. Dacht dat z'n topic daarvoor was. Sorry
pi_42229844
Dit heeft toch totaal niets met CSS te maken?
pi_42257703
quote:
Op dinsdag 26 september 2006 22:04 schreef Leonoor het volgende:

[..]

Het is niet de oplossing omdat ik het geprobeerd heb en het niet werkt..

Inmiddels heb ik mijn meest nerderige kennis er naar laten kijken, en die heeft op magische wijze het geheel ietwat aangepast, en bijna zo laten werken als ik zou willen. Ik ben vrees ik meer dummie dan ik hoopte/wenste, maar het werkt nu. Mocht je interesse hebben in hoe het eruit ziet, dan hoor ik het wel via mijn fobo .
het is trouwens ook lastig oplossen voor ons als je geen code post.
pi_42278496
Bestaat er ook zoiets als een CSS-validator die meteen de fouten corrigeert? Iets als HTML-tidy maar dan voor CSS zeg maar...
  zondag 1 oktober 2006 @ 20:35:16 #55
85514 ralfie
!Yvan eht nioj
pi_42290244
Hoi,

ik wil voor een site een bepaalde layout van frames naar div+css overzetten, maar stuit op een problem


Dit is de layout waar het om gaat. Hoewel in frames dit makkelijk te bereiken was
1
2
3
4
5
6
7
<frameset rows="75,*" border="0">
<frame name="top" src="top.html" scrolling="no">
<frameset cols="180,*" border="0">
<frame name="left" src="left.html" scrolling="auto">
<frame name="main" src="news.html"  scrolling="auto">
</frameset>
</frameset>

Is het mij met divjes en css nog niet gelukt. Het enige waar ik iets mee opschoot was position:fixed, wat niet werkt in IE en dus ook geen optie is. Alle methodes die ik heb gevonden om dit te emuleren kunnen dan weer niet overweg met niet fixte waarden (zoals 100%-75px).

Dus, heeft er iemand een idee hoe ik dit op kan lossen?
pi_42290396
kijk eens naar float: left
  zondag 1 oktober 2006 @ 20:52:50 #57
85514 ralfie
!Yvan eht nioj
pi_42291023
quote:
Op zondag 1 oktober 2006 20:38 schreef the_disheaver het volgende:
kijk eens naar float: left
heb ik ook al geprobeerd en dan krijg ik ze wel in de juiste locatie, maar nog niet de juiste grootte.
Het probleem is dat de pagina zelf niet scrolbaar mag zijn, omdat ik het menu en #top op een vaste plaats wil hebben. Eventueel te grote contents worden met scrollbars in #maincontents opgelost (zie ook tekening vorige post)
pi_42291197
Zover ik het zie zul je de twee div welke je naast elkaar wil hebben in een container DIV moeten zetten.
Twee geneste DIV dus.


Je stylesheet

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
// ze komen rechtsreeks uit mijn eigen stylesheet, vandaar de opmaak. Ben te lui om dit te verwijderen
#container{
        position: relative;
        min-height: 100%;
        height: 100%;
        voice-family: ""}"";
        voice-family: inherit;
        height: auto;
       }  
#menu { 
        float: right; 
        position: absolute;
        left: 10px;
        top: 40px;
        width: 115px;
        border: black solid 3px ; 
        border-top: none;
        border-left: none;
       }
#content { 
        position: relative;
        top: 40px;
        
        left: 125px;
        width: 639px;
       }

#top {
        color : #0000FF;
        border: black solid 2px ; 
        background-color: #FFFFFF;
        width: 764px; 
        height: 30px;
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 0px;
        font-family : Verdana;
        font-size : 20px;
        font-weight : bold;
        text-align : center;
       }

//En volgens mij werkt het niet als het volgende niet ook in je stylesheet staat
html{
        height: 100%;
       }


Dan krijg je dus zoiets op je pagina

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//de bovenste div
<div id="top">
</div>
//de container
<div id="container">

//in de container het menu- en het contentframe
<div id="menu">
</div>
<div id="content">
</div>

// de container sluiten
</div>


Bij mij werkt dit onder alle browser prima.
Zoals je ziet heeft het menuframe een vaste positie; position: absolute;
Het contentframe heeft zich aan te passen aan het menuframe: position: relative
  zondag 1 oktober 2006 @ 21:19:36 #59
125987 KhaZ
Alfa Romeo
pi_42292109
tvp
The styling. And the howl from its V6 engine. In a tunnel, at 4000rpm, it was more sonorous than any music.
It was like having your soul licked by angels.
  zondag 1 oktober 2006 @ 21:24:43 #60
104583 cyberstalker
Een krachtig neen!
pi_42292364
@ralfie: het kan heel makkelijk zonder container.

Je geeft de div#top een position absolute (met top en left op 0px) en height: 75px; . De body geef je een padding: 75px zodat de andere divjes er onder komen te staan.

div#menu geef je een float: left en een height: 100% en natuurlijk een width: 180px; . Nu hoef je alleen de div#maincontents nog een height: 100%; te geven en klaar is ralfie.
Hope for the best, prepare for the worst.
  maandag 2 oktober 2006 @ 12:27:09 #61
85514 ralfie
!Yvan eht nioj
pi_42307686
quote:
Op zondag 1 oktober 2006 21:24 schreef cyberstalker het volgende:
@ralfie: het kan heel makkelijk zonder container.

Je geeft de div#top een position absolute (met top en left op 0px) en height: 75px; . De body geef je een padding: 75px zodat de andere divjes er onder komen te staan.

div#menu geef je een float: left en een height: 100% en natuurlijk een width: 180px; . Nu hoef je alleen de div#maincontents nog een height: 100%; te geven en klaar is ralfie.
ok, dit werkt, alleen zit er nu een 3px ruimte tussen #menu en #maincontents in IE

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
56
57
<html>
<head><title>test</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
padding-top:75px;
}
#maincontents{
height:100%;
background-color:green;
overflow:auto;
}
#menu {
float:left;
height:100%;
width:180px;
background-color:blue;
}

#top {
width:100%;
background-color:red;
position:absolute;
top:0px;
left:0px;
height:75px;
}
</style>
</head>
<body>
<div id="top">TOP</div>
<div id="menu">menu</div>
<div id="maincontents">contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
</div>
</body>
</html>


zie
Iemand een idee?
pi_42308610
Hij doet het prima, in Firefox en Netscape. IE6 geeft inderdaad een probleem.
  maandag 2 oktober 2006 @ 17:11:40 #63
85514 ralfie
!Yvan eht nioj
pi_42314230
ok, ik geef de body wel dezelfde kleur als #maincontents, zie je der toch niks van

Bedankt allemaal!
pi_42373054
Ik heb een aantal layout probleempjes welke verschillen in IE en FF

- Ik geef vaste maten op, maar hoe krijg ik dat mooi variabel zodat het in verschillende scherm grootes netjes is.

- De tekst die in de header staat moet in de grijze balk staan, en ook beginnen waar de grijze balk begint.
maar op een of andere manier wil css niet luisteren, dus ik doe wat fout.
vertical-align: bottom; lijkt niet te werken.

- Als er in header een link staat (<a href=") En die wil ik een andere kleur geven als al opgegeven is in a.active, a.link etc

- De divs lijken in ie, 5 pixels lager grooter dan in ff?
- De hoofd container div zit in FF 5 pixels lager

1
2
3
4
5
6
7
8
9
10
11
12
        #header {
         background-image:url('../style/img/header.png');
         background-repeat:no-repeat;
         height: 230px;
         width:723px;
         vertical-align: bottom;
         text-align:left;
         font-size:20px;
         color:#ffffff;
         letter-spacing:-1px;
         border:1px solid black;
        }


Alvast bedankt!

[ Bericht 4% gewijzigd door Darkomen op 04-10-2006 22:51:20 ]
  woensdag 4 oktober 2006 @ 23:09:40 #65
104583 cyberstalker
Een krachtig neen!
pi_42374610
quote:
Op woensdag 4 oktober 2006 22:31 schreef Darkomen het volgende:
Ik heb een aantal layout probleempjes welke verschillen in IE en FF

- Ik geef vaste maten op, maar hoe krijg ik dat mooi variabel zodat het in verschillende scherm grootes netjes is.
Een breedte in bijvoorbeeld procenten opgeven (width: 40%)of bijvoorbeeld werken met position: absolute op de buitenste elementen en een padding op de body indien je meerdere kolommen wilt.
quote:
- De tekst die in de header staat moet in de grijze balk staan, en ook beginnen waar de grijze balk begint.
maar op een of andere manier wil css niet luisteren, dus ik doe wat fout.
vertical-align: bottom; lijkt niet te werken.
Ik weet niet precies wat je met 'de grijze balk' bedoelt, maar ik ga er vanuit dat dat iets met je achtergrondplaatje te maken heeft. Je kunt met padding opgeven waar de tekst moet beginnen. vertical-align is alleen bedoelt voor table-cells, wat dit zeer duidelijk niet is (het is een div)
quote:
- Als er in header een link staat (<a href=") En die wil ik een andere kleur geven als al opgegeven is in a.active, a.link etc
header a

een link (a) die in de header staat .
quote:
- De divs lijken in ie, 5 pixels lager grooter dan in ff?
- De hoofd container div zit in FF 5 pixels lager
Van IE weet ik niets.
quote:
[ code verwijderd ]

Alvast bedankt!
Zal ik hier dan maar 'dankjewel' neerzetten?
Hope for the best, prepare for the worst.
pi_42375169
Bedankt voor je antwoorden,
Dat ik het in procenten op moet geven weet ik, maar dat gaat op een of andere manier vaak fout.
Ook de padding opgeven in de header geeft weer een ander probleem, in FF word dan de bovenste div te breed, door de breedte weg te halen of de padding van de breedte afte trekken zorgt er weer voor dat hij in IE weer te klein is.
Ik bedoel idd de grijze balk in de achtergrond.
het moet er ongeveer zo uit zien als de site, ik zie nu dat ik vergeten ben de url van de site erbij te plakken
De oude site:
http://www.peugeot405club.nl/
De rebuild:
http://www.peugeot405club.nl/rebuild/
pi_42376875
Ik zou alle groottes relatief neerzetten (in em's), zodat men zelf kan bepalen hoe klein of groot ze hem willen schalen. Want width: 40% werkt misschien lekker bij 1280, maar totaal niet bij 800.

het opgeven van em's zorgt ook dat in IE niet alleen de tekst groter wordt bij een grotere lettergrootte, maar alle waarde die in em's zijn opgegeven.

Is het eigenlijk nodig om de globale css instellingen van a (a:hover enz) boven de specifiekere waarden als header a{} te gooien? Of pakt de ideale browser direct de meest specifieke instelling?
pi_42380243
Geen idee, maar ik zal iig eens naar de em's kijken.
geen idee hoevel em, 1 pixel is


edit, denk niet dat het in em's werken echt veel uitmaakt

edit 2: probleem met de header en de tekst heb ik opgelost door er nog een div onder te gooien met text-indent.
Werkt in IE en FF

Omzetten naar em doe ik wel een keer als ik tijd heb.
1em is 12 pixels?

edit: footer probleem is ook opgelost gelukkig, nu nog ff de urls in de header goed zien te krijgen
Edit, ook gelukt

[ Bericht 14% gewijzigd door Darkomen op 05-10-2006 10:24:07 ]
pi_42382296
standaard geloof ik 14, maar hangt dus van de font-size af: http://www.handleidinghtm(...)genda/legenda04.html
  donderdag 5 oktober 2006 @ 11:56:00 #70
12880 CraZaay
prettig gestoord
pi_42384134
Verschil in afmetingen van block level elementen, zoals divs, komt meestal door rendering op basis van een ander box model i.c.m. padding op het element. Welk doctype gebruik je?
pi_42385504
Ik heb in een DIV een transparante PNG als achtergrond, hoe fix ik dat in IE? :?
Dit had ik al geprobeerd:
1
2
html>body #header h1 a {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/bg_header_h1_a.png',sizingMethod='scale');}

maar dat wil niet werken
pi_42386446
quote:
Op donderdag 5 oktober 2006 12:49 schreef super-muffin het volgende:
Ik heb in een DIV een transparante PNG als achtergrond, hoe fix ik dat in IE?
Dit had ik al geprobeerd:
[ code verwijderd ]

maar dat wil niet werken
De div zetten in een extra achtergrond-div (en daar de background weer in), en daar het filter op loslaten?

(niet getest)
Ich fälle Bäume und hupf und spring, steck Blumen in die Vas
Ich schlupf in Frauenleider, und lummel mich in Bars
pi_42386452
quote:
Op donderdag 5 oktober 2006 11:56 schreef CraZaay het volgende:
Verschil in afmetingen van block level elementen, zoals divs, komt meestal door rendering op basis van een ander box model i.c.m. padding op het element. Welk doctype gebruik je?
HTML 4.01 Transitional

Ik ben al een aardig eindje.


Bedankt voor de link the_disheaver, ik ga eens kijken of het snap
pi_42387915
quote:
Op donderdag 5 oktober 2006 13:21 schreef Berkery het volgende:

[..]

De div zetten in een extra achtergrond-div (en daar de background weer in), en daar het filter op loslaten?

(niet getest)
Is dat omdat IE deze filter niet toestaat op hyperlinks?

edit: ik heb het anders opgelost:
Ik heb die background op de #header h1 gezet ook in mijn normale stylesheet.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#header h1 {
background: url(../images/bg_header_h1_a.png);
width: 340px;
height: 100px;
display: block;
position: relative;
left: -30px;
text-indent: -9999px; }

#header h1 a {
position: relative;
top: 10px;
left: 11px;
width: 324px;
height: 80px;
display: block; }

/*IE STYLESHEET /*
html>body #header h1 {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/bg_header_h1_a.png',sizingMethod='scale');}

Ik ga nu even kijken of het werkt

[ Bericht 58% gewijzigd door super-muffin op 05-10-2006 14:13:10 ]
  donderdag 5 oktober 2006 @ 23:30:51 #75
12880 CraZaay
prettig gestoord
pi_42408770
quote:
Op donderdag 5 oktober 2006 14:04 schreef super-muffin het volgende:

[..]

Is dat omdat IE deze filter niet toestaat op hyperlinks?
Jawel, dat werkt gewoon op hyperlinks. Vaak gaat het fout bij het path; normaal als je een achtergrondafbeelding gebruikt in een extern CSS-bestand dan is het pad daar naartoe relatief vanaf het CSS-bestand. Bij gebruik van het IE-filter is het relatief vanaf de locatie waar het CSS-bestand wordt geinclude.
abonnement bol.com Unibet Coolblue
Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')