[html, css, js] voor dummies #17

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue
  zondag 24 juli 2011 @ 15:39:29 #176
42636 TheSeeker_NL
Damn fine coffee
pi_99879272
ik wil graag weten hoe ik mijn footer op de correcte plek positioneer, dus onder de content en niet erboven.



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		<!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>Portal</title>
<link href="style/portal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
    <h1>Portal</h1>
</div> <!-- HEADER -->

<div id="content">
    <h2> Opties </h2>
    <div id="menu1"><h2>Menu 1</h2> </div> <!-- MENU 1 -->
    <div id="menu2"><h2>Menu 2</h2> </div> <!-- MENU 2 -->
    <div id="menu3"><h2>Menu 3</h2> </div> <!-- MENU 3 -->
    <div id="menu4"><h2>Menu 4</h2> </div> <!-- MENU 4 -->
    <div id="menu5"><h2>Menu 5</h2> </div> <!-- MENU 5 -->
    <div id="menu6"><h2>Menu 6</h2> </div> <!-- MENU 6 -->
    <p> Klik op een menu om verder te gaan</p>
</div> <!-- CONTENT -->  

<div id="footer">
    <p>Footer</p>
</div> <!-- FOOTER -->
</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		@charset "utf-8";
/* CSS Document */

body {
}

#content {
    width:1000px;
    background-color:#CCC;
    position:absolute;
    left:50%;
    margin-left:-500px;
    clear:right;
    }

#menu1 {
    background-color:#00F;
    width:300px;
    height:300px;
    float:left;
    margin-right:25px;
    margin-bottom:25px;
    margin-left:25px;
}

#menu2 {
    background-color:#393;
    width:300px;
    height:300px;
    float:left;
    margin-right:25px;
    margin-bottom:25px;
}

#menu3 {
    background-color:#966;
    width:300px;
    height:300px;
    float:left;
    margin-bottom:25px;
}

#menu4 {
    background-color:#96F;
    width:300px;
    height:300px;
    float:left;
    margin-right:25px;
    margin-left:25px;
}

#menu5 {
    background-color:#CF3;
    width:300px;
    height:300px;
    float:left;
    margin-right:25px;
}

#menu6 {
    background-color:#6C3;
    width:300px;
    height:300px;
    float:left;
    }

#header {
    background-color:#CCC;
}

#footer {
    background-color:#CCC;
}

.clear {
    clear:both;
}

Ik neem aan dat het met de float van de menu's te maken heeft in de content div en dat de footer deze als 't ware negeert en gewoon onder de header gaat zitten. Als ik me niet vergis moet ik ergens correct gebruik maken van "clear" maar waar precies? Kan iemand me even helpen?

Hartelijk dank.
pi_99879409
Sowieso #content niet absoluut positioneren. En er een overflow:hidden aan toe voegen om de float te clearen. Dan ben je al een heel eind gok ik.

Maar dat menu, maak daar nou gewoon even een UL van. Mijn hemel wat kan ik chagrijnig worden van menu's die uit divjes bestaan met unieke ID's met 10x dezelfde CSS.
Bleuh.
  zondag 24 juli 2011 @ 15:53:07 #178
42636 TheSeeker_NL
Damn fine coffee
pi_99879904
quote:
0s.gif Op zondag 24 juli 2011 15:42 schreef PimD het volgende:
Sowieso #content niet absoluut positioneren. En er een overflow:hidden aan toe voegen om de float te clearen. Dan ben je al een heel eind gok ik.

Maar dat menu, maak daar nou gewoon even een UL van. Mijn hemel wat kan ik chagrijnig worden van menu's die uit divjes bestaan met unieke ID's met 10x dezelfde CSS.
Ik zag dat ik je bovenstaande reactie al staan ja. Ik zal eens even kijken wat je er precies mee bedoelt, je moet niet vergeten dat sommige mensen niet op jouw kennis niveau zitten.

Ik waardeer echter wel dat je me probeert naar een ideale manier van schrijven probeert te loodsen hoor.

Ik ga eerst even aanpassen wat je suggereerde en daarna zal ik eens kijken of ik uit de voeten kom met je UL idee. Bedankt alvast.
  zondag 24 juli 2011 @ 15:58:05 #179
42636 TheSeeker_NL
Damn fine coffee
pi_99880109
Na het weghalen van :

1
2
3
4
5		#content {
    position:absolute;
    left:50%;
    margin-left:-500px;
    }

Klopt de flow van de pagina inderdaad weer. Maar die code had ik juist gebruikt om de content precies in het midden van de pagina te positioneren. Waarom leverde dit eigenlijk problemen op, en is er een alternatief? Als je me hier antwoord op weet te geven, dan beloof ik je dat ik met UL aan de slag ga :s)
pi_99880467
Het levert problemen op omdat:
a) position:absolute sowieso alleen gebruikt moet worden als het echt noodzakelijk is, om dingen over elkaar te plaatsen bijv.
b) margin-left: -500px zorgt dat je content uit beeld verdwijnt op schermen die geen 1000 pixels breed zijn

En waarom zou je niet gewoon zoals de rest van de hele wereld margin: auto gebruiken als je iets wilt centreren?
zcflevo.nl
pi_99880474
Position:absolute zorgt er voor dat je element uit de flow van de pagina wordt gehaald (en daardoor dus geen ruimte meer in neemt) en wordt gepositioneerd a.d.h.v. de eerste gepositioneerde parent (in dit geval je body). Hierdoor schuiven de andere elementen (in dit geval je footer) naar boven.

Als je content "margin:0 auto;" geeft zou ie weer keurig in het midden moeten staan.
Bleuh.
pi_99880587
ontwikkelen in moderne browsers is echt leuk, trouwens

hou me vast als ik straks IE7/8/9 ga proberen ;(
zcflevo.nl
  zondag 24 juli 2011 @ 16:23:54 #183
42636 TheSeeker_NL
Damn fine coffee
pi_99881188
Geen idee waarom ik dat niet gebruikt heb, maar dat zal ik vanaf nu dus gaan toepassen. Nu staat alles zoals ik het wil, dan nu op naar je andere suggestie.

1
2
3
4
5
6
7
8
9
10
11		ul {
}

li {
    background-color:#39F;
    list-style:none;
    width:200px;
    height:200px;
    margin:25px;
    float:left;
}

1
2
3
4
5
6
7
8
9
10
11
12		<div id="content">
    <h2> Opties </h2>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
    <p class="clear"> Klik op een menu om verder te gaan</p>
</div> <!-- CONTENT -->  

Is dit een beetje in de richting die je bedoelt? En als ik nu een Li aparte eigenschappen wil geven, dan daarvoor id aanmaken?
pi_99881465
Dat lijkt er al meer op ja. Ik zou in dit geval gebruik maken van classes om de li's een unieke achtergrond te geven, of natuurlijk een hendig sjieke :nth-child-selector. ID's gebruik ik eigenlijk nooit op losse elementen als li's, ik gebruik het alleen voor unieke componenten op een pagina (bijv. #navigation, #search etc), zodat je er ook naar toe kunt linken (index.html#search) - wat voor m.n. accessibility van belang is.
Bleuh.
  zondag 24 juli 2011 @ 17:28:55 #185
42636 TheSeeker_NL
Damn fine coffee
pi_99883979
Hopelijk hebben jullie nog energie voor 1 vraag van mij want ik blijf toch moeite hebben met positionering blijkbaar, ik ben nog even in de boeken gedoken maar ik kom er toch niet uit:



Ik wil de <li> mooi in het midden gepositioneerd hebben. Nu is er rechts meer marge dan links.
Is er nog een makkelijke manier om het automatisch uit te lijnen of moet ik gewoon precies uitmeten hoeveel pixels er vrij zijn links en rechts en dan de marge bijstellen?

De 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
32
33
34		<!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>Portal</title>
<link href="style/portal.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
    <h1>Portal</h1>
</div> <!-- HEADER -->
<div id="navigatie">
    <h3>navigatie></h3>
</div>
<div id="content">
    <h2> Opties </h2>
        <ul>
            <li><h3>Menu 1</h3></li>
            <li><h3>Menu 2</h3></li>
            <li><h3>Menu 3</h3></li>
            <li><h3>Menu 4</h3></li>
            <li><h3>Menu 5</h3></li>
            <li><h3>Menu 6</h3></li>
        </ul>
   <p class="clear"> Klik op een menu om verder te gaan</p>
</div> <!-- CONTENT -->  

<div id="footer">
    <p>Footer</p>
</div> <!-- FOOTER -->
</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
41		@charset "utf-8";
/* CSS Document */

body {
}

#content {
    width:1000px;
    background-color:#CCC;
    margin:0 auto;
    }
    
#content h3 {
    text-align:center
}

ul {
    margin:0 auto;
    padding:0;
}

li {
    background-color:#39F;
    list-style:none;
    width:270px;
    height:270px;
    margin:20px;
    float:left;
}
    
#header {
    background-color:#CCC;
}

#footer {
    background-color:#CCC;
}

.clear {
    clear:both;
}
pi_99884206
Laat ze niet floaten, dan kun je gewoon text-align:center (of justify) gebruiken op je parent.
Gebruik display:inline (of inline-block) om ze naast elkaar te krijgen
zcflevo.nl
  zondag 24 juli 2011 @ 17:52:33 #187
42636 TheSeeker_NL
Damn fine coffee
pi_99884825
quote:
3s.gif Op zondag 24 juli 2011 17:34 schreef KomtTijd... het volgende:
Laat ze niet floaten, dan kun je gewoon text-align:center (of justify) gebruiken op je parent.
Gebruik display:inline (of inline-block) om ze naast elkaar te krijgen
Bedankt, een hele simpele oplossing. Die floats stamde nog af van mijn div oplossing, ik wist wel dat die de boosdoeners waren eigenlijk.

Dat blijft toch nog wel het probleem voor mij met CSS, als ik mensen suggesties hoor geven dan klinkt het heel logisch maar om er zelf op te komen tijdens het schrijven van de code is gewoon erg lastig. Hoe dan ook, stapje voor stapje leer ik wel :)

Heel erg bedankt in elk geval, nu tijd om verder te schetsen.
  zaterdag 30 juli 2011 @ 22:18:49 #188
37634 wobbel
Da WoBBeL King
pi_100139605
Help, m'n uploadify scriptje geeft een bericht weer, maar ik kan er geen afbeelding inkrijgen!!

Dit is de output:

111 bestand(en) geupload, 0 fouten. <img src="/include/images/loader_small.gif" />Het laden van de volgende pagina kan erg lang duren afhankelijk van het aantal afbeeldingen.

En dit is m'n script
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		<script type="text/javascript">
                $(function() {
                $('#custom_file_upload').uploadify({
  'uploader'       : '/include/uploadify/uploadify.swf',
  'script'         : '/afbeelding_upload.php',
  'cancelImg'      : '/include/uploadify/cancel.png',
  'multi'          : true,
  'auto'           : true,
  'fileExt'        : '*.jpg;*.gif;*.png',
  'fileDesc'       : 'Afbeeldingen (.JPG, .GIF, .PNG)',
  'queueID'        : 'custom-queue',
  'buttonText'       : 'Toevoegen',
  'queueSizeLimit' : 20,
  'simUploadLimit' : 2,
  'removeCompleted': false,
  'scriptData'      : {'klantid':'#KLANTID'},
  'onSelectOnce'   : function(event,data) {
      $('#status-message').text('Een ogenblik geduld...bestanden worden geupload.');
    },
  'onAllComplete'  : function(event,data) {
      $('#status-message').text(data.filesUploaded + ' bestand(en) geupload, ' + data.errors + ' fouten. <img src="/include/images/loader_small.gif" />Het laden van de volgende pagina kan erg lang duren afhankelijk van het aantal afbeeldingen.');
      document.location.href = '/afbeelding_toevoegen_process.php?kid=#KLANTID';
    }
});                });
                </script>
Hosted VoIP SIP trunks Vast mobiel VoIP
  zaterdag 30 juli 2011 @ 22:21:13 #189
37634 wobbel
Da WoBBeL King
pi_100139709
Zucht, .text moet .html worden :')
Hosted VoIP SIP trunks Vast mobiel VoIP
  zaterdag 30 juli 2011 @ 22:46:26 #190
12221 Tijn
Powered by MS Paint
pi_100140619
quote:
17s.gif Op zondag 24 juli 2011 16:09 schreef KomtTijd... het volgende:
ontwikkelen in moderne browsers is echt leuk, trouwens

hou me vast als ik straks IE7/8/9 ga proberen ;(
IE9 valt me hard mee tot nu toe. En IE7/8... ach... pixelperfect ga ik niet eens proberen en gelukkig kun je veel fixen met conditional comments.
Verberg de nieuwsticker
pi_100141683
Zolang je IE6 niet hoeft te ondersteunen vind ik het ook allemaal wel meevallen. IE7 heeft af en toe wat moeite met z-indexen e.d. - maar over het algemeen valt er best voor te ontwikkelen.
Bleuh.
  zaterdag 30 juli 2011 @ 23:18:54 #192
12221 Tijn
Powered by MS Paint
pi_100141951
Ik heb het afgelopen jaar geen enkele website afgeleverd met IE6-support en ik heb er 0 klanten over horen klagen.
Verberg de nieuwsticker
pi_100142221
quote:
14s.gif Op zaterdag 30 juli 2011 23:18 schreef Tijn het volgende:
Ik heb het afgelopen jaar geen enkele website afgeleverd met IE6-support en ik heb er 0 klanten over horen klagen.
Het ligt ook aan je doelgroep... op m'n werk moet IE6 wel ondersteund worden, omdat het bij onze doelgroep (ziekenhuizen) nog te veel wordt gebruikt. :{
fokstok.nl
  zaterdag 30 juli 2011 @ 23:30:33 #194
12221 Tijn
Powered by MS Paint
pi_100142452
quote:
0s.gif Op zaterdag 30 juli 2011 23:25 schreef Light het volgende:

[..]

Het ligt ook aan je doelgroep... op m'n werk moet IE6 wel ondersteund worden, omdat het bij onze doelgroep (ziekenhuizen) nog te veel wordt gebruikt. :{
Grappig dat je dat zegt, want letterlijk de enige keer dat ik ermee werd geconfronteerd dat een site die ik had gebouwd niet goed werkt in IE6 was toen ik iemand in het ziekenhuis bezocht. De patienten daar hebben een soort touchscreen computerterminal waarop ze spelletjes kunnen doen en kunnen internetten en jawel hoor, op dat gare ding stond IE6 en dus deed m'n site het niet goed :')
Verberg de nieuwsticker
pi_100142802
quote:
2s.gif Op zaterdag 30 juli 2011 23:30 schreef Tijn het volgende:

[..]

Grappig dat je dat zegt, want letterlijk de enige keer dat ik ermee werd geconfronteerd dat een site die ik had gebouwd niet goed werkt in IE6 was toen ik iemand in het ziekenhuis bezocht. De patienten daar hebben een soort touchscreen computerterminal waarop ze spelletjes kunnen doen en kunnen internetten en jawel hoor, op dat gare ding stond IE6 en dus deed m'n site het niet goed :')
Best kans dat (bijna) alle computers in dat ziekenhuis nog IE6 draaiden. En dat ze dat nog steeds doen, want upgraden is gevaarlijk en risicovol enzo. En de IE6-only apps doen het dan waarschijnlijk niet meer meer, da's ook lastig...
fokstok.nl
  zaterdag 30 juli 2011 @ 23:41:46 #196
12221 Tijn
Powered by MS Paint
pi_100142865
Je zou zeggen dat juist IE6 blijven gebruiken gevaarlijk is. Maar goed, dat is mijn mening B-)
Verberg de nieuwsticker
pi_100143441
En applicaties die alleen met IE6 werken, zijn ondertussen ook zodanig verouderd dat ze dringend vervangen moeten worden. Liever nog gisteren dan vandaag.

Mij is eens verteld dat het EPD (ook zo'n handig Haagsch idee) alleen werkt in IE6. Of het waar is, weet ik niet. Maar als het waar is, mogen ze wmb iedereen die eraan heeft meegewerkt opknopen.
fokstok.nl
pi_100143525
quote:
0s.gif Op zaterdag 30 juli 2011 23:57 schreef Light het volgende:
En applicaties die alleen met IE6 werken, zijn ondertussen ook zodanig verouderd dat ze dringend vervangen moeten worden. Liever nog gisteren dan vandaag.

Mij is eens verteld dat het EPD (ook zo'n handig Haagsch idee) alleen werkt in IE6. Of het waar is, weet ik niet. Maar als het waar is, mogen ze wmb iedereen die eraan heeft meegewerkt opknopen.
waarom vervangen als het werkt..
onze apothekers (pas hebben we moeten wisselen van apotheek)
draaien ook nog een of ander dos programma op XP :P
  zondag 31 juli 2011 @ 00:30:18 #199
12221 Tijn
Powered by MS Paint
pi_100144547
quote:
0s.gif Op zaterdag 30 juli 2011 23:59 schreef mschol het volgende:

[..]

waarom vervangen als het werkt..
Omdat het om gegevens gaat die niet alleen nu beschikbaar moeten zijn, maar waarvan ook gegarandeerd moet worden dat ze in de toekomst beschikbaar zijn.
Verberg de nieuwsticker
pi_100144782
quote:
0s.gif Op zaterdag 30 juli 2011 23:59 schreef mschol het volgende:

[..]

waarom vervangen als het werkt..
onze apothekers (pas hebben we moeten wisselen van apotheek)
draaien ook nog een of ander dos programma op XP :P
Onderhoudbaarheid, nieuwe inzichten (zowel van de bouwers als van de gebruikers), platformonafhankelijkheid. Zo'n dos programma in XP is leuk, maar er komt een moment dat dos programma's niet meer werken in Windows. En er komt een moment dat XP (inmiddels ook 10 jaar oud) helemaal niet meer ondersteund wordt. Windows 7 kan standaard niet meer overweg met dos programma's (er zijn in sommige gevallen workarounds).
fokstok.nl
actieve topics nieuwe topics
abonnement Unibet Coolblue
[html, css, js] voor dummies #17
Index

» digital corner

» development

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