SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Non-Member
    Join Date
    Apr 2005
    Location
    New Zealand
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Strip Across Top of Site - How?

    Hi there

    If you go to this site - http://wowinsider.com/ - you will see a yellow strip across the top. I am trying to do something similar for one of my sites, and have looked at their source code, and their stylesheet and havent got anything.

    Can someone help me out?

    Thank you!

  2. #2
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the code
    Code:
    <div id="outerslice"><div id="slice"><a href="http://e3-2006.joystiq.com">Joystiq gives up sleep to cover E3 just for you</a> | 
    <a href="http://feeds.my.aol.com/add.jsp?url=http%3A//e3-2006.joystiq.com/rss.xml">Add to My AOL</a>, <a href="http://add.my.yahoo.com/rss?url=http://e3-2006.joystiq.com/rss.xml">MyYahoo</a>, <a href="http://fusion.google.com/add?feedurl=http://e3-2006.joystiq.com/rss.xml">Google</a>, <a href="http://www.bloglines.com/sub/http://e3-2006.joystiq.com/rss.xml">Bloglines</a></div>
    You'd need to look at the css to find out the styling for #outerslice.

    Nadia

  3. #3
    Non-Member
    Join Date
    Apr 2005
    Location
    New Zealand
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, but as stated I have looked at the souce code and their stylesheet and got no clues.

  4. #4
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BLazeD
    Thanks for the reply, but as stated I have looked at the souce code and their stylesheet and got no clues.
    It is in the code and I provided it for you - well except for the style for that yellow box ;-)

    Put this into a new html page and preview....
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #outerslice {
    	background: #ffc;
    	border-bottom: 1px solid #fc0;
    	margin: 0 0 5px 0;
    	padding: 4px 0;
    	text-align: center;
    }
    -->
    </style>
    </head>
    <body>
    <div id="outerslice"><div id="slice"><a href="http://e3-2006.joystiq.com">Joystiq gives up sleep to cover E3 just for you</a> | 
    <a href="http://feeds.my.aol.com/add.jsp?url=http%3A//e3-2006.joystiq.com/rss.xml">Add to My AOL</a>, <a href="http://add.my.yahoo.com/rss?url=http://e3-2006.joystiq.com/rss.xml">MyYahoo</a>, <a href="http://fusion.google.com/add?feedurl=http://e3-2006.joystiq.com/rss.xml">Google</a>, <a href="http://www.bloglines.com/sub/http://e3-2006.joystiq.com/rss.xml">Bloglines</a></div>
    </body>
    </html>
    Nadia

  5. #5
    Non-Member
    Join Date
    Apr 2005
    Location
    New Zealand
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •