[CSS] voor dummies - deel 10 | Digital Corner (DIG/DEV)

vrijdag 21 november 2008 @ 14:21:57 #31

hello_moto1992

Waar moet hij nou

?

vrijdag 21 november 2008 @ 14:53:36 #32

mcDavid

Je moet gewoon precies die regel zoals ik hem had in de head sectie zetten.

vrijdag 21 november 2008 @ 15:22:07 #33

Patje1987

Madre me quiero un frikandel.

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!

vrijdag 21 november 2008 @ 15:33:26 #34

mcDavid

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!

vrijdag 21 november 2008 @ 18:02:59 #35

hello_moto1992

Edit: hij werkt wel in IE

[ Bericht 23% gewijzigd door hello_moto1992 op 21-11-2008 18:10:53 ]

vrijdag 21 november 2008 @ 18:15:57 #36

Light

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

vrijdag 21 november 2008 @ 18:18:42 #37

Light

En er zitten nog wat foutjes in je html. De meeste moet je simpel kunnen oplossen.

fokstok.nl

zaterdag 22 november 2008 @ 11:30:40 #38

hello_moto1992

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

zaterdag 22 november 2008 @ 11:37:00 #39

Light

Je hebt wel gezien dat er een linkje staat in m'n vorige post?

fokstok.nl

zaterdag 22 november 2008 @ 14:57:38 #40

Kerol

Coño

TVP

Bodybuilding #1
Hardlopen #2

zaterdag 22 november 2008 @ 17:00:09 #41

hello_moto1992

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

zaterdag 22 november 2008 @ 23:03:38 #42

Light

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

maandag 24 november 2008 @ 13:40:30 #43

hello_moto1992

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

maandag 24 november 2008 @ 13:56:02 #44

mcDavid

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.

maandag 24 november 2008 @ 13:59:55 #45

hello_moto1992

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.

maandag 24 november 2008 @ 14:04:35 #46

mcDavid

hmm dan is er toch echt wat mis met je plaatje lijkt me.

maandag 24 november 2008 @ 14:08:43 #47

RM-rf

1/998001

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 ]

1	background: 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

maandag 24 november 2008 @ 15:27:59 #48

hello_moto1992

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

Swetsenegger

Egocentrische Narcist

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' :?

 | FOK! Schrikkelbaasch

dinsdag 25 november 2008 @ 21:02:26 #50

mcDavid

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.

FOK!-Schrikkelbaas dinsdag 25 november 2008 @ 21:05:00 #51

Swetsenegger

Egocentrische Narcist

quote:
Op dinsdag 25 november 2008 21:02 schreef mcDavid het volgende:
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.

Ik heb nu de floats in een wrap gezet met een min height en dat lijkt ook te werken... Maar vreemd dat je ook moet 'clearen' als er na je floats geen divs meer komen.

 | FOK! Schrikkelbaasch

dinsdag 25 november 2008 @ 21:09:04 #52

mcDavid

dat werkt inderdaad, totdat de content van de div's die je gefloat hebt hoger wordt dan die minimum height. Dan zit je weer met het zelfde probleem.

En eigenlijk, als je er over nadenkt... dan zit er wel wat in. Of het handig is is een tweede.

Anyway gewoon <div style="clear:both"></div> eronder en klaar.

Mocht er een footer onder komen, kun je die er ook voor gebruiken.

FOK!-Schrikkelbaas dinsdag 25 november 2008 @ 21:14:06 #53

Swetsenegger

Egocentrische Narcist

quote:
Op dinsdag 25 november 2008 21:09 schreef mcDavid het volgende:
dat werkt inderdaad, totdat de content van de div's die je gefloat hebt hoger wordt dan die minimum height. Dan zit je weer met het zelfde probleem.

Dat vreesde ik al...

quote:
En eigenlijk, als je er over nadenkt... dan zit er wel wat in. Of het handig is is een tweede.

Wat dan?

quote:
Anyway gewoon <div style="clear:both"></div> eronder en klaar.

Mocht er een footer onder komen, kun je die er ook voor gebruiken.

Die komt er wellicht onder dus dat gaan we maar doen.

 | FOK! Schrikkelbaasch

donderdag 27 november 2008 @ 20:01:10 #54

Banzaiaap

Tony Rocky Horror

Heb weer een leuk probleem? Mja, probleem.. ik probeer mn code zo netjes mogelijk te houden, maar heb geen idee hoe.. Heb namelijk een content div die over de nav bar heen moet vallen, maar 2 verschillende achtergronden moet hebben. 1 achtergrond voor de gradient aan de bovenkant van de main-content div en eentje voor de dubbele border. (Ik weet het omslachtig, maar het MOET kunnen

)

Tot zover heb ik het al mooi weten te krijgen, van bovenaf gezien dan: http://test.banzaidesign.nl/

Moet dus uiteindelijk zo gaan worden:

vrijdag 28 november 2008 @ 11:29:41 #55

Patje1987

Madre me quiero un frikandel.

quote:
Op donderdag 27 november 2008 20:01 schreef Banzaiaap het volgende:
Heb weer een leuk probleem? Mja, probleem.. ik probeer mn code zo netjes mogelijk te houden, maar heb geen idee hoe.. Heb namelijk een content div die over de nav bar heen moet vallen, maar 2 verschillende achtergronden moet hebben. 1 achtergrond voor de gradient aan de bovenkant van de main-content div en eentje voor de dubbele border. (Ik weet het omslachtig, maar het MOET kunnen )

Tot zover heb ik het al mooi weten te krijgen, van bovenaf gezien dan: http://test.banzaidesign.nl/

Moet dus uiteindelijk zo gaan worden:
[ afbeelding ]

Ik zou de body een achtergrond geven, en dan repeaten natuurlijk. Daarna en wrapper maken met bovenin een header div zonder achtergrond, waar je navigatie inkomt, en dan daaronder een div met je content en die een achtergrond geven (van de content).

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!

vrijdag 28 november 2008 @ 19:15:30 #56

Roy_T

tvp

woensdag 3 december 2008 @ 23:23:56 #57

Mirel

Mirel wil een bongophone.

Ik wil er eentje rechts hebben, maar hoe moet je het opdelen? Momenteel zijn de rode in een div en ze zijn apart ook een div, en de blauwe in een div. Heb float left in de rechter gegooid, en die komt rechts te staan, maar dan tussen de andere 2 in.

Hoe moet ik het nou opdelen dat ie wél zoals in de paint komt?

When all else fails, you always have delusion.

donderdag 4 december 2008 @ 00:01:20 #58

Roy_T

Je HTML en CSS posten zou handig zijn

Of liever nog: ergens online zetten.

donderdag 4 december 2008 @ 00:09:36 #59

Mirel

Mirel wil een bongophone.

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
41
42
43
44
45
46
47
48
49
50

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Matrozenkoor Apeldoorn</title>
   <link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
    <div id="header">
        <h1></h1>
           <p>slogan hier</p>
    </div> 
    <div id="inhoud">

       <div id="rij1">
            <div id="welkom">
            <h3 id="welkombalk">Welkom!</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
         Sed posuere, purus nec mollis vulputate, lacus arcu bibendum augue,
         ac blandit nunc diam ac massa. Mauris in purus at odio fringilla viverra.
         Vestibulum et tellus sed massa pellentesque laoreet. Suspendisse eget nisi
         sit amet elit semper ullamcorper.</p>
            </div>

            <div id="agenda">
            <h3 id="agendabalk">Agenda</h3>
         <p>1 december optreden
         2 december optreden
         3 december optreden</p>
            </div>
       </div> 

        <div id="rij2">
           <div id="laatstenieuws">
            <h3 id="laatstenieuwsbalk">Het laatste nieuws</h3>
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
         Sed posuere, purus nec mollis vulputate, lacus arcu bibendum augue,
         ac blandit nunc diam ac massa. Mauris in purus at odio fringilla viverra.
         Vestibulum et tellus sed massa pellentesque laoreet. Suspendisse eget nisi
         sit amet elit semper ullamcorper.</p>
            </div>
       </div> 

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

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

html {

}

body {
background: url(images/strookheader.jpg) repeat-x;
font-size: 90%;
font-family: verdana, calibri, tahoma;
line-height: 1.6em;
text-align: center;
color: #444444;
}

ul,li, img, body, html {
margin: 0; padding: 0;
}

a {
text-decoration: none;
color: #00d256;
}

a:hover {
text-decoration: underline;
}

a img (
border: none;
}

h3 {
background: url(images/strookitem.jpg) repeat-x;
font-size: 12px;
font-family: verdana, calibri, tahoma;
color: #FAFAFA;
margin: 0;
padding: -.2em .5em;
text-align: left;
text-transform: lowercase;
font-weight: normal;
}

.fr {
float: right;
}

.fl {
float: left;
}

#container {
text-align: left;
width: 866px;
margin: 0 auto;
}

#header {
background: url(images/header.jpg) no-repeat;
width: 866px;
height: 195px;
}

#inhoud {
padding: 0 1em;
}

#inhoud div {
overflow: hidden;
}

#rij1, #rij2 {
margin-bottom: 2em;
}

#rij1 div,
#rij2 div, {
border: 1px solid #ababab;
}

#rij1 #welkombalk {
height: 50x;
margin: 0;
padding: 0;
}

#agenda {
float: right;
width: 200px;
}

div namen spreken voor zich

When all else fails, you always have delusion.

donderdag 4 december 2008 @ 08:34:33 #60

Jo0Lz

Lick the box!

Volgens mij moet je dat blok dat je aan de zijkant wilt hebben, buiten de "inhoud" div, maar in de "container" div zetten. Ik kan het niet zien, kun je het ergens online zetten?
(Ik heb je source wel gezien, maar mis natuurlijk de plaatjes in de opmaak.)

 Yes we can! | I didn't fail, it's just postponed success.

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

[CSS] voor dummies - deel 10

» digital corner

» development

» digital corner

» development