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.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    CSS Header Layout Issue

    I'm designing my first site in CSS from scratch and I'm having some issues with the navigation and an issue with the link for the logo. The site is:

    http://www.thecarpenterdesigngroup.com/index.html

    You can see that if you click the logo, which doubles as a link to the index page, that the dotted border around the link extends off the page. It's also covering over the two text links below it (which I'm trying to use the background image / text-indent: -9999px method to replace it with a single png). You can even see a small piece of the png peaking through below but its 770 x 22 which also further my belief that something is going on off screen to the left .

    Also the white box (which I'm going to swap out, leaving it white for easy viewing) is off by a few pixels, again to the left, and I'm not sure why that is happening either.

    I'm new to this and lost, if I need to provide any more clarification please let me know. Any and all help provided is greatly appreciated.

  • #2
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    When you click on a link, browsers by default create a border around the link container, which in your case means that the container's width stretches to the left.

    As for your other problems, look in your css for the div#branding and take a look at the padding. You specified:
    Code:
    	padding: padding-top 50px;
    as an attribute. It is incorrect syntax, which is part of your problem, I don't have time for much else right now, I'll look later when I have more time.

    Edit: do you want it to overlap some? or was that a complete design flaw?
    Last edited by Blue_Jeans; 09-28-2007 at 12:04 AM.

  • #3
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Blue_Jeans View Post
    When you click on a link, browsers by default create a border around the link container, which in your case means that the container's width stretches to the left.

    As for your other problems, look in your css for the div#branding and take a look at the padding. You specified:
    Code:
    	padding: padding-top 50px;
    as an attribute. It is incorrect syntax, which is part of your problem, I don't have time for much else right now, I'll look later when I have more time.

    Edit: do you want it to overlap some? or was that a complete design flaw?

    First and foremost thank you for taking the time to help me out.

    I removed the padding-top 50px and uploaded the appropriate changes. Looking back on it, it was incorrect syntax to have that in there, thank you.

    as for div#branding which NOW contains:

    /* ----- CONTAINER -----*/
    div#container
    {
    margin:0 auto;
    width: 770px;
    text-align:center;
    /* IE Box Model Hack */
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 770px; }


    I edited the original width and the width under the box model hack FROM 825 to the 770 that you now see, yet nothing has changed in terms of the link still throwing everything out to the left. For the 4 div's I have under my /* HEADER */ all of the paddings are set to 0. Do I need to increase the left padding on one of these to "bump" the logo into place?

    Also any input on the buttons is appreciated. Again it's an appx. 770 x 22 png, yet all thats there is what you see.

    Thanks again for the insight.

  • #4
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    Hmm... I know this is your design, but I'm going to redo it from scratch with what I can see. I know a few tricks, I'll comment them so you can learn, give me a while and I'll see what I can do. I'm not sure what's going on, so if I recreate it element by element, I can probably find it.

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    Listen, man, I don't mean to offend you, please take this as pure honesty meant for your good, okay? Your site isn't going anywhere, here's why:

    • It looks old. I gather that carpenter design is for the web, and no one will hire a web developer who's stuff looks old-school. If it has old-school elements done in modern ways (kind of hard to explain), then that's fine.
    • You are using images for navigation, but the images aren't very complex and again, not modern. You might as well style the text using CSS, it will load faster, look better, be changed easier, and it's a lot less work.
    • You are using way too many images. The logo, background and coat of arms are fine, but try not to use any more images. You should only have a few images for your layout. You've tried to optimize some, like your navigation images, but it's just not practical for what you want to use it for.


    It's not all bad, don't get me wrong. You can keep the background image, that's great. The coat of arms is fine as well. But the rest needs totally reworked, especially the carpenter design group text. There isn't any anti-aliasing in it, it's hard yellow against hard black with a shadow. It doesn't makes sense to do that. I don't have the time to show you how you could do it.

    You've got the right kind of idea, you just need re-think it. Also, using blockquote for things other than quotes or for displaying code is a bad idea. Try to make your id names more descriptive, nm_1 means nothing. You might come back after a while and not know what the heck you were meaning. In your case, I would probably name them "home" "portfolio" "services" etc, but you won't even need id's if you use text-base navigation, and almost every web developer will tell you to stick to text.

    Also, I don't think you know what the float element is. You've absolutely positioned your navigation so that it is side by side. If you display elements as block, and give them a float: left, they will float left, just be sure to use the clear: left; on the next element. Here's a quick example with a little bit of style to get you down the road:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>List Example</title>
    <style type="text/css">
    <!--
    li {
    	display:block;
    	float: left;
    	padding:0;
    	margin: 0;
    }
    a:link, a:visited {
    	background: #900;
    	color: #fff;
    	padding: 4px 10px;
    	text-decoration: none;
    	font: bold 12px/24px Arial, Helvetica, sans-serif;
    	border: 1px solid #000;
    }
    a:hover, a:active {
    	background-color: #b00;
    }
    .clear {
    	clear: left;
    }
    -->
    </style>
    </head>
    <body>
    <ul>
    	<li><a href="index.html">Home</a></li>
    	<li><a href="services.html">Services</a></li>
    	<li><a href="portfolio.html">Portfolio</a></li>
    	<li><a href="contact.html">Contact</a></li>
    	<li><a href="testimonials.html">Testimonials</a></li>
    </ul>
    <div class="clear"></div>
    </body>
    </html>
    See it in action
    Or, for lists, there is specifically an attribute display:inline, which does the same thing as display: block; float: left; except it has some advantages/disadvantages which I won't go into. Generally use float.

    If you want me to help some more, send me a pm.
    Last edited by Blue_Jeans; 09-28-2007 at 02:41 AM.

  • Users who have thanked Blue_Jeans for this post:

    lifetime (09-28-2007)

  • #6
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've gotten the code a little farther along. The first button lines up correctly but its not active when I mouse over. Also lining up the second button is proving to be impossible.

    I should also mention that my menu is one large is one large .png and I'm using positioning to give it the effect of multiple images.

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    58
    Thanks
    2
    Thanked 6 Times in 6 Posts
    I already knew that, mate. I've got some stuff figured out, but I'll post it all when I get closer.


  •  

    Posting Permissions

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