SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict Racer_X's Avatar
    Join Date
    Dec 2006
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centering 2 Images In 1 Div

    I need to have both images at the top center in a page and stay centered when the window is resized. How do I do this?


    http://bigtalkandgunsmoke.com


    HTML
    Code:
    <?php include("pagefunctions.php"); ?>
    <!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 profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title>
    <?php bloginfo('name'); ?>
    <?php wp_title(); ?>
    </title>
    <meta name="distribution" content="global" />
    <meta name="robots" content="index,nofollow">
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php //comments_popup_script(); // off by default ?>
    <?php if (is_single() and ('open' == $post-> comment_status) or ('comment' == $post-> comment_type) ) { ?>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajax_comments.js"></script>
    <?php } ?>
    <?php if (is_page() and ('open' == $post-> comment_status)) { ?>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajax_comments.js"></script>
    <?php } ?>
    <style type="text/css" media="screen">
    		<!-- @import url( <?php bloginfo('stylesheet_url'); ?> ); -->
    </style>
    <?php
    global $page_sort;	
    	if(get_settings('spotlight_sortpages')!='')
    	{ 
    		$page_sort = 'sort_column='. get_settings('spotlight_sortpages');
    	}	
    	global $pages_to_exclude;
    	
    	if(get_settings('spotlight_excludepages')!='')
    	{ 
    		$pages_to_exclude = 'exclude='. get_settings('spotlight_excludepages');
    	}	
    ?>
    <?php wp_head(); ?>
    </head>
    <body id="home" class="log">
    
      
    <div class="header_wrap">
    <div class="header_title">
    <div class="header_logo"> 
    
    
      </div>  <!-- end header_logo div -->
    </div> <!-- end header_title div -->
    </div> <!-- end header_wrap div -->
    
      <div>
        <ul id="navigation">
          <?php if (is_home()) {$pg_li .="current_page_item";} ?>
    		<li class="<?php echo $pg_li; ?>"><a href="<?php bloginfo('siteurl'); ?>" title="Home"><span>Home</span></a></li>
    		<?php wp_list_page('title_li=&depth=1&'.$page_sort.'&'.$pages_to_exclude)?>
        </ul>
      </div>  <!-- end nav div -->
    
    <div id="wrap">

    CSS
    Code:
    /*
    	Theme Name: SpotLight
    	Description: Light theme created by <a href="http://vaguedream.com" target="_blank">Stephen Reinhardt</a> Modified by <a href="http://themecorp.com/themes/spotlight/" title="SpotLight" target="_blank">Sadish Bala</a>.
    	Version: 1.3	
    	Author: Sadish Bala
    	Author URI: http://themecorp.com
    */
    * {
    margin:0;
    padding:0;
    }
    
    body 
    {
    	background-color:#fff;
    	color:#333;
    	font-family: Georgia,'Trebuchet MS','Lucida Grande', Arial, sans-serif;
    	font-size:small;
    	margin:0;
    	padding:0;
    	font-size:1em;
            
    
    }
    p 
    {
    	line-height:1.8em;
    	margin:0.5em 0;
    }
    a:link, a:visited 
    {
    	color:#459045;
    	text-decoration:none;
    	border-bottom:none;
    }
    a:hover, a:active 
    {
    	text-decoration:none;
    	border-bottom: 1px solid;
    }
    fieldset 
    {
    	border:none;
    }
    code 
    {
    	background-color:#eee;
    	border:1px solid #ccc;
    	padding:5px;
    }
    h1,h2,h3,h4,h5,h6 
    {
    	font-family:Georgia, Tahoma, Arial, Serif;
    	font-weight:normal;
    	line-height:1.6em;
    }
    h2, h3 {
    font-size:1.6em;
    margin:10px 0;
    }
    
    h4 {
    font-size:1.3em;
    }
    ul 
    {
    	
    	margin:5px 10px;
    	padding:1em;
    }
    li 
    {
    	line-height:1.6em;
    	margin-bottom:0.5em;
    }
    img 
    {
    	background:url(images/shadow.gif) no-repeat right bottom;
    	padding:4px 10px 10px 4px;	
    	border:none;
    	border-top:#eee 1px solid;
    	border-left:#eee 1px solid;	
    }
    a img {
    	border:none;
    	background:none;
    	padding:none;
    	background:url(images/shadow.gif) no-repeat right bottom;
    	padding:4px 10px 10px 4px;	
    	border-top:#eee 1px solid;
    	border-left:#eee 1px solid;	
    }
    img.wp-smiley 
    {
    	border:none;
    	padding:0;
    	background:none;
    }
    img.right 
    {
    	float: right;
    	margin:10px 0 0 10px;	
    }
    img.left 
    {
    	float: left; 
    	margin:0 10px 10px 0;
    }
    
    #wrap 
    {
    	overflow:hidden;
    	padding-left:20px;
    	padding-right:20px;
    	position:relative;
    	width:950px;
    	margin:0 auto;
            float:left;
    }
    
    
    
    .header_wrap
    {
    background:#253C4E;
    height:200px;
    width:100%;
    margin-left:auto;
    margin-right: auto;
    padding:0;
    text-align:center;
    }
    
    
    .header_title
    {
    background: url(images/title.gif) no-repeat;
    height: 200px;
    width: 440px;
    }
    
    
    .header_logo
    {
    background: url(images/logo.gif) no-repeat;
    height: 200px;
    width: 471px;
    margin-left:440px;
    }
    
    
    #blogname {
    height:30px;
    padding-left:12px;
    padding-top:28px;
    text-align:left;
    }
    
    h1#blogname a {
    color:#fff;
    font-size:1.3em;
    }
    
    .description {
    color:#CAE972;
    font-size:1em;
    font-style:italic;
    padding-left:12px;
    text-align:left;
    margin:5px 0 0;
    }
    
    #content 
    {
    	display:inline;
    	float:left;
    	text-align:left;
    	width:65%;
    	margin:1%;
    	padding:0 20px 0 0;
    }
    #sidebar 
    {
    	display:inline;
    	float:right;
    	padding-top:5px;
    	width:28%;
    	margin:5px 0px 20px 0px;
    	padding-left:20px;
    	border-left:#ddd 1px dashed;
    	font-size:90%;
    }
    #sidebar ul#feed li 
    {
    	list-style:none;
    	margin:0;
    	padding:5px 20px;
    	background:url(images/feed-icon.png) no-repeat left ;
    }
    #sidebar h2 
    {
    	border-bottom:#eed 3px double;
    	font-size:18px;
    	color:#459045;
    	letter-spacing:0;
    	margin:0;
    	padding:5px 0;
    }
    #sidebar p 
    {
    	margin:10px 0;
    }
    
    #sidebar ul, #sidebar form 
    {
    	margin:2px 0;
    	padding:5px 10px;
    }
    #sidebar ul ul ul 
    {
    	margin:2px 0;
    	padding:0 0 0 10px;
    }
    #sidebar li.sidebox 
    {
    	margin:0 0 2em 0;
    	padding:0;
    }
    #sidebar li{
    margin:3px 0;
    line-height:1.8em;
    list-style:none;
    }
    
    #sidebar ul li a {
    color:#516F86;
    }
    #footer {
    background:#223344 url(images/top_gradient.gif) bottom repeat-x;
    clear:both;
    height:100px;
    padding:10px;
    text-align:center;
    margin:0 auto;
    color:#ccc;
    }
    
    ol#commentlist {
    list-style:none;
    margin:5px 0;
    padding:0;
    }
    
    .commentname {
    color:#4b5ba2;
    }
    
    .commentname a {
    color:#333;
    font:bold 110% "Trebuchet MS", "Lucida Grande", verdana, helvetica, arial, sans-serif;
    text-decoration:underline;
    }
    
    .commenttext 
    {
    	margin:5px 0 0 0;
    	background:#ffe;
    	border-left:#ccc 3px double;
    }
    .alt .commenttext 
    {
    	background:#f0f0ee;
    	border-left:#ccc 3px double;
    }
    
    * html .commenttext {
    height:90px;
    overflow:visible;
    }
    input.textbox
    {
    	border:#ccc 1px solid;
    	background:#fff url(images/postbg.jpg) repeat-y top left;
    	font:1em Verdana, Arial, Serif;
    	padding:2px 5px;
    	width:150px;
    }
    textarea{
    	width: 90%;
    	padding:5px;
    	height: 20em;
    	border: 1px solid #ccc;	
    	background:#fff url(images/postbg.jpg) repeat-y top left;
    	font:1em Verdana, Arial, Serif;
    }
    input.textbox:focus, textarea:focus
    {
    	border:#999 1px solid;
    }
    
    .commentp {
    padding:20px 12px 10px 10px;
    }
    
    .commenttext p {
    margin:0 0 10px;
    padding:0;
    }
    
    #commentblock ol li {
    margin-bottom:30px;
    }
    
    #commentblock {
    margin-left:4px;
    }
    
    .gravatar {
    background:url(images/grav.png) no-repeat;
    display:inline;
    float:left;
    height:32px;
    width:32px;
    margin:20px 0 0 10px;
    padding:8px;
    }
    
    #commentsform p {
    margin-bottom:5px;
    margin-top:5px;
    }
    h3.entrytitle,h3 {
    color:#1e2546;
    display:block;
    font-size:1.5em;
    margin:0;
    }
    
    h3 a:link,h3 a:visited,h3 a:hover,h3 a:active {
    color:#1e2546;
    }
    .entry {
    margin: 10px 0;
    padding:15px 0;
    border-bottom:#eed 3px double;
    }
    .entrybody 
    {
    	margin:1em 0;
    	padding:0;
    }
    
    .entrybody a:link,.entrybody a:visited {
    	border-bottom:1px dashed;
    }
    
    .entrybody a:active,.entrybody a:hover {
    	border-bottom:1px solid;
    }
    .entrymeta {
    color:#999;
    margin:0;
    padding:0;
    font-size:90%;
    }
    .entrymeta .comments 
    {
    	background:url(images/comments.gif) no-repeat left center;
    	padding-left:15px;
    }
    h2.archives {
    background-color:#FFC;
    color:#999;
    font-style:italic;
    margin-bottom:25px;
    text-align:center;
    }
    
    .entrymeta-single {
    color:#333;
    margin-bottom:20px;
    margin-top:3px;
    }
    .entrybody ul,.entrybody ol 
    {
    	margin:10px 0 10px 30px;
    }
    .entry li
    {
    	line-height:1.6em;
    }
    table {
    margin:10px;
    }
    td,th {
    padding:3px;
    }
    blockquote
    {
    	color:#666;
    	margin: 1em;
    	padding: 0 0 10px 50px;
    	background: url(images/blockquote.gif) no-repeat left top;	
    }
    #navigation 
    {
    	clear:both;
    	height:24px;
    	margin:0 auto;
    	padding:0 10px;
    	text-align:center;
    	width:880px;
    	font-size:1.1em;
    font-family:'Georgia', 'Verdana','Trebuchet MS','Lucida Grande';
    }
    
    #navigation a:link,
    #navigation a:visited 
    {
    	background:#FFF url(images/active1.gif) left bottom no-repeat;
    	color:#787878;
    	height:24px;
    	margin-right:2px;
    	padding-left:12px;
    	text-decoration:none;
    	border:none;
    }
    
    #navigation a:link,
    #navigation a:link span,
    #navigation a:visited,
    #navigation a:visited span 
    {
    	cursor:hand;
    	display:block;
    	float:left;
    	border:none;
    }
    
    #navigation li 
    {
    	line-height:23px;
    	float:left;
    	list-style:none;
    	margin:0;
    }
    
    #navigation a:hover 
    {
    	background:url(images/active1.gif) left bottom no-repeat;
    	color:#040;
    	height:24px;
    	padding-left:12px;
    	text-decoration:none;
    	border:none;
    }
    
    #navigation .current_page_item a:link,
    #navigation .current_page_item a:visited 
    {
    	background:#FFF url(images/current1.gif) left bottom no-repeat;
    	color:#AAC8E0;
    	height:27px;
    	line-height:24px;
    	margin-right:2px;
    	padding-left:15px;
    	text-decoration:none;
    	border:none;
    }
    
    #navigation .current_page_item a:hover 
    {
    	background:#FFF url(images/current1.gif) left bottom no-repeat;
    	color:#AAC8E0;
    	height:27px;
    	margin-right:2px;
    	padding-left:15px;
    	text-decoration:none;
    	border:none;
    }
    
    #navigation ul 
    {
    	list-style:none;
    	margin:0;
    	padding:0;
    }
    
    h3,#commentblock h2 {
    font-size:140%;
    }
    #navigation a:link span,
    #navigation a:visited span,
    #navigation a:hover span 
    {
    	background:url(images/active2.gif) right bottom no-repeat;
    	height:24px;
    	padding-right:12px;
    	border:none;
    }
    
    #navigation .current_page_item a:link span,
    #navigation .current_page_item a:visited span,
    #navigation .current_page_item a:hover span 
    {
    	background:url(images/current2.gif) right bottom no-repeat;
    	height:27px;
    	padding-right:15px;
    	border:none;
    }

  2. #2
    SitePoint Guru alecrust's Avatar
    Join Date
    Jun 2007
    Location
    London, UK
    Posts
    728
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They do stay centred for me, in IE6. Have a look.
    Honda Civic Forum - UK Civic Forum
    Web Host Reviews - Independent, honest host reviews
    My Portfolio - Simplicity is the ultimate sophistication

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try to widthen the title box and auto-center it:
    Code CSS:
    .header_title {
    background: url(images/title.gif) no-repeat 0 0;
    height: 200px;
    width: 911px;
    margin: 0 auto;
    }
    .header_logo {
    background: url(images/logo.gif) no-repeat;
    height: 200px;
    width: 471px;
    margin-left:440px;
    }

  4. #4
    SitePoint Addict Racer_X's Avatar
    Join Date
    Dec 2006
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AAAAAAHHHHH!!!!!

    I made the logo a regular image instead of a background image but now it's not showing for some reason!

    Can someone tell me what i did wrong and how to put the logo at the top center of the page?

    http://bigtalkandgunsmoke.com/


    HTML
    Code:
    <?php include("pagefunctions.php"); ?>
    <!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 profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <title>
    <?php bloginfo('name'); ?>
    <?php wp_title(); ?>
    </title>
    <meta name="distribution" content="global" />
    <meta name="robots" content="index,nofollow">
    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
    <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <?php //comments_popup_script(); // off by default ?>
    <?php if (is_single() and ('open' == $post-> comment_status) or ('comment' == $post-> comment_type) ) { ?>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajax_comments.js"></script>
    <?php } ?>
    <?php if (is_page() and ('open' == $post-> comment_status)) { ?>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajax_comments.js"></script>
    <?php } ?>
    <style type="text/css" media="screen">
    		<!-- @import url( <?php bloginfo('stylesheet_url'); ?> ); -->
    </style>
    <?php
    global $page_sort;	
    	if(get_settings('spotlight_sortpages')!='')
    	{ 
    		$page_sort = 'sort_column='. get_settings('spotlight_sortpages');
    	}	
    	global $pages_to_exclude;
    	
    	if(get_settings('spotlight_excludepages')!='')
    	{ 
    		$pages_to_exclude = 'exclude='. get_settings('spotlight_excludepages');
    	}	
    ?>
    <?php wp_head(); ?>
    </head>
    <body id="home" class="log">
    
      
    <div class="header_wrap">
    
        <div class="header_logo"> 
            <img src="images/logo.gif" alt="Big Talk And Gun Smoke">
        </div>  <!-- end header_logo div -->
    
    </div> <!-- end header_wrap div -->
    
      <div>
        <ul id="navigation">
          <?php if (is_home()) {$pg_li .="current_page_item";} ?>
    		<li class="<?php echo $pg_li; ?>"><a href="<?php bloginfo('siteurl'); ?>" title="Home"><span>Home</span></a></li>
    		<?php wp_list_page('title_li=&depth=1&'.$page_sort.'&'.$pages_to_exclude)?>
        </ul>
      </div>  <!-- end nav div -->
    
    <div id="wrap">

    CSS
    Code:
    /*
    	Theme Name: SpotLight
    	Description: Light theme created by <a href="http://vaguedream.com" target="_blank">Stephen Reinhardt</a> Modified by <a href="http://themecorp.com/themes/spotlight/" title="SpotLight" target="_blank">Sadish Bala</a>.
    	Version: 1.3	
    	Author: Sadish Bala
    	Author URI: http://themecorp.com
    */
    * {
    margin:0;
    padding:0;
    }
    
    body 
    {
    	background-color:#fff;
    	color:#333;
    	font-family: Georgia,'Trebuchet MS','Lucida Grande', Arial, sans-serif;
    	font-size:1em;
    	margin:0;
    	padding:0;
    
            text-align: center;
            
    
    }
    p 
    {
    	line-height:1.8em;
    	margin:0.5em 0;
    }
    a:link, a:visited 
    {
    	color:#459045;
    	text-decoration:none;
    	border-bottom:none;
    }
    a:hover, a:active 
    {
    	text-decoration:none;
    	border-bottom: 1px solid;
    }
    fieldset 
    {
    	border:none;
    }
    code 
    {
    	background-color:#eee;
    	border:1px solid #ccc;
    	padding:5px;
    }
    h1,h2,h3,h4,h5,h6 
    {
    	font-family:Georgia, Tahoma, Arial, Serif;
    	font-weight:normal;
    	line-height:1.6em;
    }
    h2, h3 {
    font-size:1.6em;
    margin:10px 0;
    }
    
    h4 {
    font-size:1.3em;
    }
    ul 
    {
    	
    	margin:5px 10px;
    	padding:1em;
    }
    li 
    {
    	line-height:1.6em;
    	margin-bottom:0.5em;
    }
    img 
    {
    	background:url(images/shadow.gif) no-repeat right bottom;
    	padding:4px 10px 10px 4px;	
    	border:none;
    	border-top:#eee 1px solid;
    	border-left:#eee 1px solid;	
    }
    a img {
    	border:none;
    	background:none;
    	padding:none;
    	background:url(images/shadow.gif) no-repeat right bottom;
    	padding:4px 10px 10px 4px;	
    	border-top:#eee 1px solid;
    	border-left:#eee 1px solid;	
    }
    img.wp-smiley 
    {
    	border:none;
    	padding:0;
    	background:none;
    }
    img.right 
    {
    	float: right;
    	margin:10px 0 0 10px;	
    }
    img.left 
    {
    	float: left; 
    	margin:0 10px 10px 0;
    }
    
    #wrap 
    {
    	overflow:hidden;
    	padding-left:20px;
    	padding-right:20px;
    	position:relative;
    	width:950px;
    	margin:0 auto;
            text-align:center; 
            
    }
    
    
    
    .header_wrap
    {
    background:#253C4E; repeat-x;
    height:200px;
    width:100%;
    margin-left:auto;
    margin-right: auto;
    padding:0;
    text-align:center;
    }
    
    
    .header_logo
    {
    height: 200px;
    width: 911px;
    text-align:center;
    position:center;
    }
    
    
    
    
    #blogname {
    height:30px;
    padding-left:12px;
    padding-top:28px;
    text-align:left;
    }
    
    h1#blogname a {
    color:#fff;
    font-size:1.3em;
    }
    
    .description {
    color:#CAE972;
    font-size:1em;
    font-style:italic;
    padding-left:12px;
    text-align:left;
    margin:5px 0 0;
    }
    
    #content 
    {
    	display:inline;
    	float:left;
    	text-align:left;
    	width:65%;
    	margin:1%;
    	padding:0 20px 0 0;
    }
    #sidebar 
    {
    	display:inline;
    	float:right;
    	padding-top:5px;
    	width:28%;
    	margin:5px 0px 20px 0px;
    	padding-left:20px;
    	border-left:#ddd 1px dashed;
    	font-size:90%;
    }
    #sidebar ul#feed li 
    {
    	list-style:none;
    	margin:0;
    	padding:5px 20px;
    	background:url(images/feed-icon.png) no-repeat left ;
    }
    #sidebar h2 
    {
    	border-bottom:#eed 3px double;
    	font-size:18px;
    	color:#459045;
    	letter-spacing:0;
    	margin:0;
    	padding:5px 0;
    }
    #sidebar p 
    {
    	margin:10px 0;
    }
    
    #sidebar ul, #sidebar form 
    {
    	margin:2px 0;
    	padding:5px 10px;
    }
    #sidebar ul ul ul 
    {
    	margin:2px 0;
    	padding:0 0 0 10px;
    }
    #sidebar li.sidebox 
    {
    	margin:0 0 2em 0;
    	padding:0;
    }
    #sidebar li{
    margin:3px 0;
    line-height:1.8em;
    list-style:none;
    }
    
    #sidebar ul li a {
    color:#516F86;
    }
    #footer {
    background:#223344 url(images/top_gradient.gif) bottom repeat-x;
    clear:both;
    height:100px;
    padding:10px;
    text-align:center;
    margin:0 auto;
    color:#ccc;
    }
    
    ol#commentlist {
    list-style:none;
    margin:5px 0;
    padding:0;
    }
    
    .commentname {
    color:#4b5ba2;
    }
    
    .commentname a {
    color:#333;
    font:bold 110% "Trebuchet MS", "Lucida Grande", verdana, helvetica, arial, sans-serif;
    text-decoration:underline;
    }
    
    .commenttext 
    {
    	margin:5px 0 0 0;
    	background:#ffe;
    	border-left:#ccc 3px double;
    }
    .alt .commenttext 
    {
    	background:#f0f0ee;
    	border-left:#ccc 3px double;
    }
    
    * html .commenttext {
    height:90px;
    overflow:visible;
    }
    input.textbox
    {
    	border:#ccc 1px solid;
    	background:#fff url(images/postbg.jpg) repeat-y top left;
    	font:1em Verdana, Arial, Serif;
    	padding:2px 5px;
    	width:150px;
    }
    textarea{
    	width: 90%;
    	padding:5px;
    	height: 20em;
    	border: 1px solid #ccc;	
    	background:#fff url(images/postbg.jpg) repeat-y top left;
    	font:1em Verdana, Arial, Serif;
    }
    input.textbox:focus, textarea:focus
    {
    	border:#999 1px solid;
    }
    
    .commentp {
    padding:20px 12px 10px 10px;
    }
    
    .commenttext p {
    margin:0 0 10px;
    padding:0;
    }
    
    #commentblock ol li {
    margin-bottom:30px;
    }
    
    #commentblock {
    margin-left:4px;
    }
    
    .gravatar {
    background:url(images/grav.png) no-repeat;
    display:inline;
    float:left;
    height:32px;
    width:32px;
    margin:20px 0 0 10px;
    padding:8px;
    }
    
    #commentsform p {
    margin-bottom:5px;
    margin-top:5px;
    }
    h3.entrytitle,h3 {
    color:#1e2546;
    display:block;
    font-size:1.5em;
    margin:0;
    }
    
    h3 a:link,h3 a:visited,h3 a:hover,h3 a:active {
    color:#1e2546;
    }
    .entry {
    margin: 10px 0;
    padding:15px 0;
    border-bottom:#eed 3px double;
    }
    .entrybody 
    {
    	margin:1em 0;
    	padding:0;
    }
    
    .entrybody a:link,.entrybody a:visited {
    	border-bottom:1px dashed;
    }
    
    .entrybody a:active,.entrybody a:hover {
    	border-bottom:1px solid;
    }
    .entrymeta {
    color:#999;
    margin:0;
    padding:0;
    font-size:90%;
    }
    .entrymeta .comments 
    {
    	background:url(images/comments.gif) no-repeat left center;
    	padding-left:15px;
    }
    h2.archives {
    background-color:#FFC;
    color:#999;
    font-style:italic;
    margin-bottom:25px;
    text-align:center;
    }
    
    .entrymeta-single {
    color:#333;
    margin-bottom:20px;
    margin-top:3px;
    }
    .entrybody ul,.entrybody ol 
    {
    	margin:10px 0 10px 30px;
    }
    .entry li
    {
    	line-height:1.6em;
    }
    table {
    margin:10px;
    }
    td,th {
    padding:3px;
    }
    blockquote
    {
    	color:#666;
    	margin: 1em;
    	padding: 0 0 10px 50px;
    	background: url(images/blockquote.gif) no-repeat left top;	
    }
    #navigation 
    {
    	clear:both;
    	height:24px;
    	margin:0 auto;
    	padding:0 10px;
    	text-align:center;
    	width:880px;
    	font-size:1.1em;
    font-family:'Georgia', 'Verdana','Trebuchet MS','Lucida Grande';
    }
    
    #navigation a:link,
    #navigation a:visited 
    {
    	background:#FFF url(images/active1.gif) left bottom no-repeat;
    	color:#787878;
    	height:24px;
    	margin-right:2px;
    	padding-left:12px;
    	text-decoration:none;
    	border:none;
    }
    
    #navigation a:link,
    #navigation a:link span,
    #navigation a:visited,
    #navigation a:visited span 
    {
    	cursor:hand;
    	display:block;
    	float:left;
    	border:none;
    }
    
    #navigation li 
    {
    	line-height:23px;
    	float:left;
    	list-style:none;
    	margin:0;
    }
    
    #navigation a:hover 
    {
    	background:url(images/active1.gif) left bottom no-repeat;
    	color:#040;
    	height:24px;
    	padding-left:12px;
    	text-decoration:none;
    	border:none;
    }
    
    #navigation .current_page_item a:link,
    #navigation .current_page_item a:visited 
    {
    	background:#FFF url(images/current1.gif) left bottom no-repeat;
    	color:#AAC8E0;
    	height:27px;
    	line-height:24px;
    	margin-right:2px;
    	padding-left:15px;
    	text-decoration:none;
    	border:none;
    }
    
    #navigation .current_page_item a:hover 
    {
    	background:#FFF url(images/current1.gif) left bottom no-repeat;
    	color:#AAC8E0;
    	height:27px;
    	margin-right:2px;
    	padding-left:15px;
    	text-decoration:none;
    	border:none;
    }
    
    #navigation ul 
    {
    	list-style:none;
    	margin:0;
    	padding:0;
    }
    
    h3,#commentblock h2 {
    font-size:140%;
    }
    #navigation a:link span,
    #navigation a:visited span,
    #navigation a:hover span 
    {
    	background:url(images/active2.gif) right bottom no-repeat;
    	height:24px;
    	padding-right:12px;
    	border:none;
    }
    
    #navigation .current_page_item a:link span,
    #navigation .current_page_item a:visited span,
    #navigation .current_page_item a:hover span 
    {
    	background:url(images/current2.gif) right bottom no-repeat;
    	height:27px;
    	padding-right:15px;
    	border:none;
    }

  5. #5
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I get a "The requested URL /images/logo.gif was not found on this server."

    Edit) The image is found at: "http://bigtalkandgunsmoke.com/wp-content/themes/spotlight-13/images/logo.gif"
    Last edited by Erik J; Dec 31, 2007 at 02:45.

  6. #6
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    erik found the image and edited his post before I got to post

    Besides correcting that, you need to remove this
    Code:
    img 
    {
    	background:url(images/shadow.gif) no-repeat right bottom;
    	padding:4px 10px 10px 4px;	
    	border:none;
    	border-top:#eee 1px solid;
    	border-left:#eee 1px solid;	
    }
    from the css, as it puts a border around all images, including the logo.

    The .header_wrap css can be simplified to
    Code:
    .header_wrap
    {
    background:#253C4E; repeat-x;
    height:200px;
    text-align:center;
    }
    and the .header_logo div and css are not needed at all.

    You may have noticed that the central content of the site is not centred, but appears too far to the right - this is due to the #wrap div "snagging" on one of the menu floats. Adding a clear to #wrap fixes that
    Code:
    #wrap 
    {
    	overflow:hidden;
    	padding-left:20px;
    	padding-right:20px;
    	position:relative;
    	width:950px;
    	margin:0 auto;
            text-align:center; 
            clear: both;
    }

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Toch&#233;!

    I saw the problem, but was AFK and you beat me to it.

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And, I was going to suggest he only used the header_wrap with the image as a centered bg.

    Edit) And the code of course:
    Code CSS:
    .header_wrap
    {
    background:#253C4E url("http://bigtalkandgunsmoke.com/wp-content/themes/spotlight-13/images/logo.gif") center no-repeat;
    height:200px;
    width:100%;
    }

  9. #9
    SitePoint Addict Racer_X's Avatar
    Join Date
    Dec 2006
    Posts
    212
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent! Thanks for your help.


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
  •