...

View Full Version : Pink Template problem



vinoman
12-21-2007, 05:08 PM
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.

Papa
12-21-2007, 05:18 PM
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...


/* 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;}

effpeetee
12-21-2007, 05:23 PM
Highlighted below is the background bg.gif which is the background I think.::D
Altering it in 'cssvista' certainly alters the BG colour.

Frank



* {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;}

Excavator
12-21-2007, 06:25 PM
In your markup is this:
<hr class="noscreen" />

</div> <!-- /content -->

<!-- Right column -->
<!-- /col -->
Right column
</div>

<!-- /page-in -->
</div> <!-- /page -->

<!-- Footer -->

Should that be
<hr class="noscreen" />

</div> <!-- /content -->

<!-- Right column -->
<div id="col">
Right column
</div>

<!-- /page-in -->
</div> <!-- /page -->

<!-- Footer -->

effpeetee
12-21-2007, 07:20 PM
This is what it appears to do on my editor.

Frank

effpeetee
12-21-2007, 07:33 PM
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; cursor:pointer;}

/* 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; cursor:pointer;}
#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]

_Aerospace_Eng_
12-21-2007, 07:52 PM
This <?xml version="1.0"?> should probably be removed as its causing IE6 to go into quirks mode.

effpeetee
12-21-2007, 08:39 PM
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

effpeetee
12-21-2007, 08:44 PM
Latest FFox screenshot.
Frank

This is the original code

http://www.exitfegs.co.uk/bhover.html

_Aerospace_Eng_
12-21-2007, 08:54 PM
Thank you Aero,
I have removed it but there is no apparent difference in FFox.

Frank
I never said it would. :confused:

vinoman
12-21-2007, 08:55 PM
Thanks for all the advice. I probably will make the background white instead of the pink gradient. :D

Excavator
12-21-2007, 09:10 PM
Change your CSS to read like this:

#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.

vinoman
12-21-2007, 09:23 PM
In your markup is this:
<hr class="noscreen" />

</div> <!-- /content -->

<!-- Right column -->
<!-- /col -->
Right column
</div>

<!-- /page-in -->
</div> <!-- /page -->

<!-- Footer -->

Should that be
<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.

effpeetee
12-21-2007, 09:25 PM
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

Apostropartheid
12-21-2007, 09:45 PM
effpeetee, Google the underscore hack=P

Actually, have a looky here (http://www.wellstyled.com/css-underscore-hack.html).

effpeetee
12-21-2007, 10:03 PM
Remove the marked code to get a white(ish) background.

http://www.exitfegs.co.uk/bhoverb.html

Frank

* {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;}

Excavator
12-21-2007, 10:48 PM
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

I didn't add that, it was there.

effpeetee
12-21-2007, 11:38 PM
Yes,I looked at the original and saw it there. CyanLight explained it to me.
also.

My eyes are not too good and I can easily miss something like that.
It's a horribly difficult coding to service. Just trying to find the right div to deal with is daunting. Apart from knowing what to do with it anyway.

My editor is a WYSIWYG type and using it in edit mode and dragging the various parts around, I was surprised to find mutiple layers at some points. Anyway it's getting late, so it's off to bed for me now. Back tomorrow. I wouldn't miss it for the world.

Frank

vinoman
12-22-2007, 04:13 PM
I'm still trying to remove the right column and make the background white.

I've tried a few changes but they don't work. Why is it so hard to figure this one out?

I hope to learn from this template so I'll know what to do in the future.

Any more clues?

effpeetee
12-22-2007, 09:57 PM
From a previous post. Have you tried this.:D


Remove the marked code to get a white(ish) background.

http://www.exitfegs.co.uk/bhoverb.html

Frank

* {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;}

vinoman
12-22-2007, 11:10 PM
I pulled that part (url) out and it still left the pink background up. I didn't think it would be so hard to change the background color to white and remove the right column. A very confusing template. There must be a way to do this.

Apostropartheid
12-22-2007, 11:20 PM
Umm. It really does. It just appears that you haven't (your main CSS still has it in.)

Excavator
12-22-2007, 11:25 PM
I already answered this once.

getting the right column to bring the pink area up to the top of the column

/* 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 */


where is the pink background in the style sheet? I'd like to make that white.
/* Page (2 columns) */
#page {width:770px; min-height:1px; background:#FFF; _height:1px;}
#page-in {
min-height:1px;
padding:10px 0;
_height:1px;
}
/* Strip */

vinoman
12-23-2007, 02:15 AM
I've solved my problem... there were two copies of main.css and I was editing the wrong one. Now it's showing the changes. Thank You.

Now that the right column is gone. I would like to stretch the content area to fill in where the right column was. I'll keep looking for that one, unless to see better than I can.

effpeetee
12-23-2007, 07:31 PM
http://www.maxdesign.com.au/presentation/page_layouts/
http://www.templatesforfree.net/templates.php

Have you tried some of these free layouts.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum