Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    New to html/css and i need helps and tips

    hey guys i am new to html coding and styles. I have a website using wordpress and wordpress template, but i want to make a template that basically needs no big script like wordpress, just a simple page layout and only i can add anything from FTP

    here is my site www.ultra-soundz.tk

    here is the image i have for template, i was going to do it whole but i also want it expandable so i dont have to add alot of images as the template



    i will add custom background..

    also if someone could help me with sidebar that would be great


    thanks in advance

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,719
    Thanks
    25
    Thanked 662 Times in 661 Posts
    Hi Trafalgar Law,
    The biggest help I can give you for what you want to do is DON'T USE wordpress.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thats why i made this thread, so i wont have to use wordpress

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You'll find several layout examples here which may help, with or without Wordpress.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #5
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thats a nice site but that isnt the kind of template im looking for

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Hmm, sorry, as you asked about sidebars I thought you were asking about a columnar layout.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there Trafalgar Law,

    You can use this for starters...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    #container {
        width:860px;
        padding:20px;
        border:2px solid rgb(0,0,255);
        border-radius:12px;
        margin:auto;
        background-color:rgb(24,0,4);
        box-shadow:0 0 20px rgba(20,0,255,0.9);
     } 
    </style>
    
    </head>
    <body>
    
    <div id="container"></div>
    
    </body>
    </html>
    coothead

  • Users who have thanked coothead for this post:

    Trafalgar Law (08-20-2013)

  • #8
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    nice code buddy, can you also make as a side bar? im having problems with that also

  • #9
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there Trafalgar Law,
    ..can you also make as a side bar?
    I do not really understand your request.

    Even if I knew what a side bar actually was, I would still
    need to know what it is that you want to make it as.

    Please supply a little enlightenment.

    coothead
    Last edited by coothead; 08-20-2013 at 11:39 PM.

  • #10
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    sorry for bad english, http://ultra-soundz.tk/ look here, you see how on the right side there is the search, recent post and the advertisement, thats a sidebar

  • #11
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there Trafalgar Law,

    Here is your sidebar code...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <base href="http://ultra-soundz.tk/wp-content/themes/killerlight/images/">
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    body {
        background-color:rgb(12,12,12);
        font-family:verdana,arial,helvetica,sans-serif;
     }
    #container {
        width:880px;
        padding:20px 10px;
        border:2px solid rgb(0,114,246);
        border-radius:12px;
        margin:auto;
        background-color:rgb(0,15,24);
        box-shadow:0 0 20px rgba(0,114,246,0.6);
        overflow:hidden;
     } 
    #content {
        float:left;
        width:526px;
        padding:20px;
        border:2px solid rgb(0,114,246);
        border-radius:12px;
        box-shadow:0 0 20px rgba(0,114,246,0.6);
        color:rgb(255,255,255);
     }
    #sidebar {
        float:right;
        width:300px;
     }
    #search {
        width:256px;
        height:31px;
        padding-left:10px;
        border:1px solid rgb(0,114,246);
        border-radius:5px;
        margin:auto;
        background-image:url(search-background.png);
        font-size:12px;
        overflow:hidden;
     }
    #search input[type=text] {
        float:left;
        width:180px;
        border:0;
        margin-top:6px;
        background-color:transparent;
        color:rgb(255,255,255);
     }
    #search input[type=submit] {
        float:right;
        width:74px;
        height:32px;
        border:0;
        border-left:1px solid rgb(0,114,246);
        color:rgb(255,255,255);
        background-color:transparent;
     }
    #sidebar h4 {
        line-height:39px;
        padding-left:10px;
        font-weight:normal;
        color:rgba(255,255,255,0.8);
     }
    .yellow {
        background-image:url(sidebar-header-yellow.png);
     }
    .red {
        background-image:url(sidebar-header-red.png);
     }
    .green {
        background-image:url(sidebar-header-green.png);
     }
    #sidebar ul {
        padding:0;
        margin:0 0 0 30px;
        list-style-type:none;
     }
    #sidebar li {
        height:20px;
        list-style-image:url(bullet.png);
     }
    #sidebar a {
        font-size:12px;
        color:rgba(0,150,223,0.9);
     }
    #sidebar a:hover {
        color:rgb(255,255,255);
     }
    </style>
    
    </head>
    <body>
    
    <div id="container">
    
    <div id="content">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p>
    </div><!-- end #content -->
    
    <div id="sidebar">
    
    <form id="search" action="#">
     <input type="text">
     <input type="submit" value="search">
    </form>
    
    <h4 class="yellow">Recent Posts</h4>
    
    <ul>
     <li><a href="#">DJ BLAXx</a></li>
     <li><a href="#">DJ Blacks - Oil Stain Riddim mix</a></li>
     <li><a href="#">DJ Blacks - Rio De Jamaica Riddim Mix</a></li>
     <li><a href="#">Tommy Lee - Wah yuh know bout - Raw</a></li>
     <li><a href="#">DJ Batnutz Jupiter Riddim Mix</a></li>
    </ul>
    
    <h4 class="red">Recent Comments</h4>
    
    <ul>
     <li><a href="#">Uncommented</a></li>
    </ul>
    
    <h4 class="green">Archives</h4>
    
    <ul>
     <li><a href="#">August 2013</a></li>
     <li><a href="#">June 2013</a></li>
     <li><a href="#">May 2013</a></li>
     <li><a href="#">April 2013</a></li>
     <li><a href="#">January 2012</a></li>
    </ul>
        
    <h4 class="green">Categories</h4>
    
    <ul>
     <li><a href="#">Uncategorized</a></li>
    </ul>
    
    <h4 class="green">Blogroll</h4>
    
    <ul>
     <li><a href="#">Billing Software</a></li>
     <li><a href="#">Documentation</a></li>
     <li><a href="#">Plugins</a></li>
     <li><a href="#">Suggest Ideas</a></li>
     <li><a href="#">Support Forum</a></li>
     <li><a href="#">Themes</a></li>
     <li><a href="#">Web Hosting</a></li>
     <li><a href="#">WordPress Blog</a></li>
     <li><a href="#">WordPress Planet</a></li>
    </ul>
    
    <h4 class="green">Meta</h4>
    
    <ul>
     <li><a href="#">Register</a></li>
     <li><a href="#">Log in</a></li>
     <li><a href="#">Entries RSS</a></li>
     <li><a href="#">Comments RSS</a></li>
     <li><a href="#">WordPress.org</a></li>
    </ul>
    
    </div><!-- end #sidebar -->
    
    </div><!-- end #container -->
    
    </body>
    </html>
    coothead
    Last edited by coothead; 08-20-2013 at 11:13 PM.

  • #12
    New to the CF scene
    Join Date
    Aug 2013
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks alot coothead <3 (no homo)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •