SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 30 of 30
  1. #26
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I am rewriting everything but since my CSS coding skills are still not very good, I am stuck. There are many elements that I am fighting with. The top has the logo to the left and an image to the right. Each page has a different right image. Without using position:relative how do I get this to work? I have thought about just doing a different heading for each page using the different images for each page heading but that is probably the easy way out. I have uploaded all I have so far to www.foxdenwebsolutions.com/artform/index1.html and http://www.foxdenwebsolutions.com/ar...ss/artform.css. This has to look exactly like http://artformsigns.com.

  2. #27
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ok things are coming along. I am still having trouble with the top right image. On Firefox it is a couple of pixels over from the right edge but on IE8 it fits perfectly. How can I fix this? Also there is supposed to be a gray bar below the nav bar. I have the code on the index and CSS page but it is not showing up. I have the bottom gray bar ok. Code has been uploaded to the same link as above.

  3. #28
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    OK, I came in to this thread late. And it does sound like a mess, but i think I have an answer as tho what you WANT to do ( though I am not sure if it is what you should do). This, I gathered from your original post...

    <div id="page 1 or 2 or 3, etc">
    if he has it set up that way. you could copy-paste all CSS all document into one document. Before you do that however, add "#page1" or 2 or 3, etc... in front of each rule.
    So it would be: .nav ul{} to #page1 .nav ul.


    you can even save a div, and remove <div id="page 1 or 2 or 3, etc">, and simply use <body id="page 1 or 2 or 3, etc">.

    Now as to why you SHOULD put the effort into manually concatenating all rules:
    What I described above is a very quick an accurate solution, but does not address the bandwidth issue. The first page load will be loading the style sheet for all 13 pages, all at once even if the user never hits but one or two of the pages in the site. Another thing I personally hate is to have to scroll though massive style sheets to find one rule... you and you will have made a 13x long style sheet.

  4. #29
    SitePoint Evangelist cgacfox's Avatar
    Join Date
    Feb 2005
    Location
    Colorful Colorado
    Posts
    412
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dresden but what I am actually doing is rewriting all the CSS. That way I can not have to depend on so many position: relative coding.

    I spoke with the client today and she doesn't mind the "content" section of the site to be changed around. I was thinking about doing 2 or 3 columns on the "content part" to space things out properly.

    I have already redone the menu bar to a Sprite menu bar and it seems to be working ok.

    I just can't figure out why the top right image won't line up properly and am considering making the top section all one header image with the different right images for each page header.

  5. #30
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cgacfox View Post
    I just can't figure out why the top right image won't line up properly and am considering making the top section all one header image with the different right images for each page header.
    Hi,
    Your getting caught up in the same layout methods used in the original site.

    The reason the right image won't line up is because you have absolute positioned it and the containing-block is the body element. It could have been fixed by setting position:relative; on the #container to establish it as the containing block.

    You will be better off though by just floating both the #logo and the #indextopimage. Then clear those two floats on the #navbg.

    Have a look through the FAQ to learn more about floats.
    Code:
    #logo {
        float:left;
        width:100px;
        height:132px;
        margin-left: 65px;
        display:inline;/*IE6 margin bug*/
        background: url(/../images/artlogo.gif) no-repeat;
    }
    #indextopimage {
        float:right;
        width:500px;
        height:132px;
        background: url(../images/topimgindex.jpg) no-repeat;
    }
    #navbg {
        clear:both;
        width: 945px;
        height:24px;
        background-image: url(../images/redbar.gif);
        background-repeat: repeat-x;
    }


Bookmarks

Posting Permissions

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