[CSS] voor dummies - Deel 4

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_39394548
Volgende code:
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		<div id="hmenu">
            <dl id="menu">
      <dt onmouseover="javascript:schuif('smenu0');" onmouseout="javascript:schuif();"><a href="/nieuw1/">Home</a></dt>
      <dt onmouseover="javascript:schuif('smenu1');" onmouseout="javascript:schuif();"><a href="#">Groep</a></dt>
         <dd id="smenu1" onmouseover="javascript:schuif('smenu1');" onmouseout="javascript:schuif();">
            <ul>
               <li><a href="#">Tekst</a></li>

            </ul>
         </dd>
      <dt onmouseover="javascript:schuif('smenu4');" onmouseout="javascript:schuif();"><a href="#">Groep</a></dt>
         <dd id="smenu4" onmouseover="javascript:schuif('smenu4');" onmouseout="javascript:schuif();">
            <ul>
               <li><a href="#">Tekst</a></li>
            </ul>
         </dd>
      <dt onmouseover="javascript:schuif('smenu5');" onmouseout="javascript:schuif();"><a href="#">Groep</a></dt>
         <dd id="smenu5" onmouseover="javascript:schuif('smenu5');" onmouseout="javascript:schuif();">
            <ul>
               <li><a href="#">Nog</a></li>
               <li><a href="#">Invullen</a></li>
            </ul>
         </dd>
      <dt onmouseover="javascript:schuif('smenu6');" onmouseout="javascript:schuif();"><a href="/nieuw1/pages/contact.html">Contact</a></dt>
</dl></div>
         <div id="inhoud">
            <h4>Tekst....................</h4>
            <div id="fotofront">
            <a href="javascript:SLIDES.hotlink()"><img name="SLIDESIMG" src="../images/IM000189.JPG" border="0" style="filter:progid:DXImageTransform.Microsoft.Fade()" alt="Slideshow image"></a>
            </div>
</div>

Met de volgende css code:
1
2
3
4
5
6
7
8
9
10		#hmenu        { color: #fefdd3; background-color: #f9ee00; display: block; padding: 0; width: 160px; height: auto; float: left; clear: both; border-right: 1px solid #eb4b2b; \width: 140px; w\idth: 120px       }
#inhoud                    { color: #404040; background-color: #fefdd3; text-align: left; display: block; margin: 0 0 0 160px; padding: 10px 0 0 20px; z-index: 1; width: 760px }
#fotofront                      { color: #404040; background-color: #fefdd3; text-align: center; display: block; margin: auto; padding: 10px 0; z-index: 2; width: 740px; height: 500px; vertical-align: middle }
#menu dt        { color: #eb4b2b; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 27px; background: #f9ee00; text-align: center; cursor: pointer; margin: 0; padding: 0; z-index: 101; height: 27px; border-style: solid; border-width: 0 1px 1px 8px; border-color: #eb4b2b }
#menu dt a:hover         { color: #f9ee00; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; line-height: 27px; background: #eb4b2b; text-align: center; cursor: pointer; margin: 0; padding: 0; z-index: 101; height: 27px }
#menu dd        { color: #EB4B2B; font-family: Verdana, Arial, Helvetica, sans-serif; background: #F9EE00; margin-top: -1.5em; position: absolute; z-index: 100; right: 8em; left: 140px; width: 9.5em; border-style: solid; border-width: 0 1px 1px; border-color: #EB4B2B }
#menu ul    { margin: 0; padding: 0; z-index: 102 }
#menu li       { color: #eb4b2b; font-size: 100%; font-family: Verdana, Arial, Helvetica, sans-serif; line-height: 18px; background: #f9ee00; text-align: center; margin: 0; padding: 0; z-index: 103; height: 18px; border-style: solid; border-width: 1px 0 0; border-color: #eb4b2b }
#menu li a, #menu dt a    { color: #404040; font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; display: block; z-index: 103; height: 18px; overflow: visible }
#menu li a:hover      { color: #f9ee00; font-family: Verdana, Arial, Helvetica, sans-serif; background: #eb4b2b; z-index: 103; height: 18px; overflow: visible }
Nu is het zo dat het schuifmenu geheel uitstaat als je de pagina oproept. Als je dan met de muis over het menu heengaat schuift het weer in en daarna gedraagt het zich zoals zou moeten. Maar in eerste instantie staat het menu dus uit en dat krijg ik niet weg. Iemand een idee. Ik heb al zitten klooien met Z-index etc. Maar dat helpt niet.
Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.
pi_39395526
Heb je een online voorbeeld, want wij kunnen jou javascript niet zien zo
Steam - SC2
pi_39395868
quote:
Op vrijdag 30 juni 2006 16:35 schreef super-muffin het volgende:
Heb je een online voorbeeld, want wij kunnen jou javascript niet zien zo
http://www.bbfmetaal.nl/nieuw1/
Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.
pi_39396055
Oke, ik ga zo even naar kijken.
Maar ik moet zeggen dat ik geen expert ben op JS gebied.

Waarom heb je hier trouwens een defenition list voor gebruikt een geen UL?
Steam - SC2
pi_39396422
quote:
Op vrijdag 30 juni 2006 16:50 schreef super-muffin het volgende:
Oke, ik ga zo even naar kijken.
Maar ik moet zeggen dat ik geen expert ben op JS gebied.

Waarom heb je hier trouwens een defenition list voor gebruikt een geen UL?
Noob en aan het leren. Ik zal daar eens naar kijken. Dank je.
Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.
pi_39417426
Ik zou als ik jou was eens kijken op alistapart.com of cssplay.co.uk naar een menu
Steam - SC2
pi_39418667
quote:
Op zaterdag 1 juli 2006 10:09 schreef super-muffin het volgende:
Ik zou als ik jou was eens kijken op alistapart.com of cssplay.co.uk naar een menu
Ik heb het boek van Zeldman liggen. Moet ik nog aan beginnen. Nu eerst het strand op.
Geloven is zeker weten dat je het niet weet.
Geloven maakt meer kapot dan je lief is.
Vloeken is aangeleerd...geloven ook.
pi_39682317
ik heb het volgende 'probleem'
ik heb de volgende code:
1
2		<a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">link1</a>
<a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">link2</a>


samen met de volgende CSS code
1
2
3
4
5
6
7
8
9
10
11
12
13
14		a.glink, a.glink:visited{
     font-size: small;
     color: #000000;
   font-weight: bold;
   margin: 0px;
   padding: 2px 5px 4px 5px;
   border-right: 1px solid #8FB8BC;
   cursor:pointer;
}

a.glink:hover{
     background-image: url(images/glblnav_selected.gif);
   text-decoration: none;
}

hoe kan ik dit zo aan passen dat de style behouden blijft maar dat het geen hyperlinks meer zijn..?
een voorbeeldje is hier te zien:
http://fia181-83.dsl.hccnet.nl/anime_argeweb/1.php
  maandag 10 juli 2006 @ 09:18:06 #284
62215 qu63
..de tijd drinkt..
pi_39682396
quote:
Op maandag 10 juli 2006 09:12 schreef mschol het volgende:
ik heb het volgende 'probleem'
ik heb de volgende code:

[ code verwijderd ]

samen met de volgende CSS code

[ code verwijderd ]
hoe kan ik dit zo aan passen dat de style behouden blijft maar dat het geen hyperlinks meer zijn..?
een voorbeeldje is hier te zien:
http://fia181-83.dsl.hccnet.nl/anime_argeweb/1.php
door a.glink:visited ook toe te voegen geloof ik, dan gaat ie wel naar 1.php#, maar verder niet. je zou ook <span> of <div> kinnen gebruiken als je de href toch niet gebruikt
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_39682414
Bedoel je als je op die link klikt, het geen link meer is?
Met CSS is het niet mogelijk. Want CSS is alleen voor de opmaak.

wel kun je een PHP gebruiken:
http://www.alistapart.com/articles/keepingcurrent/
Steam - SC2
pi_39682625
quote:
Op maandag 10 juli 2006 09:18 schreef qu63 het volgende:

[..]

door a.glink:visited ook toe te voegen geloof ik, dan gaat ie wel naar 1.php#, maar verder niet. je zou ook <span> of <div> kinnen gebruiken als je de href toch niet gebruikt
ahh <span> is idd de oplossing
alleen werkt het Hover effect dan niet meer
hoe zou ik dat kunnen fixen?
  maandag 10 juli 2006 @ 09:37:19 #287
62215 qu63
..de tijd drinkt..
pi_39682695
quote:
Op maandag 10 juli 2006 09:32 schreef mschol het volgende:

[..]

ahh <span> is idd de oplossing
alleen werkt het Hover effect dan niet meer
hoe zou ik dat kunnen fixen?
span.glink:Hover zou moeten werken hoor
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_39682851
quote:
Op maandag 10 juli 2006 09:37 schreef qu63 het volgende:

[..]

span.glink:Hover zou moeten werken hoor
hmmm om de een of andere reden pakt IE die dus niet..
moet maar eff gaan kijken of er een workaround voor is

--edit--

net wat zitten testen met een linkje (waar ik ook dat hover effect op wil hebben:
als ik:
border-right: 1px solid #8FB8BC;
bij een a.glink.hover weghaal dan werkt me hover niet meer (en alleen in IE)
zet ik em terug doetie ut weer..

[ Bericht 23% gewijzigd door mschol op 10-07-2006 10:10:25 ]
pi_39683474
IE kan alleen hoveren op A

Er is wel een fix voor.
http://www.xs4all.nl/~peterned/csshover.html
Steam - SC2
pi_39684573
quote:
Op maandag 10 juli 2006 10:23 schreef super-muffin het volgende:
IE kan alleen hoveren op A

Er is wel een fix voor.
http://www.xs4all.nl/~peterned/csshover.html

Mijn dank is groot
pi_39861217


1
2
3
4
5
6
7
8
9		<div class="navpanel">
   <div class="header">Navigatie</div>
   <div class="navpanel_deco"> </div>
   <div class="navpanel_items">
      <a href="http://site.nl/fp/1">Voorpagina</a>
      <a href="http://site.nl/fp/2">Blaat</a>
      <a href="http://site.nl/fp/3">Nog wat</a>
   </div>
</div>


Ik wil dat .navpanel_deco net zo lang wordt als .navpanel_items. Eerstgenoemde heeft geen inhoud. Hoe zorg ik er daarvoor zonder javascript of tabellen? De hoogte is niet van te voren bekend. Ik pak het waarschijnlijk sowieso op een verkeerde manier aan, dus graag wat advies

Dit is de style:
1
2
3
4
5		.navpanel_deco      {   background: #e4eff7;
                        width: 20px;
                        border-right: 1px solid #b5c0c8;
                        margin-right: 5px;
                        float: left; } 


Vereiste is overigens dat de navigatie-items als A-tag worden neergezet, zodat IE6 de :hover-tag ondersteunt.
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
pi_39868187
zonder javascript is dat denk ik onmogelijk. maar google eens op faux columns, misschien dat dat je wat oplevert.

in dit geval zou je misschien beter de anchors in je _deco kunnen zetten? dan wordt deze automatisch opgerekt. als je _deco een backgroundimage/color/whatever meegeeft en deze positioneerd zou je denk ik hetzelfde kunnen bereiken. Een beetje creatief denken zeg maar
As a rule, I never touch anything more sophisticated and delicate than myself.
  zondag 16 juli 2006 @ 02:18:01 #293
11753 Roonaan
Strictly
pi_39868248
Kan je deco niet een container div van items maken met een padding-left erin?
pi_39913136
quote:
Op zondag 16 juli 2006 02:18 schreef Roönaän het volgende:
Kan je deco niet een container div van items maken met een padding-left erin?
Ik zat inderdaad weer veel te moeilijk te denken, thx!

Ik heb er wel weer een nieuw crossbrowserprobleem bij. Ik heb de code waar het om gaat hier staan. Zoals de site er in FF en Opera uit ziet is het goed. Maar in IE passen #content en #nav niet naast elkaar. Als ik #content 3 pixels smaller maak komen ze wél naast elkaar te staan in IE, maar inclusief een lelijk gapend gat. Hoe krijg ik dit in IE in orde?

Ik heb de 'zo-werkt-het-wel-in-IE-maar-ziet-het-er-niet-uit'-versie hier staan.
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
pi_39931512
@nevermind
je hebt 2x #content gedefineerd met verschillende widths

tevens zie ik in #nav een float staan, maar in #content niet. Je zou kunnen proberen om #nav een display: inline; te kunnen geven aangezien IE soms de margins wil verdubbelen.
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_39933638
quote:
Op dinsdag 18 juli 2006 09:29 schreef Desdinova het volgende:
@nevermind
je hebt 2x #content gedefineerd met verschillende widths
Dat was inderdaad een domme fout Heeft verder geen effect op het resultaat.
quote:
tevens zie ik in #nav een float staan, maar in #content niet. Je zou kunnen proberen om #nav een display: inline; te kunnen geven aangezien IE soms de margins wil verdubbelen.
Ze hoeven toch ook niet beide een float te hebben? Of heb ik mijn basis-CSS verkeerd begrepen? Met display: inline verandert er helaas niets. Ik heb de nieuwe versie geupload naar dezelfde locatie.
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
pi_39933809
geef je #content een float: left;
dat fixed het bij mij
display inline kan weer weg

edit
waarschijnlijk komt dat omdat je body een text-align center heeft, en IE zonder problemen alles gecentreerd uitlijnt, in tegenstelling tot de degelijke browsers. en aangezien #content geen margin: 0 auto; heeft wordt er blijkbaar niet naar geluisterd door FF, waardoor hij hem gewoon default links knalt.
denk ik.
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_39934019
quote:
Op dinsdag 18 juli 2006 11:17 schreef Desdinova het volgende:
geef je #content een float: left;
dat fixed het bij mij
display inline kan weer weg
Yes! Hartstikke bedankt!
quote:
edit
waarschijnlijk komt dat omdat je body een text-align center heeft, en IE zonder problemen alles gecentreerd uitlijnt, in tegenstelling tot de degelijke browsers. en aangezien #content geen margin: 0 auto; heeft wordt er blijkbaar niet naar geluisterd door FF, waardoor hij hem gewoon default links knalt.
denk ik.
Ik ben benieuwd of dat het is! Dit zijn meestal de dingen waardoor ik depri word wanneer ik een layout geheel in CSS probeer te maken en waardoor ik doorgaans weer terugval op tabellen. Bedankt voor je hulp en de verklaring
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
pi_40086628
quote:
Op dinsdag 18 juli 2006 11:17 schreef Desdinova het volgende:
geef je #content een float: left;
dat fixed het bij mij
display inline kan weer weg

edit
waarschijnlijk komt dat omdat je body een text-align center heeft, en IE zonder problemen alles gecentreerd uitlijnt, in tegenstelling tot de degelijke browsers. en aangezien #content geen margin: 0 auto; heeft wordt er blijkbaar niet naar geluisterd door FF, waardoor hij hem gewoon default links knalt.
denk ik.
dat klopt.
margin: auto; verdeeld de margin tussen links en rechts. IE ondersteund dit niet en daarom moet je text-align: center; gebruiken. erg logisch
Steam - SC2
pi_40113643
Ik wil graag 2 div'sonder elkaar zetten. De hoogte van de tabellen kan varieren. Daarnaast kan het zo zijn dat de bovenste div niet geladen wordt op de pagina omdat deze niet relevant is.
Als ik het goed begrepen heb dien ik een container aan te maken die de 2 div's omvat. Met deze container kan ik de absolute positie van de 2 bovenelkaar geplaatste div bepalen.
maar hoe bepaal ik nu de positie van de div's in die container? En hoe klrijg ik ze netjes bovenelkaar, ongeacht de hoogte van de div?
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deel 4
Index

» digital corner

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