CSS Help!
-
My header image isn’t displaying properly. I’m modifying a template that I’ve found and am replacing as I go. But I’m not seeing what’s causing the problem with my header image. Here is the link:
https://www.daleatkinson.com/portfolio/And here is the code:
STYLESHEET/*
Theme Name: Rio Theme
Theme URI: https://tokyopunk.com/
Description: Very simple, cute, and pink theme. Make something out of it!
Version: 1.0
Author: Marcel Winatschek
Author URI: https://www.tokyopunk.com/
*/* {
margin : 0;
padding : 0;
}
body {
background: #000000 url(“images/c-bg.jpg”) center;
background-position : top;
background-repeat : repeat-y;
color : rgb(0, 0, 0);
font-size : 62.5%; /* Resets 1em to 10px */
font-family : ‘Verdana’, ‘Arial’, Sans-Serif;
}
.break {
clear: both;
}
#header {
background : url(“images/slogan.jpg”) no-repeat;
height : 100px;
margin : 0 auto;
padding : 0;
width : 575px;
}
#header a, #header a:visited {
display : block;
width : 575px;
height : 97px;
}
#groomLake {
clear : left;
padding : 0 30px 10px 30px;
margin : 35px auto 0 auto;
width : 575px;
}
.sub-left {
background : url(“images/my-scrapbook.jpg”) center 0%;
border : 0 solid rgb(246, 246, 246);
float : left;
height : 60px;
margin : 0 auto 0 auto;
width : 200px;
}
#sub-right {
border-left : 2px solid rgb(246, 246, 246);
float : right;
margin : 0 auto 0 auto;
text-align : left;
width : 320px;
}
#sub-right ul {
line-height : 20px;
list-style-type : none;
margin : 0;
padding : 0;
}
#sub-right li {
height : 20px;
}
#sub-right ul li a, #sub-right ul li a:visited {
color : rgb(102, 102, 102);
display : block;
padding : 0 0 0 30px;
text-decoration : none;
}
#sub-right ul li a:hover {
background : #ff0066;
border : none;
color : white;
display : block;
}
#sub-right ul li.current_page_item a, #sub-right ul li.current_page_item a:hover {
background : #ff0066;
color : rgb(255, 255, 255);
text-decoration : none;
}
#menu {
margin : 0 auto;
width : 200px;
}
#menu span a, #menu span a:visited {
border-bottom : 5px solid red;
color : rgb(250, 251, 247);
font : 1em ‘Georgia’, ‘Times New Roman’, Sans-Serif;
margin : 1px 10px 0 0;
padding : 1px 3px 0 3px;
text-decoration : none;
}
#menu span a:hover {
border-bottom : 5px solid black;
text-decoration : none;
}
#content {
text-align : center;
}
#area51 {
margin : 20px 0 0 0;
}
.post {
margin : 0 auto 0 auto;
width : 500px;
}
p {
color : rgb(102, 102, 102);
font-family : ‘Verdana’, ‘Arial’, Sans-Serif;
font-weight : normal;
font-size : 1em;
line-height : 160%;
padding : 5px 0 5px 0;
text-align : justify;
}
.divide {
background : url(“images/p-divider.gif”) no-repeat;
font-family : ‘Verdana’, ‘Arial’, Sans-Serif;
font-weight : normal;
font-size : 1em;
height : 25px;
margin : 10px 0 0 0;
padding-right : 10px;
text-align : right;
}
blockquote p {
background : url(“images/float-quote.jpg”) no-repeat top left;
float : left;
font : 1.4em ‘Georgia’, ‘Times New Roman’, Sans-Serif;
font-style : italic;
margin : 1px 0 0 -265px;
position : absolute;
text-align : right;
width : 200px;
}
.more img {
border : none;
height : 13px;
margin : 0 0 -1px 0;
}
.more a, .more a:visited {
background : url(“images/more.jpg”) no-repeat;
border : none;
height : 15px;
margin : 0;
padding : 0;
letter-spacing : -9999em;
width : 52px;
}
.post p a, .post p a:visited {
color : #ff0066;
text-decoration : none;
}
.post p a:hover {
border-bottom : 1px dotted rgb(51, 51, 51);
color : rgb(0, 0, 0);
}
#area51 ul {
color : rgb(102, 102, 102);
font-family : ‘Verdana’, ‘Arial’, Sans-Serif;
font-weight : normal;
font-size : 1.2em;
list-style-type : none;
margin : 10px 0 10px 0;
padding : 0 0 0 10px;
}
#area51 ul li {
background : url(“images/bullet_black.gif”) no-repeat left 2px;
line-height : 170%;
margin : 0 0 5px 0;
padding : 0 10px 0 20px;
}
#area51 ul li.destyle {
background : none;
}
#area51 ul li a, #area51 ul li a:visited {
color : rgb(112, 160, 194);
text-decoration : none;
}
#area51 ul li a:active {
color : rgb(170, 170, 170);
text-decoration : none;
}
#area51 ul li a:hover {
color : rgb(138, 186, 221);
text-decoration : none;
}
.highlite {
font : 1em ‘Courier New’, ‘Georgia’, Sans-Serif;
padding : 2px 3px;
text-transform : uppercase;
}
#ufo {
clear : left;
padding : 0 30px 10px 30px;
margin : 70px auto 0 auto;
width : 575px;
}
.agentMulder {
background : url(“images/who.jpg”) center 0%;
border : 10px solid rgb(246, 246, 246);
float : left;
height : 60px;
margin : 0 auto 15px auto;
width : 575px;
}
#watertownStrip {
padding : 0 0 10px 0;
margin : 30px auto 0 auto;
width : 575px;
}
.responses {
margin : 0 0 50px 0;
}
.responses dl {
margin : 0 95px;
padding : 0 0;
}
.responses dt {
color : #666666;
font : bold 1.2em ‘Verdana’, ‘Arial’, Sans-Serif;
text-transform : lowercase;
text-decoration : none;
}
.responses dt a, .responses dt a:visited {
color : #ff0066;
font-weight : bold;
text-decoration : none;
}
.responses dt a:hover {
border-bottom : 1px dotted rgb(51, 51, 51);
}
.responses dd {
margin : 0 0 20px 0;
}
.responses dd p {
color : rgb(102, 102, 102);
font : 10px ‘Verdana’, ‘Arial’, Sans-Serif;
line-height : 160%;
margin : 0;
padding : 5px 0;
}
.responses dd p a, .responses dd p a:visited {
color : #ff0066;
font : 1.1em ‘Verdana’, ‘Arial’, Sans-Serif;
text-decoration : none;
}
.responses dd p a:hover {
border-bottom : 1px dotted rgb(51, 51, 51);
}
.responses dd img {
width : 210px;
max-height : 500px;
}
.response-info {
color : rgb(102, 102, 102);
float : left;
font : 3.8em ‘Georgia’, ‘Times New Roman’, Sans-Serif;
padding : 5px 0 0 10px;
position : absolute;
text-align : center;
text-decoration : none;
width : 85px;
}
.response-info img {
border : 1px solid #ff0066;
}
.response-info acronym {
border : none;
}
.response-info a, .response-info a:visited {
color : #ff0066;
font : 1.1em ‘Georgia’, ‘Times New Roman’, Sans-Serif;
text-decoration : none;
}
.response-info a:hover {
border-bottom : 1px dotted rgb(163, 178, 180);
}
.addResponse p {
margin : 0 95px;
}
.addResponse form {
border : none;
margin : 0 95px;
padding : 2px 0 0 0;
}
.addResponse form p {
color : rgb(153, 153, 153);
font : 1.2em ‘Verdana’, ‘Arial’, Sans-Serif;
line-height : 160%;
margin : 0;
padding : 5px 0;
}
.inputinfo {
background : url(“images/response-postinfo.jpg”) center 0%;
padding : 5px 0;
position : relative;
text-align : left;
}
.inputinfo p {
color : rgb(220, 221, 217);
float : right;
font : 1.2em ‘Verdana’, ‘Arial’, Sans-Serif;
line-height : 160%;
width : 240px;
}
label {
color : rgb(153, 153, 153);
cursor : pointer;
font : 1em ‘Verdana’, ‘Arial’, Sans-Serif;
text-transform : none;
}
label strong {
font-style : italic;
}
.addResponse input {
background : rgb(255, 255, 255);
border : 1px solid rgb(238, 238, 238);
color : rgb(102, 102, 102);
font-family : ‘Verdana’, ‘Arial’, Sans-Serif;
font-size : 0.9em;
margin : 4px 0 10px 0;
padding : 4px;
width : 98%;
}
.addResponse textarea {
background : rgb(255, 255, 255) url(“images/textarea-back.jpg”) center 0%;
border : 2px solid rgb(246, 246, 246);
color : rgb(102, 102, 102);
font-family : ‘Verdana’, ‘Arial’, Sans-Serif;
font-size : 1em;
height : 150px;
line-height : 140%;
margin-top : 4px;
padding : 3px 5px 3px 5px;
width : 97%;
}
.addResponse input#submit {
background : rgb(255, 255, 255);
border : none;
border : 2px solid rgb(246, 246, 246);
color : rgb(102, 102, 102);
cursor : pointer;
font-family : ‘Verdana’, ‘Arial’, Sans-Serif;
font-size : 1.2em;
font-weight : normal;
margin : 10px 0 0 0;
padding : 2px 3px 2px 3px;
width : 140px;
}
p.submit {
text-align : center;
}
.addResponse #submit:hover {
color : #ff0066;
}
.addResponse #submit:active {
color : #ff0066;
}
.break {
clear : both;
}
#footer {
border-top : 1px solid rgb(238, 238, 238);
clear : both;
margin : 15px auto 0 auto;
padding : 5px 0 5px 0;
text-align : left;
width : 350px;
}
#footer p {
border : none;
color : rgb(220, 221, 217);
font-family : ‘Verdana’, ‘Arial’, Sans-Serif;
font-size : 10px;
line-height : 14px;
margin : 0 0 0 15px;
padding : 0 0 0 0;
text-align : center;
}
#footer img {
padding : 20px 0;
}
h1 {
color : rgb(0, 0, 0);
display : none;
font-family : ‘Verdana’, ‘Arial’, Sans-Serif;
font-weight : normal;
font-size : 1.8em;
margin : 0;
padding : 0;
}
h1 a, h1 a:visited {
color : white;
font-weight : normal;
text-decoration : none;
}
h1 a:hover {
color : white;
text-decoration : none;
}
h2 {
color : #666666;
font-family : ‘Verdana’, ‘Arial’, Sans-Serif;
font-size : 1.2em;
text-transform : lowercase;
margin : 0;
padding : 5px 0 0 0;
}
h2 a, h2 a:visited {
border : none;
color : #ff0066;
font-weight : bold;
text-decoration : none;
}
h2 a:hover {
border : none;
color : rgb(0, 0, 0);
font-weight : bold;
text-decoration : none;
}
h3 {
color : rgb(102, 102, 102);
font-family : ‘Verdana’, ‘Arial’, Sans-Serif;
font-weight : bold;
font-size : 1.2em;
margin : 20px 0 5px 80px;
padding : 0 0 5px 0;
}
h3 a, h3 a:visited {
border : none;
color : rgb(51, 51, 51);
text-decoration : none;
}
h3 a:hover {
border : none;
color : rgb(236, 50, 3);
text-decoration : none;
}
.responses h3 {
margin : 20px 0 0 95px;
padding : 0 0 15px 0;
}
h4 {
color : #666666;
font-family : ‘Verdana’, ‘Arial’, Sans-Serif;
font-size : 1em;
}
a, a:visited {
color : #ff0066;
font-weight : normal;
text-decoration : none;
}
a:active {
color : rgb(136, 136, 136);
text-decoration : none;
}
a:hover {
border-bottom : 1px dotted rgb(102, 102, 102);
color : rgb(0, 0, 0);
text-decoration : none;
}
acronym {
border-bottom : 1px dashed rgb(102, 102, 102);
cursor : help;
}
abbr {
border-bottom : 1px dashed;
cursor : help;
}
code {
background : rgb(246, 246, 246);
border : 1px solid rgb(238, 238, 238);
font : 1em ‘Courier New’, ‘Arial’, Sans-Serif;
}
img {
max-width : 350px;
border : none;
}
#secondarycontent {
padding-left : 5px;
padding-right : 5px;
width : 190px;
height : 100%;
}HEADER
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml” <?php language_attributes(); ?>><head profile=”https://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” /><title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<meta name=”generator” content=”WordPress <?php bloginfo(‘version’); ?>” /> <!– leave this for stats –>
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<?php wp_get_archives(‘type=monthly&format=link’); ?>
<?php wp_head(); ?></head>
<body>
<div align=”center”><br class=”break” />
<!– Code is very pretty literature. –>
<img src=”<?php bloginfo(‘template_directory’); ?>/images/header.jpg” alt=”Marcel Winatschek’s Tokyopunk” width=”575″ height=”348″ /></div>
<div id=”post” align=”center”><img src=”<?php bloginfo(‘template_directory’); ?>/images/spacer.gif” width=”1″ height=”10″ alt=”” /></div>
<div align=”center”>
blog | about me | photos | favourites | links | email | info</div>
- The topic ‘CSS Help!’ is closed to new replies.