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

woensdag 14 januari 2009 @ 12:49:06 #226

RM-rf

1/998001

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

woensdag 14 januari 2009 @ 16:40:58 #227

klusmeister

flex

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

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!

woensdag 14 januari 2009 @ 16:50:47 #228

mcDavid

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

woensdag 14 januari 2009 @ 16:57:18 #229

Roy_T

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

woensdag 14 januari 2009 @ 16:58:43 #230

klusmeister

flex

bedankt!

zondag 18 januari 2009 @ 23:40:05 #231

Mirel

Mirel wil een bongophone.

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

n8n

Pragmatisch

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

Mirel

Mirel wil een bongophone.

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.

maandag 19 januari 2009 @ 18:59:17 #234

veldmuis

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

n8n

Pragmatisch

text-indent vereist geen span

“Specialization is for insects”.—Robert Heinlein

maandag 19 januari 2009 @ 19:27:06 #236

veldmuis

Ow excuse me, een achtergrondafbeelding. Ik heb niks gezegd.

maandag 19 januari 2009 @ 19:27:59 #237

Roy_T

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

maandag 19 januari 2009 @ 19:29:28 #238

veldmuis

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

Mirel

Mirel wil een bongophone.

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.

dinsdag 20 januari 2009 @ 22:23:35 #240

veldmuis

url?

dinsdag 20 januari 2009 @ 22:25:45 #241

Mirel

Mirel wil een bongophone.

editje, heb ik niet.

When all else fails, you always have delusion.

dinsdag 20 januari 2009 @ 22:43:24 #242

veldmuis

Ja, dan is het lastig. Installeer de IE devtoolbar of firebug en ga proberen.

dinsdag 20 januari 2009 @ 22:47:02 #243

Mirel

Mirel wil een bongophone.

Wat wil je dan precies zien op de site wat ik je niet kan beschrijven?

When all else fails, you always have delusion.

dinsdag 20 januari 2009 @ 23:01:36 #244

Mirel

Mirel wil een bongophone.

Oh het ligt geeneens aan de youtube player of aan foto's. Een willekeurig berichtje gaat gewoon heel leuk naar rechts.

When all else fails, you always have delusion.

woensdag 21 januari 2009 @ 00:00:18 #245

Light

Wat is dan de bedoeling als je drie nieuwsberichten hebt?

fokstok.nl

woensdag 21 januari 2009 @ 00:14:21 #246

Roy_T

Beetje lastig analyseren zonder enige code he

Educated guess: floats.

woensdag 21 januari 2009 @ 07:28:11 #247

wc-eend

Ik heb een vraagje en ik weet niet zeker of dit oplosbaar is met CSS..

Ik heb in photoshop een layout gemaakt, die gesliced en in dreamweaver van de hele layout een div gemaakt en de gebieden waar content in komt ook een div gemaakt.. (dus div in div) Nu heb ik een probleempje met div in de div. Zodra ik er content (tekst) aan toevoeg, wordt de div iets groter in FireFox, in IE is dat niet.. Nu had ik dus de div grootte aangepast (kleiner maken) en padding toegevoegd en dat werkt in Firefox, want de padding duwt de div terug naar zijn originele grootte..

Maar.. In IE wordt de div dan kleiner (zoals ingesteld) maar daar duwt de padding de div niet terug naar originele grootte..

Hoe o Hoe kan ik zorgen dat de div dezelfde grootte houdt als ik tekst in de div zet?

1
2
3
4
5
6
7

main_index_layout #Table_01 tr td #main_content {
   height: 290px;
   width: 471px;
   background-color: #99cc66;
   font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
   padding: 5px;
}

Dat is de css van de div waar die tekst in moet... Ik ben trouwens echt een noob dus simpele uitleg gelieve..

woensdag 21 januari 2009 @ 09:07:51 #248

Roy_T

wc-eend, welk doctype gebruik je? Als je er geen gebruikt, voeg die dan eerst eens toe. Klinkt als verschillende box models namelijk

woensdag 21 januari 2009 @ 09:51:55 #249

wc-eend

uhhhhhh

even google opstarten

woensdag 21 januari 2009 @ 09:57:25 #250

Light

quote:
Op woensdag 21 januari 2009 09:51 schreef wc-eend het volgende:
uhhhhhh even google opstarten

Gewoon in de bron van je paginacode kijken (dus in de browser kiezen voor iets als bron weergeven). Als er een doctype is, staat het op de eerste regel. En als je wilt weten hoe zoiets eruit hoort te zien kun je ook de broncode van deze pagina bekijken.

fokstok.nl

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

[CSS] voor dummies - deel 10

» digital corner

» development

» digital corner

» development