SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member dcordes's Avatar
    Join Date
    Mar 2004
    Location
    St. Louis, MO
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    New to CSS - Need help converting site

    Hi all! I must say I've almost given up on CSS a hundred times in favor of using tables but this time I'm going to stick with no matter how long it takes.

    Basically what I need to do is convert the following site to CSS. I don't want to use any tables whatsoever.

    http://dev.resortpropertiesofangelfire.com/

    This is what I currently have completed.

    http://dev.resortpropertiesofangelfi...index2_css.cfm

    I need some assistance with the placement of text in those 3 boxes in the middle and also a better way to float the events calendar to the right of the ski image.

    Thanks for any input you can provide.

  2. #2
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floats

    You can all float those boxes, either left or right, and use clear to create vertical separation; inside the boxes, use some form of header, normally flow the text, and use float again to place the image in the desired corner.
    Since you obviously use DW and the amount of clutter inhibits me to read the source properly I couldn't tell what it looks like at the moment, but I feel you rely far to heavy on slicing and dicing of images; also, dividing up the layout in a couple of main sections and working down from those will probably prevent the... um, interesting rendering effects visible at the moment when downsizing the window.

    So:

    Header -> div
    Menu -> div
    main content -> div

    The header can remain in the normal flow; if you don't mind the menu being in front of the content in the source (accessibility issue), you can float that left of the main content, which can remain in the normal flow again; use left margin to make room for the menu.
    With these major boxes in place, you can work downwards.

    For now, I'd like to warmly recommend spending some time at A List Apart, where recently a number of articles were featured that addressed interesting techniques of using background images through CSS for some nice visual effects.
    Regards,
    Ronald.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Theres no need to slice all your images up (as ronaldb66 said) when using css just stick the whole image in in one go.

    I didn't look at your code but your layout could simply be done like this:

    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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body {margin:0;padding:0}
    #header{
     background:blue;
     margin:0;
    }
    #header p {margin-bottom:0}
    #header h1 {margin:0}
    #menu {
     position: absolute;
     left:0;
     background:green;
     width:150px;
    }
    #main {
     margin-left:160px;
    }
    #welcome{
     margin:15px 160px 15px 0;
     border:1px solid #000;
    }
    #events {
     float:right;
     width:140px; 
     height:150px;
     background:blue;
     border:1px solid #000;
     margin:15px 0 15px 0;
    }
    html>body #events {margin-top:0}
    #condos{
     float:left;
     clear:both;
     border:1px solid #000;
     width:48%;
     margin:15px 0;
    }
    #homes{
     float:right;
     border:1px solid #000;
     width:48%;
     margin:15px 0 15px 0;
    } 
    .pic {
     float:right;
     background:yellow;
     width:150px;
     height:150px;
     border:1px solid #000;
    }
    </style>
    </head>
    <body>
    <div id="header"> 
      <h1>Header</h1>
      <p>some text</p>
    </div>
    <div id="menu"> 
      <ul>
    	<li>Menu item</li>
    	<li>Menu item</li>
    	<li>Menu item</li>
    	<li>Menu item</li>
    	<li>Menu item</li>
    	<li>Menu item</li>
    	<li>Menu item</li>
    	<li>Menu item</li>
      </ul>
    </div>
    <div id="main"> 
      <div id="events">Events</div>
      <div id="welcome"> 
    	<div class="pic">Picture</div>
    	<p>Welcome text : Welcome text : Welcome text : Welcome text : Welcome text 
    	  : Welcome text : Welcome text : Welcome text : Welcome text : Welcome text 
    	  : Welcome text : Welcome text : Welcome text : Welcome text : Welcome text 
    	  : Welcome text : Welcome text : Welcome text : Welcome text : Welcome text 
    	  : Welcome text : Welcome text : Welcome text : Welcome text : Welcome text 
    	  : Welcome text : Welcome text : Welcome text : Welcome text : Welcome text 
    	  : Welcome text : Welcome text : Welcome text : Welcome text : Welcome text 
    	  : Welcome text : Welcome text : Welcome text : Welcome text : Welcome text 
    	  : Welcome text : Welcome text : </p>
      </div>
      <div id="condos"> 
    	<div class="pic">Picture</div>
    	<p>Condos More text : Condos More text : Condos More text : Condos More text 
    	  : Condos More text : Condos More text : Condos More text : Condos More text 
    	  : Condos More text : Condos More text : Condos More text : Condos More text 
    	  : Condos More text : Condos More text : Condos More text : Condos More text 
    	  : Condos More text : Condos More text : Condos More text : Condos More text 
    	  : </p>
      </div>
      <div id="homes"> 
    	<div class="pic">Picture</div>
    	<p>Homes more text : Homes more text : Homes more text : Homes more text : 
    	  Homes more text : Homes more text : Homes more text : Homes more text : 
    	  Homes more text : Homes more text : Homes more text : Homes more text : 
    	  Homes more text : Homes more text : Homes more text : Homes more text : 
    	  Homes more text : </p>
      </div>
    </div>
    </body>
    </html>
    Hope that gives you some idea.

    Paul

  4. #4
    SitePoint Zealot
    Join Date
    Jan 2004
    Location
    Holland
    Posts
    141
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Thanks!

    Paul,

    (as ronaldb66 said)
    I love to be right every now and then...

    Great to see you bothered to actually create an example; that often works best, but I was a little pressed for time.
    Expect someone to be looking over your shoulder on a regular basis...
    Regards,
    Ronald.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Expect someone to be looking over your shoulder on a regular basis...
    No worries - anyone who helps is welcome here


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
  •