[CSS] voor dummies - Deel 5

Index

» digital corner

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
  maandag 24 juli 2006 @ 17:48:02 #2
62215 qu63
..de tijd drinkt..
pi_40138992
hoe kan ik er voor zorgen dat een divje altijd onderaan blijft op mn pagina? (mn footer dus )

bottom: 0px; helpt niet, want als ik ga scrollen blijft ie hangen.
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_40143487
http://www.themaninblue.com/experiment/footerStickAlt/

of deze, maar die werkt niet in opera. http://scott.sauyet.name/CSS/Demo/FooterDemo1.html
niet gebruiken dus. Was te vinden in het vorige topic, hierzo: http://forum.fok.nl/topic/834745/1/500#39261345
  maandag 24 juli 2006 @ 20:50:01 #4
62215 qu63
..de tijd drinkt..
pi_40143744
quote:
Op maandag 24 juli 2006 20:40 schreef the_disheaver het volgende:
http://www.themaninblue.com/experiment/footerStickAlt/

of deze, maar die werkt niet in opera. http://scott.sauyet.name/CSS/Demo/FooterDemo1.html
niet gebruiken dus. Was te vinden in het vorige topic, hierzo: http://forum.fok.nl/topic/834745/1/500#39261345
die 2e link heb ik dus ook geprobeerd, maar die werkte dus ook niet bij mij (IE én FF)
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_40143947
hier wel, zowel ff (1,5 geloof ik) en IE (7)
pi_40337061
Ik wil een <div> helemaal onderaan de pagina plaatsen. Maar het ding zweeft ergens halverwege de pagina. Blijkbaar is ie afhankelijk van de positie van de overige div's.
Het gaat om de div "footer" (<div id="footer">
Ik vermoed dat het iets moet zijn met clear: both; De andere div's worden wel naar wens weergegeven. Ik werk niet met container-div's of iets dergelijks.

Wie kan me helpen? Ik ben een ontzettende n00b met 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		#footer { 
        bottom: 10px;
        left:10px;
        height: 20px;
        width: 764px;
        border: black solid 1px ; 
        background-color: #6b6b6b;
       }

#admin_bar { 
   float: top;
   top: 10px;
   position: relative;
   left: 110px;
   height: 20px;
         width: 650px;
   border: black solid 3px ; 
   border-bottom: 0px;
        background-color: #6b6b6b;
       }

#titel_top {
        color : #0000FF;
        border: black solid 2px ; 
        background-color: #FFFFFF;
        width: 764px; 
        height: 30px;
        position: absolute
        left: 10px;
        top: 10px;
        padding: 0px;
        font-family : Verdana;
        font-size : 20px;
        font-weight : bold;
        text-align : center;
       }


#menu { 
        float: right; 
        position: absolute;
        left: 10px;
        top: 50px;
        width: 93px;
        border: black solid 3px ; 
        border-top: none;
        border-left: none;
       }

#table_admin { 
        position: relative;
        float: bottom;
        top: 10px;
        left: 110px;
        width: 650px;
        border: black solid 3px ; 
        background-color: #6b6b6b;
       }

#add_record { 
        float: top;
        top: 10px;
        position: relative;
        left: 110px;
        width: 650px;
        border: black solid 3px ; 
        border-bottom: 2px;
        background-color: #6b6b6b;
       }
  maandag 31 juli 2006 @ 14:40:14 #7
46794 Berkery
Fat bastard
pi_40352712
quote:
Op zondag 30 juli 2006 23:04 schreef beerten het volgende:
Ik wil een <div> helemaal onderaan de pagina plaatsen. Maar het ding zweeft ergens halverwege de pagina. Blijkbaar is ie afhankelijk van de positie van de overige div's.
Kijk eens een paar posts terug
No Dukes of Hazzard in the classroom
pi_40358859
quote:
Op maandag 31 juli 2006 14:40 schreef Berkery het volgende:

[..]

Kijk eens een paar posts terug [afbeelding]
Werkt niet! Krijg de paginas niet goed. Zoals gezegd blijft de footer ergens zweven halverwege de pagina.
  maandag 31 juli 2006 @ 19:36:51 #9
46794 Berkery
Fat bastard
pi_40360890
float: bottom en float: top gaat ook niet werken.
No Dukes of Hazzard in the classroom
pi_40362911
quote:
Op maandag 31 juli 2006 19:36 schreef Berkery het volgende:
float: bottom en float: top gaat ook niet werken.
Had dit inmiddels gelzen. Slechts left, right of none.
pi_40364214
Alvast, ook namens mijzelf, niet bedankt voor de oplossing voor mijn probleem. Ik zie het hier staan in deze post en met deze informatie krijg ik het ook niet werkende.
een oplossing is
1<?php //include "footer.php"; ?> 


De clou voor mijn site.
Situatie: DIV over de volle breedte bovenaan.
Container DIV met alle content div's en hun willekeurige posities.
Footer DIV
Let op de body en html tag. Die moeten vermeld staan!

Alleen, klein details: Op een pagina gooit ie de DIV toch nog weer over het onderste deel van een pagina. Deze pagina is veel langer dan alle andere./ Maar toch.
Lang leve de tabel-opmaak....

het werkt dus wel, maar niet 100%

1
2
3
4
5
6
7
8
9
10
11
12
13
14		http://alistapart.com/articles/footers
html, body{
        height: 100%;
       }

#container{
        position: relative;
        min-height: 100%;
       }  

#footer{
        position: absolute;
        bottom: 0;
       }


http://alistapart.com/articles/footers

[ Bericht 8% gewijzigd door beerten op 31-07-2006 21:27:09 ]
  woensdag 23 augustus 2006 @ 19:24:25 #12
62215 qu63
..de tijd drinkt..
pi_41103182
<style>
.main
{
position: absolute;
left: 10%;
right: 10%;
top: 10%;
bottom: 10%;
overflow: auto;
text-align: right;
}
</style>

waarom werkt dit wel in FF en niet in IE?

IE maakt er gewoon een lange pagina van terwijl FF er een soort iframe-achtig iets van maakt. iemand een idee hoe ik dit in IE kan oplossen?

voorbeeld is hier te bekijken
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_41103380
overflow: scroll

Of laat ie dan altijd een scrollbalk zien?
  woensdag 23 augustus 2006 @ 19:50:23 #14
62215 qu63
..de tijd drinkt..
pi_41104111
quote:
Op woensdag 23 augustus 2006 19:29 schreef the_disheaver het volgende:
overflow: scroll

Of laat ie dan altijd een scrollbalk zien?
jup, maar het punt ook is, is dat IE de "Bottom: 10%" niet pakt terwijl FF dat wel doet (bekijk het voorbeeld maar )
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_41104178
quote:
Op woensdag 23 augustus 2006 19:50 schreef qu63 het volgende:

[..]

(bekijk het voorbeeld maar )
je server is nogal traag. In opera krijg ik hem nog wel te zien, in IE niet (opera lijkt het goed te gaan btw)
  woensdag 23 augustus 2006 @ 20:10:17 #16
62215 qu63
..de tijd drinkt..
pi_41104788
quote:
Op woensdag 23 augustus 2006 19:52 schreef the_disheaver het volgende:

[..]

je server is nogal traag. In opera krijg ik hem nog wel te zien, in IE niet (opera lijkt het goed te gaan btw)
kan kloppen ja, dat is zeg maar mijn thuispc
ik maak wel even screenies van beide
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
  woensdag 23 augustus 2006 @ 20:14:23 #17
62215 qu63
..de tijd drinkt..
pi_41104968
quote:
Op woensdag 23 augustus 2006 20:10 schreef qu63 het volgende:

[..]

kan kloppen ja, dat is zeg maar mijn thuispc
ik maak wel even screenies van beide
FF en IE
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
  woensdag 23 augustus 2006 @ 20:21:04 #18
62215 qu63
..de tijd drinkt..
pi_41105226
quote:
Op woensdag 23 augustus 2006 20:14 schreef qu63 het volgende:

[..]

FF en IE
en de bijbehorende broncode:
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147		<?php
echo "xml version=\"1.0\" encoding=\"iso-8859-1\"?".">";
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;

if(isset($HTTP_COOKIE_VARS["users_resolution"]))
    $screen_res = $HTTP_COOKIE_VARS["users_resolution"];
else //means cookie is not found set it using Javascript
{

&lt;script language="javascript"&gt;
&lt;!--
writeCookie();

function writeCookie()
{
var today = new Date();
var the_date = new Date("December 31, 2023");
var the_cookie_date = the_date.toGMTString();
var the_cookie = "users_resolution="+ screen.width +"x"+ screen.height;
var the_cookie = the_cookie + ";expires=" + the_cookie_date;
document,cookie=the_cookie
    
location = 'test3.php';
}
//-->
&lt;/script&gt;

}

&lt;style&gt;
body
    {
    background-image: url(images/php echo "$screen_res";.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #FFF;
    }
.main
    {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
    overflow: auto;
    text-align: right;
    }

.top
    {
    position: absolute;
    left: 10%;
    top: 0%;
    right: 10%;
    }

.bottom
    {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 0%;
    }    
&lt;/style&gt;
&lt;title&gt;Untitled Document php echo "$screen_res";&lt;/title&gt;
&lt;script type="text/javascript" src="http://testserver.qu63.nl/blog2/scripts/countdown.js" defer="defer"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class="top"&gt;&lt;img src="top.gif" alt="Sven in Amersfoort"&gt;&lt;/div&gt;
&lt;div class="main"&gt;
&lt;br /&gt;1
&lt;br /&gt;2
&lt;br /&gt;3
&lt;br /&gt;4
&lt;br /&gt;5
&lt;br /&gt;6
&lt;br /&gt;7
&lt;br /&gt;8
&lt;br /&gt;9
&lt;br /&gt;0
&lt;br /&gt;1
&lt;br /&gt;2
&lt;br /&gt;3
&lt;br /&gt;4
&lt;br /&gt;5
&lt;br /&gt;6
&lt;br /&gt;7
&lt;br /&gt;8
&lt;br /&gt;9
&lt;br /&gt;0
&lt;br /&gt;1
&lt;br /&gt;2
&lt;br /&gt;3
&lt;br /&gt;4
&lt;br /&gt;5
&lt;br /&gt;6
&lt;br /&gt;7
&lt;br /&gt;8
&lt;br /&gt;9
&lt;br /&gt;0
&lt;br /&gt;1
&lt;br /&gt;2
&lt;br /&gt;3
&lt;br /&gt;4
&lt;br /&gt;5
&lt;br /&gt;6
&lt;br /&gt;7
&lt;br /&gt;8
&lt;br /&gt;9
&lt;br /&gt;0
&lt;br /&gt;1
&lt;br /&gt;2
&lt;br /&gt;3
&lt;br /&gt;4
&lt;br /&gt;5
&lt;br /&gt;6
&lt;br /&gt;7
&lt;br /&gt;8
&lt;br /&gt;9
&lt;br /&gt;0
&lt;br /&gt;1
&lt;br /&gt;2
&lt;br /&gt;3
&lt;br /&gt;4
&lt;br /&gt;5
&lt;br /&gt;6
&lt;br /&gt;7
&lt;br /&gt;8
&lt;br /&gt;9
&lt;br /&gt;0
&lt;br /&gt;1
&lt;br /&gt;2
&lt;br /&gt;3
&lt;br /&gt;4
&lt;br /&gt;5
&lt;br /&gt;6
&lt;br /&gt;7
&lt;br /&gt;
&lt;/div&gt;
&lt;div class="bottom"&gt;&lt;h1 align="center"&gt;nog &lt;span id="countdown1"&gt;2006-9-24 20:00:00 GMT+02:00&lt;/span&gt;&lt;/h1&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
?>
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_41105701
quote:
Op woensdag 23 augustus 2006 20:14 schreef qu63 het volgende:

[..]

FF en IE
kon je die ook niet ff op tinypic gooien ofzo... (lukt wel hoor )
  woensdag 23 augustus 2006 @ 20:45:49 #20
62215 qu63
..de tijd drinkt..
pi_41106105
quote:
Op woensdag 23 augustus 2006 20:34 schreef the_disheaver het volgende:

[..]

kon je die ook niet ff op tinypic gooien ofzo... (lukt wel hoor )
http://i8.tinypic.com/25fkahh.jpg

http://i8.tinypic.com/25fkayw.jpg

zo beter?
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
  donderdag 24 augustus 2006 @ 13:23:46 #21
62215 qu63
..de tijd drinkt..
pi_41127021
(n)iemand?
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
  vrijdag 25 augustus 2006 @ 09:55:03 #22
62215 qu63
..de tijd drinkt..
pi_41155287
quote:
Op donderdag 24 augustus 2006 13:23 schreef qu63 het volgende:
(n)iemand?
echt niemand?
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_41161419
-lama-

[ Bericht 97% gewijzigd door Berkery op 25-08-2006 13:20:52 ]
No Dukes of Hazzard in the classroom
  vrijdag 25 augustus 2006 @ 14:44:36 #24
62215 qu63
..de tijd drinkt..
pi_41164932
quote:
Op vrijdag 25 augustus 2006 13:12 schreef Berkery het volgende:
-lama-
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_41377169
Ik heb de volgende css code:
1
2
3
4
5
6
7
8		      tr.row_top{
         background-color: #AAFE9E;
         border-left: 2px solid black;
         border-right: 2px solid black;
         border-top: 2px solid black;
         border-bottom: 1px solid black;

      }

Het probleem is de border om de row. In Firefox gaat dit zoals je zal verwachten. In IE krijg ik echter helemaal geen border. Weet iemand waar dit aan ligt en hoe ik het op zou kunnen lossen?

(ik zou alle declaraties gewoon in de TD uit kunnen voeren, maar dit is meer werk en naar mijn mening een beetje omslachtig)
Klik hier voor een complete lijst van alle freeroll poker toernooitjes!
pi_41378655
Probeer eens
1
2		tr.row_top td {
de code


edit: tenminste, als je in elke cel een border wilt hebben. maar ik geloof dat je alleen om een rij een border wil...
pi_41379579
quote:
Op donderdag 31 augustus 2006 23:28 schreef the_disheaver het volgende:
Probeer eens
[ code verwijderd ]

edit: tenminste, als je in elke cel een border wilt hebben. maar ik geloof dat je alleen om een rij een border wil...
Enkel de randen van de row moeten randen krijgen, niet de cellen dus.
Klik hier voor een complete lijst van alle freeroll poker toernooitjes!
pi_41840669


Ik heb met mijn nieuwe CMS wat CSS probleempjes. Ik wil het xhtml strict hebben. Het CD-hoesje moet aan de linkerkant floaten (naast de 60x60 posticon) met de tekst er rechtsboven van beginnend. Het probleem met float:left of align="left" is dat de post niet meegroeit met de afbeelding. Zonder float of align="left" ziet het er zo uit:



De logische vraag: Hoe zorg ik ervoor dat de posthoogte meegroeit?
GTA San Andreas Multiplayer: Las Venturas Playground Doe mee met FOK! Whatpulse en typ FOK! naar de 1e plaats!!
pi_42067956
Vraagje:
Kan je in CSS ook eigenschappen aan één bepaald karakter meegeven?
Bijvoorbeeld alle aanhalingstekens (") in het rood.

Thnxs

Wouter
Maak ik je bang ? Ga dan naar de dokter, want je hebt waarschijnlijk last van Hexakosioihexekontahexafobie !
pi_42071391
quote:
Op zaterdag 23 september 2006 02:09 schreef Pino_666 het volgende:
Vraagje:
Kan je in CSS ook eigenschappen aan één bepaald karakter meegeven?
Bijvoorbeeld alle aanhalingstekens (") in het rood.

Thnxs

Wouter
Iemand een idee?
Maak ik je bang ? Ga dan naar de dokter, want je hebt waarschijnlijk last van Hexakosioihexekontahexafobie !
pi_42072738
enige is <span class="red">"</span>
pi_42075978
quote:
Op zaterdag 23 september 2006 12:10 schreef the_disheaver het volgende:
enige is <span class="red">"</span>
dat dacht ik al.... toch bedankt voor de bevestiging !
Maak ik je bang ? Ga dan naar de dokter, want je hebt waarschijnlijk last van Hexakosioihexekontahexafobie !
  maandag 25 september 2006 @ 22:57:35 #33
57695 Leonoor
Unter 32-16-8...
pi_42126663
Vraagje: Ik heb nu een footer, die heb ik op een fixed position. Maar in mijn main-deel heb ik een background-image dat ik wil repeaten, in elk geval tot de onderkant van de pagina, maar als de pagina langer is, ook verder naar onder.

En dat laatste doet hij dus niet. Of, als ik hem zo ver krijg om dat wel te doen, dan stopt 'ie op de pagina's met minder tekst dan paginalengte al ergens halverwege (volgt u mij nog?).

Hoe los ik dat op?
Nulla verba sed acta
  maandag 25 september 2006 @ 23:04:08 #34
12880 CraZaay
prettig gestoord
pi_42126936
quote:
Op maandag 25 september 2006 22:57 schreef Leonoor het volgende:
Vraagje: Ik heb nu een footer, die heb ik op een fixed position. Maar in mijn main-deel heb ik een background-image dat ik wil repeaten, in elk geval tot de onderkant van de pagina, maar als de pagina langer is, ook verder naar onder.

En dat laatste doet hij dus niet. Of, als ik hem zo ver krijg om dat wel te doen, dan stopt 'ie op de pagina's met minder tekst dan paginalengte al ergens halverwege (volgt u mij nog?).

Hoe los ik dat op?
Die background-image op je body zetten?
  maandag 25 september 2006 @ 23:06:03 #35
12880 CraZaay
prettig gestoord
pi_42127041
quote:
Op vrijdag 15 september 2006 18:20 schreef Nevermind het volgende:
[afbeelding]

Ik heb met mijn nieuwe CMS wat CSS probleempjes. Ik wil het xhtml strict hebben. Het CD-hoesje moet aan de linkerkant floaten (naast de 60x60 posticon) met de tekst er rechtsboven van beginnend. Het probleem met float:left of align="left" is dat de post niet meegroeit met de afbeelding. Zonder float of align="left" ziet het er zo uit:

[afbeelding]

De logische vraag: Hoe zorg ik ervoor dat de posthoogte meegroeit?
Met een float haal je 'm uit de flow van de pagina, waardoor het parent element niet 'mee groeit'.

Wanneer je bijvoorbeeld na de tekst een element, zoals <br>, gebruikt met clear: left (bij een float: left) lost dat je probleem op.
  maandag 25 september 2006 @ 23:14:45 #36
12880 CraZaay
prettig gestoord
pi_42127441
quote:
Op donderdag 31 augustus 2006 22:54 schreef Mr_Zoidberg het volgende:
Ik heb de volgende css code:
[ code verwijderd ]

Het probleem is de border om de row. In Firefox gaat dit zoals je zal verwachten. In IE krijg ik echter helemaal geen border. Weet iemand waar dit aan ligt en hoe ik het op zou kunnen lossen?

(ik zou alle declaraties gewoon in de TD uit kunnen voeren, maar dit is meer werk en naar mijn mening een beetje omslachtig)
Ik heb net een testopstelling gemaakt, maar ik zie in FF en IE geen border. Kun je je voorbeeld ergens online zetten?
pi_42129976
quote:
Op maandag 25 september 2006 23:14 schreef CraZaay het volgende:

[..]

Ik heb net een testopstelling gemaakt, maar ik zie in FF en IE geen border. Kun je je voorbeeld ergens online zetten?
is niet mogelijk in IE. in FF en opera naar mijn weten ook niet

gewoon een idee, kun je niet

tr.top_row td {}

gebruiken?
  dinsdag 26 september 2006 @ 09:08:01 #38
12880 CraZaay
prettig gestoord
pi_42133924
quote:
Op dinsdag 26 september 2006 00:31 schreef the_disheaver het volgende:

[..]

is niet mogelijk in IE. in FF en opera naar mijn weten ook niet

gewoon een idee, kun je niet

tr.top_row td {}

gebruiken?
Vandaar dat ik heel benieuwd was naar de opstelling waarin hij het wel werkend kreeg in FF

Cleanere code zou dan zijn

1
2
3		th {
   style;
}

In het kader van semantiek en het gebruiken van tags waar ze voor bedoeld zijn (een table header element voor de koppen).
  dinsdag 26 september 2006 @ 15:34:57 #39
57695 Leonoor
Unter 32-16-8...
pi_42142719
quote:
Op maandag 25 september 2006 23:04 schreef CraZaay het volgende:

[..]

Die background-image op je body zetten?
Het is misschien wel voor dummies, maar ik ben niet helemaaal stom, dus zover was ik al .
Toch bedankt voor het meedenken .
Nulla verba sed acta
  dinsdag 26 september 2006 @ 21:12:20 #40
12880 CraZaay
prettig gestoord
pi_42152115
quote:
Op dinsdag 26 september 2006 15:34 schreef Leonoor het volgende:

[..]

Het is misschien wel voor dummies, maar ik ben niet helemaaal stom, dus zover was ik al .
Toch bedankt voor het meedenken .
Ga je ook vertellen waarom dit niet de oplossing voor je probleem is? Op basis van je info neem ik aan dat je de achtergrond altijd tot onderaan de pagina wilt hebben, en met een background op de body werkt dat.
  dinsdag 26 september 2006 @ 22:04:29 #41
57695 Leonoor
Unter 32-16-8...
pi_42154035
quote:
Op dinsdag 26 september 2006 21:12 schreef CraZaay het volgende:

[..]

Ga je ook vertellen waarom dit niet de oplossing voor je probleem is? Op basis van je info neem ik aan dat je de achtergrond altijd tot onderaan de pagina wilt hebben, en met een background op de body werkt dat.
Het is niet de oplossing omdat ik het geprobeerd heb en het niet werkt..

Inmiddels heb ik mijn meest nerderige kennis er naar laten kijken, en die heeft op magische wijze het geheel ietwat aangepast, en bijna zo laten werken als ik zou willen. Ik ben vrees ik meer dummie dan ik hoopte/wenste, maar het werkt nu. Mocht je interesse hebben in hoe het eruit ziet, dan hoor ik het wel via mijn fobo .
Nulla verba sed acta
  dinsdag 26 september 2006 @ 23:38:26 #42
12880 CraZaay
prettig gestoord
pi_42157058
quote:
Op dinsdag 26 september 2006 22:04 schreef Leonoor het volgende:

[..]

Het is niet de oplossing omdat ik het geprobeerd heb en het niet werkt..

Inmiddels heb ik mijn meest nerderige kennis er naar laten kijken, en die heeft op magische wijze het geheel ietwat aangepast, en bijna zo laten werken als ik zou willen. Ik ben vrees ik meer dummie dan ik hoopte/wenste, maar het werkt nu. Mocht je interesse hebben in hoe het eruit ziet, dan hoor ik het wel via mijn fobo .
Er zit een verschil tussen niet werken, en niet snappen hoe je iets moet realiseren om het te laten werken
pi_42172893
FF terug naar CSS

1
2
3
4
5		___________________
|     |div 2|div 3|
|div 1|------------
|     |div 4|div 5|
-------------------


Kan dit als je enkel
1
2
3
4
5		<div id=div1></div>
<div id=div2></div>
<div id=div3></div>
<div id=div4></div>
<div id=div5></div>

hebt? Dus zonder een container om div 2 t/m 5?
pi_42174333
heb het opgelost door een container er om te gooien. Maar als iemand er een oplossing zonder container voor heeft: graag.

'div.' vergeten ergens, en en een half uur afgevraagd... waarom doet ie het niet!
pi_42225272
quote:
Op woensdag 27 september 2006 17:49 schreef the_disheaver het volgende:
heb het opgelost door een container er om te gooien. Maar als iemand er een oplossing zonder container voor heeft: graag.

'div.' vergeten ergens, en en een half uur afgevraagd... waarom doet ie het niet!
Waarom zonder container?
Naast dat het haast niet mogelijk is, tenzij je alles absolute gaat positioneren
Steam - SC2
pi_42225327
quote:
Op vrijdag 15 september 2006 18:20 schreef Nevermind het volgende:
[afbeelding]

Ik heb met mijn nieuwe CMS wat CSS probleempjes. Ik wil het xhtml strict hebben. Het CD-hoesje moet aan de linkerkant floaten (naast de 60x60 posticon) met de tekst er rechtsboven van beginnend. Het probleem met float:left of align="left" is dat de post niet meegroeit met de afbeelding. Zonder float of align="left" ziet het er zo uit:

[afbeelding]

De logische vraag: Hoe zorg ik ervoor dat de posthoogte meegroeit?
overflow: hidden aan de parent (de post dus )

Alleen getest in Safari en Firefox overigens
Steam - SC2
  vrijdag 29 september 2006 @ 10:07:29 #47
20849 Fred
Beroepschagrijn
pi_42225875
Zo, alle FTP-vragen zijn er uit.

@PM-Girl, als je nog vragen hebt, open dan hier je eigen topic. Dan blijft de boel hier over zichtelijk.

en weer verder.
So we just called him Fred
pi_42229219
-edit-

Verkeerde topic.

[ Bericht 93% gewijzigd door ymme op 29-09-2006 12:38:58 ]
pi_42229246
-edit-

verkeerde topic.

[ Bericht 82% gewijzigd door ymme op 29-09-2006 12:39:46 ]
pi_42229798
En dat vraag/meld je hier
pi_42229815
Waar moet ik het dan vraqgen. Dacht dat z'n topic daarvoor was. Sorry
pi_42229844
Dit heeft toch totaal niets met CSS te maken?
pi_42257703
quote:
Op dinsdag 26 september 2006 22:04 schreef Leonoor het volgende:

[..]

Het is niet de oplossing omdat ik het geprobeerd heb en het niet werkt..

Inmiddels heb ik mijn meest nerderige kennis er naar laten kijken, en die heeft op magische wijze het geheel ietwat aangepast, en bijna zo laten werken als ik zou willen. Ik ben vrees ik meer dummie dan ik hoopte/wenste, maar het werkt nu. Mocht je interesse hebben in hoe het eruit ziet, dan hoor ik het wel via mijn fobo .
het is trouwens ook lastig oplossen voor ons als je geen code post.
Steam - SC2
pi_42278496
Bestaat er ook zoiets als een CSS-validator die meteen de fouten corrigeert? Iets als HTML-tidy maar dan voor CSS zeg maar...
  zondag 1 oktober 2006 @ 20:35:16 #55
85514 ralfie
!Yvan eht nioj
pi_42290244
Hoi,

ik wil voor een site een bepaalde layout van frames naar div+css overzetten, maar stuit op een problem


Dit is de layout waar het om gaat. Hoewel in frames dit makkelijk te bereiken was
1
2
3
4
5
6
7		<frameset rows="75,*" border="0">
<frame name="top" src="top.html" scrolling="no">
<frameset cols="180,*" border="0">
<frame name="left" src="left.html" scrolling="auto">
<frame name="main" src="news.html"  scrolling="auto">
</frameset>
</frameset>

Is het mij met divjes en css nog niet gelukt. Het enige waar ik iets mee opschoot was position:fixed, wat niet werkt in IE en dus ook geen optie is. Alle methodes die ik heb gevonden om dit te emuleren kunnen dan weer niet overweg met niet fixte waarden (zoals 100%-75px).

Dus, heeft er iemand een idee hoe ik dit op kan lossen?
pi_42290396
kijk eens naar float: left
  zondag 1 oktober 2006 @ 20:52:50 #57
85514 ralfie
!Yvan eht nioj
pi_42291023
quote:
Op zondag 1 oktober 2006 20:38 schreef the_disheaver het volgende:
kijk eens naar float: left
heb ik ook al geprobeerd en dan krijg ik ze wel in de juiste locatie, maar nog niet de juiste grootte.
Het probleem is dat de pagina zelf niet scrolbaar mag zijn, omdat ik het menu en #top op een vaste plaats wil hebben. Eventueel te grote contents worden met scrollbars in #maincontents opgelost (zie ook tekening vorige post)
pi_42291197
Zover ik het zie zul je de twee div welke je naast elkaar wil hebben in een container DIV moeten zetten.
Twee geneste DIV dus.


Je stylesheet

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		// ze komen rechtsreeks uit mijn eigen stylesheet, vandaar de opmaak. Ben te lui om dit te verwijderen
#container{
        position: relative;
        min-height: 100%;
        height: 100%;
        voice-family: ""}"";
        voice-family: inherit;
        height: auto;
       }  
#menu { 
        float: right; 
        position: absolute;
        left: 10px;
        top: 40px;
        width: 115px;
        border: black solid 3px ; 
        border-top: none;
        border-left: none;
       }
#content { 
        position: relative;
        top: 40px;
        
        left: 125px;
        width: 639px;
       }

#top {
        color : #0000FF;
        border: black solid 2px ; 
        background-color: #FFFFFF;
        width: 764px; 
        height: 30px;
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 0px;
        font-family : Verdana;
        font-size : 20px;
        font-weight : bold;
        text-align : center;
       }

//En volgens mij werkt het niet als het volgende niet ook in je stylesheet staat
html{
        height: 100%;
       }


Dan krijg je dus zoiets op je pagina

1
2
3
4
5
6
7
8
9
10
11
12
13
14		//de bovenste div
<div id="top">
</div>
//de container
<div id="container">

//in de container het menu- en het contentframe
<div id="menu">
</div>
<div id="content">
</div>

// de container sluiten
</div>


Bij mij werkt dit onder alle browser prima.
Zoals je ziet heeft het menuframe een vaste positie; position: absolute;
Het contentframe heeft zich aan te passen aan het menuframe: position: relative
  zondag 1 oktober 2006 @ 21:19:36 #59
125987 KhaZ
Alfa Romeo
pi_42292109
tvp
The styling. And the howl from its V6 engine. In a tunnel, at 4000rpm, it was more sonorous than any music.
It was like having your soul licked by angels.
  zondag 1 oktober 2006 @ 21:24:43 #60
104583 cyberstalker
Een krachtig neen!
pi_42292364
@ralfie: het kan heel makkelijk zonder container.

Je geeft de div#top een position absolute (met top en left op 0px) en height: 75px; . De body geef je een padding: 75px zodat de andere divjes er onder komen te staan.

div#menu geef je een float: left en een height: 100% en natuurlijk een width: 180px; . Nu hoef je alleen de div#maincontents nog een height: 100%; te geven en klaar is ralfie.
Hope for the best, prepare for the worst.
  maandag 2 oktober 2006 @ 12:27:09 #61
85514 ralfie
!Yvan eht nioj
pi_42307686
quote:
Op zondag 1 oktober 2006 21:24 schreef cyberstalker het volgende:
@ralfie: het kan heel makkelijk zonder container.

Je geeft de div#top een position absolute (met top en left op 0px) en height: 75px; . De body geef je een padding: 75px zodat de andere divjes er onder komen te staan.

div#menu geef je een float: left en een height: 100% en natuurlijk een width: 180px; . Nu hoef je alleen de div#maincontents nog een height: 100%; te geven en klaar is ralfie.
ok, dit werkt, alleen zit er nu een 3px ruimte tussen #menu en #maincontents in IE

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		<html>
<head><title>test</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
padding-top:75px;
}
#maincontents{
height:100%;
background-color:green;
overflow:auto;
}
#menu {
float:left;
height:100%;
width:180px;
background-color:blue;
}

#top {
width:100%;
background-color:red;
position:absolute;
top:0px;
left:0px;
height:75px;
}
</style>
</head>
<body>
<div id="top">TOP</div>
<div id="menu">menu</div>
<div id="maincontents">contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>contents<br>
</div>
</body>
</html>


zie
Iemand een idee?
pi_42308610
Hij doet het prima, in Firefox en Netscape. IE6 geeft inderdaad een probleem.
  maandag 2 oktober 2006 @ 17:11:40 #63
85514 ralfie
!Yvan eht nioj
pi_42314230
ok, ik geef de body wel dezelfde kleur als #maincontents, zie je der toch niks van

Bedankt allemaal!
pi_42373054
Ik heb een aantal layout probleempjes welke verschillen in IE en FF

- Ik geef vaste maten op, maar hoe krijg ik dat mooi variabel zodat het in verschillende scherm grootes netjes is.

- De tekst die in de header staat moet in de grijze balk staan, en ook beginnen waar de grijze balk begint.
maar op een of andere manier wil css niet luisteren, dus ik doe wat fout.
vertical-align: bottom; lijkt niet te werken.

- Als er in header een link staat (<a href=") En die wil ik een andere kleur geven als al opgegeven is in a.active, a.link etc

- De divs lijken in ie, 5 pixels lager grooter dan in ff?
- De hoofd container div zit in FF 5 pixels lager

1
2
3
4
5
6
7
8
9
10
11
12		        #header {
         background-image:url('../style/img/header.png');
         background-repeat:no-repeat;
         height: 230px;
         width:723px;
         vertical-align: bottom;
         text-align:left;
         font-size:20px;
         color:#ffffff;
         letter-spacing:-1px;
         border:1px solid black;
        }


Alvast bedankt!

[ Bericht 4% gewijzigd door Darkomen op 04-10-2006 22:51:20 ]
  woensdag 4 oktober 2006 @ 23:09:40 #65
104583 cyberstalker
Een krachtig neen!
pi_42374610
quote:
Op woensdag 4 oktober 2006 22:31 schreef Darkomen het volgende:
Ik heb een aantal layout probleempjes welke verschillen in IE en FF

- Ik geef vaste maten op, maar hoe krijg ik dat mooi variabel zodat het in verschillende scherm grootes netjes is.
Een breedte in bijvoorbeeld procenten opgeven (width: 40%)of bijvoorbeeld werken met position: absolute op de buitenste elementen en een padding op de body indien je meerdere kolommen wilt.
quote:
- De tekst die in de header staat moet in de grijze balk staan, en ook beginnen waar de grijze balk begint.
maar op een of andere manier wil css niet luisteren, dus ik doe wat fout.
vertical-align: bottom; lijkt niet te werken.
Ik weet niet precies wat je met 'de grijze balk' bedoelt, maar ik ga er vanuit dat dat iets met je achtergrondplaatje te maken heeft. Je kunt met padding opgeven waar de tekst moet beginnen. vertical-align is alleen bedoelt voor table-cells, wat dit zeer duidelijk niet is (het is een div)
quote:
- Als er in header een link staat (<a href=") En die wil ik een andere kleur geven als al opgegeven is in a.active, a.link etc
header a

een link (a) die in de header staat .
quote:
- De divs lijken in ie, 5 pixels lager grooter dan in ff?
- De hoofd container div zit in FF 5 pixels lager
Van IE weet ik niets.
quote:
[ code verwijderd ]

Alvast bedankt!
Zal ik hier dan maar 'dankjewel' neerzetten?
Hope for the best, prepare for the worst.
pi_42375169
Bedankt voor je antwoorden,
Dat ik het in procenten op moet geven weet ik, maar dat gaat op een of andere manier vaak fout.
Ook de padding opgeven in de header geeft weer een ander probleem, in FF word dan de bovenste div te breed, door de breedte weg te halen of de padding van de breedte afte trekken zorgt er weer voor dat hij in IE weer te klein is.
Ik bedoel idd de grijze balk in de achtergrond.
het moet er ongeveer zo uit zien als de site, ik zie nu dat ik vergeten ben de url van de site erbij te plakken
De oude site:
http://www.peugeot405club.nl/
De rebuild:
http://www.peugeot405club.nl/rebuild/
pi_42376875
Ik zou alle groottes relatief neerzetten (in em's), zodat men zelf kan bepalen hoe klein of groot ze hem willen schalen. Want width: 40% werkt misschien lekker bij 1280, maar totaal niet bij 800.

het opgeven van em's zorgt ook dat in IE niet alleen de tekst groter wordt bij een grotere lettergrootte, maar alle waarde die in em's zijn opgegeven.

Is het eigenlijk nodig om de globale css instellingen van a (a:hover enz) boven de specifiekere waarden als header a{} te gooien? Of pakt de ideale browser direct de meest specifieke instelling?
pi_42380243
Geen idee, maar ik zal iig eens naar de em's kijken.
geen idee hoevel em, 1 pixel is


edit, denk niet dat het in em's werken echt veel uitmaakt

edit 2: probleem met de header en de tekst heb ik opgelost door er nog een div onder te gooien met text-indent.
Werkt in IE en FF

Omzetten naar em doe ik wel een keer als ik tijd heb.
1em is 12 pixels?

edit: footer probleem is ook opgelost gelukkig, nu nog ff de urls in de header goed zien te krijgen
Edit, ook gelukt

[ Bericht 14% gewijzigd door Darkomen op 05-10-2006 10:24:07 ]
pi_42382296
standaard geloof ik 14, maar hangt dus van de font-size af: http://www.handleidinghtm(...)genda/legenda04.html
  donderdag 5 oktober 2006 @ 11:56:00 #70
12880 CraZaay
prettig gestoord
pi_42384134
Verschil in afmetingen van block level elementen, zoals divs, komt meestal door rendering op basis van een ander box model i.c.m. padding op het element. Welk doctype gebruik je?
pi_42385504
Ik heb in een DIV een transparante PNG als achtergrond, hoe fix ik dat in IE? :?
Dit had ik al geprobeerd:
1
2		html>body #header h1 a {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/bg_header_h1_a.png',sizingMethod='scale');}

maar dat wil niet werken
Steam - SC2
pi_42386446
quote:
Op donderdag 5 oktober 2006 12:49 schreef super-muffin het volgende:
Ik heb in een DIV een transparante PNG als achtergrond, hoe fix ik dat in IE?
Dit had ik al geprobeerd:
[ code verwijderd ]

maar dat wil niet werken
De div zetten in een extra achtergrond-div (en daar de background weer in), en daar het filter op loslaten?

(niet getest)
No Dukes of Hazzard in the classroom
pi_42386452
quote:
Op donderdag 5 oktober 2006 11:56 schreef CraZaay het volgende:
Verschil in afmetingen van block level elementen, zoals divs, komt meestal door rendering op basis van een ander box model i.c.m. padding op het element. Welk doctype gebruik je?
HTML 4.01 Transitional

Ik ben al een aardig eindje.


Bedankt voor de link the_disheaver, ik ga eens kijken of het snap
pi_42387915
quote:
Op donderdag 5 oktober 2006 13:21 schreef Berkery het volgende:

[..]

De div zetten in een extra achtergrond-div (en daar de background weer in), en daar het filter op loslaten?

(niet getest)
Is dat omdat IE deze filter niet toestaat op hyperlinks?

edit: ik heb het anders opgelost:
Ik heb die background op de #header h1 gezet ook in mijn normale stylesheet.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20		#header h1 {
background: url(../images/bg_header_h1_a.png);
width: 340px;
height: 100px;
display: block;
position: relative;
left: -30px;
text-indent: -9999px; }

#header h1 a {
position: relative;
top: 10px;
left: 11px;
width: 324px;
height: 80px;
display: block; }

/*IE STYLESHEET /*
html>body #header h1 {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./images/bg_header_h1_a.png',sizingMethod='scale');}

Ik ga nu even kijken of het werkt

[ Bericht 58% gewijzigd door super-muffin op 05-10-2006 14:13:10 ]
Steam - SC2
  donderdag 5 oktober 2006 @ 23:30:51 #75
12880 CraZaay
prettig gestoord
pi_42408770
quote:
Op donderdag 5 oktober 2006 14:04 schreef super-muffin het volgende:

[..]

Is dat omdat IE deze filter niet toestaat op hyperlinks?
Jawel, dat werkt gewoon op hyperlinks. Vaak gaat het fout bij het path; normaal als je een achtergrondafbeelding gebruikt in een extern CSS-bestand dan is het pad daar naartoe relatief vanaf het CSS-bestand. Bij gebruik van het IE-filter is het relatief vanaf de locatie waar het CSS-bestand wordt geinclude.
pi_42409875
oke dat is vaag.
Weet je ook waarom dat gebeurd?

En is het ook op te lossen door absoluut te linken? Ik kan het helaas pas morgen testen als het goed is, dan pas heb ik de beschikking over een PC
Steam - SC2
  vrijdag 6 oktober 2006 @ 00:15:35 #77
12880 CraZaay
prettig gestoord
pi_42410188
quote:
Op vrijdag 6 oktober 2006 00:05 schreef super-muffin het volgende:
oke dat is vaag.
Weet je ook waarom dat gebeurd?

En is het ook op te lossen door absoluut te linken? Ik kan het helaas pas morgen testen als het goed is, dan pas heb ik de beschikking over een PC
Simpelweg de manier waarop IE daar mee omgaat

Gewoon relatieve paden gebruiken, maar met dit gegeven rekening houden. Wanneer je je HTML in je root hebt, je CSS in /css/ en je afbeeldingen in /img/, dan zet je normaal in je CSS '../img/bla.gif'. Voor je IE-filter gebruik je dan 'img/bla.gif'. Normaal het pad vanaf de CSS dus, voor het filter het pad vanaf de HTML.
pi_42410486
ja ja ik begrijp het.
Ben benieuwd of het dan wel werkt

In IE7 zit toch wel PNG support of niet?
Steam - SC2
  vrijdag 6 oktober 2006 @ 09:43:43 #79
12880 CraZaay
prettig gestoord
pi_42415131
quote:
Op vrijdag 6 oktober 2006 00:24 schreef super-muffin het volgende:
ja ja ik begrijp het.
Ben benieuwd of het dan wel werkt

In IE7 zit toch wel PNG support of niet?
Ja, maar voordat iedere IE gebruiker op minimaal versie 7 zit zijn we minstens 5 jaar verder (er zijn nog genoeg IE 5 en 5.5 gebruikers nu).
pi_42474159
Help, na maanden geen website gemaakt te hebben, "moet"ik een klein website bouwen voor ons voetbal reisje naar Engeland. Nu ik mijn eigen website een half jaar geleden zo'n beetje geheel heb omgezet naar CSS me oa hulp van hier ben ik zeer tevreden over de manier van bouwen met CSS

Maar nu heb ik het volgende probleem, ik heb een vakje met waarin een menu moet komen en daarnaast een vak waarin tekst/content moet komen, nu kwam ik erachter dat het bijv bij de verslagen wel eens te klein kon zijn, dus las ik ergens dat je met overflow:auto een scrollbar in een div kan krijgen.. Dit heb ik gedaan maar Firefox verschuift dan het content blok een eind naar rechts...

Voorbeeld:

Firefox zonder overflow:


Firefox met overflow:


En hier kan je ze zelf vinden
Zonder overflow
Met overflow

Stylesheets:
Zonder overflow
Met overflow

[ Bericht 2% gewijzigd door MrDoegewoon op 08-10-2006 12:11:28 ]
West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement
  zondag 8 oktober 2006 @ 12:47:55 #81
62215 qu63
..de tijd drinkt..
pi_42476480
quote:
Op zondag 8 oktober 2006 10:38 schreef MrDoegewoon het volgende:
Help, na maanden geen website gemaakt te hebben, "moet"ik een klein website bouwen voor ons voetbal reisje naar Engeland. Nu ik mijn eigen website een half jaar geleden zo'n beetje geheel heb omgezet naar CSS me oa hulp van hier ben ik zeer tevreden over de manier van bouwen met CSS

Maar nu heb ik het volgende probleem, ik heb een vakje met waarin een menu moet komen en daarnaast een vak waarin tekst/content moet komen, nu kwam ik erachter dat het bijv bij de verslagen wel eens te klein kon zijn, dus las ik ergens dat je met overflow:auto een scrollbar in een div kan krijgen.. Dit heb ik gedaan maar Firefox verschuift dan het content blok een eind naar rechts...

Voorbeeld:

Firefox zonder overflow:
[afbeelding]

Firefox met overflow:
[afbeelding]

En hier kan je ze zelf vinden
Zonder overflow
Met overflow

Stylesheets:
Zonder overflow
Met overflow
probeer de posities eens aan alle kanten vast te zetten, dus left, right, top, bottom, etc
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_42477625
Gelukt , vraag me alleen niet hoe maar weer wat geleerd
West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement
  zondag 8 oktober 2006 @ 13:45:39 #83
62215 qu63
..de tijd drinkt..
pi_42477843
quote:
Op zondag 8 oktober 2006 13:35 schreef MrDoegewoon het volgende:
Gelukt , vraag me alleen niet hoe maar weer wat geleerd
dan heb je die versie nog niet online gegooid, want hier werkt ie nog niet
It's Time To Shine
[i]What would life be like without rhethorical questions?[/i]
pi_42478841
Staat er nu wel, is niet echt super mooi maar goed .

Nu een manier gaan zoeken om plaatjes mooi tussen de teksten door te gaan krijgen
West Ham supporters, check: Dutchirons
Dutch Football Manager Site!
Determined to deliver, destined to dominate. - The Third Movement
pi_42485649
Ik heb een probleempje. Ik heb een bestaande website. Nou wil ik op die website de mogelijkheid om met een popup te gaan werken. Dit wordt niet een echte popup maar een layer die over de andere layers wordt heen gelegd. Nou werkt alles zonder problemen behalve dat wanneer ik de css properties naar mijn external css kopieer (dus verplaats van internal) de popup niet meer werkt. Dit zal wel te maken hebben met de voorrang die internal krijgt boven external maar hoe werk ik daar om heen?

Voor de volledigheid een kopie van de css van de popup layer:
1
2
3
4
5
6
7
8
9
10
11
12
13		#popup {
   position:absolute;
   width:80%;
   height:500px;
   z-index:2;
   left: 10%;
   top: 10%;
   border: 1px solid #00337F;
   background-color: #FFFFFF;
   filter:alpha(opacity=90);   
   -moz-opacity: 0.9;   
   opacity: 0.9;
}
pi_42488235
probeer #popup specifieker te specificeren.
html #wrapper #popup of hoe je de DIV ook genest heb.

maar ik vind het wel enorm raar.
Steam - SC2
  zondag 8 oktober 2006 @ 23:35:11 #87
12880 CraZaay
prettig gestoord
pi_42498091
quote:
Op zondag 8 oktober 2006 18:16 schreef ExCibular het volgende:
Ik heb een probleempje. Ik heb een bestaande website. Nou wil ik op die website de mogelijkheid om met een popup te gaan werken. Dit wordt niet een echte popup maar een layer die over de andere layers wordt heen gelegd. Nou werkt alles zonder problemen behalve dat wanneer ik de css properties naar mijn external css kopieer (dus verplaats van internal) de popup niet meer werkt. Dit zal wel te maken hebben met de voorrang die internal krijgt boven external maar hoe werk ik daar om heen?
Wat de oorzaak van dit probleem ook is, het heeft niets te maken met voorrang van het een over het ander, tenzij de #popup overschrijft na de referentie naar je externe CSS-bestand. Als je iets van binnen je HTML-document naar een externe CSS brengt maakt dit voor de browser niets uit. Het gaat dus ergens anders mis, als het eerst wel werkte
pi_42954115
Hoi, ik moet als opdracht een website (met info over mezelf) in elkaar knutselen met css. Het gaat om de volgende website: http://hagen.let.rug.nl/~s1580299/ (let niet op wat er allemaal aan onzin in staat ). Het probleem dat ik heb is het volgende: In IE geeft hij het prima weer, geen problemen. Maar firefox heeft een uiterst irriterende schuifbalk onderin staan. Het gaat niet alleen om de welkom.html, maar ook om de pagina's die verder openen in het frame "main", dus het vermoeden bestaat dat er ergens in de stylesheet iets niet klopt. Maar wat...
quote:
Body
{
background-image:url(images/main.gif);
background-position:0px 0px;
background-attachment:fixed;
background-repeat: no-repeat;
font-family:"lucida sans";
font-size:12;
}

.text
{
text-align:justify;
position:relative;
left:5%;width:80%;
}

.hr
{
position:relative;
left:5%;
width:80%;
}

.titel
{
font-family:"lucida sans";
font-size:22;
font-weight:700;
position:relative;
left:5%;
}

.list
{
position:relative;
top:1.2%;
left:2.7%;
width:80%;
}

.table
{
position:relative;
top:1%;
left:5%;
width:80%;
background-color:royalblue;
border-color:silver;
font-size:14px;
}

.picture
{
position:relative;
top:2.8%;
left:5%;
width:80%;
}

.klein
{
font-size:9
}


a:link {color:black;font-weight:450}
a:visited {color:#990066;font-weight:450}
a:hover {color:#0000ff;font-weight:450}
a:active {color:#00ff00;font-weight:450}
Ik zou enige hulp wel waarderen...
pi_42956754
Moet je frame's gebruiken in een CSS opdracht?
Steam - SC2
pi_42962329
Jep, ik denk dat voor de toegankelijkheid er voor deze tussenoplossing is gekozen. Ik heb inmiddels door dit topic al wel in de gaten gekregen dat er meer mogelijk is met css dan ik tot nu toe heb geleerd, maar dit is het vak Webtech 1, wat voor veel mensen die nog nauwelijks HTML kenden ook verplicht is. Later in het jaar ben ik wel van plan het wat lastigere webtechnologie 2 te gaan volgen, wat wat dieper op bepaalde zaken in kan gaan omndat het dan voor velen niet meer verplicht is. Voor mij is het een een aanvullend vrij vak, een soort van vrije keuze om punten te scoren.
  donderdag 26 oktober 2006 @ 22:36:35 #91
12880 CraZaay
prettig gestoord
pi_42969007
quote:
Op donderdag 26 oktober 2006 19:35 schreef captain.lefteye het volgende:
Jep, ik denk dat voor de toegankelijkheid er voor deze tussenoplossing is gekozen.
'Frame' en 'toegankelijkheid' in 1 zin?
pi_43900186
Ik ben gisteren op mijn werk bezig geweest met css en html... nu wil ik graag SKIP-BO kaartjes maken in CSS... nu zien de kaartjes er heel goed uit in IE maar in FF is het weer helemaal bagger..

Heeft iemand een idee waar de fout in zit?

http://www.bruggema.nl/skip%2Dbo/www.html

hoef niet een directe oplossing, maar tips om het zelf te kunnen zoeken!
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_43900404
Heeft volgens mij met je padding te maken, ie en FF behandelen dat en borders anders.
Daar moet je ff op zoeken.
Probleem waar ik zelf ook nog niet echt uitkom.
pi_43904397
ja daar heb ik dus op gezocht maar helaas weinig goed en nuttigs gevonden
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_43906286
Volgens mij heeft het met de boxmodel te maken.

Waarom gebruik je overigens geen achtergrond plaatjes?
Steam - SC2
pi_43906527
Box model, daar moet je inderdaad op zoeken
pi_43910724
Hoe bedoel je met achtergrond plaatjes? en ik zal eens op boxmodel zoeken...
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_43950257
Firefox doet weer eens niet wat ik wil --> http://willem.wjbakker.com/hongkong/nieuws.php

Waarom wordt het middelste gedeelte er niet tussen gezet?

In IE6 is de layout wel goed.
pi_43950385
Mrbombastic, ik kan je niet zo helpen, maar ik kan je aanraden dit artikel & dit artikel te lezen
Steam - SC2
pi_43950417
quote:
Op zondag 26 november 2006 18:11 schreef Chandler het volgende:
Hoe bedoel je met achtergrond plaatjes? en ik zal eens op boxmodel zoeken...
Dat je inplaats van de tekst, een achtergrond plaatje doet met die nummers.
Steam - SC2
pi_43951178
Ok, ik heb de pagina even wat versimpeld. Hieronder 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		<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
 <head>
  <title>Studiereis Hong Kong</title>
  <link href='style.css' rel='stylesheet' type='text/css'>
 </head>

<body>
<div id='wrap'>
   <div id='clock'>";
   <img src='klokkie.jpg'>
   </div>

   <div id='weather'>";

   require("weather.php");

   echo "
   </div>

   <div id='header'>
      <img src='images/logo.jpg' alt=''><br><br>Hier komt het nieuws te staan
   </div>
</div>
</body>
</html>


En 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		/***********************************************/
/* Algemeen                                   */
/***********************************************/
/* Force firefox to always show a vertical scrollbar */
html {
   overflow: -moz-scrollbars-vertical;
}

body {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   background-color: rgb(194,202,252);   
   margin-left: 0px;
   margin-top: 0px;
}

#wrap {
   margin:0 auto;
   width: 980px;
}

/******************** Header *******************/
#clock {
   width: 110px;
   float: left;
   margin: -15px 0 0 0;
}

#header { 
   width: 709px; 
}

#weather {
   width: 150px;
   float: right;
   margin: 45px 0 0 0;
}

/******************** Menu *********************/
#menu{
   float: left;
   width: 120px;
   background-color: #FFFFFF;
   border: 1px solid #2900cf;
   margin-bottom: 5px;
}


In FF gaat het nu nog steeds niet goed. Ik heb echt geen flauw idee waarom.
pi_43976753
quote:
Op dinsdag 28 november 2006 00:56 schreef mrbombastic het volgende:
Ok, ik heb de pagina even wat versimpeld. Hieronder de code.
[ code verwijderd ]

En CSS:
[ code verwijderd ]

In FF gaat het nu nog steeds niet goed. Ik heb echt geen flauw idee waarom.
Het is wellicht nuttig even ergens door te nemen hoe floats (horen te) werken.
In het kort wat je op je pagina doet:
- Je maakt een links floatend element;
- Je maakt een rechts floatend element;

Wat je moet beseffen is dat floats geen ruimte innemen op de pagina, maar er als het ware 'boven zweven'.

Nu ga je een div met een vaste breedte van 709px plaatsen. De browser plaatst die div in de linker bovenhoek van het scherm (zonder rekening te houden met de float linksboven; die beïnvloedt de plaatsing van nieuwe niet-floatende divs immers niet). Nu wil je een afbeelding van 709px breed in die div plaatsen, maar de linkerbovenhoek van de div wordt al ingenomen door zwevende inhoud. Dus schuift de browser de inhoud (tekst of plaatjes) net zo lang naar beneden tot het wel past.

Wat je zou kunnen doen is de div#header een margin-left van 110px geven, zodat het blok niet overlapt met het klokje.

En ja: Internet Explorers ondersteuning van het floatmodel is kut. Vertrouw daar niet op.
pi_43978742
quote:
Op dinsdag 28 november 2006 22:22 schreef AnGabhar het volgende:

[..]
Wat je zou kunnen doen is de div#header een margin-left van 110px geven, zodat het blok niet overlapt met het klokje.
Bedankt. .

Ik zal er rekening mee houden bij de volgende keer dat ik floats gebruik.
pi_44651907
Ik zit met een probleem.

Op een website van mij heb ik een pagina gemaakt met een tabel, echter krijg ik voor deze tabel een stuk white space die even groot is als het tabel en als ik vanaf het eerste stukje whitespace ga selecteren zie je ook de data in het tabel geselcteerd worden. Nu vraag ik me af hoe dit mogelijk is? alle margins en paddings staan op 0!

Voorbeeld images


en (lijkt het zelfde, maar net even iets meer geselecteerd)



Je kunt het vinden op Gesloten tijd voor bepaalde vissoorten

Ik heb mijn style sheet goed doorgekeken maar kan niets vinden dat wijst op iets fouts ivm height oid.. Iemand een idee?
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_44652007
ik kan het probleem ook niet zo 1 2 3 vinden, maar waarom geef je de margins en paddings op in punten?

Trouwens, de grijs-witte balk loopt niet door in FireFox.
Steam - SC2
pi_44652045
Je moet alle <br /> weghalen tussen je tabellen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20		<table width="80%" style="margin: 0; padding: 0"><br />
<tr style="margin: 0; padding: 0"><br />
     <td style="margin: 0; padding: 0">Snoek</td><br />
     <td style="margin: 0; padding: 0"><strong>1 maart</strong> tot en met <strong>30 juni</strong></td><br />

</tr><br />
<tr style="margin: 0; padding: 0"><br />
     <td style="margin: 0; padding: 0">Barbeel, kopvoorn, serpeling, sneep, winde en de vlagzalm</td><br />
     <td style="margin: 0; padding: 0"><strong>1 april</strong> tot en met <strong>mei</strong></td><br />
</tr><br />
<tr style="margin: 0; padding: 0"><br />
     <td style="margin: 0; padding: 0">Snoekbaars en baars</td><br />
     <td style="margin: 0; padding: 0"><strong>1 april</strong> tot de laatste zaterdag in <strong>mei</strong></td><br />

</tr><br />
<tr><br />
     <td style="margin: 0; padding: 0">Beekforel, beekridder en bronforel</td><br />
     <td style="margin: 0; padding: 0">1 oktober t/m 31 maart</td><br />
</tr><br />
</table><br />


Die <br /> dingen mogen daar niet staan. Als ze er wel staan zorgen ze er voor dat er per <br /> een witregel boven de tabel verschijnt.
pi_44652062
Heeft dus niets met het CSS te maken .
pi_44652765
OMG!! die br's zijn me niet eens opgevallen

-edit-
Jullie hebben helemaal gelijk, moet toch maar eens een WYSIWYG editor inbouwen
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_44652998
quote:
Op vrijdag 22 december 2006 11:07 schreef Chandler het volgende:
OMG!! die br's zijn me niet eens opgevallen

-edit-
Jullie hebben helemaal gelijk, moet toch maar eens een WYSIWYG editor inbouwen
Je site ziet er overigens niet goed uit in Firefox 2. In IE is het geen probleem, maar in Fx loopt het niet echt lekker.
pi_44653361
Nee, ik weet het. Maar heb helaas geen idee hoe ik de fouten oplos, heb mijn best gedaan op het menutje (linkerkant). Ook voor het laten doorlopen van het grijze menu balkje heb ik geen oplossing gevonden.

Echt lekker loopt de site niet in FF zoals je al zei, maar nogmaals krijg het zelf niet gefixt. Heb al aardig wat CSS kennis maar dit gaat me te boven
The people who lost my respect will never get a capital letter for their name again.
Like trump...
pi_44976727
Vraagje:

ik wil <a name=""tekst">tekst</a> opmaken.
Ik heb hier invloed op met a:link{}
Maar is er ook iets waarmee uitsluitend <a name=""> mee kan opmaken? Het verschijnt nu als link in de browser en dat wil ik niet.
Hoe flik ik dat?
pi_44976857
<a name="tekst" class="namedanchor">tekst</a>

vervolgens in je css:
a.namedanchor:link {}

As a rule, I never touch anything more sophisticated and delicate than myself.
pi_44977046
quote:
Op vrijdag 22 december 2006 11:29 schreef Chandler het volgende:
Nee, ik weet het. Maar heb helaas geen idee hoe ik de fouten oplos, heb mijn best gedaan op het menutje (linkerkant). Ook voor het laten doorlopen van het grijze menu balkje heb ik geen oplossing gevonden.

Echt lekker loopt de site niet in FF zoals je al zei, maar nogmaals krijg het zelf niet gefixt. Heb al aardig wat CSS kennis maar dit gaat me te boven
zorg dat je de elementen body en html een height geeft van 100%. Standaard zijn deze elementen niet groter dan nodig is.

Voor firefox gebruik je min-height: 100%; voor een 100% vullend block-element (let op dat hij alleen hetgene waar hij in staat 100% vult! een div met 100% min-height in een div met height:50px resulteert dus in 50px hoog).

In IE6 zal dit niet werken, daar heb je height: 100% voor nodig. Echter is het aangeven van een hoogte volgens de specificaties volledig vast, dat houdt dus in dat firefox (de browser die volgens specificaties werkt (IE6 dus absoluut niet (belangrijk punt! ))) het betreffende element altijd en nooit iets anders dan 100% hoog is.

dus wat moet je doen, een hackje toepassen.
zet
height: auto !important;
height: 100%;
min-height: 100%;

IE6 doet niks met important dus houdt de laatst opgegeven waarde aan, alle andere browsers onthouden de important. IE6 wordt 100% hoog, en de rest gedraagt zich zoals normaal (en tevens zou horen).
door de min-height worden ook de andere browsers geattendeerd op een minimale hoogte.

alle browsers rekken nu uit naarmate de content groter wordt dan de opgegeven 100%.

Vergeet niet dat 100% altijd 100% van het parent-element is. Dat betekent dus als je een element met de hoogte van 100% bijvoorbeeld 50px; van de bovenkant afzet, hij ook 50px langer door zal lopen. de hoogte blijft altijd gelijk.

mzo
ga maar experimenteren.
As a rule, I never touch anything more sophisticated and delicate than myself.
pi_45298749
Ik ben nog stééds zo groen als wat op het gebied van CSS en dan loop je nogal eens tegen probleempjes aan.

Ik heb een opzetje voor mijn site hier staan. Voor het gemak heb ik mijn stylesheet hier opgeslagen.

Nu wil ik het volgende. In het navigatie gedeelte heb ik vier linkjes staan: Het begin, Over mij, Portfolio en Blog. Nu ben ik lekker eigenwijs en wil ik de drie laatsten - Over Mij, Portfolio en Blog - helemaal rechts hebben, zoals ze nu dus goed staan. Het begin wil ik echter helemaal links tussen de zwarte borders hebben staan. Nu is dat, zoals jullie zien, totaal mislukt. Ik kan er met mijn beperkte kennis even niet bij. Wie o wie kan mij helpen?

Overigens realiseer ik me dat er wellicht best wat rommel in de HTML of CSS kan staan of dat ik 't een en ander eigenlijk veel logischer kan aanpakken. Suggesties op dat gebied zijn ook van harte welkom, maar het gaat me met name om het navigatieprobleempje. De headers zijn en blijven plaatjes, no question about that.

Alvast bedankt.
last.fm
marksluymers.nl
pi_45299473
1
2
3		<span style="float:left;">Helemaal links</span>

<span style="float:right;">Dit staat helemaal rechts</span>
pi_45299501
En als de headers plaatjes blijven, doe er dan een alt attribuut bij.
pi_45299600
Dat van die alt attribuut was ik al van plan, maar dat is van later zorg.

Is het niet binnen CSS op te lossen, eigenlijk?
last.fm
marksluymers.nl
pi_45299724
Ik heb ook een vraag! .

Heb een div tagje gemaakt met daarin een plaatje, en nou wil ik dat divding en dus het plaatje in het midden van het browservenster hebben. Sowieso horizontaal, als het even kan ook verticaal. Het plaatje is 800x600, dus eigenlijk zou ik het op 50%-400pixels moeten zetten ofzo. Hoe doe je zoiets?
pi_45309266
1<div style="margin:0px auto;">Horizontaal gecentreerd</div>
pi_45309385
Je site verticaal en horizontaal uitlijnen (site heeft bv afmetingen 960x458pixels

css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15		#wrapper {
height: 458px;
width: 960px;
position:absolute;
top: 50%;
margin-top: -229px;
left: 50%;
margin-left: -480px;
text-align: left;
}

#container {
width: 920px;
margin: 0em auto;
}


html:
1
2
3
4
5
6
7		<body>
<div id="wrapper">
<div id="container">
content
</div>
</div>
</body>
pi_45309437
Zowel horizontaal als vertikaal centreren van een afbeelding in een DIV:

css:
1
2
3
4
5
6
7
8
9		div.afbeelding-container{
height:200px;
width:100px;
line-height:180px;
font-szie:180px;
}
div.afbeelding-container img{
vertical-align:middle
}


html:
1<div class="afbeelding-container"><img src="afbeelding.gif" border="0" width="50" height="50"></div>
  zaterdag 13 januari 2007 @ 11:59:16 #122
165500 MysticBlue
I\'m mister blue
pi_45309479
tvp
pi_45311735
quote:
Op zaterdag 13 januari 2007 11:55 schreef haaahaha het volgende:
Je site verticaal en horizontaal uitlijnen (site heeft bv afmetingen 960x458pixels

css:

[ code verwijderd ]

html:

[ code verwijderd ]
Deze heb ik gebruikt, dat werkt prima.
Maar nu...als ik een 'layer' heb gemaakt met bovenstaande code, en ik wil daarop nog een layer leggen met tekst die bijvoorbeeld een stukje naar links staat, maar wel altijd daar, kan dat ook?
* veldmuis denkt dat-ie beter aan de flash kan :").
pi_45312457
Je kan een layer absolute positioneren binnen een andere absoluut of relatief gepositioneerde layer. De binnenste layer zal dan het 0 punt van de layer daarbuiten nemen.
pi_45314651
Ik denk dat ik toch meer hulp nodig heb :@.
1
2		<div id="wrapper">
<div id="container"><img src="back.jpg" width="800" height="600" border="0" /></div>

Dat heb ik nu van jou gekopieerd dus...maar hoe zet ik daarbinnen nou weer een ander ding? :P.
pi_45316725
Wat zitten kloten, en intussen werkt het, maar nou heb ik weer wat anders !

divje1 = menuutje
divje2 = ding waarin content komt

hoe zorg ik dat alleen divje2 gerefresht wordt als ik in divje1 een linkje aanklik?
  FOK!-Schrikkelbaas zaterdag 13 januari 2007 @ 16:58:40 #127
1972 Swetsenegger
Egocentrische Narcist
pi_45316866
quote:
Op zaterdag 13 januari 2007 16:53 schreef veldmuis het volgende:
Wat zitten kloten, en intussen werkt het, maar nou heb ik weer wat anders !

divje1 = menuutje
divje2 = ding waarin content komt

hoe zorg ik dat alleen divje2 gerefresht wordt als ik in divje1 een linkje aanklik?
niet, het zijn geen frames.
 | FOK! Schrikkelbaasch
pi_45316945
quote:
Op zaterdag 13 januari 2007 16:58 schreef Swetsenegger het volgende:

[..]

niet, het zijn geen frames.
Okay, clear. Hoe los je zoiets normaliter op? Totaal anders? Gewoon een paar pagina's die er hetzelfde uitzien met alleen andere content?

Ik wil de content trouwens uit een database gaan halen, mocht dat uitmaken.
  FOK!-Schrikkelbaas zaterdag 13 januari 2007 @ 17:04:32 #129
1972 Swetsenegger
Egocentrische Narcist
pi_45317071
quote:
Op zaterdag 13 januari 2007 17:00 schreef veldmuis het volgende:

[..]

Okay, clear. Hoe los je zoiets normaliter op? Totaal anders? Gewoon een paar pagina's die er hetzelfde uitzien met alleen andere content?

Ik wil de content trouwens uit een database gaan halen, mocht dat uitmaken.
Gewoon een nieuwe pagina maken. En aangezien je met een database werkt neem ik aan dat je ook php ondersteuning hebt?
Dan kan je grote delen die op elke pagina hetzelfde zijn bv includen. Of precies andersom, je maakt 1 keer de pagina en afhankelijk van de gekozen optie laad je bepaalde content in die ene pagina.

(bv met de GET functie in php.
Als je bv een webpagina pagina.php hebt kan je linkjes maken:
http://www.domein.nl/pagina.php?id=1
http://www.domein.nl/pagina.php?id=2
etc

En vervolgens kan je op basis van het id de bijbehorende content tonen.
 | FOK! Schrikkelbaasch
pi_45317275
Hmm, okay! Ga ik het zo doen, eigenlijk wel logisch .

Thanks!
pi_45321363
quote:
Op vrijdag 12 januari 2007 22:01 schreef MadGuy het volgende:
Ik ben nog stééds zo groen als wat op het gebied van CSS en dan loop je nogal eens tegen probleempjes aan.

Ik heb een opzetje voor mijn site hier staan. Voor het gemak heb ik mijn stylesheet hier opgeslagen.

Nu wil ik het volgende. In het navigatie gedeelte heb ik vier linkjes staan: Het begin, Over mij, Portfolio en Blog. Nu ben ik lekker eigenwijs en wil ik de drie laatsten - Over Mij, Portfolio en Blog - helemaal rechts hebben, zoals ze nu dus goed staan. Het begin wil ik echter helemaal links tussen de zwarte borders hebben staan. Nu is dat, zoals jullie zien, totaal mislukt. Ik kan er met mijn beperkte kennis even niet bij. Wie o wie kan mij helpen?

Overigens realiseer ik me dat er wellicht best wat rommel in de HTML of CSS kan staan of dat ik 't een en ander eigenlijk veel logischer kan aanpakken. Suggesties op dat gebied zijn ook van harte welkom, maar het gaat me met name om het navigatieprobleempje. De headers zijn en blijven plaatjes, no question about that.

Alvast bedankt.
Heeft iemand nog een suggestie voor mijn probleempje?

Dat includen zal voor mij ook nuttig worden als het op de nieuwe host komt te staan, bedankt voor de tip.
last.fm
marksluymers.nl
pi_45321643
MadGuy: wat is er mis met mijn oplossing? Die werkt perfect.

Het is een nette oplossing in CSS (alles wat in style="" staat is CSS). Je moet sowieso beide zaken scheiden en voor elke aangeven of hij links of rechts moet komen te staan.

Als je het gescheiden wilt:

HTML
1
2
3		<span id="links">Het begin</span>

<span id="rechts">Blog - Portfolio - Over mij</span>


CSS
1
2		#links {float:left;}
#rechts {float:right;}
pi_45321770
Oh, wacht! Ik begreep hem he-le-maal verkeerd. Mijn excuses! Ik ga hem zo meteen proberen.
last.fm
marksluymers.nl
pi_45322682
Geprobeerd en het geweldige effect is vervolgens dit:



Niet tof dus.

Maar de kans is groot dat ik het fou t doe, dus bij deze mijn geklooi:

HTML
1
2
3
4
5
6
7
8
9		<ul id="menu">   
  <li><a href="blog.html"><span id="rechts">Blog</span></a></li>
   
  <li><a href="portfolio.html"><span id="rechts">Portfolio</span></a></li>
   
  <li><a href="overmij.html"><span id="rechts">Over mij</span></a></li>
  
  <li><a href="home.html"><span id="links">Het begin</span></a></li>
</ul>


CSS
1
2
3		#links {float:left;}

#rechts {float: right;}
last.fm
marksluymers.nl
pi_45323215
Nadeel van de oplossing van huhu is dat je je navigatie opsplitst. Moet je niet willen denk ik.
Ik zie dat je navigatie vast staat, qua menuitems bedoel ik. De positie kun je daarom ook vastzetten. De afstand tussen de items onderling hoeft niet per se variabel te zijn, je zet ze 1malig vast.
Dit is een oplossing waarbij je je navigatie simpel in 1 UL hebt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22		<html>
<head></head>
<style style="text/css">
body{font: 11px arial;}
#navigatie{width:600px;height:30px;border-top:solid 1px #000000;border-bottom:solid 1px #00000;}
ul{margin:6px 0;padding:0px;}
li{float:left;}
li a{color:#000000;font-weight:bold;}
li a{text-decoration:none;}
li a.portfolio{margin: 0 90px 0 90px;}
li a.blog{margin: 0 0 0 251px;}
</style>
<body>
<div id="navigatie">
<ul>
<li><a href="hetbegin.htm">het begin</a></li>
<li><a class="blog" href="blog.htm">Blog</a></li>
<li><a class="portfolio" href="portfolio.htm">Portfolio</a></li>
<li><a href="overmij.htm">Over mij</a></li>
</div>
</body>
</html>
pi_45323585
1
2
3
4
5
6
7
8
9		<style id="links"><a href="home.html">Het begin</a></span>

<span id="rechts">
  <a href="blog.html">Blog</a>
   
  <a href="portfolio.html">Portfolio</a>
   
  <a href="overmij.html">Over mij</a>
</span>


En vergeet die <ul> en <li> dingen.
pi_45323643
lol, ik zou toch echt liever een ul navigatie willen dan een in code gebroken navigatie. Een ul is voor de toegankelijkheid via meerdere media een mooiere oplossing. Daarnaast heb je niet per se verschillende spannetjes nodig om tot de uitlijning tussen de navigatie items onderling te komen.
pi_45324235
@ haaahaha: dat komt inderdaad meer in de richting van wat ik bedoel, in ieder geval wat betreft de positioering van de navigatie. Het begin heeeeeelemaal links, de rest rechts. Ik los het liever met ul-codering op, inderdaad. Netter.

Maar nu heb ik dus dit:



last.fm
marksluymers.nl
pi_45325675
Je moet om alle content die je nu hebt staan een div plaatsen en de breedte instellen op de breedte van de website plus margin: 0 auto;
Dus stel de breedte van je website is 600 pixels dan:

css:
1#canvas{width:600px;margin: 0 auto;}


html
1
2
3		<body>
<div id="canvas"> alle content </div>
</body>


Je hebt nu elk element (header, content vlak, footer) los centraal gecentreerd. Beter is dus een box om alle content elementen te plaatsen en die box via de margin center uit te lijnen.
pi_45326023
Oh aha, dus alles weer apart in een box plaatsen. Die miste ik dus. Mijn website 'shifte' al alle kanten op als ik iets probeerde. Weer wat geleerd. Gaan we even proberen!

Maar blijft een site daardoor wel weer dynamisch genoeg, bijvoorbeeld als mensen de tekstgrootte veranderen?
last.fm
marksluymers.nl
pi_45326728
Euhh, zoals ik het nu zie heb je je fonts ingesteld op pixels. Als je dan bv in IE de tekengroter aanpast zie je geen verandering in de grootte van je teksten. Dan zou je EM moeten gebruiken ipv px. Maar je teksten op die manier van grootte aanpassen is altijd killing voor je lay-out.
pi_45327104
Oh, nou ja. Ik kijk dan wel even. Het is ook niet van zo'n enorm belang. Omdat ik het voor mijn werk ga gebruiken is het echter wel van belang dat het zo'n groot mogelijk bereik heeft, zeg maar. Misschien ooki van later zorg. Om dan te gaan pielen.

Ik ga morgen jouw suggesties even uitproberen. Bedankt, nogmaals.
last.fm
marksluymers.nl
pi_45327129
Good luck!
pi_45328410
Toch maar vandaag geprobeerd. Hij staat nu goed. Ik moet alleen nog de puntjes op de welbekende i zetten: die bullits moeten foetsie, de marges tussen de navigatielinkjes moeten nog iets strakker (blog, over mij en portfolio staan nog niet geheel rechts) en de border-bottom is verdwenen.
last.fm
marksluymers.nl
pi_45328616
bullets foetsie:
ul{list-style-type:none;}
Je bekijkt je site in mozilla/firefox?
pi_45328668
Je moet natuurlijk wel goed naar je code of code die je krijgt kijken. De border bottom heeft 5 nulletjes, moeten er 6 zijn
pi_45329036
Of drie. Dat bedoelde ik dus.

Ik heb het gewoon slordig neergekwakt om even te kijken of het werkte. Daarbij ben ik nog aardig groen. Maar bedankt voor de ad rem reactie!

Ik bekijk de site inderdaad in mozilla/firefox omdat deze de standaard meer volgt dan IE. Als er iets in IE niet werkt, zoek ik daar later wel een hack voor.
last.fm
marksluymers.nl
pi_45330662
Als alle drie (of zes ) waardes gelijk zijn kun je er ook gewoon 1 neer zetten.
Steam - SC2
pi_45331619
Je kan prima je lay-out in firefox, ie6 en ie7 op de pixel nauwkeurig krijgen zonder css hacks.
pi_45333380
Tof, ik ben zojuist achter media="print" gekomen!

Erg makkelijk, ik heb er mijn pagina's wat mee verkleind, overal wat niet geprint hoeft te worden gemarkeerd met een noprint class, alles zwart-wit gemaakt, en alle fancy dotted borders rechtgetrokken. Nice
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
[CSS] voor dummies - Deel 5
Index

» digital corner

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