Als erstes: Ich habe ein Dropdown menu und versuche das nun krampfhaft einzubinden. Nun ja, der größte Teil müsste bereits getan sein.
Doch irgendwie will das nicht so wie ich will.
CSS Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 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 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 | /* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times.The original version of this stylesheet and the associated (x)htmlis available at http://www.cssplay.co.uk/menus/pro_drop6.htmlCopyright (c) 2005-2007 Stu Nicholls. All rights reserved.This stylesheet and the associated (x)html may be modified in any way to fit your requirements.=================================================================== */.preload1 {background: url('./images/six_0a.gif');}.preload2 {background: url('./images/six_1a.gif');}#nav { padding:0; margin:0; list-style:none; height:30px;/* position:absolute;*/ z-index:200; background: url('./images/six_0.gif') no-repeat; font-family: arial, verdana, sans-serif;}#nav li.top { display:block; float: left;}#nav li a.top_link { display:block; float: left; height:30px; line-height:31px; color:#FFF; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 12px; cursor:pointer; background: url('./images/six_0a.gif') no-repeat;; }#nav li a.top_link span { float: left; display:block; padding:0 12px 0 12px; height:30px; background: url('./images/six_0a.gif') right top no-repeat;}#nav li a.top_link span.down { float: center; display:block; padding:0 24px 0 12px; height:30px; background: url('./images/six_0a.gif') no-repeat right top;}#nav li:hover a.top_link,#nav a.top_link:hover { color:#ff0000; background: url('./images/six_1.gif') no-repeat;}#nav li:hover a.top_link span,#nav a.top_link:hover span { background: url('./images/six_1.gif') no-repeat right top;}#nav li:hover a.top_link span.down,#nav a.top_link:hover span.down { padding-bottom:3px; background: url('./images/six_1a.gif') no-repeat right top;}#nav table { border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}#nav li:hover { position:relative; z-index:200;}#nav a:hover { position:relative; white-space:normal; z-index:200;}#nav :hover ul.sub { left:1px; top:34px; background-color: #DCDEE2; padding:3px; border: 1px solid #FFF; white-space:nowrap; width:185px; height:auto; z-index:300; font-weight:bold;}#nav :hover ul.sub li { display:block; height:20px; position:relative; float:left; width:185px; font-weight:bold;}#nav :hover ul.sub li a { display:block; font-size:11px; height:18px; width:183px; line-height:18px; text-indent:5px; color:#3365ac; text-decoration:none; font-weight:bold;}#nav li ul.sub li a.fly { background: url('./pro_dropdown_6/arrow_over.gif') 175px 6px no-repeat;}#nav :hover ul.sub li a:hover { color:#3365ac; background-color: #FFF; border-color:#FFF; font-weight:bold;}#nav :hover ul.sub li a.fly:hover { background: #FFF url('./pro_dropdown_6/arrow.gif') 175px 6px no-repeat; color:#D31141;}#nav li b { display:block; font-size:11px; height:18px; width:183px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#000; border-bottom:1px solid #7fffff; cursor:default;}#nav a:hover a:hover ul,#nav a:hover a:hover a:hover ul,#nav a:hover a:hover a:hover a:hover ul,#nav a:hover a:hover a:hover a:hover a:hover ul { left:89px; top:-4px; padding:3px; border:1px solid #000; white-space:nowrap; width:183px; z-index:400; height:auto;}#nav ul,#nav a:hover ul ul,#nav a:hover a:hover ul ul,#nav a:hover a:hover a:hover ul ul,#nav a:hover a:hover a:hover a:hover ul ul { position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}#nav li:hover li:hover > ul { left: 183px; /* distance from right margin of main drop */ top: -4px; background-color: #DCDEE2; padding: 3px; border: 1px solid #FFF; white-space: nowrap; width: 185px; /* width of secondary drop */ z-index: 400; height: auto;}#nav li:hover > ul ul { position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}#nav li:hover li:hover > a.fly { background: #FFF url('./pro_dropdown_6/arrow.gif') 175px 6px no-repeat; color:#DCDEE2; font-weight: bold; text-decoration:none;}#nav li:hover li:hover > li a.fly { background: #FFF url('./pro_dropdown_6/arrow.gif') 175px 6px no-repeat; color:#DCDEE2; font-weight: bold; text-decoration:none;} |
HTML Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 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 | <body> <div id="wrap"> <div id="top"></div> <div id="header"><h1>{SITENAME}</h1></div> <span class="preload1"></span><span class="preload2"></span><ul id="nav"> <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"> <li><b>Cameras</b></li> <li><a href="#nogo3" class="fly">Cameras<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--><ul> <li><a href="#nogo4">Nikon</a></li> <li><a href="#nogo5">Minolta</a></li> <li><a href="#nogo6">Pentax</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#nogo7" class="fly">Lenses<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--><ul> <li><a href="#nogo8">Wide Angle</a></li> <li><a href="#nogo9">Standard</a></li> <li><a href="#nogo15">Mirror</a></li> <li><a href="#nogo10">Telephoto</a></li> <li><b>Zoom</b></li> <li><a href="#nogo12">35mm to 125mm</a></li> <li><a href="#nogo13">50mm to 250mm</a></li> <li><a href="#nogo14">125mm to 500mm</a></li> <li><b>Non standard</b></li> <li><a href="#nogo17">Bayonet mount</a></li> <li><a href="#nogo18">Screw mount</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><b>Accessories</b></li> <li><a href="#nogo19">Flash Guns</a></li> <li><a href="#nogo20">Tripods</a></li> <li><a href="#nogo21">Filters</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"> <li><a href="#nogo23">Printing</a></li> <li><a href="#nogo24">Photo Framing</a></li> <li><a href="#nogo25">Retouching</a></li> <li><a href="#nogo26">Archiving</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub"> <li><a href="#nogo28">Support</a></li> <li><a href="#nogo29" class="fly">Sales<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--><ul> <li><b>European</b></li> <li><a href="#nogo34" class="fly">British<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--><ul> <li><b>City</b></li> <li><a href="#nogo35">London</a></li> <li><a href="#nogo36">Liverpool</a></li> <li><a href="#nogo37">Glasgow</a></li> <li><a href="#nogo38" class="fly">Bristol<!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--><ul> <li><b>District</b></li> <li><a href="#nogo39">Redland</a></li> <li><a href="#nogo40">Hanham</a></li> <li><a href="#nogo41">Eastville</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#nogo42">Cardiff</a></li> <li><a href="#nogo43">Belfast</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#nogo44">French</a></li> <li><a href="#nogo45">German</a></li> <li><a href="#nogo46">Spanish</a></li> <li><b>Worldwide</b></li> <li><a href="#nogo30">USA</a></li> <li><a href="#nogo31">Canadian</a></li> <li><a href="#nogo32">South American</a></li> <li><a href="#nogo47">Australian</a></li> <li><a href="#nogo48">Asian</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li><a href="#nogo49">Buying</a></li> <li><a href="#nogo50">Photographers</a></li> <li><a href="#nogo51">Stockist</a></li> <li><a href="#nogo52">General</a></li> </ul><!--[if lte IE 6]></td></tr></table></a><![endif]--> </li></ul> <div id="top2"><font><b> » </b>{HMENU}</font></div> <div id="content"> <div id="left_col"> |
Am Anfang wollte ich den Hintergrund direkt einbringen. Siehe Ränder. Doch die Buttons hatten diese Ränder auch. Also hab ich beschlossen, die Buttons in die Mitte zu setzen und mit einem normalen schwarzen Hintergrund (ohne Ränder) zu versehen. Dies klappte auch. Dazu wollte ich die RÄnder separat einfügen. Link und Rechts. Dazu bin ich noch nicht gekommen. Eine Idee dazu hätte ich auch nicht. Denn: Ich kenn mich mit Styles in phpBB aus aber hier in Ilch versage ich irgendwie
Ich wollte mir zum Thema irgendwann ein Buch besorgen. Damit ich nicht immer nachfragen muss. Eigentlich frage ich selten nach. Nur dann, wenn ich komplett verzweifelt bin
Hoffe auf Antworten d(^.^)b
betroffene Homepage: throaty.th.funpic.de/
