Need Help Reimplementing CSS Coding [Archive]

View Full Version : Need Help Reimplementing CSS Coding

PsionicSin

10-06-2010, 05:15 PM

Ok people I'm going to need some really good help on this because it'll become confusing very quickly (I know I'm boggled already lol).

I'm redoing my employers website. The new design is already done, however I'm having a major problem with a CRUCIAL element from the older site.

Ruth Olson Photography Old Design (http://rutholsonphoto.com/)
Ruth Olson Photography New Design (http://rutholsonphoto.com/test_build/index.php)

Now, we have a custom made voting service on our site called "The Senior Challenge (http://rutholsonphoto.com/sencha2011.php)". It's where seniors can tell their friends and family to go online and vote for their picture. The winners gets all kinds of cash prizes and stuff. It's a very cut throat contest that can't have any type of downtime. And this is what I need help with.

Here's the mess as it stands right now:

ROP New Voting Page (http://rutholsonphoto.com/test_build/votenow-1.php)

As you can see, it looks as if a lot of elements on the CSS for that specific content is clashing with the CSS of my design, and I need help sorting this out. Here's the version of it on the old site:

ROP Old Voting Page (http://rutholsonphoto.com/sencon2011.php)

--------------------------------------------------------------------------

Here's the php for the main page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Brandon Moner" />
<meta name="keywords" content="photography, pictures, photos, portraits, camera, senior, family, children, baby, newborn, special, wedding, modeling, fashion, spring, holiday" />
<meta name="description" content="Ruth Olson Photography is a photography studio located in Westland, MI that specializes in all forms of portraiture." />
<meta name="language" content="English" />
<meta name="copyright" content="Ruth Olson Photography" />
<title>Ruth Olson Photography</title>

<link rel="stylesheet" type="text/css" media="screen, print, projection" href="./css/index.css"></link>
<link rel="stylesheet" type="text/css" media="screen" href="./css/sencha.css"></link>
<?php require("./js/jsref.htm"); ?>
</head>

<body>
<div id="home">
<div id="background"></div>
<div id="headerxmedia"><?php require("header/header.php"); ?>
</div>
<div id="navigationxmedia"><?php require("navigation/navigation.php"); ?>
</div>
<div id="stagexmedia"><?php require("content/sencon-1.php"); ?></div>
<div id="footerxmedia"><?php require("footer/footer.php"); ?>
</div>
</div>
</body>
</html>

Here's the php for the stage area:

<?php
$page_title = 'Ruth Olson Photography - Senior Challenge';
?>

<script type="text/javascript">
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
////////////////////////////////////
</script>
<div id="right">
<div id="maincontent">
<center><h3>2011 Senior Challenge Contestants</h3>
<br />

<strong>Senior Challenge Leaderboard:</strong> <a href="/voteresults.php">Click here to view your rank!</a><br />

<br />
<div style="font-size:13px;">To build suspense we have removed the voting counters. Keep up the voting!</div>
<div style="font-size:10px;">We allow one vote per household.</div><br />
</center>
<body class="section-1">
<ul id="menu2">
<li id="nav-1"><a href="/votenow-1.php"><u>A - F</u></a></li>
<li id="nav-2"><a href="/votenow-2.php"><u>G - L</u></a></li>
<li id="nav-3"><a href="/votenow-6.php"><u>M - R</u></a></li>
<li id="nav-4"><a href="/votenow-4.php"><u>S - X</u></a></li>
<li id="nav-5"><a href="/votenow-5.php"><u>Y - Z</u></a></li>
</ul>

<div style="background-color:#f0f0f0">

<?php
//FOR LETTER: A

include("../templates/mysql_connect.php");

$query = "SELECT * FROM seniors WHERE last_name LIKE 'A%' ORDER BY last_name ASC";
$result = @mysql_query ($query);

echo '<table width="480" height="150"><tr>
<td width="161" valign="top" align="center">
<p><span class="style19"><u>-A-</u></span><br />';

while ($row = mysql_fetch_array ($result)){

echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\"
title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post">

$row[first_name] $row[last_name] - $row[school] <br />

    <input name="submit" align="right" type="submit" value="Vote" >

</form> \">$row[last_name], $row[first_name]</a><br/>";

}
echo '</p>';
?>

<?php
//FOR LETTER: B

$query = "SELECT * FROM seniors WHERE last_name LIKE 'B%' ORDER BY last_name ASC";
$result = @mysql_query ($query);

echo '<td width="161" valign="top" align="center"><p><span class="style19"><u>-B-</u></span><br />';

while ($row = mysql_fetch_array ($result)){

echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\"
title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post">

$row[first_name] $row[last_name] - $row[school]

    <input name="submit" type="submit" value="Vote" >

</form> \">$row[last_name], $row[first_name]</a><br/>";

}
echo '</p></td>';
?>

<?php
//FOR LETTER: C

$query = "SELECT * FROM seniors WHERE last_name LIKE 'C%' ORDER BY last_name ASC";
$result = @mysql_query ($query);

echo '<td width="161" valign="top" align="center"><p><span class="style19"><u>-C-</u></span><br />';

while ($row = mysql_fetch_array ($result)){

echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\"
title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post">

$row[first_name] $row[last_name] - $row[school]

    <input name="submit" type="submit" value="Vote" >

</form> \">$row[last_name], $row[first_name]</a><br/>";

}
echo '</p></td></tr>';
?>

<?php
//FOR LETTER: D

$query = "SELECT * FROM seniors WHERE last_name LIKE 'D%' ORDER BY last_name ASC";
$result = @mysql_query ($query);

echo '<tr><td width="161" valign="top" align="center"><p><span class="style19"><u>-D-</u></span><br />';

while ($row = mysql_fetch_array ($result)){

echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\"
title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post">

$row[first_name] $row[last_name] - $row[school]

    <input name="submit" type="submit" value="Vote" >

</form> \">$row[last_name], $row[first_name]</a><br/>";

}
echo '</p></td>';
?>

<?php
//FOR LETTER: E

$query = "SELECT * FROM seniors WHERE last_name LIKE 'E%' ORDER BY last_name ASC";
$result = @mysql_query ($query);

echo '<td width="161" valign="top" align="center"><p><span class="style19"><u>-E-</u></span><br />';

while ($row = mysql_fetch_array ($result)){

echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\"
title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post">

$row[first_name] $row[last_name] - $row[school]

    <input name="submit" type="submit" value="Vote" >

</form> \">$row[last_name], $row[first_name]</a><br/>";

}
echo '</p></td>';
?>

<?php
//FOR LETTER: F

$query = "SELECT * FROM seniors WHERE last_name LIKE 'F%' ORDER BY last_name ASC";
$result = @mysql_query ($query);

echo '<td width="161" valign="top" align="center"><p><span class="style19"><u>-F-</u></span><br />';

while ($row = mysql_fetch_array ($result)){

echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\"
title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post">

$row[first_name] $row[last_name] - $row[school]

    <input name="submit" type="submit" value="Vote" >

</form> \">$row[last_name], $row[first_name]</a><br/>";

}
echo '</p></td></tr>';
?>

</div>
</div>
</div>

PsionicSin

10-06-2010, 05:16 PM

Here's the CSS for the main design:

/*********HOUSES CSS STYLING FOR ALL MASTER PAGES*********/

/***Main Layout CSS***/

#navigationxmedia {
visibility: visible;
position: absolute;
left: 0px;
top: 90px;
z-index: 4;
width: 180px;
}

#headerxmedia {
visibility: visible;
position: absolute;
left: 3px;
top: 0px;
z-index: 5;
width: 897px;
}

#footerxmedia {
visibility: visible;
position: absolute;
left: 0px;
top: 630px;
z-index: 2;
width: 900px;
}

#stagexmedia {
visibility: visible;
position: absolute;
left: 180px;
top: 90px;
z-index: 3;
width: 720px;
height: 540px;
}

#home {
margin: 0px auto 0px auto;
width: 900px;
position: relative;
}

#background {
visibility: visible;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 900px;
height: 675px;
background-color: #282828;
background-image: url('../content/background.gif');
outline: black;
outline-width: 8px;
outline-style: solid;
}

html, body {
padding: 0px;
margin: 0px;
background-color: #282828;
}

/***Header CSS***/

#rssbutton a,
#twitterbutton a,
#facebookbutton a {
background-repeat: no-repeat;
display: block;
height: 62px;
background-position: 0% 0px;
font-size: 62px;
line-height: 62px;
}

#facebookbutton a:hover,
#rssbutton a:hover {
background-position: -63px 0%;
}

#facebookbutton,
#rssbutton {
visibility: visible;
position: absolute;
top: 14px;
z-index: 2;
width: 63px;
height: 62px;
}

#twitterbutton a:hover {
background-position: -64px 0%;
}

#logobutton a:hover {
background-position: -400px 0%;
}

#facebookbutton a {
width: 63px;
background-image: url(../header/headermedia/facebookbutton.png);
}

#twitterbutton a {
width: 64px;
background-image: url(../header/headermedia/twitterbutton.png);
}

#facebookbutton {
left: 658px;
}

#twitterbutton {
visibility: visible;
position: absolute;
left: 722px;
top: 14px;
z-index: 2;
width: 64px;
height: 62px;
}

#logobutton a {
background: url(../header/headermedia/logobutton.png) no-repeat 0% 0px;
display: block;
width: 400px;
height: 82px;
}

#rssbutton a {
width: 63px;
background-image: url(../header/headermedia/rssbutton.png);
}

#logobutton {
visibility: visible;
position: absolute;
left: 24px;
top: 8px;
z-index: 2;
width: 400px;
height: 82px;
}

#rssbutton {
left: 787px;
}

#header {
margin: 0px auto 0px auto;
width: 900px;
position: relative;
}

#shell {
visibility: visible;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 900px;
height: 90px;
background-color: #282828;
background-image: none;
}

/***Footer CSS***/

#copyrighttext p {
font: 13px/16px Arial;
margin: 0px;
color: #C0C0C0;
text-align: left;
}

#copyrighttext {
visibility: visible;
position: absolute;
left: 24px;
top: 15px;
z-index: 2;
width: 279px;
}

#certification {
background: url(../footer/footermedia/certification.png) no-repeat;
visibility: visible;
position: absolute;
left: 689px;
top: 2px;
z-index: 2;
width: 161px;
height: 41px;
}

#pid0footer {
margin: 0px auto 0px auto;
width: 900px;
position: relative;
}

/***Stage CSS***/

/***Navigation CSS***/

.arrowlistmenu{
width: 177px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(../navigation/navigationmedia/bar.png) repeat-x center left;
margin: 0px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(../navigation/navigationmedia/baractive.png);
}

.arrowlistmenu .overheader{
background-image: url(../navigation/navigationmedia/barhover.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.arrowlistmenu ul li a{
color: #c0c0c0;
background: url(../navigation/navigationmedia/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 80%;
}

.arrowlistmenu ul li a:visited{
color: #c0c0c0;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #FFFFFF;
background-color: #202020;
}

Here's the CSS for the old Senior Challenge design:

html {
div#right {
width: 720px;
float: left;
background-color: #fff;
color: white;
}

div#right h2 {
position:relative;
top:1px;
font-size: 12px;
font-weight: normal;
color: #f9ffff;
margin: -4px 0 0 0;
background: #000;
height: 25px;
width: 720px;
padding: 13px 0 0 15px;
}

div#container > div#right h2 {
margin: 0;
}

div#maincontent {
width: 720px;
}
div#maincontent p {
margin: 0;

padding: 0px 0px 0px 5px;
}

a:link,a:visited {
color: #fa6627;
text-decoration: none;
}

a:hover, a:active {
color: #fa6627;
}

h3 {
margin: 5px 0px 0px 0px;
padding: 5px 0px 5px 5px;
width: 475px;
background: #f0f0f0;
}

#vote a:hover{
text-decoration:underline;
color: #fa6627;
}

#see a:hover{
text-decoration:underline;
}

/*LIGHTBOX*/

#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(/templates/Lightbox/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/templates/Lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/templates/Lightbox/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
}

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}

/* Min-Width */
.lbWidth { /* most browsers */
position: absolute;
top: 0px; left: 0px;
width: 100%;
min-width: 790px;
}

* html .lbContent { /* IE6 */
margin-left: -790px;
position:relative;
}

* html .lbMinWidth { /* IE6 */
padding-left: 790px;
}

/* Clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

}

PsionicSin

10-06-2010, 05:17 PM

I hope you guys can help me figure out what's wrong, and why, and how to fix it. Thanks for your time.

PsionicSin

10-07-2010, 07:11 PM

Anyone at all? It doesn't need to be just a moderator, really.

I need helping taking this php:

<?php
$page_title = 'Ruth Olson Photography - Senior Challenge';
?>

<script type="text/javascript">
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
document.oncontextmenu=new Function("return false")
////////////////////////////////////
</script>

<div id="maincontent">
<div id="titlebar">
<center><h3>2011 Senior Challenge Contestants</h3>
<br />
<strong>Senior Challenge Top 20:</strong> <a href="/voteresults.php">Click Here to View the Top 20!</a><br />
<br />
<div>To build suspense we have removed the voting counters. Keep up the voting!</div>
<div>Only One Vote Per Household.</div><br />
</center>
</div>

<body class="section-1">
</body>
<ul id="menu2">
<li id="nav-1"><a href="/votenow-1.php"><u>A - F</u></a></li>
<li id="nav-2"><a href="/votenow-2.php"><u>G - L</u></a></li>
<li id="nav-3"><a href="/votenow-6.php"><u>M - R</u></a></li>
<li id="nav-4"><a href="/votenow-4.php"><u>S - X</u></a></li>
<li id="nav-5"><a href="/votenow-5.php"><u>Y - Z</u></a></li>
</ul>

<div style="background-color:#f0f0f0" id="overlay">

<?php
//FOR LETTER: A

include("../templates/mysql_connect.php");

$query = "SELECT * FROM seniors WHERE last_name LIKE 'A%' ORDER BY last_name ASC";
$result = @mysql_query ($query);

echo '<table width="480" height="150"><tr>
<td width="161" valign="top" align="center">
<p><span class="style19"><u>-A-</u></span><br />';

while ($row = mysql_fetch_array ($result)){

echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\"
title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post">

$row[first_name] $row[last_name] - $row[school] <br />

    <input name="submit" align="right" type="submit" value="Vote" >

</form> \">$row[last_name], $row[first_name]</a><br/>";

}
echo '</p>';
?>

<?php
//FOR LETTER: B

$query = "SELECT * FROM seniors WHERE last_name LIKE 'B%' ORDER BY last_name ASC";
$result = @mysql_query ($query);

echo '<td width="161" valign="top" align="center"><p><span class="style19"><u>-B-</u></span><br />';

while ($row = mysql_fetch_array ($result)){

echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\"
title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post">

$row[first_name] $row[last_name] - $row[school]

    <input name="submit" type="submit" value="Vote" >

</form> \">$row[last_name], $row[first_name]</a><br/>";

}
echo '</p></td>';
?>

<?php
//FOR LETTER: C

$query = "SELECT * FROM seniors WHERE last_name LIKE 'C%' ORDER BY last_name ASC";
$result = @mysql_query ($query);

echo '<td width="161" valign="top" align="center"><p><span class="style19"><u>-C-</u></span><br />';

while ($row = mysql_fetch_array ($result)){

echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\"
title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post">

$row[first_name] $row[last_name] - $row[school]

    <input name="submit" type="submit" value="Vote" >

</form> \">$row[last_name], $row[first_name]</a><br/>";

}
echo '</p></td></tr>';
?>

<?php
//FOR LETTER: D

$query = "SELECT * FROM seniors WHERE last_name LIKE 'D%' ORDER BY last_name ASC";
$result = @mysql_query ($query);

echo '<tr><td width="161" valign="top" align="center"><p><span class="style19"><u>-D-</u></span><br />';

while ($row = mysql_fetch_array ($result)){

echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\"
title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post">

$row[first_name] $row[last_name] - $row[school]

    <input name="submit" type="submit" value="Vote" >

</form> \">$row[last_name], $row[first_name]</a><br/>";

}
echo '</p></td>';
?>

<?php
//FOR LETTER: E

$query = "SELECT * FROM seniors WHERE last_name LIKE 'E%' ORDER BY last_name ASC";
$result = @mysql_query ($query);

echo '<td width="161" valign="top" align="center"><p><span class="style19"><u>-E-</u></span><br />';

while ($row = mysql_fetch_array ($result)){

echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\"
title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post">

$row[first_name] $row[last_name] - $row[school]

    <input name="submit" type="submit" value="Vote" >

</form> \">$row[last_name], $row[first_name]</a><br/>";

}
echo '</p></td>';
?>

<?php
//FOR LETTER: F

$query = "SELECT * FROM seniors WHERE last_name LIKE 'F%' ORDER BY last_name ASC";
$result = @mysql_query ($query);

echo '<td width="161" valign="top" align="center"><p><span class="style19"><u>-F-</u></span><br />';

while ($row = mysql_fetch_array ($result)){

echo "<a href=\"$row[pic_url]\" rel=\"lightbox[seniors]\"
title=\" <form action ="/tallyvote.php?sen_id=$row[sen_id]" method="post">

$row[first_name] $row[last_name] - $row[school]

    <input name="submit" type="submit" value="Vote" >

</form> \">$row[last_name], $row[first_name]</a><br/>";

}
echo '</p></td></tr>';
?>

</div>
</div>

...and styling it with CSS to look like this:
http://i385.photobucket.com/albums/oo298/Bmoner85/Posts/content.jpg

The only changes of the above example that I need are for it to:

-Have dimensions of 720*540
-Have an overflow vertical scroll for anything longer than 540px