SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Addict XiledWeb's Avatar
    Join Date
    May 2005
    Location
    Nashville
    Posts
    205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need two stylesheets - use @import?

    Hi guys, hope everyone is having a good weekend.

    I'm designing a site where two style sheets are required - one for the gallery (its a photography site) and one for the main pages layout.

    For continuity I'm wanting my header div to be the same on the main site as well as on the gallery pages. My header div contains the logo which is top left and a horizontal nav list. My problem is that when I use @import or copy the styles to the gallery stylesheet, my logo appears correctly, but my nav list loses all its styling.

    If anyone has any other suggestions, I'm all ears.

    Gallery CSS:
    HTML Code:
    body {
    margin: 0;
    padding: 0;
    background-color: #000;
    font: 62.5%/1.75em "Lucida Grande",tahoma,sans-serif;
    color: #fff;
    }
    a:link, a {
    border-bottom: 1px dotted #960;
    text-decoration: none;
    color: #960;
    }
    a:hover {
    border-bottom: 1px solid #960;
    }
    h1 {
    margin: 0 6px;
    padding: 0 0 .5em 0;
    font-style: italic;
    font-weight: normal;
    font-size: 1.25em;
    line-height: 2.375em;
    color: #ccc;
    }
    h1 em {
    color: #4d4d4d;
    }
    h1 a:link, h1 a, h1 a:hover, h1 a em, h1 a:link em, h1 a:hover em {
    border-color: #999;
    color: #999;
    }
    p, ul {
    margin: 0 6px;
    padding: 0;
    }
    img {
    display: block;
    margin: 0 auto 5px auto;
    border: 1px solid #ccc;
    border-bottom-color: #eee;
    border-left-color: #ddd;
    border-top-color: #bbb;
    }
    p.photo a, ul.thumbnails a {
    display: block;
    float: left;
    margin: 0;
    padding: 4px 4px 9px 4px;
    border: 1px solid #ccc;
    border-top-color: #eee;
    border-right-color: #ddd;
    border-bottom-color: #bbb;
    background-color: #fff;
    text-align:center;
    }
    p.photo a:hover, ul.thumbnails a:hover {
    border-color: #ccc;
    background-color: #eee;
    }
    p.description {
    clear: left;
    }
    #content {
    margin: 0 auto 20px 20px;
    padding: 1em 0 0 0;
    width: 512px;
    background-color: #000;
    font-size: 1.25em;
    line-height: 1.75em;
    }
    br {
    display: none;
    }
    ul.navigation {
    margin: 0 0 10px 0;
    padding: 0;
    width:310px;
    float: left;
    text-align:center;
    background-color: #000;
    line-height: 1em;
    list-style: none;
    position: absolute;
    top: 141px;
    left: 550px;
    }
    ul.navigation li {
    display: inline;
    margin: 0;
    padding: 0;
    }
    ul.thumbnails a {
    width: 80px;
    margin-right: 10px;
    margin-bottom: 10px;
    }
    Gallery HTML:
    HTML 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" xml:lang="en" lang="en">
    <head>
    	<title>Photo Gallery</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    	<link type="text/css" href="gallery2.css" rel="stylesheet" />
    	<style><!--@import url("asp.css");--></style>
    	
    </head>
    <body>	
    	<div id="header">
    		<ul id="nav">
    			<li><a href="index.html"><img src="http://www.americansportsgamer.com/asp/images/home.jpg" alt="Home Page" /></a></li>
    			<li><a href="#"><img src="http://www.americansportsgamer.com/asp/images/about.jpg" alt="About Andrew" /></a></li>
    			<li><a href="#"><img src="http://www.americansportsgamer.com/asp/images/nav-test.jpg" alt="" /></a></li>
    			<li><a href="#"><img src="http://www.americansportsgamer.com/asp/images/contact.jpg" alt="Contact Andrew" /></a></li>
    		</ul>
    	</div>
    <div id="content">
    	<h1><a href="#">Photos</a> &raquo; <a href="portraits.html">Album:
    		<em>Portrait Gallery</em></a> &raquo;</h1>
    		
    		<p class="photo"><a href="#"><img alt="" src="images/portraits/bride_copy.jpg" /></a></p>
    		<p class="description">Andrew uses his Nikon D200 to capture stunning images.</p>
    </div>
    <ul class="navigation thumbnails">
    	<li><a href=""><img src="images/portraits/thumbnails/brideandgroom_copy.jpg" alt="tender moment" /><br />&laquo;&nbsp;Tender Moment</a></li>
    	<li><a href=""><img src="images/portraits/thumbnails/bridesmaids_copy.jpg" alt="bridesmaids" /><br />&laquo;&nbsp;Bridesmaids</a></li>
    	<li><a href=""><img src="images/portraits/thumbnails/brittany1_copy.jpg" alt="posed" /><br />&laquo;&nbsp;On a boat</a></li>
    	<li><a href=""><img src="images/portraits/thumbnails/brittany2_copy.jpg" alt="posed again" /><br />&laquo;&nbsp;Glamour</a></li>
    	<li><a href=""><img src="images/portraits/thumbnails/DSC_0088_copy.jpg" alt="meeting" /><br />&laquo;&nbsp;Meeting</a></li>
    	<li><a href=""><img src="images/portraits/thumbnails/DSC_0112_copy.jpg" alt="flag" /><br />&laquo;&nbsp;Gathering</a></li>
    	<li><a href=""><img src="images/portraits/thumbnails/DSC_0130_copy.jpg" alt="decisions" /><br />&laquo;&nbsp;Decisions</a></li>
    	<li><a href=""><img src="images/portraits/thumbnails/gunandwater_copy.jpg" alt="gun and bottled water" /><br />&laquo;&nbsp;Desert Needs</a></li>
    	<li><a href=""><img src="images/portraits/thumbnails/manpraying_copy.jpg" alt="man praying" /><br />&laquo;&nbsp;Prayer Time</a></li>
    	<li><a href=""><img src="images/portraits/thumbnails/salute_copy.jpg" alt="heroes" /><br />&laquo;&nbsp;Heroes</a></li>
    	<li><a href=""><img src="images/portraits/thumbnails/salutesunset_copy.jpg" alt="heroes at sunset" /><br />&laquo;&nbsp;Heroes</a></li>
    	<li><a href=""><img src="images/portraits/thumbnails/usflag_copy.jpg" alt="american flag" /><br />&laquo;&nbsp;Pride</a></li>
    	<li><a href=""><img src="images/portraits/thumbnails/wedding_group_copy.jpg" alt="wedding group" /><br />&laquo;&nbsp;Wedding</a></li>
    </ul>
    </body>
    
    </html>
    Main Site CSS:
    HTML Code:
    * {margin:0;padding:0}
    
    html { 
    	border-top: 2px solid #98b1c4;}
    
    body {
    	font-family:"Lucida Grande",tahoma,sans-serif;
    	width:100%;
    	background: #000;
        color: #fff;
    }
    a img {
    	border:none;
    }
    p {
    	font-size:11px;
    }
    #header {
    	height:90px;
    	width: 100%;
    	background: #000 url('http://www.americansportsgamer.com/asp/images/logo.jpg') no-repeat top left;
    }
    #header ul#nav {
    	position: absolute; left: 230px; top: 43px;
    	list-style-type: none;
    }
    #header ul#nav li {
    	top: 40px;
    	display: inline;
    }
    #header ul#nav li a:hover {
    	border-bottom: 1px solid #ccc;
    }
    #showcase {
    	position:relative;
    	width:800px;
    	height:305px;
    	border-left: 2px solid #000;
    	border-top: 5px solid #000;
    	border-bottom: 3px solid #000;
    }
    #showcase ul#imagenav {
    	float:left;
    	list-style:none;	
    }
    #showcase ul#imagenav li {
    	height:60px;
    	width:120px;
    }
    #showcase ul#imagenav li a {
    	text-decoration:none;
    }
    #imagenav {position:relative;z-index:99}
    p.imgholder,
    #imagenav li a span{
        position:absolute;
        top:0;
        left:-999em;
        width:630px;
        height:300px;
    }
    p.imgholder{left:120px;z-index:1}
    #imagenav li a span{z-index:2}
    #imagenav li a:hover {visibility:visible}
    #imagenav li a:hover span{left:120px;}
    #content {
    	float:left;
    	position:relative;
    	width:100%;
    	border-top:3px solid #000;
    }
    #col1 {
    	position:relative;
    	float:left;
    	width:250px;
    	border-left: 2px solid #000;
    }
    #col2 {
    	position:relative;
    	float:left;
    	width:240px;
    	background: #000;
    	padding-left:10px;
    }
    #col3 {
    	position:relative;
    	float:left;
    	width:250px;
    	border-left: 2px solid #000;
    	padding-left:10px;
    	min-height:250px;
    }
    #footer {
    	position:relative;
    	width:760px;
    	clear:both;
    	height:30px;
    	background-color: #000;
    	text-align:center;
    	}
    * html #footer {
    	/*only ie gets this style*/
    	\height:52px;/* for ie5 */
    	he\ight:50px;/* for ie6 */
    	margin-bottom:-1px;
    }
    Last edited by XiledWeb; Jun 9, 2007 at 15:00. Reason: Additional CSS code added


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
  •