Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Divs and tables

Discussion in 'Website Design Forum:' started by Ant, Jan 13, 2010.

  1. Ant

    Ant Member

    Well, my problem is when coding a website, i find divs so hard to use.
    I mean i always designed, and never really coded them. But now i want to code my layouts for wordpress or alike.

    I am trying to code my template up atm, using divs. Yet it's so hard :(. It looked so easy to being with and i'm sure it is. Just the nav part is pissing me off.
    If anyone is willing to add me on skype or msn or something to give a helping hand?


    Just a quick question, nowadays, do people (clients) and others, look down on those who still use tables. I know divs are the new in thing, and pretty much are a learning move forward. But.. yeah. Haha.
     
  2. Aarlev

    Aarlev Member

    That's what DF is for ;). Just ask when you get stuck on a specific issue and we'll help you out.

    I don't think many clients look at source code, or care whether you use tables or divs. They do care about cross browser compatibility, SEO, page load speed etc though, and those are some of the benefits CSS based design can give you. It's also much easier to troubleshoot and maintain, and gives you much greater flexibility in your designs.

    I still use tables when coding newsletters, but that's about it. So if you're serious about web design and Wordpress there's just no way around it, you have to learn some XHTML/CSS :)
     
  3. Harry

    Harry Senior Member

    divs, i.e. proper markup, aren't the in thing, they're the correct thing.

    What are you struggling on with the nav?
     
  4. Ant

    Ant Member

    Yeah i guessed divs would be the best way. And tbh, i have always tried to use them. I have coded a layout using divs before, and got on fine. But now, this layout being different i'm stuck.

    So here goes, the nav, should have 3 slices. But i took it down to only 1 as it kept screwing up even more. It has a drop shadow AND an outer glow. So i sliced it as, left part, repeat image, then right part.

    In the end i took out left and right. But still got problems. Here is a screenshot.
    [​IMG]

    I got rid of the center on the text, i didn't want that. Here is the CSS. Well ther eis hardly any css atm,

    Code:
    body {    padding: 0;    margin: 0;    background-color: #2f2f2f;    font-family: verdana;}#wrap {    width: 100%;}#logo {    text-align: center;    }#logo img {    border: none;}#nav {     margin-left: 20%;    margin-right: 20%;    background-image: url('images/nav_slice.gif');    height: 86px;    display: block;    font-size: 13pt;}#nav ul {    list-style: none;    display: inline;}#nav li {    list-style: none;    display: inline;}
     
  5. Ant

    Ant Member

    Hmmm, knowone. :(
     
  6. Alex L

    Alex L Senior Member

    If you give me the html or a snippiet of it it'll give it a look and see if I can find a solution. I'm not as good as some of the guys on here and can't just spot the problem in CSS.
     
  7. Ant

    Ant Member

    Code:
    <html>    <head>         <title> ... </title>        <link rel="stylesheet" href="style.css" type="text/css" />    </head>        <body>        <div id="wrap">                    <div id="logo">                <a href="#"> <img src="images/logo_slice.gif" alt="graphix ant logo" /> </a>            </div>                        <div id="nav">                <!-- <img src="images/lnav_slice.gif" alt="left side nav image" /> -->                <ul>                    <li> Home </li>                    <li> About </li>                    <li> Web Layouts </li>                    <li> Photography </li>                </ul>                <!-- <img src="images/rnav_slice.gif" alt="right side nav image" /> -->             </div>                                    <div id="content">                <div id="left">                </div>                                <div id="left">                </div>            </div>                            <div id="space">            </div>                            <div id="copy">            </div>                </div>    </body></html>
    THere you are Alex.
     
  8. designium

    designium Member

    ITs more easy if you put the final image the result that you want... i really didnt know what you want? :S

    but both cothes seems clean and good to start... css and html i mean!
     
  9. Alex L

    Alex L Senior Member

    Code:
    #nav {     margin-left: 20%;    margin-right: 20%;    background-image: url('images/nav_slice.gif');    height: 86px;    line-height: 86px;    text-align: center;    display: block;    font-size: 13pt;}
    Try replacing the nav css to this.
     
  10. Ant

    Ant Member

    Your a star alex. Thanks for that! Worked, just changed it to make it abit higher. Sat there for hours trying to figure out why the text wouldn't budge down. Haha, I kept trying everything within UL and LI.

    Thanks again!
     

Share This Page