site: www.jonpaulwild.co.uk

 

Using temp text and images to show you guys the problem I'm having.

 

I have a huge positioning problem with various text not being in the correct position at all.

 

The '24/7hotline' and the email address (aware it's not a link but that's fine at the moment) need to be next to the test logo, actually about 50 pixels to the right of the logo. The email address is intented to be below the '24/7 hotline' text.

 

The white 'about the company' text should be in the middle of the green label thing, and the rest of the paragraps should be, obviously, be a little bit further down the page.

 

How can I describe this. The top bit of the centred content that contains the green label is one big image and should actually be further up the page a little, so the background in that image meets up with the background of the main site.

 

Hope people can understand that, and any help is greatly appreciated. If viewing the code I've used you think I could do with additional tips or hacks, that advice is welcomed.

 

Thanks

 

@charset "utf-8";
/* Start Misc*/
* { margin: 0; padding: 0; }
html {font-family: Arial, Helvetica, sans-serif; font-size: 13px;}
body {background-color: #333333}
p, h1, h2 {line-height: 18px}
img {border: 0}
/* End Misc */
#wrapper {margin: 0 auto; position: relative; width: 100%;}
/* Begin Header */
#headerwrapper {height: 100px; background-color: white;}
#headerinner{margin: 0 auto; background-color: none; width:740px; height: 100px}
#headerinner img {float: left; width: 400px; height: 82px; margin-top: 12px; margin-left: -45px}
#headerinner p.phone {width: 400px;top: 30px; color: green; font-weight: bold; font-size:24px; font-style:italic; position:relative; left: 30px;}
#headerinner p.mail {width: 400px; top: 40px; color: purple; font-weight: bold; font-size: 14px; font-style:italic; position:relative; left: 30px}
/* End Header */
#prinav {background-color:#006633; background-image:url(Images/prinavbg.jpg); background-repeat:repeat-x; height: 43px;}
/* Begin Secondary Navigation */
#secnav {background-image:url(Images/secnavbg.jpg); background-repeat:repeat-x; background-color: #FFCC00; height: 24px;}
#secnav ul {margin: 0 auto; width: 600px; text-align: center; height: 24px; background-color: transparant; padding-top: 2px}
#secnav li {display:inline; padding-left: 30px; padding-right: 30px; font-size:16px; font-family:Arial, Helvetica, sans-serif;}
#secnav li a {text-decoration: none; color: #3f3f3f}
#secnav li a:visited {color: #3f3f3f;}
#secnav li a:hover {color: blue; text-decoration:underline}
#secnav li a:active {color: red;}
#secnav li a.selected {color: white}
/* End Secondary Navigation */
/* Begin Content */
#contentwrapper{height: 800px; background-image:url(Images/contentbg.jpg); background-repeat:repeat-x; background-position:top;  background-color: #ececec; padding-top: 1px}
#contentpage{margin: 0 auto; width: 740px; background-image:url(Images/contenttop.jpg); background-position: top; background-color: #ececec; background-repeat: no-repeat; background-attachment:scroll; height: 300px}
#contentpage h1 {margin-left: -470px; margin-top:55px; color: white; font-size:17px; font-family:Arial, Helvetica, sans-serif; text-align:center}
#contentinner {float:left; width: 700px; margin-left: 19px; margin-top: 40px; background-color: none; height: 400px; text-align:left; overflow:visible}
#contentinner h2 {color: #367706; font-size: 15px; font-weight: normal; margin-bottom: 25px}
#contentinner p {color: #413d3d; font-size:13px; margin-top: 15px;}
/* End Content */
#footer {clear: both; height: 100px; background-image:url(Images/footer.jpg); background-repeat: repeat-x; background-position:top; background-color: #1d1d1d}

 

Xhtml 1.1:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About the Company</title>
<link href="master.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper"><!-- Beginwrapper -->
<div id="headerwrapper">
<div id="headerinner">
<img src="images/logotwo.jpg" alt="logo" />
<p class="phone">24/7 Hotline: 1111 111 1111</p>
<p class="mail">E-Mail: enquiries@testsite.co.uk</p>
</div><!-- end headerinner -->
</div><!-- end headerwrapper -->
<div id="prinav"></div>
<div id="secnav">
<ul>
<li><a href="/who.html">About the Company</a></li>
<li><a href="/clients.html">Our Customers</a></li>
<li><a href="/questions.html">Your Questions</a></li>
</ul>
</div>
<div id="contentwrapper">
<div id="contentpage">
<h1>About the Company</h1>
<div id="contentinner">
<h2> Proin vitae erat odio, vel sollicitudin augue. Suspendisse lectus ligula, fringilla sit amet rhoncus in, imperdiet et neque. Praesent sem nisl, vestibulum a dictum nec, ullamcorper ac libero. In luctus viverra laoreet. Pellentesque et enim non mi iaculis euismod eget in tortor. Maecenas sodales lacus vel lectus placerat a laoreet turpis rhoncus.  </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent venenatis dictum erat at porta. Donec in turpis risus. Suspendisse commodo tempor leo pretium lobortis. Nulla porttitor, mi at euismod placerat, est leo laoreet mi, vel mattis enim elit sit amet eros. Aliquam erat volutpat. Sed eleifend nibh nec elit ullamcorper ornare. Aenean molestie faucibus orci, eget congue libero lobortis eu. Proin vehicula lectus id nunc semper molestie. Aenean dui nisi, feugiat vel blandit id, scelerisque ac ante. Proin adipiscing nibh quis risus scelerisque at venenatis sem porta. Ut sed elit augue. Aliquam viverra purus quis nisl rhoncus ac consectetur ligula auctor. Duis volutpat venenatis iaculis. Vivamus laoreet facilisis semper. Aliquam erat volutpat. Sed a malesuada ipsum. Maecenas consectetur, arcu eget fermentum venenatis, enim eros scelerisque lectus, in accumsan nunc eros at velit. Quisque at arcu ac mi imperdiet consequat eu ut ipsum. Integer porta sollicitudin dui, fermentum pharetra nisi semper id. Nunc placerat eleifend orci convallis fermentum. </p>
<p>Quisque et urna nulla. Aliquam facilisis risus eu risus dictum nec sagittis metus suscipit. Proin vitae erat odio, vel sollicitudin augue. Suspendisse lectus ligula, fringilla sit amet rhoncus in, imperdiet et neque. Praesent sem nisl, vestibulum a dictum nec, ullamcorper ac libero. In luctus viverra laoreet. Pellentesque et enim non mi iaculis euismod eget in tortor. Maecenas sodales lacus vel lectus placerat a laoreet turpis rhoncus. Donec a orci elementum libero dapibus mattis. Ut fermentum tellus non est cursus ornare. Integer turpis enim, facilisis ac sodales in, sagittis ac odio. Ut nec vulputate mauris. Etiam at odio ipsum, vitae viverra diam. In hac habitasse platea dictumst. Aliquam blandit, est in imperdiet ultrices, orci urna dictum arcu, sed consectetur sem nibh id tellus. </p>
<p>Mauris elementum eleifend dictum. Proin sit amet est nibh. Aenean nunc eros, eleifend at blandit sed, consectetur id nibh. Curabitur ac libero nec ipsum dignissim consequat eget vel neque. Fusce bibendum arcu vitae nulla porttitor eu ullamcorper arcu laoreet. Nam feugiat imperdiet felis, eget sagittis purus sodales id. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc eu ligula a erat pretium aliquam. Donec in magna eros, eu tempus ante. Nulla volutpat erat ut tortor rutrum egestas. Cras dolor nibh, rutrum nec tincidunt cursus, dignissim sit amet justo. Phasellus adipiscing euismod enim eu dapibus.</p>
<p>Quisque et urna nulla. Aliquam facilisis risus eu risus dictum nec sagittis metus suscipit. Proin vitae erat odio, vel sollicitudin augue. Suspendisse lectus ligula, fringilla sit amet rhoncus in, imperdiet et neque. Praesent sem nisl, vestibulum a dictum nec, ullamcorper ac libero. In luctus viverra laoreet. Pellentesque et enim non mi iaculis euismod eget in tortor. Maecenas sodales lacus vel lectus placerat a laoreet turpis rhoncus. Donec a orci elementum libero dapibus mattis. Ut fermentum tellus non est cursus ornare. Integer turpis enim, facilisis ac sodales in, sagittis ac odio. Ut nec vulputate mauris. Etiam at odio ipsum, vitae viverra diam. In hac habitasse platea dictumst. Aliquam blandit, est in imperdiet ultrices, orci urna dictum arcu, sed consectetur sem nibh id tellus. </p>
</div><!--end contentinner -->
</div><!--end contentpage -->
</div><!--end content wrapper -->
<div id="footer"></div><!--end footer -->
</div><!--end wrapper -->
</body>
</html>

have a look at your #contentpage div,

that's what your wrapper should be doing to all of the content. Giving a wrapper a width of 100% means it is the same size as the body, so it's not really doing anything.

 

Give it a width of about 960px (or your preferred width), and centre it in the same way as your #contentpage.

 

Once you have your wrapper in place then you can start positioning the contents with more control.

 

 

You are using position:relative; a lot, you shouldn't be.

 

In a site like this you shouldn't really need to declare position at all (your #content page div does fine without a declared position). Use margins and floats to position your divs instead.

 

To get your phone number nicely in the head, get your wrapper sorted and add float:right; to .phone, then use margins to fine tune it's position.

 

Also you need to add semi colons to the end of a few of your CSS rules as they are sometimes missing.

 

Stevo

Thank you for your reply. I have made changes to the code, and the header seems to be working, but not the content.

 

*EDIT*

 

Okay I think the content text is in the correct position, but the big image with the green label is further down than it should be - it should be just below the secondary navigation bar.

 

Not sure how to solve it though.

This is a common problem. Your #contentwrapper has no padding below and your #contentpage has no top margin or padding but #contentpage h1 has margin-top: 55px; to put the text in the correct place but it drags down the green image box too.

 

Edit margin-top to padding-top because background-images do show in padding but not in margin:-

#contentpage h1 {margin-left: 10px; width: 200px; margin-top:0;/* was

55px; */ padding-top: 55px; color: white; font-size:17px;

font-family:Arial, Helvetica, sans-serif; text-align:center;}

Thank you for your help. Everything looks better - needs a little tweaking with text, but that will be easy.

 

I do have one more question though to do with CSS and positioning.

 

The footer is obviously intended to be at the bottom, and in the image there is actually a line a couple of pixels thick, but that isn't showing? I wonder why? I

 

Finally, I need to deal with the heights of the page content. Obviously, I'm going to have quite a few pages using the same layout but obviously the amount of text will differ. Some could be quite long, others could be quite short - a couple of paragraphs. I don't want to scroll bar putting in the content itself, so was wondering what height properties or other properties to set in the CSS.

 

I think at moment I've given the relevant sections a pixel height, but I don't think that's suitable due to pages with small content will look huge when they shouldn't.

looking better!

The footer is obviously intended to be at the bottom, and in the image there is actually a line a couple of pixels thick, but that isn't showing? I wonder why?

you've spelt the file path Images instead of images, they are case sensitive I think. Also I don't think you need to add background-attachment:scroll; it should automatically sit where you want it.

 

I'll make those changes soon. Can you help with the other point regarding heights. That's something I've never done with these kinda of layouts.

I tend to set the height to auto, or even leave it unset (I think it defaults to auto), then just add padding on the bottom so they stack up with a nice gap between each one.