SitePoint Sponsor

User Tag List

Page 2 of 4 FirstFirst 1234 LastLast
Results 26 to 50 of 77
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I hope I have closed the <div> Everything appears to be as it should, hopefully I have to get more of the parts together so it comes together Although there is still one validation error !

    It's fixed in my code above

    Edit: Forgot to mention how come the hover on the words back(new news) the word should become blue upon hovering instead it's a grey/brown block ?
    I have fixed that also in my code above and it is in working order. Just cut and paste that code and test it and you will see it works.

    Aalthough you shouldn't really be swapping the whole header image just the relevant section. I moved the relevant part of the image into place using the background-position but unless you are going to use that same large image for multiple hovers then you should just make a small image the same size as the text that you need otherwise the delay will be too long.

  2. #27
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The validation error is due to the continuing presence of

    <a href="#"><div id="masterhome"></div></a>

    Why you need the div at all is a mystery to me. If the purpose of the element is to provide a link to your home page why not just use the anchor? If the div is intended to serve some other purpose please let us know.

    The grey background on the hovered nav link is due to the background image not being positioned correctly.

    #nav li.back a:hover {
    background-image:url(headerhover.jpg);
    background-position: 176px 786px; /* ADD THIS */
    }

    I'm curious as to what you plan "BACK (NEW NEWS)" to link to. "Back" usually indicates a link to the previous URL, so there's potential for confusion if you have something else in mind.

    UPDATE: Posted simultaneously with Paul. His suggestion for your nav hovers is better (naturally)

  3. #28
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Victorinox View Post
    I'm curious as to what you plan "BACK (NEW NEWS)" to link to. "Back" usually indicates a link to the previous URL, so there's potential for confusion if you have something else in mind.
    Yes that does seem a bit odd now you mention it

  4. #29
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Does anyone share my opinion that it would be profitable for the OP's design concept to be submitted to the Design Elements section of the forum?

  5. #30
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    That specific part could be in the Design elements, though it's completely up to the OP if he decides to have his design elements / page critiqued by these forums
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I think this is his rebuild after comments he received on his old site in the review section (if I'm not mistaken)

  7. #32
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Entirely up to the OP, of course, but I have a distinct feeling that the ratio of steps forward to back would be improved by the community having an overview of where the project is heading, which would benefit all concerned in terms of time expended and the OP particularly regarding structuring and planning techniques.

  8. #33
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've went over the code Paul posted bit-by-bit.

    The validation error is due to the continuing presence of

    <a href="#"><div id="masterhome"></div></a>

    Why you need the div at all is a mystery to me. If the purpose of the element is to provide a link to your home page why not just use the anchor? If the div is intended to serve some other purpose please let us know.

    The grey background on the hovered nav link is due to the background image not being positioned correctly.

    #nav li.back a:hover {
    background-image:url(headerhover.jpg);
    background-position: 176px 786px; /* ADD THIS */
    }

    I'm curious as to what you plan "BACK (NEW NEWS)" to link to. "Back" usually indicates a link to the previous URL, so there's potential for confusion if you have something else in mind.
    The Anchor does not have to be a <div> it will be a invisible link that hopefully will be found with ease The page validates but the Master Home link does not work. The background now is fixed, but I do have to align the images better although what Paul said here:

    Although you shouldn't really be swapping the whole header image just the relevant section. I moved the relevant part of the image into place using the background-position but unless you are going to use that same large image for multiple hovers then you should just make a small image the same size as the text that you need otherwise the delay will be too long.
    Should I take the text out of the graphic and then create a link or a <div> on top of the graphic ? It makes sense not to load the entire graphic I just don't know which step to take ?

    You don't like the way the page looks ? As Paul mentioned this is a rebuild I wanted to have something more unique to the name. The page is making progress thanks to some wonderful people helping me

  9. #34
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    I've went over the code Paul posted bit-by-bit.
    No you didn't you missed the important bit.

    The Anchor does not have to be a <div> it will be a invisible link that hopefully will be found with ease
    The anchor does need to be in a div as we can't have inline elements hanging around on their own.

    The page validates but the Master Home link does not work.
    Yes it does work in my version.

    I'm going to take you to task again I'm afraid (you knew this was coming didn't you?)

    I have probably given you this same answer nearly 4 times now in this same thread but you still have not followed my instructions.

    The masterhome anchor is working perfectly in the full code I posted earlier and in the snippets I gave you many times already.

    yet again you have taken only some of the code and left out the important bits.

    I gave you all this:

    Code:
    #masterhome {
        position: relative;
        top: 60px;
        left: 85px;
        width: 125px;
        height: 125px;
    }
    #masterhome a {
        display:block;
        width:125px;
        height:125px;
        background:red;/* just for testing*/
    }
    
    But you left out the part in bold and only used this:

    Code:
    #masterhome {
        position: relative;
        top: 60px;
        left: 85px;
        width: 125px;
        height: 125px;
    }
    Why did you do that?

    That means the anchor has no height and can't be clicked.

    PUT MY CODE BACK IN PLACE AND It WILL WORK.

    Should I take the text out of the graphic and then create a link or a <div> on top of the graphic ? It makes sense not to load the entire graphic I just don't know which step to take ?
    All you have to do is cut that text out of the original image and make it the same size as that anchor (142x25) and then change the background-position of the anchor to 0 0. You don't have to change anything else in the code as it is already in place but you do have to cut the image properly.

    You must try to help yourself a bit here as you are making silly mistakes along the way. I don't mind helping but I'm becoming exasperated here

  10. #35
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remember to Pin point exactly the thing to change or the style sheet, I usually am better at matching and fixing

    I'm going to fix and add the other parts at this stage You can take deep breath now Paul and have a Coffee Crisp (chocolate bar) And everyone else can enjoy a Kit Kat

  11. #36
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    You don't like the way the page looks ?
    Well, if you'd provided a mockup I'd be able to comment more usefully.
    Quote Originally Posted by SiberianHuskey View Post
    The page is making progress thanks to some wonderful people helping me
    I'm glad you're making progress. My previous point was that I believe there is a way for you to make faster and more effective progress.

    At this point I'm going to take heed of a remark you made when Paul was helping you finish your previous design last May:

    One of two things I learned it a) how to structure a page, even though I do like this page and it looks good and second, I let too many unskilled hands (not including you) touch my code or tell me things to do with it which caused this jigsaw puzzle which you got a little more organized.
    The lesson (as I see it) is that, with your particular way of working, the more people (skilled or unskilled) that pitch in the more likely it is that progress will be impeded by coding conflicts and confusion. You'd really benefit most from one to one support. Therefore, not being in a position to offer this, I'm going to bite into an extra-mega-super-jumbo size Kit Kat, subtract myself from the noise, and bow out. Good luck with your project.

  12. #37
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Vector don't feel like you haven't helped It's just that with too much input it tends to put me off balance, nothing personal everyone is unique in there own way. I'm sure most don't like having alot of people tell them what to do at the same time (at least I hope!!!,that last part has not relation to this thread but I wanted to bring it up cause we all have run into it )

    You're welcome to give your input

    I have not put the links in yet, reason I can't figure out how to put the transparent boxes that are in the style:.content_boxes behind each paragraph and based on the content the background graphic will scale or shrink based on what is being read from PHP ?

    I've also tried to position the graphic in the style:#sidebar to be behind the style:maincol but when I move it around in HTML the whole page goes wonky.

  13. #38
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by SiberianHuskey View Post
    You can take deep breath now Paul and have a Coffee Crisp (chocolate bar)
    Thanks, I can't resist chocolate

    I see you have fixed the anchor and the footer now.

    For your content boxes you will need to split the image into three.

    A top section about 389px x 25px

    A middle repeating section about 389px x 10px

    a base section about 389px x 25px.

    Then apply the images to a structure like this.

    <div class="content-top"></div> = top part of image

    <div class="content_boxes"> = repeating middle section of image

    <div class="content-base"></div> = bottom part of image to finish off the box.

    e.g.


    Code:
    <div class="content-top"></div>
    <div class="content_boxes">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio </p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio </p>
    </div>
    <div class="content-base"></div>

  14. #39
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul what do I style the ID and Classes with, I have uploaded an updated version there are just no images uploaded at this point and only one of the style sheets is within the code

  15. #40
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    You would need code roughly like this but of course the top and bottom heights should match the image that you cut.
    Code:
    .content-top,.content-base{
        width:389px;
        height:25px;
        background:url(images/content-top.jpg) no-repeat 0 0;
        overflow:hidden;
        clear:both;
        margin:.5em 0;
    }
    .content-base{background:url(images/content-base.jpg) no-repeat 0 0;}
    .content_boxes{
        width:389px;
        background:url(images/content-mid.jpg) repeat-y 0 0;
    }
    Last edited by Paul O'B; Feb 26, 2010 at 05:31. Reason: typo

  16. #41
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul the page went all wonky I honestly can't understand why but probably has to do with the order of the HTML, unless I'm wrong ?

  17. #42
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    There was a typo in my post #40 (I missed out the url part when I cut and pasted) but you seem to have the wrong images inserted in some places anyway.

    You also have the old content box image being repeated over the other images plus you introduced some extra typos n the css.

    I notice that you have wrapped all the text with the one repeating image and capped the whole lot off top and bottom.

    I though that you wanted multiple sections (as in your image) so you would need to wrap each paragraph or section in the structure I have given to get that effect.

    You will also need to make better images that the ones you have made for those boxes. You will either have to match the page background or you you will have to make them transparent. At present you seem to have made them on a white background which will not match the page and spoil the effect.

    Note that once again the outer element is smaller than the inner element and you need to remove the padding from the main content and extend the width by the same amount and then apply the padding to the inner elements otherwise there isn't enough room for the background images on those content boxes.

    e.g.
    Code:
    #content {
        width:440px;
        padding:70px 0 1px 0;
        text-align:left;
        float:left;
    }
    .content-top, .content-base {
        width:389px;
        height:25px;
        background:red url(http://www.thecreativesheep.ca/pagehome/images/Top-Content-Box.jpg) no-repeat 0 0;
        overflow:hidden;
        clear:both;
        margin:.5em 0 0 60px;
    }
    .content-base {
        background:url(http://www.thecreativesheep.ca/pagehome/images/Bottom-Content-Box.png) no-repeat 0 0;
        margin:0 0 .5em 60px;
    }
    .content_boxes {
        width:369px;
        background:url(http://www.thecreativesheep.ca/pagehome/images/Middle-Content-Box.jpg) repeat-y 0 0;
        margin:0 0 0 60px;
        padding:1px 10px;
    }
    Here is a complete revision again although the changes are too many to mention so you will need to copy this and save it locally and then run it while online to see what it looks like. If it looks like what you want then replace your code with mine in whole.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <!-- Meta -->
    <meta name="description" content="#">
    <meta name="keywords" content="#">
    <!-- CSS -->
    <link href="http://www.thecreativesheep.ca/pagehome/reset.css" rel="stylesheet" media="screen, projection" type="text/css">
    <link href="main.css" rel="stylesheet" media="screen, projection" type="text/css">
    <style type="text/css">
    body {
        line-height:1.2;
        background:#afabac url(http://www.thecreativesheep.ca/pagehome/images/bg.gif) repeat-x 0 0;
        font-size:13px;
        font-family:Arial, Helvetica, sans-serif;
        color:#333;
        text-align:center;
        padding:25px 0 20px;
    }
    #wrap {
        width:800px;
        margin:auto;
        text-align:left;
    }
    #maincol {
        width:800px;
        background: url(http://www.thecreativesheep.ca/pagehome/images/middle.gif) repeat-y 4px -200px;
    }
    #content {
        width:440px;
        padding:70px 0 1px 0;
        text-align:left;
        float:left;
    }
    .content-top, .content-base {
        width:389px;
        height:25px;
        background:red url(http://www.thecreativesheep.ca/pagehome/images/Top-Content-Box.jpg) no-repeat 0 0;
        overflow:hidden;
        clear:both;
        margin:.5em 0 0 60px;
    }
    .content-base {
        background:url(http://www.thecreativesheep.ca/pagehome/images/Bottom-Content-Box.png) no-repeat 0 0;
        margin:0 0 .5em 60px;
    }
    .content_boxes {
        width:369px;
        background:url(http://www.thecreativesheep.ca/pagehome/images/Middle-Content-Box.jpg) repeat-y 0 0;
        margin:0 0 0 60px;
        padding:1px 10px;
    }
    #content p {
        margin:0 0 1em;
        line-height:1.5;
    }
    .top, .base {
        background:url(http://www.thecreativesheep.ca/pagehome/images/top.gif) no-repeat 0 0;
        clear:both;
        width:520px;
        height:23px;
    }
    .base {
        background:url(http://www.thecreativesheep.ca/pagehome/images/base.gif) no-repeat 0 0;
        clear:both;
        width:525px;
        height:28px;
        margin: 0 0 0 20px;
    }
    .bg_sidebar {
        background-color: #3300FF;
        height: 250px;
        margin: 200px 0 0;
        width: 200px;
    }
    #sidebar {
        float: right;
        background:#f2f2f2;
        width:345px;
        height: 438px;
        margin-top:27px 0 0;
        background-image: url(http://www.thecreativesheep.ca/pagehome/images/Bio_Boxes_03.png);
    }
    #header {
        width:528px;
        height:236px;
        background: url(http://www.thecreativesheep.ca/pagehome/images/header2.jpg) no-repeat 0 0;
        position:relative;
    }
    #masterhome {
        position: relative;
        top: 60px;
        left: 85px;
        width: 125px;
        height: 125px;
    }
    #masterhome a {
        display: block;
        width: 125px;
        height: 125px;
    }
    ul#nav {
        position:absolute;
        top:180px;
        left:225px;
        margin:0;
        z-index:75;
    }
    #searchbox {
        background-image: url(http://www.thecreativesheep.ca/pagehome/images/searchbox.gif);
        height: 17px;
        width: 187px;
        z-index: 99;
        float: right;
        margin: 85px 47px 0 0;
        display: inline;
        clear: both;
    }
    #nav li, #nav li a {
        width:60px;
        height:25px;
        float:left;
        position:relative;
    }
    #nav li.about {
        width:70px;
        margin-top:-7px;
    }
    #nav li.about a {
        width:70px;
    }
    #nav li.back {
        width:130px;
        margin:-18px 0 0;
    }
    #nav li.basepage {
        width:130px;
        height:90px;
    }
    #nav li.basepage a {
        width: 100px;
        height:100px;
    }
    #nav li.back a {
        width:142px;
    }
    #nav li.back a:hover {
        background: green url(http://www.thecreativesheep.ca/pagehome/headerhover.jpg) -352px -162px;
    }
    #nav li a span {
        position:absolute;
        left:-99em;
        top:-999em
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
     .clearfix: {
     display:inline-block;
    }
    /* mac hide \*/
    * html .clearfix {
        height: 1&#37;;
    }
    .clearfix {
        display: block;
    }
    /* End hide */
    </style>
    <!--[if lte IE 7]>
    <link href="iecss.css" rel="stylesheet"  media="screen,projection" type="text/css">
    <![endif]-->
    <!--[if IE 8]>
    <link href="ie8.css" rel="stylesheet"  media="screen,projection" type="text/css">
    <![endif]-->
    <!--[if lt IE 7]>
    <script type="text/javascript" src="http://www.thecreativesheep.ca/pagehome/js/iehover.js"></script>
    <![endif]-->
    </head>
    <body id="home">
    <div id="wrap">
        <div id="header">
            <h1><span class="hide">WIP Creative Biology of animation</span></h1>
            <div id="masterhome"><a href="#"></a></div>
            <ul id="nav">
                <li class="home"><a href="#"><span>Home</span></a></li>
                <li class="about"><a href="#"><span>About Me</span></a></li>
                <li class="back"><a href="#"><span>Back(News news)</span></a></li>
                <li class="basepage"><a href="#"><span>BasePage</span></a></li>
            </ul>
            <div id="searchbox"></div>
        </div>
        <div id="maincol" class="clearfix">
            <div id="content">
                <div class="content-top"></div>
                <div class="content_boxes">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                </div>
                <div class="content-base"></div>
                <div class="content-top"></div>
                <div class="content_boxes">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                </div>
                <div class="content-base"></div>
                <div class="content-top"></div>
                <div class="content_boxes">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                </div>
                <div class="content-base"></div>
                <div class="content-top"></div>
                <div class="content_boxes">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                </div>
                <div class="content-base"></div>
                <div class="content-top"></div>
                <div class="content_boxes">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam arcu nibh, interdum sit amet pharetra non, dignissim at lorem. Aliquam erat volutpat. Sed dictum urna at odio eleifend ut fringilla augue fermentum. Sed magna tortor, mollis vel malesuada in, pulvinar eget mauris. Proin semper placerat augue id blandit. Praesent accumsan, diam gravida pulvinar venenatis, tortor ligula ultrices eros, ultricies congue metus risus vel erat. Etiam pulvinar, est nec posuere pulvinar, libero ante imperdiet felis, nec condimentum velit mauris non quam. Duis suscipit, nunc sed adipiscing vestibulum, augue turpis tincidunt nisl, in dapibus orci tortor id nisl. Ut mollis ornare interdum. Duis pellentesque ornare eros in elementum. Aliquam erat volutpat. Curabitur id diam sem, quis feugiat turpis. </p>
                </div>
                <div class="content-base"></div>
            </div>
            <div id="sidebar">
                <div class="bg_sidebar">
                    <p>Sidecolumn</p>
                    <p>Sidecolumn</p>
                    <p>Sidecolumn</p>
                    <p>Sidecolumn</p>
                    <p>Sidecolumn</p>
                </div>
            </div>
        </div>
        <div class="base"></div>
    </div>
    </body>
    </html>

  18. #43
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The page link has been updated here, I see that I'm going to have to remove the drop shadow from the boxes as the blur from the shadow looked nice on the photoshop mock-up but doesn't exchange well when put in code.

    There is a space between each box, and a white border edge, do you know what is causing this, Is it my slice ? I had cut the image as close to precision as possible and the top mock up text is not within the box and for some reason the width of the content boxes gets cut off yet the width is 389 px the exact image of the content box. And the text must fit within the content boxes based on how much or how little the content boxes will shrink or expand to whatever size is necessary, but from my information this can't be done alone with CSS.

  19. #44
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    I think I answered all your questions in my previous post

    I'd only be repeating myself nearly word for word here.

    I'll repeat this though:

    Quote Originally Posted by me
    You also have the old content box image being repeated
    Not only that you are modifying the size to 300px and therefore it is too small.

    Code:
    .content_boxes {
    background-image:url(images/content_box_03.png);
    overflow:hidden;
    width:300px;
    
    
    }
    That whole rule is a duplicate and should be removed.

    Other issues were addressed in my previous post so refer to that.

  20. #45
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I did and checked each style and almost each line of HTML. If you take a look at this image you'll see I have circled the problem areas or what is not going right. And I can't honestly pin point what could be causing this, the code the image ?

  21. #46
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Look at my previous post as to why the image isn't fitting in the boxes.

  22. #47
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    here's another clue:
    Code:
    #content {
        width:440px;
        padding:70px 0px 1px 0px;
        text-align:left;
        float:left;
    }
    .content-top, .content-base {
        width:389px;
        height:25px;
        background:url(http://www.thecreativesheep.ca/page_adjust/images/Top-Content-Box.jpg) no-repeat 0 0;
        overflow:hidden;
        clear:both;
        margin:.5em 0 0 60px;
    }
    .content-base {
        background:url(http://www.thecreativesheep.ca/page_adjust/images/Bottom-Content-Box.png) no-repeat 0 0;
        margin:0 0 .5em 60px;
    }
    .content_boxes {
        width:369px;
        background:url(http://www.thecreativesheep.ca/page_adjust/images/Middle-Content-Box.jpg) repeat-y 0 0;
        margin:0 0 0 60px;
        padding:1px 10px;
    }
    /*
    * html #content {
        height:400px
    }
    */
    
    /*....remove this block ...
    .content_boxes {
        background-image:url(images/content_box_03.png);
        overflow:hidden;
        width:300px;
    }
    */
    
    
    
    #content p {
        margin:0 0 1em;
        line-height:1.5;
    }

  23. #48
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't understand why the background images for the content are not loading up ? They are 24-bit PNG images and why there still persists that white space ? And why the top paragraph content is not aligned.

  24. #49
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,803
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    The content is misplaced because you have a missing quote here after "content-top" that I have put back in about 5 times now.

    Code:
    </div>
        <div id="maincol" class="clearfix">
            <div id="content">
                <div class="content-top"></div>
                 <div class="content_boxes">
    There is no image called this:

    http://www.thecreativesheep.ca/page_...ontent-mid.jpg

    I believe it should be this:

    http://www.thecreativesheep.ca/page_...ontent-Box.jpg

    You have the wrong path and still a missing url.

    .content-top, .content-base {
    width:389px;
    height:25px;
    background: url(http://www.thecreativesheep.ca/page_...ontent-Box.jpg) no-repeat 0 0;
    overflow:hidden;
    clear:both;
    margin:.5em 0 0 60px;
    }
    .content-base {
    background: url(http://www.thecreativesheep.ca/page_...ontent-Box.png) no-repeat 0 0;
    margin: 0 0 .5em 60px;
    }
    .content_boxes {
    width:369px;
    overflow: hidden;
    background:url(http://www.thecreativesheep.ca/page_...ontent-Box.jpg) repeat-y 0 0;
    margin: 0 0 0 60px;
    padding: 1px 10px;
    }
    Type carefully and check your code.

    You still need better images for those shadows. Either match the background paper or use transparent shadows.

  25. #50
    Non-Member
    Join Date
    Jan 2008
    Location
    N43 44.4824', W079 13.9408
    Posts
    2,220
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ohhh, now I have it fixed (I hope)

    I now see what you mean, after the coding was fixed the content box problem dawned on me There is white showing in the background I'm going to take a look at the image it could be because it was saved in JPEG/GIF that is causing it.

    Alright, how do I get Style-ID:SideBar to have it placed behind the Style-ID:MainCol the entire image will be see but parts will fall behind it, and how come since it is a PNG-24 FireFox is not showing the transparency for that image ?


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
  •