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 19
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Begging the help of a CSS pro...layout in crises, deadline coming! Argh!

    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!)
    Last edited by brett007; 08-03-2007 at 12:07 PM.

  • #2
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Where is the code / page

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    The Code

    The HTML for the above problem:

    Code:
    <!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

    Code:
    /* 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!!!

  • #4
    New Coder
    Join Date
    Apr 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    Quote Originally Posted by AndyArmstrong View Post
    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

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you provide a live URL so I can see what that code looks like!

  • #6
    New Coder
    Join Date
    Apr 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndyArmstrong View Post
    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

  • #7
    New Coder
    Join Date
    Apr 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

  • #8
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    It renders exactly the same in that link as when I try it locally.
    .
    .

  • #9
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #10
    New Coder
    Join Date
    Apr 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....

    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!

  • #11
    New Coder
    Join Date
    Apr 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    added some clarity to IE remaining issues

  • #12
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #13
    New Coder
    Join Date
    Apr 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by AndyArmstrong View Post
    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:

    Code:
    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....
    Last edited by brett007; 08-04-2007 at 06:14 AM.

  • #14
    New Coder
    Join Date
    Apr 2006
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Graphic of layout needed

    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!
    Attached Thumbnails Attached Thumbnails Begging the help of a CSS pro...layout in crises, deadline coming! Argh!-home_p_publicsample.jpg  

  • #15
    Regular Coder
    Join Date
    Jun 2007
    Posts
    145
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  
    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
    •