CSS/HTML coding

HTML & CSS
1

Hi guys,
I’ve designed a website for a friend (I am just starting out on web design, so need loads of practise!)
As you (hopefully) can see, I need to code the “bubbles” background to lay either side of the main container, but am unable to get this without tiling it horizontally. This doesn’t give the desired effect.
Also I’m having difficulty in showing the white container area with the shading either side.
Although I’m fairly new to CSS, I have got a basic grasp, so any help from you experts would be gratefully received.

2

It’d be a good idea to start by showing us the code you’ve already created. =)

3

Hi, sorry 'bout that, meant to include the code,
this is CSS so far:

*{
padding:0;
margin:0;
}

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #0486ca;
background-image:url(images/images/bg_body.png);
background-repeat:repeat-x;
margin:auto;
}

#container {
background:url(images/images/bg_container.png);
width:820px;
margin:auto;
}
#block {
background:url(images/images/bg_container.png);
}

#header {
  position:relative;
  width: 100%;
}
#header h1 {
  display:block;
  float:left;
  width:580px;
  height:136px;
  background:url(images/images/logo.png);
  text-indent:-9999px;
}

and HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<div id="container">
  <div id="block">
    <div id="header">
     <h1><a href="#">H & L Domestic Cleaners</a></h1>
</div>
</div>     
<div id="head_wrap"><!--BEGIN HEAD WRAP-->
 
<div id="logo"><!--BEGIN LOGO-->
</div><!--END LOGO-->
 
<div id="navigation"><!--BEGIN NAVIGATION-->
</div><!--END NAVIGATION-->
 
</div><!--END HEAD WRAP-->
 
<div class="content"><!--BEGIN CONTENT-->
</div><!--END CONTENT-->
 
</div><!--END CONTAINER-->
 
<div id="footer"><!--BEGIN FOOTER-->
</div><!--END FOOTER-->
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
			

</body>
</html>
4

It will be difficult to pull off a web layout like that. Things like the bubbles overlapping the content area is not very practical. And the background is very varied, meaning it won’t tile well, which is the ideal. The sides of the content area aren’t just shaded, but the curved-edge look requires more images, and the images would need to keep going to maintain the look. A lot of the content also requires images to make it look like that, but they are better avoided for content.

I don’t mean this critically, but I think you’d better step back a bit, take a look at a lot of websites and see how they tend to use edge shadows etc. I would also recommend you step back to a simple wireframe with the content in place, then start building up a simple HTML/CSS template, starting with the content centered, then perhaps start adding a repeating background image, then a simple shadow effect down the sides etc.

The image you posted is fine for a Photoshop image but is not too practical for the web, I’m afraid. Websites are made up of separate bits of content that all flow together seamlessly (hopefully!), so you need to think in terms of individual components. Your image can’t easily be broken p int separate bits.