Divs and tables

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.
 
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 :)
 
divs, i.e. proper markup, aren't the in thing, they're the correct thing.

What are you struggling on with the nav?
 
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.
34pgexf.png


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;}
 
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.
 
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.
 
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!
 
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.
 
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!
 
You must log in or register to reply here.
Back
Top