SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

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

    Question Need help positioning the elements of my website with CSS code

    I have created what I want my website to look like in Photoshop and have saved every file for web use and even have several different versions with varying amounts of layers showing in one.

    Here is every layer.


    This Should be the background of my website for the rest of my images to be positioned over.


    I also have Images customized for a trick I learned for creating hover effects and have all these kinds of images.


    Anyone have any advice for me or can explain how to position my elements with just some simple code I can wrap my head around. Also any good software or tricks to easily determine the coordinates to use.

    Thanks!

    Bate145185


  2. #2
    SitePoint Zealot zbing's Avatar
    Join Date
    Jun 2002
    Location
    Lisbon, Portugal
    Posts
    159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dude, from your question, i think you need to do some serious reading on HTML & CSS before you tackle this task.

    I don't mean to be intrusive but your layout can only be done using lots of positioning trickery and will most probably lead to poor quality markup, and i'm sure that's not the image you wan't to pass to your current/future clients.

    Also, using such a large image for a background will make the site slow to visitors on slower connections.

    The other problem with your background is that it does not expand. If a user with a screen size larger than the background, what do you have to occupy the remainder of the screen?
    zbing

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    As zbing said above your question is basically asking how to code a web page which would really take a few books to do justice

    Creating a design in photoshop is the easy part because it's just a picture. A webpage is (or should be) a living medium and a flat design doesn't really translate into a workable web page unless you approach it correctly from the start.

    You would rarely create a page that sits on a whole page background image like that instead you would create each element to be scalable and shrink and grow with content as required.

    For example the wooden background should be constructed in clever slices so that a small section could be repeated to create the whole page but still give a similar effect but may have to sacrifice some design elements.

    With your design you are stuck to a fixed height and width layout and a content section that will need a scrollbar attached so that the height can remain constant. It's not really a user friendly design.

    Anyway, if you must use that approach then here's is a basic structure that will fit your image but all internal elements still need to be styled.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Bonkage.com</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <!-- Meta -->
    <meta name="description" content="#">
    <meta name="keywords" content="#">
    <!-- CSS -->
    <link href="main.css" rel="stylesheet" media="screen, projection" type="text/css">
    <style type="text/css">
    /* css in the head while developing only. It should be removed externally to main.css */
    
    /* main CSS Document */
    html, body, table{
        margin: 0;
        padding: 0;
        font-size: 100%;
    } 
    object, iframe,blockquote,
    h1, h2, h3, h4, h5, h6, p, 
    dl, dt, dd, ol, ul, fieldset, 
    form, legend, table, caption, th, td {
        margin: 0;
        padding: 0;
        border:none;
    }
    ol, ul {list-style: none;}
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    caption, th, td {
        text-align: left;
        font-weight: normal;
        vertical-align:top;
    }
    /* clearing technique if visible overflow required */
    .clearfix:after {
        content:" "; 
        display:block; 
        height:0; 
        clear:both; 
        visibility:hidden;
    }
    .clearfix {zoom:1.0}
    a img,img{border:none;display:block}/* remove borders from linked images*/
    a{color:#fff;text-decoration:none;}
    a:visited{color:#fff}
    a:hover{text-decoration:underline;}
    a:focus{outline:1px dotted #ccc}
    a:active{text-decoration:underline;}
    input,textarea,select,label{
        font-family:Arial; /* set font-family for IE*/
        vertical-align:middle;
    }
    /* end reset styles */
    /* a few defaults */
    p,h1,h2,h3,h4,h5,h6,ul {margin-bottom:.75em}
    html,body{min-width:950px;}
    body {
        line-height: 1.3;
        font-family: Arial, Verdana, Helvetica, sans-serif;
        font-size: 13px; 
        text-align:center;/* for ie5.+*/
        background:#1a1812 url(images/bg3.jpg) no-repeat 50% 0;
        color:#000;
    }
    * html body {
        font-size:x-small;/* ie5 - 13px - but allows text to be resized*/
        f\ont-size:small;/* ie6 -  13px*/
    }
    /* main structure */
    #outer{
        text-align:left;
        width:960px;
        padding:55px 0 10px;
        margin:auto;
        text-align:left;
        font-size:93%;/* 12px*/
        position:relative;
    }
    #header{
        height:100px;
        background:red;/* for testing only*/
        margin:0 0 312px;
        overflow:hidden;
    }
    #main{
        width:100%;
        clear:both;
        overflow:hidden;
    }
    #content{
        width:645px;
        padding:20px;
        float:left;
        background:red;/* for testing only*/
        margin:0 0 20px 15px;
        display:inline;
        height:790px;
        overflow:auto;
    }
    #content h1{
        text-align:center;
        font-size:180%;
        margin:0 0 20px;
    }
    #content h1 span{
        display:block;
        padding:10px 0;
        font-size:80%;
    }
    #sidebar{
        float:right;
        width:240px;
        margin:0 5px 20px 0;
        display:inline;
        background:red;/* for testing only*/
    }
    #footer{
        clear:both;
        background:red;/* for testing only*/
    }
    </style>
    </head>
    <body id="home">
    <div id="outer">
        <div id="header">
            <ul id="nav">
                <li><strong>Home</strong></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Prices </a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <div id="main">
            <div id="content">
                <h1>Welcome to Bonkage.com <span>Web/Image/Video Editing &amp; Design Services</span></h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor.</p>
                <p>Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, at iaculis quam odio sit amet eros. Aliquam eleifend ipsum et libero sollicitudin dictum eu et ipsum. Phasellus venenatis semper felis, vitae pretium enim fermentum lacinia. Nulla a erat tortor, et fermentum nisi. Suspendisse potenti. Ut pellentesque lorem ut metus convallis viverra. Nam sagittis, mauris sit amet tempor viverra, orci odio condimentum mi, eu semper metus odio vel augue. Nunc diam quam, cursus quis mollis a, rutrum euismod nisl. </p>
            </div>
            <div id="sidebar">
                <ul>
                    <li><a href="#">Website Design<span></span></a></li>
                    <li><a href="#">Promo/ Ad Creation<span></span></a></li>
                    <li><a href="#">Image/ Video Editing<span></span></a></li>
                    <li><a href="#">Press/Media Kit Creation<span></span></a></li>
                </ul>
            </div>
        </div>
        <!-- end main -->
        <div id="footer">
            <ul>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Community</a></li>
                <li><a href="#">@Bonkage</a></li>
            </ul>
        </div>
    </div>
    </body>
    </html>
    The background image I was using is attached and cuts your 3 megabyte image down to 140k (although 140k is still miles too big).

    However, I think you should consider a more friendly design and try to create a design that will scale well and grow with content.
    Attached Images Attached Images

  4. #4
    SitePoint Member
    Join Date
    May 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow thanks a ton! I had a feeling I was doing everything far to simple and would run into trouble because of it. Thanks so much for all the advice I take it all very seriously.

    Also thanks for taking the time to create a template for me, these are of endless help and I will put it to good use!

    Thanks again

    Chris


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
  •