SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast FreakyStyley's Avatar
    Join Date
    May 2005
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Learning the DIV-idends!

    Hello folks,

    I've attached two gif images. walking further away from dreamweaver and these last couple of days using Topstyle3. I believe its that bit more intuitive in its layout, and its forcing me to learn coding better! but still I'm running into some questions (without the use of tables this time)

    1. stretch.gif
    I am trying to get into the swing of using div elements, etc. whats the best way to code something for this kind of setup. basically its 3 images that spread out to the width of the users browser, while keeping their respective widths (hights are the same). I hope the image illustrates what I'm trying to achieve. I'm testing it with css & divs but I'm not sure whether to nest divs, etc.

    2. buttons.gif
    This one is somewhat easier, but how do I get the buttons to go beneath each other while while having larger margins (?) on top/bottom than the sides. its so easy in tables. but I want to try it a different way. The white area is the actual div and the rose colour are the buttons.

    3. lastly! if I have just one div element how do I center/center it to the browser window with css?

    thanks so much for your help!
    Attached Images Attached Images

  2. #2
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know you said you are moving away from DW, but the following tutorial/s can be done in Topstyle ( I love it too Lots of other CSS tutorials listed on the site - they will help you with the answers you posted.
    http://www.macromedia.com/devnet/mx/...eaver/css.html

    You should also check out the CSS forum here - there is a sticky thread that will be helpful also.

    Nadia

  3. #3
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well your attachments havent been approved yet but Ill try some preliminary help and HOPEFULLY wont make a boob out of myself!

    OK, question 3 is actually a LOT easier than you think .... works like a charm and it has the Paul O stamp of approval (our resident CSS god)


    Code:
    body {
    text-align: center;
    margin: 0px;
    padding: 0px;
    min-width:775px;/* stop mozilla sliding off the edge */
    }
    .central {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: 775px;
    text-align: left;
    }
    and then create this as your outer container:


    Code:
    <div class="central"> 
    all the rest of your page.....
    </div>
    This and MANY more great CSS "must knows" are found in this thread:

    http://www.sitepoint.com/forums/showthread.php?t=171943

    #2 - as I said I CANT seen you images yet but the best way IMO would to be use lists (ul) ... each button is an li element of the list and you can adjust them according to what you need for padding, margin etc etc ... and if you use the proper html mentality what is a Menu? hmmm? Is a LIST of sections in your site (or a list of links to sections of your site)

    Now as far as #1 Im at a loss cause I cant see the attachments BUT again Ill give it a shot.

    Sounds like you are looking for floated divs (3 across), each with their own width but my question would be are the absolute widths or percentages? Anyways a REAL QUICK "guess" at what you are trying:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    		<title>really Simple 3 color col example</title>
    		<style type='text/css'>
    		body	{
    			margin: 0;
    			padding: 0;
    			}
    		#left {
    			width: 25%;
    			height: 500px;
    			background-color: RED;
    			float: right;
    			}
    		 #middle	{
    			width: 50%;
    			height: 500px;
    			background-color: GREEN;
    			float: right;
    			}
    		#right	{
    			width: 25%;
    			height: 500px;
    			background-color: BLUE;
    			float: right;
    			}
    		</style>
    	</head>
    
    	<body>
    
    	<div id='right'></div>
    	<div id='middle'></div>
    	<div id='left'></div>
    
    	</body>
    </html>
    Now, thats a REAL simple example cause Im not sure what you are doing. Note I run the divs from right to left..... Paul taught me this to help deal with the dreaded IE drop and it does help (albeit takes a while to get used to!)

    Theres a ton more to learn but hopefully this will get you started!

    BTW, congrats on getting "off" the DW thing ....... a wonderful cause and idea! (wish more would do it!) ... it can be tough at first but man once you have it down you will laugh at DW!

  4. #4
    .::Pixel PIMP::. Andrew K's Avatar
    Join Date
    Jul 2004
    Location
    NSW - Au
    Posts
    556
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh.. so DC what your saying is I should be laying the DIV's out floating right?
    your on the money with that reply again DC!.
    Video-Tutes.com
    Web & Graphic design video tutorials
    100% free video tutorials.

  5. #5
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    Great advice, here.
    I would just add ye olde: clear any floats reminder [!]
    and suggest that if using list items for the buttons, you can assign separate classes to .top and .bottom li's so you'd just have to tweak the margins of those two to get the fit that you want.
    [Oh, and it's better to have the list with no margins or padding and take care of that business within the items, themselves.]

    Good luck,
    El
    F-Fox 2.0 :: WIN :: el design :: US


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
  •