Yahoo.com Design

[jdickson]

Does anyone know the code yahoo.com uses for their 2 row boxes? Example: the "In the News" that has a purple header in one row, then the next row has the purple outline around the text? Thanks in advance!

 

[def1]

there using css as far as i can tell.

 

[lilgee]

They are using CSS.

 

[leviathon]

Definitely CSS.

If you want the actual layout I can give it to you (I made a replica of their layout) for an amount of NP$

 

[lilgee]

Definitely CSS.

If you want the actual layout I can give it to you (I made a replica of their layout) for an amount of NP$

Isn't that illegal?

 

[TopSatelliteRadio.co]

LilGee- there are some templates that offer the same style for free...so nope its not illegal

 

[lilgee]

LilGee- there are some templates that offer the same style for free...so nope its not illegal

Okay, sorry.

 

[jdickson]

I don't have very much $NP

 

[gonchiweb]

I don't have very much $NP

hi i think u meant this:

<style media=all>
body{font:84%/1.2em arial,sans-serif;direction:ltr;text-align:center;margin:0;}
p,ul,ol,form,h1,h2,h3,h4,h5{margin:0;}
h3{font:bold 100% arial;}
h4{margin-top:2px;font:bold 77% verdana;}
em{font-style:normal;}
label{cursor:pointer;cursor:hand;}
img{border:0;}
hr{border:1px solid #ccc;border-width:0 0 1px;height:1px;margin:4px 0;}
cite{display:block;font:normal 77% verdana;color:#636363;}
spacer,ol{display:block;font:normal 77% verdana;}
select{position:relative;}
select,input{vertical-align:middle;}
select,input,textarea{font-size:100%;}
a:link{color:#039;text-decoration:none;}
a:hover{color:#0353a5;}
a:visited{color:#800080;text-decoration:none;}
a:hover{text-decoration:underline;}
.s{cursor:pointer;cursor:hand;font:bold 77% verdana;background:#f7dc88;color:#630;border:1px solid #BE9A27;}
.s2{cursor:pointer;cursor:hand;font:bold 77% verdana;color:#000;background:#ddd;}
.b{background:transparent;}
.nw{vertical-align:top;margin-top:2px;}
.np{cursor:auto;}
.c{clear:both;font-size:1%;}
.hr,.cl{clear:both;}
.n{text-align:right;float:none;}
.iemw{display:none;}
#h{background:#F2F2F2;border-bottom:1px solid #D9D9D9;padding:2px 10px;display:none;}
#hm{display:none;float:left;font:bold 77% verdana;}
#tb{display:none;font-weight:normal;}
#dc{position:relative;}
#shpd{display:none;}
.shdw{-moz-border-radius:4px;background:#ccc;z-index:1000;position:absolute;top:1.5em;left:1.5em;}
#shpd .bd{border:1px solid #4333BC;-moz-border-radius:4px;width:360px;background:#fff;position:relative;top:-2px;left:-2px;z-index:1001;color:#333;}
#pnt{position:absolute;top:-6px;left:30%;width:11px;height:6px;font-size:0px;background:url([url]http://us.i1.yimg.com/us.yimg.com/i/ww/shpa1.gif[/url]);}
#shpd .shp{width:40px;height:37px;font-size:0px;line-height:0px;top:10px;left:10px;display:block;position:absolute;background:url([url]http://us.i1.yimg.com/us.yimg.com/i/ww/ydrag.gif[/url]);}
.shp strong{display:none;}
#shpd ol{margin:9px 9px 9px 60px;padding:0 0 0 1.5em;*padding:0;}
#shpd li{padding:0;}
#shpd .hr{border-color:#ccc;margin:0 19px 5px;}
#shpd p{font:normal 77% verdana;margin:0 9px 9px;text-align:center;}
#m{position:relative;height:52px;margin:10px 0;clear:both;z-index:999;text-align:center;}
#m br{display:none;}
#m a{white-space:nowrap;font:normal 77% verdana;color:#333;}
#m span{text-align:center;position:absolute;top:0;width:90px;line-height:77%;white-space:nowrap;}
#m img{display:block;font-weight:normal;color:#333;margin:0 auto;}
#m span img{width:36px;height:36px;margin:0 auto 3px;}
#m span em{padding:0 5px;white-space:nowrap;_height:1px;cursor:hand;cursor:pointer;}
#m h1 img{margin:0 auto;}
#md{position:absolute;left:0;top:0;z-index:110;border:1px solid #cecece;}
#md a{padding:0 2px 0 1px;text-decoration:none;color:#6b6b6b;}
#m1{left:0;}#m2{left:6.9em}#m3{left:13.65em}#m4{right:13.65em}#m5{right:6.9em}#m6{right:0;}
.plinkc{padding:0 6px;_height:1px;position:relative;left:-1px;background:url([url]http://us.i1.yimg.com/us.yimg.com/i/ww/pldn3.gif[/url]) no-repeat;z-index:900;}
.plinkc:hover{background-image:url([url]http://us.i1.yimg.com/us.yimg.com/i/ww/plhv3.gif[/url]);}
.plinka .plinkc,.plinka .plinkc:hover{background:#FFF8AD url([url]http://us.i1.yimg.com/us.yimg.com/i/ww/plup3.gif[/url]) no-repeat;}
.plinka em{background:#FFF8AD;}
#bl{position:absolute;background:#666;top:52px;left:0;text-align:left;font-size:107%;z-index:901;}
#bl span{text-align:left;}
#bl div.shade{background:#666;width:10.1em;}
#bl div.pllist{border:1px solid #ccc;height:375px;background:#fff;z-index:40;position:relative;top:-1px;left:1px;width:10.1em;text-align:left;}
#bl a{display:block;color:#000;padding:2px 10px;text-decoration:none;}
#bl a:hover{background-color:#336ECA;color:#fff;}
#bl .hilite{background:#336ECA url([url]http://us.i1.yimg.com/us.yimg.com/i/ww/chkw.gif[/url]) 2px 50% no-repeat;color:#fff;}
#bl .checked{background:url([url]http://us.i1.yimg.com/us.yimg.com/i/ww/chk.gif[/url]) 2px 50% no-repeat;}
#bl .checked:hover{background-image:url([url]http://us.i1.yimg.com/us.yimg.com/i/ww/chkw.gif[/url]);}
#bl a.more{font:bold 72% verdana;color:#000;}
#bl a.more:hover{color:#fff;}
#bl a.moreclicked{border-bottom:1px solid #ccc;margin-bottom:4px;background:none;height:0;font-size:0px;line-height:0px;}
.hr{margin:5px 0;border-top:1px solid #ccc;}
#v{display:none;position:relative;color:#999;height:1.5em;border:1px solid #CFCFCF;border-bottom-width:0;z-index:5;margin-bottom:-1px;}
#c{text-align:right;float:left;width:12.5em;margin:3px 10px 0 0;font:normal 77% arial;color:#333;}
#v a{position:relative;float:left;padding:1px 7px 2px;color:#039;}
#v em{float:left;margin:2px 0;background:#989898;width:1px;height:1.25em;font-size:84%;}
#v #e1{background:#fff;}
#v .o:hover{background:#eee}
#v .h:hover{text-decoration:none}
#v .h{font-weight:bold;margin:-3px 0 0;padding:3px 6px 2px;background:#0075eb;border:1px solid #054576;color:#fff;}
#v .h b{margin:1.35em 0 0 .65em;width:11px;height:11px;background-color:transparent;background-repeat:no-repeat;position:absolute;}
.v1 #ss{background:#d2e4fc;border-color:#75a3ed;}
.v1 #v .h b{background-image:url([url]http://us.i1.yimg.com/us.yimg.com/i/us/nt/gr/search/tri_web2.gif[/url]);}
.v2 #ss{background:#fcd2d2;border-color:#ed7575;}
.v2 #v .h{background:#a10303;border-color:#662626;}
.v2 #v .h b{margin-left:1.15em;background-image:url([url]http://us.i1.yimg.com/us.yimg.com/i/us/nt/gr/search/tri_img2.gif[/url]);}
.v3 #ss{background:#F9D3FA;border-color:#B863B4;}
.v3 #v .h{background:#B01FAA;border-color:#760473;}
.v3 #v .h b{margin-left:1em;background-image:url([url]http://us.i1.yimg.com/us.yimg.com/i/ww/tri_web3.gif[/url]);}
.v4 #ss{background:#fce8d2;border-color:#d9681a;}
.v4 #v .h{background:#d95000;border-color:#96450c;}
.v4 #v .h b{margin-left:1.6em;background-image:url([url]http://us.i1.yimg.com/us.yimg.com/i/us/nt/gr/search/tri_dir2.gif[/url]);}
.v5 #ss{background:#FCEBB9;border-color:#EC9E2E;}
.v5 #v .h{background:#EC9E2E;border-color:#B28B12;}
.v5 #v .h b{margin-left:1em;background-image:url([url]http://us.i1.yimg.com/us.yimg.com/i/us/nt/gr/search/tri_yp3.gif[/url]);}
.v5 #ss{padding:9px 0 2px;}
.v5 #ip{margin-top:-7px;}
.v5 #sw{padding-top:.6em;}
.v5 #sn{padding-top:.4em;}
.v6 #ss{background:#e2defc;border-color:#9b72cf;}
.v6 #v .h{background:#501fb2;border-color:#16165e;}
.v6 #v .h b{margin-left:.85em;background-image:url([url]http://us.i1.yimg.com/us.yimg.com/i/us/nt/gr/search/tri_news2.gif[/url]);}
.v7 #ss{background:#eefcd2;border-color:#9fbe4c;}
.v7 #v .h{background:#549400;border-color:#3d4c14;}
.v7 #v .h b{margin-left:1.7em;background-image:url([url]http://us.i1.yimg.com/us.yimg.com/i/us/nt/gr/search/tri_prod2.gif[/url]);}
#s{margin-bottom:7px}
#ss{border:1px solid #99B9E3;background:#D2E4FC;padding:8px 0;}
#ss label{cursor:auto;}
#ss span.f{margin-right:10px;}
#sw{text-align:right;padding-top:3px;width:9.5em;font:bold 100% arial;}
#in{padding-top:1.1em;}
#ld{height:1.8em;line-height:.9em;font-size:65%;_line-height:1em;}
#ld a{position:relative;}
#ld div{width:10.5em;margin-right:-10px;position:relative;}
#ld div img{_position:absolute;top:25%;}
#ss #bss{width:42%;}
#ss #acs{width:48%;margin-right:0;}
#fp,#csz{width:100%;}
#st{width:10em;position:relative;margin:1px 0 0;}
#fs{border:0;padding:0;margin:0;}
#ip{width:25%;}
#ip label{font:normal 77% verdana;}
#dc{min-width:760px;width:56.4em;text-align:left;margin:0 auto;}
#dc h2 .f{color:#000;}
#c1{min-width:440px;width:58%;float:left;}
#c2{min-width:300px;width:42%;float:right;}
#em,#n,#w,#k,#g,#tg,#as{margin-left:19px;}
#mm,#y,#wm,#e,#eb,#b,#mo,#em,#n,#w,#k,#g,#tg,#as{margin-bottom:10px;}
h2{background:#d2e4fc;padding:1px 9px 2px;font:bold 100% arial;}
h2 .m{margin-top:2px}
#c2 h2{background:#9B72CF;}
#c2 h2 .f{color:#fff;}
.l,.r{border:1px solid #d2e4fc;background:#fff;}
.r{border-color:#9B72CF;background:#F1F1FD;}
.ct{padding:9px;}
.ct .f{margin-right:10px;}
.u{width:24.9%;}
.b{width:49.9%;}
.q{width:65%;}
.ybl{width:47.5%;}
.ybr{width:52.5%;}
.u,.b,.d,.q,.q2,.f{float:left;}
.q a,.q2 a,.b a,.d a,.u a{display:block;}
.m{float:right;font:bold 77% verdana;}
.mr{display:block;clear:both;font:bold 77% verdana;}
#t{text-align:center;margin-bottom:7px;color:#666;}
#t table{margin:0 auto;}
#y.l{border:0;}
#y .ct{background:#F2F5F7;border:1px solid #D0E4FD;border-top:0;}
#y em{color:#999;}
#y h2{border:1px solid #D2E4FC;padding:1px 9px;background:#fff;}
#y h2.so{border-left:0;}
#y .ct .mr{margin:6px 0 0 3px;}
#y .u a{line-height:1.15em;}
#y .so a{text-decoration:underline;font-weight:bold;}
.so .f{font-weight:normal;}
.so .m{margin-top:-1px;padding-top:1px;font:normal 100% arial;}
#y .so .f{width:auto;}
#y .so img{position:relative;float:left;margin:-7px 5px -3px -8px;left:-1px;}
.si .f a{color:#000;}
.si em{margin:0 2px;}
.si .m{margin-left:-60px;white-space:nowrap;font:normal 77% verdana;float:right;margin-top:2px;}
.si .m #om{padding:3px 0 2px 31px;margin-top:-3px;}
.ym{background:url([url]http://us.i1.yimg.com/us.yimg.com/i/us/pim/newmail1.gif[/url]) no-repeat;}
.nm{background:url([url]http://us.i1.yimg.com/us.yimg.com/i/us/pim/nomail1.gif[/url]) no-repeat;}
.si span{color:#f60;margin:0 -2px;}
.si .m a{position:relative;}
.si .m b{margin:0;}
#y a.ps{position:relative;top:-1px;font:normal 77% verdana;}
#y a.ps:link,#y a.ps:visited{color:#039;}
#yb{min-width:213px;width:48.45%;margin:0;float:left;}
#yb .ct{padding:9px 0 9px 9px;}
#yf{min-width:213px;width:48.45%;margin:0;float:right;}
#mm{height:5.3em;}
#mm h2 a{color:#000;}
#b table{width:auto;}
.lh{line-height:92%;}
#nw{color:#fff;}
#n cite{color:#000;}
#n input{font-size:100%;}
#n td{line-height:1.1em;}
#n .m{font-weight:normal;}
#mt .s2{padding:0 3px;}
#nf,#nl,#mt{margin-top:5px;padding:2px 0 1px;border-top:1px solid #ddd;}
#nl{padding:5px 0 0;font:bold 77% verdana;}
#mt{position:static;}
#mt .f{margin-top:4px;font:normal 77% verdana;}
#mt .m form{white-space:nowrap;}
.up{color:#090;}
.dn{color:#D52D2D;}
#w{position:relative;clear:both;}
#w .mr{margin:5px 0 0;font:normal 100% verdana;}
#w .s2{padding:0 3px;font-size:100%;}
#w .f a{color:#fff;}
#ws{margin-top:9px;}
#wd{margin:0 0 10px;}
#w h2 .m{margin:0;}
#w .ct .f{white-space:nowrap;margin-top:4px;}
#wa span{display:block;margin-bottom:5px;}
#w #wa{color:#f00;background:transparent;}
#w span.wa{margin:0;}
#ws{float:left;}
#w .b img{float:left;}
#z{clear:both;}
.wa{clear:both;display:block;}
#wf{padding:0 0 1px;margin:0 0 2px 0;}
#w h3{margin:0 0 4px 0;}
#z{width:60%;float:left;padding:5px 5px 5px 45px;margin:5px 0;background:transparent url([url]http://us.i1.yimg.com/us.yimg.com/i/ww/beta/wthr.gif[/url]) no-repeat;}
#ca{color:#fff;display:none;float:left;padding:1px 16px 0 0;margin-top:1px;border:0;background:url([url]http://us.i1.yimg.com/us.yimg.com/i/us/my/el/ulm_btn_11px_l.gif[/url]) 100% 50% no-repeat;}
#w .r{width:auto;background-image:url([url]http://us.i1.yimg.com/us.yimg.com/i/us/my/el/ulm_btn_11px_d.gif[/url]);}
#z input{width:100%;_font-size:107%;}
#w select{width:115%;}
#ls{border:1px solid #ccc;background:#fff;padding:5px;height:8em;overflow:auto;}
#ls a{font:normal 115% arial;display:block;}
#ls div{color:#000;}
#ls .mr{padding:0 0 5px;font-weight:bold;}
.wil a{margin-left:5px;}
.wil div{font:bold 115% verdana;}
#w b{font:bold 100% verdana;}
#w .b a{font:normal 107% verdana;}
#tr{padding:4px 0 0;margin-top:5px;padding:2px 0 1px;border-top:1px solid #ddd;}
#tr h3{margin-bottom:3px;}
#w h3 a{font-size:129%;}
#tr a{font-size:107%;}
.ef{font:normal 77% verdana;color:#039;}
#w .ef a{color:#039;}
#ex{display:none}
#lc{font:normal 77% verdana;}
#tg{color:#666;}
#i{margin:0 auto;}
#i i{font-weight:normal;}
#i em{font-size:84%;}
.x{float:left;}
.sc{font-size:77%;}
.hi,.lo{color:#DB8607;font:bold 114% arial;}
.lo{color:#8595A2;}
#g .m,#as .m{float:left;padding-top:5px;}
#f{margin-top:4px;border-top:1px solid #ccc;font-size:100%;color:#666;}
#h:after,#wf:after,#mt:after,h2:after,#mn:after,#t:after,#f:after,#ss:after,div.ct:after{content:".";display:block;font-size:0px;line-height:0px;height:0;clear:both;visibility:hidden;}
</style>
<!--[if IE]>
<style>
#mt,h2,#f,#mn,#t,#ss,div.ct,#h,.l,.r{height:.1em;}
#c2{margin-left:-300px;}
#yb,#yf{width:48.9%;}
#yb .br{margin-right:-9px;}
hr{margin:-3px 0;}
#ld{height:1.25em;padding-top:1px;}
#ld a{position:static;}
#ws{padding:1px;}
#we{margin:-4px;}
#z{width:75%;}
#w .mr{padding:0;}
#w .b img{margin-left:-3px;}
#y .so img{margin-left:-11px;}
.nw{position:absolute;}
#y .nw{vertical-align:baseline;}
.si .m a,.si .m em{float:left;}
#em,.r{width:100%;}
@media print{hr{margin:auto;padding:auto;}#dc{width:760px;}#c1{width:440px;}#c2{width:320px;}}
</style>

 

[user-7256]

Their style sheet is CRAZY I LOVE IT! I studied it for HOURS over a several day time span, learning how they do it. It's VERY cool!

I also found out the neat tag <BASE> ... very useful actually

 

[ammo]

Yeah there style sheet is very crazy lol!

 

[jdickson]

Thanks for all the help guys!