Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pink Template problem

    I'm trying to use this template for the site: www.foreveryoungdance.net

    It's rather complex and I'm having trouble getting the right column to bring the pink area up to the top of the column. What should I be looking for?

    Also, where is the pink background in the style sheet? I'd like to make that white.

    Thanks.

  • #2
    New Coder
    Join Date
    Nov 2007
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yea it looks like a lot of the pink area have shadows and gradients.. so... basically id look more for repeating images.. (background images) in the CSS.. Where exactly do you want to replace the pink? All over the page, or just a certain section?

    Color is prolly one of the two listed below... im at a workstation so I don't have access to PS...

    Code:
    /* Right column */
    #col {float:left; width:200px; margin:0; padding:0; background:#ffc8d4 url(../design/col_bg.gif) 0 0 repeat-y;}
    #col-in {padding:20px 10px; background:url(../design/col_top.gif) 0 0 no-repeat;}
    #col h3 {padding:13px 15px 14px 15px; margin:0 -10px 15px -10px; background:#ff94ab url(../design/col_title_bg.gif) 0 0 repeat-y; color:#7f000b;}
    Last edited by Papa; 12-21-2007 at 05:25 PM.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Highlighted below is the background bg.gif which is the background I think.:
    Altering it in 'cssvista' certainly alters the BG colour.

    Frank

    Code:
    * {min-height:1px;}
    body {border:0; margin:0; padding:0; background:#fff1f3 url(../design/bg.gif) 0 0 repeat-x; font:70%/160% "verdana",sans-serif; color:#7f000b; _text-align:center;}
    
    a {color:#7f000b;}
    a:hover {color:#ff2740;}
    
    p {border:0; margin:15px 0; padding:0;}
    
    div {display:block; border:0; margin:0; padding:0;}
    
    h1, h2, h3, h4, h5 {border:0; margin:15px 0 10px 0; padding:0; font-weight:bold;}
    h1 {font-size:260%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
    h2 {font-size:180%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
    h3 {font-size:120%; line-height:100%; font-weight:bold;}
    h4 {font-size:120%;}
    h5 {font-size:100%;}
    
    table {display:table; border-collapse:collapse; margin:15px 0; padding:0; border:1px solid #ffaec0; font-size:100%;}
    tr {display:table-row;}
    th, td {display: table-cell; border:1px solid #ffaec0; margin:0; padding:5px; vertical-align:top; text-align:left;}
    th {background:#ffe5e9; text-align:center; color:#7f000b; font-weight:bold;}
    
    ul, ol {display:block; border:0; margin:15px 0 15px 40px; padding:0;}
    ol {list-style-type:decimal;}
    li {display:list-item; border:0; margin:0; padding:0; _height:1px;}
    ul ul, ul ol, ol ol, ol ul {margin: 0 0 0 20px;}
    
    dl {border:0; margin:15px 0; padding:0;}
    dt {border:0; margin:0; padding:0; font-weight:bold;}
    dd {border:0; margin:0 0 0 30px; padding:0;}
    
    form {border:0; margin:0; padding:0;}
    fieldset {border:1px solid #ccc; margin:15px 0; padding:10px;}
    legend {margin-left:10px; font-size:100%; font-weight:bold; color:#008;}
    
    hr {display:block; height:1px; margin:10px 0; padding:0; background:#CCC; border:0 solid #CCC; color:#CCC;}
    
    a, img, span {border:0; margin:0; padding:0;}
    abbr, acronym {border-bottom:1px dotted #CCC; cursor:help;}
    
    del, .through {text-decoration:line-through;}
    strong, .strong {font-weight:bold;}
    cite, em, q, var {font-style:italic;}
    code, kbd, samp {font-family:monospace; font-size:110%;}
    
    /* Floating */
    .f-left {float:left;}
    .f-right {float:right;}
    
    /* Text align */
    .t-left {text-align:left;}
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    In your markup is this:
    Code:
    <hr class="noscreen" />
                
          </div> <!-- /content -->
    
            <!-- Right column -->
            <!-- /col -->
    		Right column
        </div>
    
        <!-- /page-in -->
        </div> <!-- /page -->
    
        <!-- Footer -->
    Should that be
    Code:
    <hr class="noscreen" />
                
          </div> <!-- /content -->
    
            <!-- Right column -->
            <div id="col">
    		Right column
        </div>
    
        <!-- /page-in -->
        </div> <!-- /page -->
    
        <!-- Footer -->
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is what it appears to do on my editor.

    Frank
    Attached Thumbnails Attached Thumbnails Pink Template problem-screenhunter_01-dec.-21-18.17.jpg  
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This is the complete code that I have.
    I have removed the link to the style sheet and put the css in the <head>
    <base href= "http://www.foreveryoungdance.net"/> added to markup.

    EDIT Surplus code removed.


    Frank


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
    <head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="cs" />
    <meta name="robots" content="all,follow" />

    <meta name="author" content="All: ... [Nazev webu - www.url.cz]; e-mail: info@url.cz" />
    <meta name="copyright" content="Design/Code: Vit Dlouhy [Nuvio - www.nuvio.cz]; e-mail: vit.dlouhy@nuvio.cz" />

    <title>Forever Young Dance Studio</title>
    <meta name="description" content="..." />
    <meta name="keywords" content="..." />
    <base href= "http://www.foreveryoungdance.net"/>
    <link rel="index" href="RubyX/." title="Home" />

    <link rel="stylesheet" media="print" type="text/css" href="css/print.css" />
    <link rel="stylesheet" media="aural" type="text/css" href="css/aural.css" />
    <style type="text/css">

    * {min-height:1px;}
    body {border:0; margin:0; padding:0; background:#fff1f3 url(../design/bg.gif) 0 0 repeat-x; font:70&#37;/160% "verdana",sans-serif; color:#7f000b; _text-align:center;}

    a {color:#7f000b;}
    a:hover {color:#ff2740;}

    p {border:0; margin:15px 0; padding:0;}

    div {display:block; border:0; margin:0; padding:0;}

    h1, h2, h3, h4, h5 {border:0; margin:15px 0 10px 0; padding:0; font-weight:bold;}
    h1 {font-size:260%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
    h2 {font-size:180%; line-height:100%; font-family:"georgia",serif; font-weight:normal;}
    h3 {font-size:120%; line-height:100%; font-weight:bold;}
    h4 {font-size:120%;}
    h5 {font-size:100%;}

    table {display:table; border-collapse:collapse; margin:15px 0; padding:0; border:1px solid #ffaec0; font-size:100%;}
    tr {display:table-row;}
    th, td {display: table-cell; border:1px solid #ffaec0; margin:0; padding:5px; vertical-align:top; text-align:left;}
    th {background:#ffe5e9; text-align:center; color:#7f000b; font-weight:bold;}

    ul, ol {display:block; border:0; margin:15px 0 15px 40px; padding:0;}
    ol {list-style-type:decimal;}
    li {display:list-item; border:0; margin:0; padding:0; _height:1px;}
    ul ul, ul ol, ol ol, ol ul {margin: 0 0 0 20px;}

    dl {border:0; margin:15px 0; padding:0;}
    dt {border:0; margin:0; padding:0; font-weight:bold;}
    dd {border:0; margin:0 0 0 30px; padding:0;}

    form {border:0; margin:0; padding:0;}
    fieldset {border:1px solid #ccc; margin:15px 0; padding:10px;}
    legend {margin-left:10px; font-size:100%; font-weight:bold; color:#008;}

    hr {display:block; height:1px; margin:10px 0; padding:0; background:#CCC; border:0 solid #CCC; color:#CCC;}

    a, img, span {border:0; margin:0; padding:0;}
    abbr, acronym {border-bottom:1px dotted #CCC; cursor:help;}

    del, .through {text-decoration:line-through;}
    strong, .strong {font-weight:bold;}
    cite, em, q, var {font-style:italic;}
    code, kbd, samp {font-family:monospace; font-size:110%;}

    /* Floating */
    .f-left {float:left;}
    .f-right {float:right;}

    /* Text align */
    .t-left {text-align:left;}
    .t-center {text-align:center;}
    .t-right {text-align:right;}

    .va-middle {vertical-align:middle;}

    .clear {clear:both;}
    .box {min-height:1px; _height:1px;}
    .box:after {content:"."; display:block; line-height:0px; font-size:0px; visibility:hidden; clear:both;}

    .nom {margin:0;}
    .noscreen {display:none;}

    /* -----------------...........--------------------------------------------------------------------------------------- */

    #main {width:770px; margin:50px auto 0 auto; _text-align:left;}

    /* Header */
    #header {position:relative; width:770px; height:100px; margin:0; padding:0; background:#233C9B url(../design/header.jpg) 0 0 no-repeat; color:#FFF;}

    /* Header - logo */
    #header #logo {position:absolute; top:30px; left:55px; margin:0;}

    #header #logo a {color:#FFF;}
    #header #logo a:hover {color:#ff99b2; text-decoration:underline;}

    /* Header - Search */
    #header #search {position:absolute; top:35px; right:20px;}
    #header #search form {position:relative;}
    #header #search #search-input-out {position:absolute; top:0; right:45px; width:155px; height:28px; margin:0; padding:0; border:0; background:url(../design/search_input.gif) 0 0 no-repeat; font:bold 90%/100% "verdana",sans-serif; color:#7f000b;}
    #header #search #search-input {width:140px; margin:5px 8px; padding:3px 0; border:0; background:#FFF; font:bold 100%/100% "verdana",sans-serif; color:#7f000b;}
    #header #search #search-submit {position:absolute; top:0; right:0px;}
    #header #search fieldset {margin:0; padding:0; border:0;}
    #header #search fieldset {width:200px;}
    #header #search legend {display:none;}

    /* Main menu (tabs) */
    #tabs {background:#7f000b; margin:0 5px; padding:10px 0 0 0; _height:1px;}

    #tabs ul {margin:0 10px; padding:0; list-style:none;}
    #tabs ul li {margin:0 5px 0 0; padding:0; float:left;}
    #tabs ul li a {display:block; position:relative; padding:7px 15px; border:0; background:url(../design/tab_link.gif) 0 0 repeat-x; color:#ff99b2; font-weight:bold; text-decoration:none; cursorointer;}

    /* Main menu (tabs - link) */
    #tabs ul li a span.tab-l, #tabs ul li a:hover span.tab-l {position:absolute; top:0; left:10px; _left:-15px; width:8px; height:8px; background:url(../design/tab_link_l.gif) 0 0 no-repeat;}
    #tabs ul li a span.tab-r, #tabs ul li a:hover span.tab-r {position:absolute; top:0; right:0; _right:-1px; width:8px; height:8px; background:url(../design/tab_link_r.gif) 100% 0 no-repeat;}

    /* Main menu (tabs - hover) */
    #tabs ul li a:hover {background:url(../design/tab_hover.gif) 0 0 repeat-x; color:#FFF;}
    #tabs ul li a:hover span.tab-l {background:url(../design/tab_hover_l.gif) 0 0 no-repeat;}
    #tabs ul li a:hover span.tab-r {background:url(../design/tab_hover_r.gif) 100% 0 no-repeat;}

    /* Main menu (tabs - active) */
    #tabs ul li#active a {background:#FFF; color:#FF0000;}
    #tabs ul li#active a span.tab-l {position:absolute; top:0; left:0; _left:-15px; width:8px; height:8px; background:url(../design/tab_active_l.gif) 0 0 no-repeat;}
    #tabs ul li#active a span.tab-r {position:absolute; top:0; right:0; width:8px; height:8px; background:url(../design/tab_active_r.gif) 100% 0 no-repeat;}

    /* Page (2 columns) */
    #page {width:770px; min-height:1px; background:#FFF url(../design/bg_page.gif) 0 0 repeat-y; _height:1px;}
    #page-in {min-height:1px; padding:10px 0; background:url(../design/bg_page_in.jpg) 0 0 no-repeat; _height:1px;}

    /* Strip */
    #strip {position:relative; clear:both; padding:3px 20px 10px 20px; color:#ff335e;}
    #strip p {margin:0;}
    #strip a {color:#ff335e;}
    #strip a:hover {color:#7f000b;}

    /* Strip - breadcrumbs */
    #strip #breadcrumbs {width:520px; margin:0; padding:0;}

    /* Strip - RSS */
    #strip #rss {float:right; width:175px; _width:200px; margin:0; padding-left:25px; background:url(../design/ico_rss.gif) 0 50% no-repeat}

    /* Content */
    #content {float:left; width:530px; _width:550px; margin:0; padding:0 0 0 20px;}

    /* Content - article */
    #content .article {clear:both; margin:0; padding:20px; background:url(../design/content_article_bg.jpg) 0 0 no-repeat;}
    #content .article h2 {margin:0 -20px; padding:10px; background:#ffdce1 url(../design/content_title_bg.gif) 0 0 repeat-y; color:#7f000b;}
    #content .article h2 span {background:url(../design/ico_list.gif) 0 50% no-repeat; padding-left:25px;}

    #content .article p {text-align:justify;}
    #content .info {margin:10px 0; padding-bottom:8px; border-bottom:1px solid #ffdce1; color:#ff3360;}
    #content .info a {color:#ff3360;}
    #content .info a:hover {color:#FF0000;}

    #content .info span.date, #content .info span.cat, #content .info span.user, #content .info span.comments {padding-left:15px;}
    #content .info span.date {background:url(../design/ico_date.gif) 0 50% no-repeat;}
    #content .info span.cat {background:url(../design/ico_cat.gif) 0 50% no-repeat; margin-left:8px;}
    #content .info span.user {background:url(../design/ico_user.gif) 0 50% no-repeat; margin-left:8px;}
    #content .info span.comments {background:url(../design/ico_comments.gif) 0 50% no-repeat; margin-left:8px;}

    /* Content - More */
    #content .btn-more {margin:0 0 15px 0; padding:0; border:0; position:relative;}
    #content .btn-more a {display:block; position:absolute; top:0; right:0; width:67px; _width:95px; height:21px; margin:0; padding:0 0 0 28px; background:url(../design/btn_more.gif) 0 0 no-repeat; color:#FFF; text-decoration:none;}
    #content .btn-more a:hover {background:url(../design/btn_more.gif) -95px 0 no-repeat;}

    /* Right column */
    #col {float:left; width:200px; margin:0; padding:0; background:#ffc8d4 url(../design/col_bg.gif) 0 0 repeat-y;}
    #col-in {padding:20px 10px; background:url(../design/col_top.gif) 0 0 no-repeat;}
    #col h3 {padding:13px 15px 14px 15px; margin:0 -10px 15px -10px; background:#ff94ab url(../design/col_title_bg.gif) 0 0 repeat-y; color:#7f000b;}

    /* Right column - About me */
    #col #about-me {margin-bottom:15px; line-height:130%;}
    #col #about-me p {margin:0;}
    #col #about-me #me {float:left; width:54px; height:58px; margin-right:7px;}

    /* Right column - Category */
    #col ul#category {margin:15px 0; padding:0; list-style:none;}
    #col ul#category li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
    #col ul#category li a {display:block; padding:3px 0 3px 22px; background:url(../design/ico_archive.gif) 5px 6px no-repeat; text-decoration:none;}
    #col ul#category li a:hover {background-color:#ffccd8; color:#7f000b;}
    #col ul#category li#category-active a {background:#ffdbe3 url(../design/ico_archive2.gif) 5px 50% no-repeat; font-weight:bold;}

    /* Right column - Archive */
    #col ul#archive {margin:15px 0; padding:0; list-style:none;}
    #col ul#archive li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
    #col ul#archive li a {display:block; padding:3px 0 3px 22px; background:url(../design/ico_archive.gif) 5px 50% no-repeat; text-decoration:none;}
    #col ul#archive li a:hover {background-color:#ffccd8; color:#7f000b;}
    #col ul#archive li#archive-active a {background:#ffdbe3 url(../design/ico_archive2.gif) 5px 6px no-repeat; font-weight:bold;}

    /* Right column - Links */
    #col ul#links {margin:15px 0; padding:0; list-style:none;}
    #col ul#links li {margin:0; padding:0; border-bottom:1px solid #ffdbe3;}
    #col ul#links li a {display:block; padding:3px 0 3px 22px; background:url(../design/ico_links.gif) 5px 6px no-repeat; text-decoration:none;}
    #col ul#links li a:hover {background-color:#ffccd8; color:#7f000b;}

    /* Footer */
    #footer {position:relative; clear:both; width:770px; height:60px; margin-bottom:50px; background:url(../design/footer.jpg) 0 0 no-repeat; color:#ff3360;}
    #footer a {color:#ff3360;}
    #footer a:hover {color:#7f000b;}

    /* Footer - "back on top" */
    #top {position:absolute; top:55px; left:550px;}
    #top p {position:relative; width:30px; height:25px; margin:0; overflow:hidden;}
    #top p span {display:block; position:absolute; left:0; top:0; z-index:1; width:30px; height:25px; background:url(../design/ico_top.gif) 0 0 no-repeat; cursorointer;}
    #top a:hover span {background:url(../design/ico_top.gif) -30px 0 no-repeat;}

    /* Footer - copyright */
    #footer p#copyright {position:absolute; top:10px; left:40px; margin:0;}

    /* Footer - created by */
    #createdby {position:absolute; top:10px; left:562px; margin:0; color:#ff6587;}
    #createdby a {color:#ff6587;}

    </style>
    </head>

    <body id="www-url-cz"><!-- Main -->
    <div id="main" class="box"><!-- Header -->
    <div id="header"><!-- Logotyp -->
    <h1 id="logo">Forever Young Dance Studio</h1>
    <hr class="noscreen" >
    <!-- Quick links -->
    <div class="noscreen noprint">
    <p><em>Quick links: <A href="#content">content</a>, <A href="#tabs">navigation</a>, <A href="#search">search</a>.</em></p>
    <hr >
    </div><!-- Search -->
    <div id="search" class="noprint"></div><!-- /search -->
    </div><!-- /header --><!-- Main menu (tabs) -->
    <div id="tabs" class="noprint">

    <h3 class="noscreen">Navigation</h3>
    <ul class="box">
    <li><A href="#">Home<span class="tab-l"></span><span class="tab-r"></span></a></li>

    <li><A href="#">About2<span class="tab-l"></span><span class="tab-r"></span></a></li>
    <li><A href="#">Schedule<span class="tab-l"></span><span class="tab-r"></span></a></li>
    <li><A href="#">Photos<span class="tab-l"></span><span class="tab-r"></span></a></li>
    <li><A href="#">Portfolio<span class="tab-l"></span><span class="tab-r"></span></a></li>
    <li><A href="#">Contact<span class="tab-l"></span><span class="tab-r"></span></a></li>
    <li><A href="#">Links<span class="tab-l"></span><span class="tab-r"></span></a></li>
    </ul>

    <hr class="noscreen" >
    </div><!-- /tabs --><!-- Page (2 columns) -->
    <div id="page" class="box">
    <div id="page-in" class="box" style="Z-INDEX: 100; POSITION: absolute"><!-- /strip --><!-- Content -->
    <div id="content"><!-- Article -->
    <div class="article">
    <h2><span><A href="#">This is my best article</a></span></h2>
    <p class="info noprint">
    <span class="date">2007-01-01 @ 00:01</span><span class="noscreen">,</span>
    <span class="cat"><A href="#">Category</a></span><span class="noscreen">,</span>
    <span class="user"><A href="#">My name</a></span><span class="noscreen">,</span>
    <span class="comments"><A href="#">Comments</a></span>
    </p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
    Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
    ut est placerat condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris
    auctor arcu sit amet felis. Donec eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer.
    Sed id ante.</p>

    <p class="btn-more box noprint"><strong><A href="#">Continue</a></strong></p>
    </div><!-- /article -->

    <hr class="noscreen" >
    <!-- Article -->
    <div class="article">
    <h2><span><A href="#">This is my third article</a></span></h2>
    <p class="info noprint">
    <span class="date">2007-01-01 @ 00:01</span><span class="noscreen">,</span>
    <span class="cat"><A href="#">Category</a></span><span class="noscreen">,</span>
    <span class="user"><A href="#">My name</a></span><span class="noscreen">,</span>
    <span class="comments"><A href="#">Comments</a></span>
    </p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
    Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
    ut est placerat condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris
    auctor arcu sit amet felis. Donec eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer.
    Sed id ante.</p>

    <p class="btn-more box noprint"><strong><A href="#">Continue</a></strong></p>
    </div><!-- /article -->

    <hr class="noscreen" >
    <!-- Article -->
    <div class="article">
    <h2><span><A href="#">This is my second article</a></span></h2>
    <p class="info noprint">
    <span class="date">2007-01-01 @ 00:01</span><span class="noscreen">,</span>
    <span class="cat"><A href="#">Category</a></span><span class="noscreen">,</span>
    <span class="user"><A href="#">My name</a></span><span class="noscreen">,</span>
    <span class="comments"><A href="#">Comments</a></span>
    </p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
    Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
    ut est placerat condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris
    auctor arcu sit amet felis. Donec eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer.
    Sed id ante.</p>

    <p class="btn-more box noprint"><strong><A href="#">Continue</a></strong></p>
    </div><!-- /article -->

    <hr class="noscreen" >
    <!-- Article -->
    <div class="article">
    <h2><span><A href="#">This is my first article</a></span></h2>


    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
    Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
    ut est placerat condimentum. Aliquam ut enim. Quisque non sapien in enim eleifend faucibus. Pellentesque sodales. Mauris
    auctor arcu sit amet felis. Donec eget enim ut lacus pharetra condimentum. Nulla in felis vel tortor imperdiet consectetuer.
    Sed id ante.</p>

    <p class="btn-more box noprint"><strong><A href="#">Cotinue</a></strong></p>
    </div><!-- /article -->

    <hr class="noscreen" >

    </div><!-- /content -->
    <!-- Right column -->
    <div id="col">
    Right column
    </div>
    <!-- /page-in -->
    </div><!-- /page --><!-- Footer -->
    <div id="footer">
    <div id="top" class="noprint"><p><span class="noscreen">Back on top</span> <A title="Back on top ^" href="#header" >^<span></span></a></p></div>
    <hr class="noscreen" >

    <p id="createdby">created by <a href="http://www.nuvio.cz">Nuvio | Webdesign</a> <!-- DON&#194;&#180;T REMOVE, PLEASE! --></p>
    <p id="copyright">&#169; 2007 <A href="mailto:my@mail.com">Forever Young Dance</a> | RubyX by <a href="http://www.kendahlin.com/">Ken Dahlin</a> based entirely on <a href="http://www.nuvio.cz">CrystalX</a></p>
    </div>
    <p><!-- /footer -->
    </p>
    <p> </p>
    </div><!-- /main --></div>

    </body>
    </html>
    [/CODE]
    Last edited by effpeetee; 12-21-2007 at 08:40 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    This <?xml version="1.0"?> should probably be removed as its causing IE6 to go into quirks mode.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    This <?xml version="1.0"?> should probably be removed as its causing IE6 to go into quirks mode.
    Thank you Aero,
    I have removed it but there is no apparent difference in FFox.

    Frank
    Last edited by effpeetee; 12-21-2007 at 08:41 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Latest FFox screenshot.
    Frank

    This is the original code

    http://www.exitfegs.co.uk/bhover.html
    Attached Thumbnails Attached Thumbnails Pink Template problem-screenhunter_02-dec.-21-19.42.jpg  
    Last edited by effpeetee; 12-21-2007 at 09:14 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #10
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Quote Originally Posted by effpeetee View Post
    Thank you Aero,
    I have removed it but there is no apparent difference in FFox.

    Frank
    I never said it would.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #11
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for all the advice. I probably will make the background white instead of the pink gradient.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Change your CSS to read like this:
    Code:
        #tabs ul li#active a span.tab-r {position:absolute; top:0; right:0; width:8px; height:8px; background:url(../design/tab_active_r.gif) 100% 0 no-repeat;}
    
    /* Page (2 columns) */
    #page {width:770px; min-height:1px; background:#FFF url(../design/bg_page.gif) 0 0 repeat-y; _height:1px;}
    #page-in {
    min-height:1px; 
    padding:10px 0; 
     _height:1px;
    }
    /* Strip */
    Still have to fix that div tag in the markup.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New Coder
    Join Date
    Jul 2007
    Location
    Portland, OR
    Posts
    65
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    In your markup is this:
    Code:
    <hr class="noscreen" />
                
          </div> <!-- /content -->
    
            <!-- Right column -->
            <!-- /col -->
    		Right column
        </div>
    
        <!-- /page-in -->
        </div> <!-- /page -->
    
        <!-- Footer -->
    Should that be
    Code:
    <hr class="noscreen" />
                
          </div> <!-- /content -->
    
            <!-- Right column -->
            <div id="col">
    		Right column
        </div>
    
        <!-- /page-in -->
        </div> <!-- /page -->
    
        <!-- Footer -->
    I tried that but it made it worse, it put another piece of pink below the bottom edge of the site. I put it back for now.

    Would like to have the background white and remove the right column.

    If I take out the right column completely? Would it make the text area stretch across the page?

    Seems harder than it looks to find the right styles to change.
    Last edited by vinoman; 12-21-2007 at 09:32 PM.

  • #14
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Excavator.

    /* Page (2 columns) */
    #page {width:770px; min-height:1px; background:#FFF url(../design/bg_page.gif) 0 0 repeat-y; _height:1px;}
    #page-in {
    min-height:1px;
    padding:10px 0;
    _height:1px; did you intend the u/line to proceed the height:1px;
    }
    /* Strip */

    Frank
    Last edited by effpeetee; 12-21-2007 at 09:32 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #15
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    effpeetee, Google the underscore hack=P

    Actually, have a looky here.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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