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 | <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> |
1 2 3 4 5 6 | <li><a href="/" id="home" class="active">home</a></li> etc. </ul> |
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 | 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; |
Of beter geschikt voor Google en alternatieve user agents: "text-indent: -9999px".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...
1 2 3 4 5 6 7 8 | <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> |
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 | } 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; } |
Dat maakt toch geen reet uit?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".
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 ranzigquote: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.
1 2 3 4 5 6 7 | height: 290px; width: 471px; background-color: #99cc66; font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; padding: 5px; } |
Forum Opties | |
---|---|
Forumhop: | |
Hop naar: |