abonnement Unibet Coolblue Bitvavo
pi_64998239
Nagekeken

Nu heb ik nog 1 probleem 1 balk wil hij niet tussen het menu en de content zetten.
Iemand die het wel begrijpt?

Dit is hoe het er nu uitziet

http://www.mediavormgever.net/~thillart86/animatie/

http://i43.tinypic.com/2je4wib.jpg ( zo ziet de site er uit als het zou werken )

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
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
/* CSS Document */
ul, li {
padding: 0;
margin: 0;
}


ul{
list-style:none;
}

li{
float:left;
}


.klier{clear:both;}


body {
background-image:url(bg.jpg);
margin-top:0;



img {
border: none;
}

#container {
width:758px;
margin-left:auto;
margin-right:auto;
}

#header {
background-image:url(images/ani_01.jpg);
height:248px;
}

#midden{
width:702px;
float:left;

}

#menu li a{
background-image:url(images/ani_06.jpg);
width:120px;
height:41px;
display:block;
border:0;
text-decoration:none;
}

/* Menu li */

#menu li a.buik{
background-image:url(images/ani_07.jpg);
width:224px;
}

#menu li a.home{
background-image:url(images/ani_03.jpg);
width:118px;
height:41px;
display:block;
border:0;
text-decoration:none;
}

#menu li a.historie{
background-image:url(images/ani_04.jpg);
width:120px;
height:41px;
display:block;
border:0;
text-decoration:none;
}

#menu li a.studio{
background-image:url(images/ani_05.jpg);
width:121px;
height:41px;
display:block;
border:0;
text-decoration:none;
}

#menu li a.studio{
background-image:url(images/ani_05.jpg);
width:120px;
height:41px;
display:block;
border:0;
text-decoration:none;
}


#content{
background-image:url(images/ani_10.jpg);
width:556px;
height:495px;
float:left;
}

#menubalk{
background-image:url(images/ani_09.jpg);
float:left;
}

#menurechts{
background-image:url(images/ani_11.jpg);
width:146px;
height:495px;
float:left;
}


/* Extra Balken */

#sidebalkleft{
background-image:url(images/ani_02.jpg);
width:27px;
height:575px;
float:left;
}

#onderbalk{
background-image:url(images/ani_12.jpg);
height:45px;
clear:both;
}

#rechterbalk{
background-image:url(images/ani_08.jpg);
height:575px;
width:29px;
float:left;
}


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
<!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=iso-8859-1" />
<title>Animatie</title>
<link href="div.css" rel="stylesheet" type="text/css" />
</head>

<body><div id="container">

   <div id="header">
   </div>
   

      <div id="sidebalkleft">
  </div>
     <div id="midden">
      <div id="menu">
      <ul>
         <li><a href="index.html" class="home"></a></li>
         <li><a href="historie.html" class="historie"></a></li>
         <li><a href="studiolfc.html" class="studio"></a></li>
         <li><a href="contact.html" class="contact"></a></li>
         <li><a href="#" class="buik"></a></li>
      </ul>
      
     </div>
     
      <div id="menubalk"></div>
      <div id="content">
         </div>
         <div id="menurechts">
         </div>
   </div>
     <div id="rechterbalk"></div>
 

            <div id="onderbalk">
            </div>
</div>
</body>
</html>
pi_65000762
quote:
Op dinsdag 13 januari 2009 @ 17:53 schreef Mailbox het volgende:
Nagekeken

Nu heb ik nog 1 probleem 1 balk wil hij niet tussen het menu en de content zetten.
Iemand die het wel begrijpt?

Dit is hoe het er nu uitziet

http://www.mediavormgever.net/~thillart86/animatie/

http://i43.tinypic.com/2je4wib.jpg ( zo ziet de site er uit als het zou werken )

CSS
[ code verwijderd ]

HTML
[ code verwijderd ]
Gaat hier gewoon goed
Welke browser?
pi_65001936
Een hover in een apart plaatje is trouwens lelijk, je ziet een rode flits (de achtergrond) terwijl het hover plaatje aan het laden is.
Beter zet je de link en de hover beide in hetzelfde plaatje en speel je met je backgroundposition. Nog netter ook; die vier a:hover dingen vervang je door één die iets met de backgroundposition doet. Scheelt weer css.
pi_65002191
Hallo,

Momenteel ben ik begonnen met het slicen in divs/css, eerder deed ik dit altijd in tabellen. Momenteel ben ik al een klein stukje gekomen, maar ben opgelopen naar 2 problemen.

1) In Internet explorer staat de balk boven aan heel erg naar rechts en begint niet links. In firefox is dit wel het geval. Waar dit aan licht weet ik niet?

2) Ik wil dat de content background (waar het woord 'text' staat) achter het boven plaatje komt. Wel op de zelfde hoogte als nu maar gewoon erachter, nu staat het er voor. Ik heb het geprobeerd met z-index, maar het deed niet zoals ik wou. Het kan zijn dat ik het verkeerd deed

[html]<!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>Naamloos document</title>
<style type="text/css">
body {
background : url(http://www.bittybotanic.com/images/bg.gif);
margin: 0px;
font-family : Verdana,Helvetica,sans-serif;
font-size : 10px;
}
#template {
padding: 50px; 0px; 0px; 0px;
margin: 0 auto;
width: 835px;
}
#loginBalk {
margin-left: 0px;
background-image: url(top.png);
width : 100%;
border-bottom : 1px solid #000;
position : fixed;
height : 30px;
}
#bovenkant {
background: url('bovenkant.gif');
width : 835px;
height : 323px;
}
#achter {
margin-top : -6px;
background-image: url('bgs.PNG');

}
#achter #midden {
background: url('midden.gif');
width:815px;
padding: 10px;
}
#onderkant {
background: url('onderkant.gif');
width: 835px;
height: 24px;
}

</style>
</head>
<body>

<div id="loginBalk">
test
</div>

<div id="template">
<div id="bovenkant">

</div>
<div id="achter">
<div id="midden">
text
</div>
</div>
<div id="onderkant">

</div>
</div>
</body>
</html>[/html]

Voorbeeld: http://www.bittybotanic.com/red/index.html

Ik hoop dat jullie me kunnen helpen
pi_65002840
1) wellicht left:0; toevoegen?
2) hoe zie je dat voor je? moeten de divs over elkaar vallen met een opacity ofzo? Waarom nest je ze niet?
  dinsdag 13 januari 2009 @ 20:01:09 #216
230788 n8n
Pragmatisch
pi_65002899
Mailbox, ik zou de afbeeldingen van je menu samenvoegen en dan positioneren in de achtergrond met de css, dan hoef je maar 1 plaatje in te laden, en dat scheelt snelheid. Verder krijg je nu een rode 'flits' als je over het menu gaat, omdat de :hover-achtergrond geladen moet worden.

edit, is al door Veldmuis gezegd, dat krijg je als je meerdere 'nog-te-volgen-tabs' open laat en dan boodschappen gaat doen.

@ Veeltje, je vragen zijn niet heel erg duidelijk, verder heb je voor het logo in de rode header een jpeg met een kleurprofiel gebruikt. Hierdoor verschilt de achtergrond van de div met de achtergrond van de afbeelding (,of is da t de bedoeling?).

[ Bericht 14% gewijzigd door n8n op 13-01-2009 20:07:26 ]
Specialization is for insects”.—Robert Heinlein
pi_65003528
Bedankt mcDavid,

Probleem 1 is opgelost. Nu alleen nog probleem 2.
Maar met probleem 2 bedoel ik dat het in plaats naar voren naar achteren moet. Zoals hier: http://www.bittybotanic.com/red/template.html

Maar die is verkeerd dus die gebruik ik niet, maar daarbij zie je wel hoe ik het bedoel
pi_65003730
Waarom zit die redirect in je link?
pi_65003804
Hoe bedoel je?
pi_65004432
quote:
Op zondag 11 januari 2009 22:08 schreef Mirel het volgende:

[..]

Zit ook niet in het css bestand. Het is iets zoals <jdoc balblabalblabalbalbal> wat in een div wordt neergezet.
Dus is het geen css, en hoort het niet in dit topic.
  dinsdag 13 januari 2009 @ 20:40:06 #221
230788 n8n
Pragmatisch
pi_65004575
quote:
Op dinsdag 13 januari 2009 20:21 schreef Veeltje het volgende:
Hoe bedoel je?
http://www.habbers.nl/redirect.php?url=http://www.bittybotanic.com/red/index.html

Vandaar dat ik begon over je rode header Ben niet helemaal bij de les vandaag.
Specialization is for insects”.—Robert Heinlein
pi_65004897
Oh woop, had het op een forum geplaatst eerder maar daar reageerde niemand. Dus had ik 't maar hier geplaatst en die link word daar automatisch zo neergezet. Dit is de normale link: http://www.bittybotanic.com/red/index.html
pi_65005066
quote:
Op dinsdag 13 januari 2009 @ 20:16 schreef Veeltje het volgende:
Bedankt mcDavid,

Probleem 1 is opgelost. Nu alleen nog probleem 2.
Maar met probleem 2 bedoel ik dat het in plaats naar voren naar achteren moet. Zoals hier: http://www.bittybotanic.com/red/template.html

Maar die is verkeerd dus die gebruik ik niet, maar daarbij zie je wel hoe ik het bedoel
ah nu zie ik wat je bedoelt.

Ik denk dat je beide elementen position:relative; moet geven, en dan de onderste met top:-10 ofzo naar boven moet schuiven.
Als je ze beide position:relative gegeven hebt werkt z-index wel.
pi_65005308
Heel erg bedankt, ik heb nu alleen bovenkant die position relavtive gegeven en het werkt nu perfect
  woensdag 14 januari 2009 @ 12:42:08 #225
87680 Mirel
Mirel wil een bongophone.
pi_65025664
Hoi, ik heb 2 divs die elk een afbeelding zijn, en wil graag de ene div in het midden centeren, en de andere div ernaast die rechts uitgelijnd is. Ik heb ze geprobeerd te floaten, want dan komen ze naast elkaar maar ik kan de ene div niet in het midden centeren met de float code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#logo {
background: url(images/logo.png) no-repeat;
width: 300px;
height: 200px;
margin: 0 auto;
float: left;
}

#ster {
background: url(images/ster.png) no-repeat;
width: 190px;
height: 152px;
float: right;
}

zo is het nu dus maar het werkt niet.
When all else fails, you always have delusion.
pi_65025975
ehm, float laat een DIV niet in het midden staan.... het zet een BLOCK-element enkel in de 'text-flow' links of rechts uitgelijnd (dat de rest van de test er 'rondloopt')


wat je wil bereiken is eventueel wel te doen door een element absoluut te positioneren (in het midden) waardoor hij verder geen invloed heeft op andere elementen in de pagina, en het andere relative positioning te geven en een 'left: n px;' waarbij n de afstand is die hij naar rechts moet bewegen

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>test</title>
   
   <style type="text/css">
BODY {
   text-align: center;
}
#logo {
   position: absolute;
   width: 200px;
   height: 200px;
   margin: 0 auto;
   border: 1px solid green;
}

#ster {
   position: relative;
   left: 225px;
   width: 150px;
   height: 150px;
   border: 1px solid red;
}
   </style>
</head>

<body>

<div id="logo"></div>
<div id="ster"></div>


</body>
</html>
"Whatever you feel like: Life’s not one color, nor are you my only reader" - Ausonius, Epigrammata 25
pi_65035556
Hallo,

Wanneer ik een menu in een absoluut geplaatste div zet verschijnt de menu beschrijving door de afbeelding heen.

Is er een manier om de tekst te verbergen zodat deze niet door de afbeeldingen heen komt?

1
2
3
4
5
6
<ul id="navigation">
                                     <li><a href="/" id="home" class="active">home</a></li>
                                                              etc.


</ul>


navigation komt terug in style.css met

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
#navigation{
   background: url(images/bg-navigation.gif) no-repeat right top;
   list-style: none;
   overflow: hidden;
   height: 70px;
   font-family: 'Lucida Grande', Arial, sans-serif;
   font-size: 12px;


}
#navigation li{
   float: left;
}
#navigation a{
   display: block;
   text-decoration: none;
   border-top: none;
   line-height: 400px;
   overflow: hidden;
}
#navigation a#home{
   background: url(../images/nav-home-off.png) no-repeat;
   width: 117px;
}
#navigation a#home:hover,#navigation a#home.active{
   background: url(../images/nav-home-on.png) no-repeat;
   



Je kan natuurlijk denken: plaats het buiten de absolute div maar dan krijg ik hem niet op de goede plek...

Iemand een tip die ik kan proberen??

Bedankt!
pi_65036017
wat wil je precies? De tekst in de link in een achtergrondafbeelding zetten en dan de letterlijke tekst verbergen?
Kun je doen door het in een <span> te zetten en die display:none te geven...
pi_65036320
quote:
Op woensdag 14 januari 2009 16:50 schreef mcDavid het volgende:
wat wil je precies? De tekst in de link in een achtergrondafbeelding zetten en dan de letterlijke tekst verbergen?
Kun je doen door het in een <span> te zetten en die display:none te geven...
Of beter geschikt voor Google en alternatieve user agents: "text-indent: -9999px".
pi_65036384
bedankt!
  zondag 18 januari 2009 @ 23:40:05 #231
87680 Mirel
Mirel wil een bongophone.
pi_65192960
Hey boys. Ik had een best irritant probleem met links. Ik had ze in de .css opgemaakt dat ze wit waren. Later kreeg ik daar problemen mee want een andere set met links wilde ik niet wit hebben. Ik heb ze geprobeerd apart te definieren maar het is me niet gelukt. Uiteindelijk heb ik bij de links die ik níet wit wilde hebben maar uit eindelijk de achtergrond kleur veranderd zodat je ze alsnog kon zien.
Maar nu zit met joomla bezig, en daar komt ook weer zo'n link terug, en m'n achtergrond is wit dus die link die gemaakt is met joomla is nu ook wit en nou moet ik toch weer terug naar dat css bestand.

index.php (1 set links, de agenda, is nu nog over omdat de andere, het menu, over is genomen door joomla, maar die verandert wel telkens mee als ik de agenda links wil veranderen)
1
2
3
4
5
6
7
8
                  <ul id=agendalijst>
                      <li class="agendalinks"><a href="#">optreden1</a></li>
                      <li class="agendalinks"><a href="#">optreden2</a></li>
                      <li class="agendalinks"><a href="#">optreden3</a></li>
                      <li class="agendalinks"><a href="#">optreden4</a></li>
                      <li class="agendalinks"><a href="#">optreden5</a></li>
                      <li class="agendalinks"><a href="#">optreden6</a></li>
                     <li class="agendalinks"><a href="#">optreden7</a></li>


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
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
148
149
150
151
152
153
154
155
156
157
158
159
html {

}

body {
background: #dcc57f url(images/header.jpg) repeat-x;
font-size: 11px;
font-family: verdana, calibri, tahoma;
text-align: center;
color: #444444;
}

h2 {
font-size: 11px;
font-family: verdana, calibri, tahoma;
color: #444444;
margin: 0;
padding-left: 2px;
padding-top: 25px;
text-align: left;
font-weight: bold;
}

h3 {
font-size: 24px;
font-family: verdana, calibri, tahoma;
color: #413387;
margin: 0;
padding: 2px;
text-align: left;
font-weight: normal;
}

h4 {
background: url(images/agendabalk.png) no-repeat;
font-size: 11px;
font-family: verdana, calibri, tahoma;
line-height: 18px;
padding-left: 18px;
color: white;
margin: 0;
text-align: left;
font-weight: bold;
}

#menu {
background: url(images/menubalk.jpg);
text-align: left;
width: 1000px;
height: 22px;
line-height: 20px;
font-family: century gothic;
font-size: 18px;
color: white;
}

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

#inhoud {
padding-left: 10px;
padding-right: 10px;
background: white repeat-y;
border-left: 1px solid #444444;
border-right: 1px solid #444444;
}

#inhoud div {
overflow: hidden;
}

#linker {
float:left;
width: 74%;
margin-right: 10px;
margin-top: 10px;
margin-left: 0px;
}

#rechter {
float: right;
width: 24%;
margin-right: 0px;
margin-top: 10px;
}

#kop1 {
margin-bottom: 10px;
background: white;
}

#kop2 {
margin-bottom: 10px;
background: white;
}

#agenda {
width: 184px;
height: 400px;
border: 1px solid #4263ba;
color: black;
background: #66c7d9;
margin-bottom: 10px;
}

li{
display:inline;
padding-left:15px;
padding-right:15px;
}

#nav {
margin-bottom: 1px;
}

#agendalijst {
font-family: calibri;
font-size: 13px;
padding-left: 2px;
}

a{
text-decoration: none;
color: white;
}

a:hover{
text-decoration: underline;
}

#footer {
background: url(images/footerbalk.jpg) repeat-x;
color: #eaeaea;
font-size: 11px;
font-family: verdana, tahoma;
text-align: right;
height: 16px;
border-left: 1px solid #444444;
border-right: 1px solid #444444;
border-bottom: 1px solid #444444;
}

#logo {
background: url(images/logo.png) no-repeat;
width: 300px;
height: 200px;
margin: 0 auto;
}

#ster {
background: url(images/ster.png) no-repeat;
width: 190px;
height: 152px;
position: absolute;
margin-left: 950px;
}


Nu wil ik de links van de agenda wit laten, maar van de div "linker" wil ik de links gewoon blauw of donkerblauw hebben. Hoe kan ik ze los van elkaar definieren in de css want iets overridet blijkbaar alles. Ik heb geprobeerd 1 a href linkje een id te geven van 'agenda' en dan in de css 'a agenda{ color bla} te doen maar dat werkte niet.
Ik merkte ook dat de kleur van links alleen te definiëren valt in de css als ze in zo'n a { }ding staan en niet in een #naam div { }
Maar ik kom er niet uit.

Waar het eigenlijk op neer komt is dit: Ik wil dat het menu en de agenda gewoon wit blijven, máár dat de link die door joomla gemaakt wordt, wél een aparte definitie heeft zodat ik die los van de andere 2 kan verandern.
Maar ik weet dus niet of ik zo'n <jdoc:include type="module" name="latestnews" /> wel apart kan bewerken.
Als dat niet op díe manier kan, dan is het wel mogelijk dat ik de globale links dan bijv. op rood laat zodat dat joomlageval ook rood wordt en dus te zien is, en die andere 2 (menu en agenda) los definieër.

En anders, weten jullie een betere laatste nieuws module want dit standaard ding van Joomla laat alleen linkje van de titel van het artikel zien en dat is eigenlijk vrij weinig, wil liever dat het gehele bericht te zien is.
When all else fails, you always have delusion.
  zondag 18 januari 2009 @ 23:51:16 #232
230788 n8n
Pragmatisch
pi_65193329
a {
color: blue;
}

#menu a, #agendalijst a {
color: white;
}

Dit zou moeten werken, anders moet je even met voorbeelden komen. De <li>'s in ul#agendalijst hoef je ook geen class te geven, die bereik je al met '#agendalijst li { }'.
Specialization is for insects”.—Robert Heinlein
  zondag 18 januari 2009 @ 23:58:12 #233
87680 Mirel
Mirel wil een bongophone.
pi_65193578
Ha yes dat werkte, dank je wel. Ik wist dus niet dat je #menu en #agenda kon doen omdat het links waren, en tot nu toe zag ik dat die iedere keer geen # hadden. Dank je
When all else fails, you always have delusion.
pi_65218174
quote:
Op woensdag 14 januari 2009 16:57 schreef Roy_T het volgende:

[..]

Of beter geschikt voor Google en alternatieve user agents: "text-indent: -9999px".
Dat maakt toch geen reet uit?
Google leest geen CSS, en alternatieve user agents over het algemeen ook niet.
  maandag 19 januari 2009 @ 19:13:17 #235
230788 n8n
Pragmatisch
pi_65218658
text-indent vereist geen span
Specialization is for insects”.—Robert Heinlein
pi_65219184
Ow excuse me, een achtergrondafbeelding. Ik heb niks gezegd.
pi_65219215
quote:
Op maandag 19 januari 2009 18:59 schreef veldmuis het volgende:

Dat maakt toch geen reet uit?
Google leest geen CSS, en alternatieve user agents over het algemeen ook niet.
Google weet ik niet zeker, maar er zijn wel alternatieve user agents die een element met "display: none" volledig negeren. En een extra element gebruiken is gewoon ranzig
pi_65219264
Van Google weet ik behoorlijk zeker dat er niet naar CSS gekeken wordt. Een extra element, zover had ik niet gekeken, en dat is idd ranzig en nutteloos. Ben het dus volkomen met je eens wat dat betreft. Ik las slecht.
  dinsdag 20 januari 2009 @ 22:22:27 #239
87680 Mirel
Mirel wil een bongophone.
pi_65264265
Ik zie dat er geen standaard Joomla topic is, en misschien heeft mijn probleem met css te maken.
Ik heb een nieuwspagina op een site gemaakt, gewoon artikelen die onder elkaar staan. Wanneer ik een foto of youtube filmpje in een artikel zet, dan gaat bij het plaatsen van het 2e artikel dáárna, opeens de tekst verschuiven. Bij het plaatsen van een nieuwe artikel na eentje met een foto of youtube, dan gaat het nog goed. Pas bij het artikel dáárna gaat het opeens fucken.


M'n CSS bestand staat op deze pagina een paar reacties terug nog, div #linker.

En ik heb geen URL, zit op localhost te testen.
When all else fails, you always have delusion.
pi_65264321
url?
abonnement Unibet Coolblue Bitvavo
Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')