[CSS] voor dummies - deel 10

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
pi_63378745
<!--[if IE]><style type="text/css">#sidebar li {text-indent:-15px; } </style> <![endif]-->

Lelijk als de hel maar ik heb het uiteindelijk zo opgelost
pi_63379196
Het werkt . Bedankt, k had hier zelf noooit op gekomen.
pi_63393366
Er gaat iets mis met je conditional comment! Het staat nu in firefox te ver naar links
pi_63394824
quote:
Op vrijdag 21 november 2008 01:36 schreef mcDavid het volgende:
Er gaat iets mis met je conditional comment! Het staat nu in firefox te ver naar links
Ja, de code voor de conditional comment is niet goed. En 't staat op de verkeerde plaats.
fokstok.nl
  vrijdag 21 november 2008 @ 11:30:17 #30
141104 Patje1987
Madre me quiero un frikandel.
pi_63399498
TVP
Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!
pi_63404497
Waar moet hij nou ?
pi_63405423
Je moet gewoon precies die regel zoals ik hem had in de head sectie zetten.
  vrijdag 21 november 2008 @ 15:22:07 #33
141104 Patje1987
Madre me quiero un frikandel.
pi_63406233
Op verzoek, ik kreeg hem in firefox niet opgelost dat de height niet op 100% wilde. Sowieso moeten alle divs waar de div in zit op 100%, en dat was ook zo, heb ze allemaal even een standaard hoogte gegeven en het bleek dat ie vastliep op de holder (daar zitten 2 divs in). Toen heb ik de body gewoon een background-image gegeven want het menu resized toch wel mee :P.

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14		<div id="holder">
<div id="menu" runat="server" class="menu">
    <div class="header">
        <div class="version">Versie nummer</div>
        <div id="usermenu" runat="server" class="usermenu"></div>
    </div>
    <div id="menucontent" runat="server" class="menucontent"></div>
</div>
<div id="content">
    <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
    </asp:contentplaceholder>
</div>
</div>
<div id="footer">footer</div>


CSS
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		html
{
   height: 100%;
}

body
{
   margin: 0;
   padding: 0;
   font-family: Verdana;
   height: 100%;
   background: url(../images/menubackground.png) repeat-y;
}

#holder
{
   width: auto;
   height: 100%;
}

.menu
{
   height: 100%;
   width: 220px;
   float: left;
}
Wij vormen tezamen gezellig een schaar.
Sportief zijn wij allen en voor elkaar.
Ons doel en ons streven is vriendschap en vree
Aan ons de victorie aan RKC!
pi_63406598
quote:
Op vrijdag 21 november 2008 @ 15:22 schreef Patje1987 het volgende:
Op verzoek, ik kreeg hem in firefox niet opgelost dat de height niet op 100% wilde. Sowieso moeten alle divs waar de div in zit op 100%, en dat was ook zo, heb ze allemaal even een standaard hoogte gegeven en het bleek dat ie vastliep op de holder (daar zitten 2 divs in). Toen heb ik de body gewoon een background-image gegeven want het menu resized toch wel mee .

HTML
[ code verwijderd ]

CSS
[ code verwijderd ]
Dat is idd een veelgebruikte oplossing voor datsoort problemen!
pi_63410522
Edit: hij werkt wel in IE

[ Bericht 23% gewijzigd door hello_moto1992 op 21-11-2008 18:10:53 ]
pi_63410751
quote:
Op vrijdag 21 november 2008 18:02 schreef hello_moto1992 het volgende:
Edit: hij werkt wel in IE
Er staan nog wel wat foutjes in stylegreen.css. Om te beginnen regel 41. In css kun je geen conditional comments plaatsen, en al helemaal niet in html-stijl.
Dan regel 114 en 119. Die staan na een accolade sluiten, en waarschijnlijk moeten ze ervoor. Zo doen ze in ieder geval niets.
fokstok.nl
pi_63410795
En er zitten nog wat foutjes in je html. De meeste moet je simpel kunnen oplossen.
fokstok.nl
pi_63425163
De CSS is inmiddels opgelost. De rest ook een beetje. K moet er later nog mee bezig...al zie k niet echt wat er nu mis mee is
pi_63425255
Je hebt wel gezien dat er een linkje staat in m'n vorige post?
fokstok.nl
pi_63429112
TVP
Bodybuilding #1
Hardlopen #2
pi_63431474
quote:
Op zaterdag 22 november 2008 11:37 schreef Light het volgende:
Je hebt wel gezien dat er een linkje staat in m'n vorige post?
Jazeker! Ik gebruik het ook wel voor mijn site voor school.

Maar er waren vanmiddag nog 4 fouten over, maar k snapte niet hoe k die kon oplossen. Nu is het ineens nog maar 1 fout
pi_63439496
Ik heb ook even gekeken, er staan 4 foutmeldingen en aan de foutmeldingen te zien hoef je alleen de eerste op te lossen. De rest gaat dan automatisch ook goed. Die eerste melding geeft aan dat er ergens een div geopend wordt die niet weer wordt afgesloten. Er staat dus een <div> meer dan een </div>
fokstok.nl
pi_63476683
Ik heb een transparante PNG. http://hokje10.nl/img/bannergreen.png
Die wil ik in de header op een ander plaatje plakken. In de CSS heb ik dus in het ene plaatje, http://hokje10.nl/1.png , gezet. In de HTML heb ik daar de transparante PNG op gezet.

Maar nu wordt de achtergrond van de transparante PNG opeens wit. Als ik hem in de HTML code zet is hij wel goed.

CSS:
1
2
3
4		#logo {
   height: 145px;
   width: 960px;
    background: url(1.png) no-repeat;} 


HTML:
1
2
3		   <div id="logo">
<img src="img/bannergreen.png" alt="www.hokje10.nl" />
   </div> 
pi_63477189
quote:
Op maandag 24 november 2008 @ 13:40 schreef hello_moto1992 het volgende:
Ik heb een transparante PNG. http://hokje10.nl/img/bannergreen.png
Die wil ik in de header op een ander plaatje plakken. In de CSS heb ik dus in het ene plaatje, http://hokje10.nl/1.png , gezet. In de HTML heb ik daar de transparante PNG op gezet.

Maar nu wordt de achtergrond van de transparante PNG opeens wit. Als ik hem in de HTML code zet is hij wel goed.

CSS:
[ code verwijderd ]

HTML:
[ code verwijderd ]
IE6?
Die ondersteunt geen alpha transparency. Althans niet zonder hacks.
pi_63477299
quote:
Op maandag 24 november 2008 13:56 schreef mcDavid het volgende:

[..]

IE6?
Die ondersteunt geen alpha transparency. Althans niet zonder hacks.
Nee Firefox/IE7. Kijk maar eens op www.hokje10.nl bovenaan.
pi_63477416
hmm dan is er toch echt wat mis met je plaatje lijkt me.
pi_63477511
quote:
Op maandag 24 november 2008 13:40 schreef hello_moto1992 het volgende:
Ik heb een transparante PNG. http://hokje10.nl/img/bannergreen.png
Die wil ik in de header op een ander plaatje plakken. In de CSS heb ik dus in het ene plaatje, http://hokje10.nl/1.png , gezet. In de HTML heb ik daar de transparante PNG op gezet.

Maar nu wordt de achtergrond van de transparante PNG opeens wit. Als ik hem in de HTML code zet is hij wel goed.

CSS:
[ code verwijderd ]

HTML:
[ code verwijderd ]



1background: transparent url(1.png) no-repeat;

of
1
2		background-image: url(1.png);
background-repeat: no-repeat;
() en in het laatste geval moet het niet toevallig zo zijn dat de background-color ergens overgeerft wordt..


edit
die voorbeeldcode werkt niet omdat de hader div natuurlijk niet de IMG bevat .. maar dat overerfen van en background-color bleek dus wel te gebruen:

in je code staat:
1
2
3
4
5
6		img {
   border: 1px solid #f1f1f1;   
   background-color: #f5f5f5; 
   margin: 5px;
   padding: 5px; 
   text-align: center; }

waarschijnlijk moet je afvragen waarom dat precies is (waarschijnlijk o een nette 'band' om afbeeldingen te maken)
maar dat kun je dan betere een ietwat preciesere selector geven, bv iets als DIV#contentmid IMG { foo: bar; }
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_63479519
Ok, thanx! ik heb voor het gemak die rand maar ff verwijderd. Hij doet het nu .

edit:

1
2
3
4
5
6
7		 #contentmid img {
   margin: 5px;
   padding: 5px; 
   text-align: center; 
border: 1px solid #f1f1f1;   
   background-color: #f5f5f5; 
}


Dit heb k toch maar toegevoegd om de rand bij de andere plaatjes wel te houden.

[ Bericht 66% gewijzigd door hello_moto1992 op 24-11-2008 18:11:32 ]
  FOK!-Schrikkelbaas dinsdag 25 november 2008 @ 20:56:40 #49
1972 Swetsenegger
Egocentrische Narcist
pi_63518717
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <title> home</title>
      <link rel="stylesheet" type="text/css" href="includes/ui.css" />
      </head>
   <body>
      <div class="container">
                   <div id="top">
                          top
                   </div>
                        <div class="left" style="border:solid 1px red;">
                          links
              </div>
         <div class="bottom">
                              <p>Test...</p>
         </div>
      </div>
   </body>
</html>


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		html, body {
   margin:0;
   padding:0;  
   height:100%; 
}

body{
   font-family: tahoma, verdana, Sans, sans-serif;
   background-image: url(../image/bg.gif);
}
      
.container{
   position:relative;
   border: 1px solid #c5d6f9;
    margin: 20px 0px 5px 0px;
    background-color: #fffffe;
   margin:0 auto; /*horizontale centrering. Werkt niet in IE quircksmode. Dan text-align:center aan body toevoegen*/
   width:1000px;
}


#top{
   position:relative;
   height:100px;
   padding:0;
}

.bottom{
   float:right;
   width:834px;
   height:500px;
   min-height:500px;
}

.left{
   float:left;
   height:500px;
   min-height:500px;
   width:156px;
}


Waarom worden 'left' en 'bottom' niet genest binnen 'container' :?
Betrouwbare juwelier met korting |  | FOK! Schrikkelbaasch | Koop een vakantiewoning!
pi_63518880
Dat worden ze wel, maar met die float haal je ze uit de natuurlijke float, waardoor de overige elementen geen rekening meer houden met de grootte.

Zet er een divje onder met clear:both, dan dwingt die de container om er weer omheen te gaan staan.
actieve topics nieuwe topics
abonnement Unibet Coolblue
[CSS] voor dummies - deel 10
Index

» digital corner

» development

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