...

View Full Version : Begging the help of a CSS pro...layout in crises, deadline coming! Argh!



brett007
08-03-2007, 01:03 PM
I'm a newbie, no denying it...but I'm serious about writing standard compliant clean code...that being said, don't laugh at my examples....this is only my second 'serious' site I've tried to create and I'm creating it for a client of mine who is very picky....if I can do this correctly, I can do any future site in my opinion!!!

But now I need the help of a kind pro!

If it means I get to beat the time crunch I'm feeling from my client, I will even pay someone something for some major help with the layout coding I've included BELOW....in the examples above all images have been changed to color div boxes of the same dimensions...etc...

My problem isn't so much the layout of the contents (it looks correct with actual images, etc..) my issue is the overall layout outside of the BODY border....the page is centered, which is great, but this client REALLY needs the page to adjust WIDTH WISE as the screen res goes up (read below note for details on this idea)....currently it merely centers at the same sizes....and looks way to small and not horizontal enough on a large screen......height doesn't have to scale much (if at all)....but the width must go wider the larger the page is stretched, (say past 1280 res) etc...

Any help would mean a lot to me! Sorry about any extra or redundant code, including the conditional IE comments in the HTML....I'm really trying to learn/understand, I'm just pressed for time on this important job!!

*details on concept: the areas that need to get wider when stretched are the space between the photo and the left categories (while maintaining the same height alignment with them)...and the links on the right of the photo (3 links on top and one on bottom) needs to adjust (upward-right for top and downward-right for the bottom link?) accordingly as the image itself gets pushed farther out to the right when the screen size goes up...I don't expect the image to scale, it's pretty much locked in a javascript frame, etc...essentially the BODY border needs to remain as horizontal as possible (POST CARD resemblance I guess), the problem seems to be above 1280x1024 resolution currently) right now it's just a square look that isn't good (exception is smaller resolutions it's fine)

How can this be done?? (code is in below post, really sorry about the length! I type too fast!)

AndyArmstrong
08-03-2007, 01:05 PM
Where is the code / page

brett007
08-03-2007, 01:06 PM
The HTML for the above problem:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HOME PAGE SAMPLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Search Engines" content="AltaVista, AOLNet, Infoseek, Excite, Hotbot, Lycos, Magellan, LookSmart, CNET" />
<link href="homesample.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
//<![CDATA[
<!--
// Jeff
//www.huntingground.freeserve.co.uk

images=[


["pic03.jpg","index.html"],
["pic04.jpg","index.html"],
["pic02.jpg","index.html"],
["pic01.jpg","index.html"],
["pic03.jpg","index.html"],
["pic04.jpg","index.html"],
["pic02.jpg","index.html"],
["pic01.jpg","index.html"]

]

pause = 2 // seconds
fadeSpeed = 4

opac1=100
opac2=0
nextPic=0
nextLink=0
running=0

function initISF2(){
elOpic1=document.getElementById("opic1")
elOpic2=document.getElementById("opic2")
lnkLoc=images[nextLink][1]
document.getElementById("mylink").onclick=function(){isf2Link()}
document.getElementById("mylink").style.cursor="pointer"

setTimeout("fadeISF2()",pause*1000)
}

function fadeISF2(){
running=1

opac1 -= fadeSpeed
opac2 += fadeSpeed

if("filters" in document.body && "alpha" in document.body.filters){
elOpic1.filters.alpha.opacity=opac1
elOpic2.filters.alpha.opacity=opac2
}
else{
elOpic1.style.opacity=(opac1/100)-0.001
elOpic2.style.opacity=(opac2/100)-0.001
}

if(opac1<=0||opac2<=0){

if(opac1<=0){elOpic1.src=images[nextPic][0]}
else{elOpic2.src=images[nextPic][0]}

nextPic++
if(nextPic==images.length){nextPic=0}

nextLink++
if(nextLink==images.length){nextLink=0}

fadeSpeed= -fadeSpeed

running=0
}

if(opac1>=100||opac2>=100){
lnkLoc=images[nextLink][1]
}

if(running==0){
setTimeout("fadeISF2()",pause*1000)
}
else{
setTimeout("fadeISF2()",50)
}

}

function isf2Link(){
if(running==1){return}
if(images[nextLink][1]){
//location=lnkLoc
newWin=window.open(lnkLoc,'lnk_win','left=200,top=200,width=615,height=440')
newWin.focus()
}
}

// add onload="initISF2()" to the opening BODY tag

//-->
//]]>
</script>
</head>

<!--FOR IE FADE EFFECT TO WORK PROPERLY IN IE-->
<!--[if IE]>
<style type="text/css">
#opic1{filter:alpha(opacity=100)}
#opic2{filter:alpha(opacity=0)}
</style>
<![endif]-->

<!--NOT SURE how I can get rid of this conditional IE code and integrate the changes into the regular CSS correctly!!! -->
<!--[if IE 6]>
<style type="text/css">
#mylink {
margin: 0;
}

/* lowers all content in IE??? */
body {
top: -32px;
}

#topmenu {
margin: 0 0 0 0;
display: block;
float: right;
position: absolute;
top: 100px;
}

#signature {
top: -45px;
}


#quicklook {
bottom: 20px;
}


#header h4 a span {
margin: -35px 0 0 0;
}
</style>

<![endif]-->
<body onload="initISF2()">
<div id="container">
<div id="mainlogo">
<h4><!--MAIN LOGO HERE, see CSS --></h4>
</div>
<div id="signature">
<h1><!-- Signature LOGO picture HERE, see CSS --></h1>
</div>
<div id="topmenu">
<ul>
<li><a href="mailto:email@email.com" title="Email" accesskey="c" target="_top">link 1</a></li>
<li><a href="about.html" title="About" accesskey="a" target="_top">link 2</a></li>
<li><a href="index_featured.html" title="About" accesskey="f" target="_top">link 3</a></li>
</ul>
</div>
<div id="portfoliospic"><h2><!--Portfolios picture HERE, see CSS --></h2></div>
<div id="categories">
<ul>
<li><a href="index1.html" title="category" accesskey="1" target="_top">category</a></li>
<li><a href="index2.html" title="category" accesskey="2" target="_top">category</a></li>
<li><a href="../index3.html" title="category" accesskey="3" target="_top">category</a></li>
<li><a href="../index4.html" title="category" accesskey="4" target="_top">category</a></li>
<li><a href="../index5.html" title="category" accesskey="5" target="_top">category</a></li>
<li><a href="../index6.html" title="category" accesskey="6" target="_top">category</a></li>
<li><a href="../index7.html" title="category" accesskey="7" target="_top">category</a></li>
<li><a href="../index8.html" title="category" accesskey="8" target="_top">category</a></li>
<li><a href="../index9.html" title="category" accesskey="9" target="_top">category</a></li>
<li><a href="../index10.html" title="category" accesskey="0" target="_top">category</a></li>
<li><a href="../index11.html" title="category" accesskey="q" target="_top">category</a></li>
<li><a href="../index12.html" title="category" accesskey="w" target="_top">category</a></li>
<li><a href="../index13.html" title="category" accesskey="e" target="_top">category</a></li>
<li><a href="../index14.html" title="category" accesskey="r" target="_top">category</a></li>
<li><a href="../index15.html" title="category" accesskey="t" target="_top">category</a></li>
<li><a href="../index16.html" title="category" accesskey="y" target="_top">category</a></li>
</ul>
</div>
<div id="mylink"><img id="opic1" src="pic01.jpg" alt="" name="opic1" /><img id="opic2" src="pic02.jpg" alt="" name="opic2" /><div id="quicklook">
<ul>
<li><a href="../index17.html" title="Quick Look" accesskey="l" target="_top">Quick Look</a></li>
</ul>
</div></div>
</div>
</body>
</html>


...and The CSS


/* CSS Document */



html {
background-color:#0000FF;
padding: 0;
margin: 0;
margin-top: -26px;


}

body {
background-color:#66FF00;
position: relative;
width: 980px;
height: 800px;
margin: 4% auto 5% auto;
border: 2px solid #339999;
}


p {
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
color:#593f25;
font-style:oblique;
padding-left: 1em;
margin: 0 0 35px 0;
letter-spacing: .1em;
}

#container {
width: 980px;
height: 800px;
margin: 0 auto 250px auto;
padding: 0;
}

#mainlogo {
background-color:#CC0000;
position: relative;
top: 10px;
width: 140px;
height: 170px;
margin: 5px 0 0 10px;
padding: 0 0 0 0;
}

#mainlogo h4 a span {
display: block;
width: 150px;
height: 140px;
background-color: #cc0000;
font-size: 1px;
padding: 50px 0 10px 0;
margin: -45px 0 0 0;
cursor:default;
}

#signature {
background-color:#CC0000;
width: 350px;
height: 28px;
position: relative;
top: 0;
left: 20px;
}

#signature h1{
width: 350px;
height: 28px;
position: relative;
top: 0;
left: 20px;
}


#categories {
position: relative;
left: 10px;
margin: -10px 0 0 0;
}


#categories ul{
display: block;
float: left;
margin: 0 0 0 5px;
}

#categories ul li {
text-align:left;
font-family:Arial, Helvetica, sans-serif;
font-size: .9em;
color:#333300;
letter-spacing: .9px;
line-height: 2.15em;
}

#categories ul li a:link {
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color:#333300;
}

#categories ul li a:visited {
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color:#339999;
}

#categories ul li a:hover {
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color:#339999;
}


#portfoliospic {
background-color:#CC0000;
width: 100px;
height: 21px;
display: block;
position: relative;
bottom: 9px;
left: 7px;

}

#portfoliospic h2 {
position: relative;
padding: 0 0 0 0;
width: 100px;
height: 21px;
margin: 0 0 0 0;
}


#topmenu {
width: 150px;
padding: 0 0 0 0;
display: block;
position: relative;
top: -130px;
left: 790px;

}

#topmenu ul li {
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
color:#333300;
line-height: 1.15em;


}

#topmenu ul li a:link {
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
text-decoration:none;
color: #339999;
}

#topmenu ul li a:visited {
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
text-decoration:none;
color:#333300;
}

#topmenu ul li a:hover {
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
text-decoration:none;
color:#333300;
}



#quicklook {
display: block;
width: 100px;
position: relative;
top: 441px;
left: 300px;
margin: 3% auto 0 auto;

}

#quicklook ul li {
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
text-decoration: none;
color:#333300;

}

#quicklook ul li a:link {
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
font-style:normal;
text-decoration:none;
color:#339999;
}

#quicklook ul li a:visited {
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
text-decoration:none;
color:#333300;
}

#quicklook ul li a:hover {
font-family:Arial, Helvetica, sans-serif;
font-size:.9em;
text-decoration:none;
color:#333300;
}



ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
font-style:normal;
}




#opic1, #opic2 {
position:absolute;
left:0px;
top:0px;
width:615px;
height: 440px;
background-color:#FFFFFF;
border:1px solid black;
cursor:pointer;
}

/*DIV for Javascript Firefox fading image effect I believe...but this part fails W3 CSS 2.1 validation....*/
#opic1{opacity:0.9}
#opic2{opacity:0}


#mylink {
position:relative;
left: 95px;
top: 10px;
width:615px;
height:440px;
overflow:visible;
float: left;
margin: 0;
padding: 0;

}

a:link {
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color: #669999;
}

a:visited {
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
color:#009933;
}

A:hover {
text-decoration:none;
color:#009933;
}


Thanks sooooooo much for any help!!!

brett007
08-03-2007, 01:08 PM
Where is the code / page

Wow that was amazingly fast...thanks....if you can help, I will seriously be in your debt! Thanks for taking a look at the very least!

- Brett

AndyArmstrong
08-03-2007, 01:09 PM
Can you provide a live URL so I can see what that code looks like!

brett007
08-03-2007, 01:12 PM
Can you provide a live URL so I can see what that code looks like!


The code doesn't render correctly as I included? No problem! Let me find my free host....I should have done this earlier! Just give me a few min please....and thanks again

brett007
08-03-2007, 01:17 PM
Here is a temp link: http://www.fastedm.com/homesample.html

Jutlander
08-03-2007, 01:24 PM
It renders exactly the same in that link as when I try it locally.

AndyArmstrong
08-03-2007, 01:36 PM
So i bumfed monitor to 1600x1200

and yes, the site sits nicely in the middle but doesnt stretch to fill the entire screen, which i think is what you want.

Try changing the body width and height in the css to a percentage - like 80% or something, this should adjust it for the size of the current resolution. You have it set to a specific px limit, which is why its not increasing!

brett007
08-03-2007, 01:54 PM
I tried this just now...80% width and height at 100%...these are the problems...


IE

Looks great SMALL, once large the BODy border also looks good, but extends way too far down....and most importantly none of the content in the page expands....so basically I get a fatter and too tall border.... :mad:

UGh,

FIREFOX

image floats over right side of border on BODY when at 1024 resolution, right side links also float outside of BODY border.....at 1280, it all looks good except it has version scroll bar and cannot see the bottom of BODy border...scrolling down it fine, but there is a ton of extra wasted space inside the BODY border down below....

at larger resolution the border looks better than the IE version, but it's still too high and the content inside is still not widening at all...only the BODY border is adjusting....

SIGH....is this layout hopeless? Thanks for sticking with me on this!

brett007
08-03-2007, 02:13 PM
added some clarity to IE remaining issues

AndyArmstrong
08-03-2007, 03:09 PM
No you are going to need to use the % throughout the whole site, so for each item in the css file you ae going to need to put in % as opposed to px and amend the value accordingly! This will then stretch every item!

brett007
08-03-2007, 09:17 PM
No you are going to need to use the % throughout the whole site, so for each item in the css file you ae going to need to put in % as opposed to px and amend the value accordingly! This will then stretch every item!

Thanks! I figured out that I only need to adjust WIDTH accordingly for each item I want stretched (to keep things horizontal and prevent elements from going out of alignment, etc...)

But I'm trying to figure out which DIVS in the body to change widths to % in order to stretch the content a bit and still maintain a 'centered look' that doesn't break the general alignment of everything....

Any tips based on the mentioned code is appreciated...

* update: These are now updated in my BODY setting:


body {
position: relative;
width: 70%;
min-width: 960px;

I had to set the min-width for Firefox to not clip the image at lower resolutions....

brett007
08-07-2007, 06:29 AM
I've received an update from my client on what the final page should look like....this is the approx image she sent me....edited for clarity on what some of my divs are.....although I'm open to suggestions

My challenge is to have this look the same in IE 6, 7 and FF....That's really a problem for me (being spanking new at this) and I'm just wondering if anyone has any tips based on the graphic included here or general advice at least on accomplishing this goal of uniformity (unfortunately I'm being rushed to complete the job so I really appreciate responses! Argh I need more time!)

Thanks!

AndyArmstrong
08-07-2007, 12:46 PM
if you add support@upsetpc.com to your msnlist,i can chat to you later about this as opposed to slow thread responses!

I will sort you out!

Andy

brett007
08-07-2007, 08:38 PM
if you add support@upsetpc.com to your msnlist,i can chat to you later about this as opposed to slow thread responses!

I will sort you out!

Andy

Andy, remarkably I've been able to get the code optimized and looking great overall! just squashing some bugs at this point, but doesn't look too hard anymore! I really appreciate the chance to learn with you though by your assistance...unfortunately I only have AIM (or myspace IM, lol) to chat with....I've taken the liberty to getting rid of MSN, etc...

Would you happen to have one of those options instead?

Regardless, thanks again for all the time you've put into helping me.

- Brett

AndyArmstrong
08-08-2007, 01:01 PM
I could get AIM i suppose, Iwill be back to you laster on today!

brett007
08-08-2007, 10:29 PM
A big fat NO THANKS to whoever left me a negative -15 point reputation (based on this thread)...this post is directed to you only. just because I'm not a super pro coder yet and I took on a job a little above my means to pull it off, doesn't mean I don't sincerely need or appreciate all the help...it's good to know there are people out there who don't believe in helping newbies in a forum full of pleas for help. Go figure.

Everyone should have a bad reputation attack then right? Or (to whoever you are:) do you have to be a pro to avoid such marks?? What a conundrum. LOL

Sorry if my need was so basic that you roll your eyes, but whoever you are, shouldn't you be on a different forum then or off building your own throne somewhere? This forum seems to be extremely helpful and I'm learning a lot here in spite of negative-nannies like you, so I truly appreciate (and learn from) every second spent spent by others on my issues...I have no desire and no ambition to always get a "free ride".

- Brett

brett007
08-08-2007, 10:42 PM
Thanks again AndyArmstrong, I'll be logged into AIM on and off all-day today, check your PM for details!


- Brett



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum