SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: CSS/HTML coding

  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS/HTML coding

    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.
    Attached Images Attached Images

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    It'd be a good idea to start by showing us the code you've already created. =)

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, sorry 'bout that, meant to include the code,
    this is CSS so far:


    Code:
    *{
    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:

    Code:
    <!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>
    Last edited by ralph.m; Apr 18, 2011 at 17:25. Reason: added code tags

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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.


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
  •