• 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”&gt;
    <html xmlns=”https://www.w3.org/1999/xhtml&#8221; <?php language_attributes(); ?>>

    <head profile=”https://gmpg.org/xfn/11″&gt;
    <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>

Viewing 2 replies - 1 through 2 (of 2 total)
  • Why do people always persist in copying large chunks of code here while it can be downloaded from the site we’re supposed to look at?

    Since you’re not totally clear on what the problem is, I assume it’s the width of the displayed image isn’t the actual width.

    Find this in your style sheet and remove it:

    img {
    border:medium none;
    max-width:350px;
    }

    can anyone give me a step by step, easy to understand lesson on custom ccs images because i am trying to use them on veoh on my profile
    https://www.goarticles.com/cgi-bin/showa.cgi?C=2342790

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS Help!’ is closed to new replies.