[CSS] voor dummies - deel 9

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_62791938
quote:
Op woensdag 29 oktober 2008 20:09 schreef Light het volgende:

[..]

float en text-align zijn verschillende dingen. En je kunt best een element float: left; en text-align: right; meegeven.
Dat snap ik, maar als ik de float:left zou weglaten en wel een text-align: right meegeef staat het lijstje wel rechts in de UL. Zo bedoelde ik het
quote:
Op woensdag 29 oktober 2008 20:11 schreef Light het volgende:

[..]

De UL width: auto; en float: right; meegeven, de LI's dan float: left; En dat in de DIV met de border.
Zo heb ik het nu idd ook opgelost . Werkt prima, jammer dat er een DIV bij moet .
pi_62792225
quote:
Op woensdag 29 oktober 2008 @ 20:07 schreef veldmuis het volgende:

[..]

Ik dacht dat het bij SEO wel wat kan uitmaken?
theoretisch wel misschien... maar ik geloof daar niet zo in.

Nou ken ik de scan-algoritmes van google natuurlijk niet, maar kan me niet voorstellen dat een divje meer of minder van invloed is op je score.
  woensdag 29 oktober 2008 @ 20:39:53 #278
145090 HenkBenzinetank
Toegevoegde waarde
pi_62792653
quote:
Op woensdag 29 oktober 2008 20:07 schreef Light het volgende:

[..]

Met text-align: right zorg je ervoor dat de tekst in de li's rechts wordt uitgelijnd. De enige manier om dan te zorgen dat het laatste menu-item tegen de rechterkantlijn komt te staan, is door te zorgen dat de li's zodanig worden verdeeld dat het precies uitkomt.
i know, ik snapte alleen niet precies wat veldmuis bedoelde;
pi_62829057
morge allemaal,

Ik ben al een tijdje bezig met het ontwerpen van een template en wil het volgende bereiken.
een 100% height pagina met bover een header en beneden een footer die een vaste hoogte hebben.
Ik wil de pagina helemaal opbouwen met DIVjes en heb al heel veel artikelen gevonden over een 100% height DIV echter wil het nog niet helemaal werken.

Ik heb de pagina nu in IE en ook alleen in IE zoals ik hem wil hebben, pagina staat hieronder weergegeven
maar heb de HTML en BODY tags weg moeten halen om dit resultaat te krijgen.

kan iemand mij vertellen wat ik verkeerd doe of hoe ik dit ook werkend krijg in FF?

alvast bedankt.. Groetjes Ronny


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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111		<style TYPE="text/css">

body
 {
  margin:0;
  padding:100px 0 22px 0;

 }

  * html body
 {
  overflow:hidden;
 } 

 * html div#content
 {
  height:100%;
  overflow:hidden;
 }

 div#header{
  position:absolute;
  background-image: url(./IMG/Top.png);
  top:0;
  left:0;
  width:100%;
  height:75px;
 }
 div#menubar
 {
  background-color:#f9ffff;
  position:absolute;
  border:solid 1px #CCCCCC;
  border-left:0;
  border-right:0;
  top:75px;
  left:0;
  width:100%;
  height:25px;
 }
 div#footer
 {
  background-color:#f9ffff;
  position:absolute;
  border:solid 1px #CCCCCC;
  border-bottom:0px;
  border-left:0px;
  border-right:0px;
  bottom:0;
  left:0;
  width:100%;
  height:22px;
 }
 
 div#menutree
 {
  border:solid 1px #CCCCCC;
  overflow-y:scroll;
  background-color:#f9ffff;
  position:absolute;
  left: 0px;
  border-bottom:0px;
  border-left:0px;
  border-top:0px;
  top:0px;
  width:160px;
  height:100%;
  z-index:2;
 }
 div#main
 {
  border:solid 0px #CCCCCC;
  overflow-y:scroll;
  padding-left:160px;
  background-color:#FFFFFF;
  position:absolute;
  right: 0px;
  top:0px;
  width:100%;
  height:100%;
  z-index:1;
 }
 
 
 @media screen
 {
  body>div#header
  {
   position:fixed;
  }
  body>div#menubar
  {
   position:fixed;
  }
  body>div#footer
  {
   position:fixed;
  }
 }
 
</style>


<div id="header">Top</div>
<div id="menubar">Menubar</div>
<div id="footer">Footer</div>

<div id="content">
    <div id="menutree">Menutree</div>
    <div id="main">Content</div>
</div>


[ Bericht 31% gewijzigd door Ronster op 31-10-2008 08:30:41 ]
pi_62829183
Kun je die zooi eens tusseen [ code] en [ /code] zetten? (en dan zonder spaties na de [ )
fokstok.nl
pi_62829295
owja had de verkeerde tags gebruikt
pi_62832683
Ik heb een z-index probleem en kan er niet achterkomen hoe en waar deze vandaan komt.

Voor een site wil ik een transparante achtergrond gebruiken en daar overheen een div met inhoud laten vallen.

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		#blackout {
    opacity:.7;
    filter:alpha(opacity=70);
    position:absolute; 
    left:0; 
    top:0; 
    width:100%; 
    height:2000px; 
    z-index:3; 
    background-image:url('/layout/images/darkbackgroundimage.gif');
    display: none;
}

#popupproduktopties { 
    z-index: 4; 
    position: absolute; 
    top: -100px; 
    left: 10%; 
    width: 600px; 
    height: 500px; 
    display: block; 
    background: #fff; 
    border: 5px solid black; 
    overflow: scroll;
}


Nu heb ik 2 divjes met bovenstaande namen, echter de div blackout maakt de achtergrond 'grijs' maar de 2e div valt ook onder het grijze gedeelte terwijl deze er op moet liggen? wat doe ik fout?

Ik denk dat ik trouwens de fout al weet, de div ligt in binnen andere divs, vandaar dat de z-index meegenomen wordt, is hier een workaround voor?
Just say hi!
pi_62835507
quote:
Op vrijdag 31 oktober 2008 @ 11:10 schreef Chandler het volgende:
Ik heb een z-index probleem en kan er niet achterkomen hoe en waar deze vandaan komt.

Voor een site wil ik een transparante achtergrond gebruiken en daar overheen een div met inhoud laten vallen.
[ code verwijderd ]

Nu heb ik 2 divjes met bovenstaande namen, echter de div blackout maakt de achtergrond 'grijs' maar de 2e div valt ook onder het grijze gedeelte terwijl deze er op moet liggen? wat doe ik fout?

Ik denk dat ik trouwens de fout al weet, de div ligt in binnen andere divs, vandaar dat de z-index meegenomen wordt, is hier een workaround voor?
Nope, Z-index werkt alleen voor elementen die op het zelfde niveau genest zitten.
Makkelijkste manier is gewoon de 'hoogste' div nesten in de achtergronddiv lijkt me.
pi_62836667
Hmm.. Ik denk dat het in dit geval pittig gaat worden maar toch bedankt voor je reactie! weer wat geleerd
Just say hi!
pi_62839619
IE6... aargh. Heerlijk dat de browser er compleet uit klapt wanneer je +/- 50 transparent PNG objecten in je CSS hebt zitten.
pi_62852091
quote:
Op vrijdag 31 oktober 2008 @ 15:24 schreef Geqxon het volgende:
IE6... aargh. Heerlijk dat de browser er compleet uit klapt wanneer je +/- 50 transparent PNG objecten in je CSS hebt zitten. :+
:') Trieste boel heh. Maarja wat wil je met een browser van 7 jaar oud.

Meestal heb ik zoiets van "dan maar lelijke plaatjes hoor". Heb wel een keer een 'hack' gebruikt.

1
2
3
4		#shadow            {background: url("/images/schaduw.png") repeat;}

/* IE6 hack */
* html #shadow         {background-color:#000;back\ground-color:transparent;background-image:url(blank.gif);filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/schaduw.png", sizingMethod="scale");}
pi_62852707
quote:
Op vrijdag 31 oktober 2008 23:04 schreef mcDavid het volgende:

[..]

Trieste boel heh. Maarja wat wil je met een browser van 7 jaar oud.

Meestal heb ik zoiets van "dan maar lelijke plaatjes hoor". Heb wel een keer een 'hack' gebruikt.
[ code verwijderd ]



Heb ik ook in de CSS gebruikt. En dan een keer of 40. En toen bevroor IE6 compleet bij het bezoeken van de website. Het was dan ook zo'n heerlijke hippe ronde hoekjes website.
  vrijdag 31 oktober 2008 @ 23:30:01 #288
145090 HenkBenzinetank
Toegevoegde waarde
pi_62852732
dr zijn ook andere manieren om ie png's e laten slikken ipv 50x hetzelfde opnemen in de css
pi_62853009
quote:
Op vrijdag 31 oktober 2008 23:30 schreef HenkBenzinetank het volgende:
dr zijn ook andere manieren om ie png's e laten slikken ipv 50x hetzelfde opnemen in de css
Maar dan nog mis je functionaliteit. Zo vind ik het erg frustrerend dat de background-*.* elementen niet meer werken als je een PNGfix toepast in Internet Explorer 6.

zelf neem ik altijd het volgende op in mijn IE6 conditional comment:
quote:
#div,
#div h1,
#div .subdiv {
behavior:url(iepngfix.htc);
}
you and I ain't done Zeke!
  vrijdag 31 oktober 2008 @ 23:47:29 #290
145090 HenkBenzinetank
Toegevoegde waarde
pi_62853019
ook daar is een fix voor

edit
beter lezen, repeat en position werken nog steeds niet
pi_62853073
Idd als je zoiets 50x moet doen, kun je denk ik beter een javascript hack zoeken!

Heb ik toendertijd ook naar gekeken. Zijn over het algemeen een stuk omslachtiger, maar wel vaak in één keer voor de hele pagina klaar.

Maar, tegenwoordig is het gebruik van IE6 naar mijn mening ver genoeg afgenomen om die mensen dan maar een paar grijze randjes voor te schotelen. Evt. met de mededeling dat ze hun browser moeten upgraden voor optimaal kijkgemak.

[edit]
niezosnelineensjoh!
pi_62853194
quote:
Op vrijdag 31 oktober 2008 23:47 schreef HenkBenzinetank het volgende:
ook daar is een fix voor

edit
beter lezen, repeat en position werken nog steeds niet
Er is een nieuwe versie van iepngfix die wel ondersteuning heeft voor repeat en position. Zie hier
fokstok.nl
  zaterdag 1 november 2008 @ 00:01:55 #293
145090 HenkBenzinetank
Toegevoegde waarde
pi_62853289
o ja, dat was ;m

heb het laatst nog gebruikt voor een site maar kon het niet meer vinden
pi_62853781
quote:
Op vrijdag 31 oktober 2008 23:30 schreef HenkBenzinetank het volgende:
dr zijn ook andere manieren om ie png's e laten slikken ipv 50x hetzelfde opnemen in de css
Het zijn achtergrondafbeeldingen voor diverse objecten. Dat is niet met javascript aan te passen.

Tuurlijk, voor de IMG objecten met een transparante PNG gebruik ik wel javascript. Al voer je daar hetzelfde uit, dus het maakt geen verschil of je het met CSS of JS doet.

Het feit dat IE6, op welke computer dan ook, volledig crashde op deze website, is wel erg triest.
pi_62853927
quote:
Op zaterdag 1 november 2008 @ 00:29 schreef Geqxon het volgende:

[..]

Het zijn achtergrondafbeeldingen voor diverse objecten. Dat is niet met javascript aan te passen.
wie heeft je dit wijsgemaakt?
pi_62854134
quote:
Op zaterdag 1 november 2008 00:37 schreef mcDavid het volgende:

[..]

wie heeft je dit wijsgemaakt?
Hoe wil jij dan via javascript een in CSS aangeduidt achtergrond-property oproepen? Is niet mogelijk.
pi_62854168
quote:
Op zaterdag 1 november 2008 @ 00:51 schreef Geqxon het volgende:

[..]

Hoe wil jij dan via javascript een in CSS aangeduidt achtergrond-property oproepen? Is niet mogelijk.
object.style.background="..."
pi_62854199
quote:
Op zaterdag 1 november 2008 00:53 schreef mcDavid het volgende:

[..]

object.style.background="..."
Als ik die opvraag van een object waarbij de background-image in CSS is aangegeven krijg je een lege waarde.
pi_62854297
Hmm daar heb je idd gelijk in.

Mot je ook ff een scriptje schijven dat die achtergrondafbeeldingen ook nog een keer via DOM invoegt
pi_62854309
Kijk, een plaatje van de filter voorzien is simpel. Even in een for-lusje over alle PNG objecten een simpel scriptje:

1
2
3
4
5
6
7
8		   oldSrc = new String(pngObject.src);
   oldWidth = new String(pngObject.width);
   oldHeight = new String(pngObject.height);

      pngObject.src = "images/pixel_trans.gif";
      pngObject.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + oldSrc + "', sizingMethod='scale')";
      pngObject.style.width = oldWidth;
      pngObject.style.height = oldHeight;


Maar bij bijvoorbeeld een H3 met een background-image propery in CSS kun je niet de background-image property aanvragen.
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - deel 9
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')