SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Ontario, Canada
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need simple layout

    Gentlemen/Ladies,

    I am looking for a simple write up for a centered two column layout. I would like to show you what I have but it may only confuse you as it did me. I believe my major problem is my html write up. Please see attached layout. Much thanks.

    By the way, I am at the point where I can show you how far I have advanced, thanks to many of you, but I do not know how to create a link to my work. Any suggestions?

    nassehma (rick)
    Attached Images Attached Images

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There are any number of ways you can go about this. For example, I'm looking at three such possibilities as it is (and I'm a minimalist when it comes to code).

    Do you have any HTML code to go along with this?

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Ontario, Canada
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, and no! I do not have anything at this stage. I just know what I would like the result to look like. The image shown would repeat about three times on the same page. Different images ofcourse.

    nassehma.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, here's what I would do.
    HTML Code:
    <h1>Heading</h1>
    <div id="content">
        <p>Page Content Goes Here</p>
    </div>
    <div id="random-image">
        <img src="image.jpg" width="100" height="100" alt="alternative text">
    </div>
    <div id="footer">
        <p>Footer Text</p>
    </div>
    Do you know any CSS by any chance? (I'm just asking - not everybody does, so I just want to make sure first.)

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Ontario, Canada
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dan.

    Following up on today's reply. I just contacted a friend of mine who graciously agreed to post my future site on his server. We tested this in safari and found that the menu shifted over some. So, after so long a wait here it is. http://www.jmastudios.com/testingser...ehma/INDEX.htm

    Again much thanks,

    nassehma
    Last edited by nassehma; Apr 24, 2007 at 13:46. Reason: Shifting navigation. What went wrong?

  6. #6
    SitePoint Addict
    Join Date
    Apr 2007
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The 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=iso-8859-1" />
    <title>Untitled Document</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 6]>
    <link href="css/styles_ie.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    
    <body>
    <div id="wrap">
    	<h1>Name tag</h1>
    	<span>Image<br/>100x100</span>
    	<p>Text Box</p>
    </div>
    </body>
    </html>
    The css...

    Code:
    * {
    	margin: 0px;
    	padding: 0px;
    }
    #wrap	{
    	width: 720px;
    	margin: 0 auto;
    	padding: 10px 0;
    	position: relative;
    	border: 1px solid #000000;
    }
    #wrap h1	{
    	width: 200px;
    	margin-left: 10px;
    	border: 1px solid #000000;
    }
    #wrap p	{
    	width: 360px;
    	margin-top: 10px;
    	margin-left: 10px;
    	border: 1px dashed #000000;
    	padding: 20px 0px 20px 40px;
    }
    #wrap span	{
    	right: 10px;
    	top: 10px;
    	padding: 20px;
    	width: 60px;
    	height: 60px;
    	display: block;
    	position: absolute;
    	border: 1px dashed #000000;
    }

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Done properly you won't even need hacks or conditional comments. Even for Internet Explorer 5 (or Internet Explorer 6 in quirks mode).

    And yes, you can use DIVs if you want. In the case I showed you, all you'd have to do is wrap a DIV around the H1 and give that an ID of header.

    I'm about to head off to the post office (and to take some more pictures of downtown Aurora, Illinois) so when I get back, I'll show you how I'd code this - hack free.

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Ontario, Canada
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Dan, enjoy the day. Its great out there. However, I finally got someone to post my potential site. It may be a bit messy but remember I am still new. Have a look.
    http://www.jmastudios.com/testingser...ehma/INDEX.htm

    Again much thanks,

    nassehma

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Ontario, Canada
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Dan,

    Do not forget me. I am awaiting the hack-free code. Maybe some day I will say like you, victory is mine. Thanks

    nassehma.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't worry, I haven't forgotten. My PC is just acting up is all (may have to replace it soon. )

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Ontario, Canada
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Sorry to hear about your PC. It must be over worked. When you get a chance please take a look at:
    http://www.jmastudios.com/testingser...ma/index.html/

    This is happening on safari.

    Thanks. nassehma

    The CSS code:
    #box-2 {
    position: absolute;
    top: 98px;
    left: 174px;
    width: 523px;
    text-align: left;
    padding: 0;
    margin-left: 0;
    }

    #box-2 .smallcap {
    position: absolute;
    right:2px;
    top: 45px;
    width: 78px;
    margin: 5px 2px;
    padding: 4px;
    border: 1px solid #000;
    z-index: 110;
    }

    #box-2 .nametag {
    position: absolute;
    top: 10px;
    left: 5px;
    width: 160px;
    padding: 0;
    margin: 0px;
    z-index: 100;
    }

    #box-2 p {
    padding: 47px 5px 10px 5px;
    width: 360px; /* important */
    }

    .clear {
    clear: both;
    }

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Ontario, Canada
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Css is the design method I will be using in the future. Dreamweaver is all the software I have for now. What is the standard for web designers today? Do you have any recommendations? I sure will appreciate the help.

    nassehma.


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
  •