Yahoo.com Design

Namecheap AuctionsNamecheap Auctions
NamecheapNamecheap
Namecheap AuctionsNamecheap Auctions
Watch

jdickson

Established Member
Impact
1
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!
 
0
Close
The views expressed on this page by users and staff are their own, not those of NamePros.
GoDaddyGoDaddy
there using css as far as i can tell.
 
0
Close
They are using CSS.
 
0
Close
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$ ;)
 
0
Close
leviathon said:
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?
 
0
Close
LilGee- there are some templates that offer the same style for free...so nope its not illegal
 
0
Close
TopSatelliteRadio.co said:
LilGee- there are some templates that offer the same style for free...so nope its not illegal

Okay, sorry.
 
0
Close
I don't have very much $NP :(
 
0
Close
jdickson said:
I don't have very much $NP :(
hi i think u meant this:

Code:
<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>
 
0
Close
Their style sheet is CRAZY D-: 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 ;)
 
0
Close
Yeah there style sheet is very crazy lol!
 
0
Close
Thanks for all the help guys!
 
0
Close
DomainEasy: white label portfolios are live. Enable yours.

We're social

Escrow.com
Spaceship
Domain Recover
CryptoExchange.com

NamePros updates

Switch between accounts
You can now stay logged in to more than one NamePros account in the same browser. Click your avatar, then "Accounts in this browser", to...
AIVikings
Catchy
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back