Help with layout

Here is my site:

http://bluebelle-beauty.com

I am wanting to have this image:

Or something very similar to hold all of my site content.

What is the best way of doing this?

Excellent article on rounded corners.

There are a couple of ways to do this. The easiest was is to use CSS3, using the border-radius properties and the box-shadow properties to recreate the image you posted. Here’s a really good site with some CSS3 tutorials.

There are also a couple of JavaScript techniques to replicate the shadow and rounded corners, or you could use several images to recreate the effect; if you Google “Rounded corners html” you should come up with a couple of tutorials.

I infinitely prefer the CSS3 method, but it’s not completely cross-browser compatible, so it all depends on your design needs.

-JBird

Am I right in thinking that the rounded corners will not show up on IE browsers?

It won’t in 6/7/8, but it will in IE9. So a fallback image or JS script for rounded corners might be best.

Would something like this be any good?

http://www.roundedcornr.com/

I’ve used that one before, it’s one of the better tools out there. You would still need to figure out a way to add the box-shadow (which IE 6/7/8 doesn’t support), but for the rounded corners, that’s one of the better solutions.

Im debating wheter to just use the image file I created to be honest.

Only thing is that is I do this will I need to split it and include <span> in order for it to continue to flow further down the page should I require it?

As long as it’s always a fixed-width, all you’d need to do is create a span across the top and bottom of the div. Check out the code generated by the roundedcornr.com site to see an example of what you’d need to do (they use divs instead of spans, but either one would work).

Pendragon - thanks for the advice. Im still struggline. You can probably tell Im a complete novice embarking on my first website!!

Im really struggling to get the background image into my site.

I dont know if its because of IE not allowing me to preview it correctly or what but it is giving me a real head ache.

I have split the image into corners using photoshop so each file s saved as Background1/2/3/4.png

I will always want the background to be the same width, it doesnt necessarily need to be expandable but I thought this woukd help in the future should I need it?

Also as you can probably see with my navigation I have added - I would like to use image replacement to change them to “buttons”. Is the gilder/levin method still the best for this?

You’ve got some extra code in your source - I’m going to help you out here :slight_smile:

Code:

<div id="pageWrapper"> 
   <div class="roundedcornr_top"><div></div></div> 
  
 
	<div id="header"> 
	<h1><span><!-- image replacement --></span>Bluebelle <small>Nail Bar &amp; Beauty Studio</small></h1> 
    </div> 
	
	<ul id="nav"> 
		<li><a href="index.html">Home</a></li> 
		<li><a href="about.html">About Us</a></li> 
		<li><a href="treatments.html">Treatments</a></li> 
		<li><a href="parties.html">Pamper Parties</a></li> 
		<li><a href="special.html">Special Offers</a></li> 
		<li><a href="contact.html">Contact Us</a></li> 
	</ul> 
	
	<img src="images/shop_03.png" width="398" height="267"
alt="images/Bluebelle Shop Front"/> 
 
  <h2> Welcome to Bluebelle</h2> 
	<p>Relax and unwind at Bluebelle Nail Bar &amp; Beauty Studio based in Crofton near Wakefield, West Yorkshire. Offering over 60 Individual treatments....</p> 
    
    <h2> Special Offers </h2> 
    <p> Slideshow with special offers </p> 
	
   <div class="roundedcornr_bottom"><div></div></div>
<!-- #pageWrapper --></div>  

.roundedcornr_top div {
   background: url(Background1.jpg) no-repeat top left;
}
.roundedcornr_top {
   background: url(Background2.jpg) no-repeat top right;
}
.roundedcornr_bottom div {
   background: url(Background3.jpg) no-repeat bottom left;
}
.roundedcornr_bottom {
   background: url(Background4.jpg) no-repeat bottom right;
}

.roundedcornr_top div, .roundedcornr_top, 
.roundedcornr_bottom div, .roundedcornr_bottom {
   width: 100%;
   height: 30px;
   font-size: 1px;
}

Okay, what I did was I removed some extraneous tags that were probably confusing the browser. You’ll also want to watch where your tags open and close (you want to make sure you don’t have tags closing before the tags inside them are closed, eg <div class=“first”><p></div></p> needs to be <div class=“first”><p></p></div>).

You may need to modify the CSS code to suit your image sources and class names, but give that a try and see where you get.

Thanks for that! Still having no joy unfortunatley!!!

Could it be because I am using .png files instead of .jpeg?

Also what is the best way of centering items?

Im wanting to centre my logo and the IMG that I have already. I understand that <center> is not recommended!

Are we viewing this in your online index.html? There’s markup for rounded corners but no CSS.

To put the logo in the centre, use margin:0 auto; on #header:

#header {
    height: 156px;
    margin: 0 auto;
    position: relative;
    width: 344px;
}

For the shopfront image, you could set up a class and apply it to the img element. margin value of auto on left and right does the centering but as img elements are inline by default and do not take a margin, display:block needs to be applied also.

.center {
    margin:0 auto;
    display:block;
}

<img class="center" height="267" width="398" alt="images/Bluebelle Shop Front" src="images/shop_03.png">

I have not yet uploaded this part - I will do it now.

I am so grateful for all your advice. Am I right it thinking then that to center an image i need to add margin: 0 auto; to any css in order to do that?

Im sorry if my questions are basic - I hope like I said previously I can get a good grasp of web design prior to my course. Then “hopefully” I will be able to help others in return!

Having set up the CSS class .center within your stylesheet, any element to which you apply class=“center” will obey the declared rules - as long as no other rules take precedence and override. You will come up against this sooner or later so it’ll reward you to spend some time learning about CSS concepts.

Well…

I have no idea what Im doing wrong here… but I cannot get the image to centralise.

Here is my Html:

<!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" lang="en" xml:lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="en"/>

<link type="text/css" rel="stylesheet" href="style1.css" media="screen,projection,tv"/>

	<title>Bluebelle Nail Bar &amp; Beauty Studio - Crofton, Wakefield</title>

</head><body>

	<div id="pagewrapper"> 
   <div class="roundedcornr_top"><div></div></div> 
  
 
	<div id="header"> 
	<h1><span><!-- image replacement --></span>Bluebelle <small>Nail Bar &amp; Beauty Studio</small></h1> 
    </div> 
	
	<ul id="nav"> 
		<li><a href="index.html">Home</a></li> 
		<li><a href="about.html">About Us</a></li> 
		<li><a href="treatments.html">Treatments</a></li> 
		<li><a href="parties.html">Pamper Parties</a></li> 
		<li><a href="special.html">Special Offers</a></li> 
		<li><a href="contact.html">Contact Us</a></li> 
	</ul> 
    
  <img class="center" height="267" width="398" alt="Bluebelle Shop Front" src="images/shop_03.png">
  
	<h2> Welcome to Bluebelle</h2>
		<p>Bluebelle Nail Bar & Beauty Studio is a modern, friendly and beauty salon based in Crofton Nr Wakefield, West Yorkshire. Offering over				 60 individual treatments, we provide clients with a wide variety of luxurious treatments and therapies.</p>
		<p>Our therapists are highly skilled and qualified to provide you with a professional, caring and personalised service. We want your time spent with us to be an enjoyable experience - one that you will wish to repeat time after time.</p>
		<p>Whatever treatment you choose, whether it is Bio Sculpture nail extensions to ear candles, Bluebelle can provide it all for you in a calm, relaxed environment. You can find our full range of the beauty treatments we offer on our treatments page. Here you can download our current pricelist that contains detailed descriptions and prices.</p>
		<p>We offer a range of Pamper Parties that can be tailored to your needs. See Pamper Parties for more information.</p>
		<p>Should you have any questions please call 01924 862233 where a member of staff will be happy to help :)</p>

	
   <div class="roundedcornr_bottom"><div></div></div>
<!-- #pageWrapper --></div>

</body></html>

Heres my CSS:

@charset "utf-8";
/* CSS Bluebelle */

body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	background-color: #a0bad4;
	line-height: 125%;
	padding: 15px;
} 

#header {
	width: 344px;
	margin: 0 auto;
	height: 156px;
	position: relative;
	}
	
#header span {
	background: url(images/Bluebelle-logo.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 1px;
	top: -2px;
	}
		
#nav {
	width: 100%;
	float: left;
	margin: 0 0 3em 0;
	padding: 0;
	list-style: none;
	background-color: #ffffff;
	border-bottom: 1px solid #ccc; 
	border-top: 1px solid #ccc; }
	
#nav li {
	float: left; }
#nav li a {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #069;
	border-right: 1px solid #ccc; }
#nav li a:hover {
	color: #003;
	background-color: #f2f2f2; } 
	
#center {
	margin:0 auto;
             display:block;

}

You have specified #center as selector in your stylesheet rather than .center.

#something indicates an id - applying to <div id=“header”> in your markup for example. Note that an id indicates a unique identifier and should only apply to one element per page.

.something indicates a class - applying to <img class=“center” … in your markup. A class can be applied to multiple elements per page.

Hey chad,

I’m guessing based on your comments that you’ll be taking a web design course, but that you want to get a grasp of the concepts beforehand? If so, here are a couple of good resources to hit up that should give you a solid foundation:

Www.smashingmagazine.com
And of course the W3C: www.w3c.org

As for the rounded corners, I’m @ my day job right now but I’ll take a look at your code and help you get it worked out when I get home.

-JBird

Thanks for all the advice once again! The image is centralised perfect now :slight_smile:

I feel like Im getting somewhere. Im so glad I found this site - everyones help has been invaluble so far.

Im sure there will be a few more questions soon enough.

Pendragon - would I be best uploading all of the images so you can have a look at the code?

Just give me the markup you have so far (that way I can work with what you have and not try and confuse you with trying to slide in something new). I’ll work on it tonight and see if I can’t post it up tomorrow morning.