...

View Full Version : How do i go about coding this?



plattenumdesign
03-06-2009, 06:01 AM
ive designed a whole template for my site.
but i dont know if i should use the div ids for it?

is there any other way of coding it?

whenever i do the div ids it splits everything up i want every thing to be locked.


here is the link to it.
this is the Tables code.
im struggling with coding it in css.
http://www.plattenumdesigns.com/images/new-template.html

TinyScript
03-06-2009, 06:19 AM
I don't get what you mean? You have one big table.
Why do you need divs? What do you mean by div ids?

plattenumdesign
03-06-2009, 07:19 AM
I don't get what you mean? You have one big table.
Why do you need divs? What do you mean by div ids?


what i mean is like div wraps and containers.

i dont know if i should use those or something different

Clark05
03-06-2009, 07:29 AM
Well, the web is moving towards CSS/XHTML designs.. And now with HTML5 on the verge as well, its more and more uncommon to see table structured sites.

Here is a quote from another thread.



Know why tables for layout is stupid (http://www.hotdesign.com/seybold/) and get inspired by the beauty of CSS based design from CSS-Zen garden (http://www.csszengarden.com/)

Excavator
03-06-2009, 07:51 AM
Hello platenumdesign,
That's pretty easy to do by nesting divs. I'll give you a start here. I was going to do more but this will give you the idea and you'll learn more doing it yourself :thumbsup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrapper {
width: 1000px;
height: 801px;
margin: 30px auto;
background: url(http://www.plattenumdesigns.com/images/new-template_02.jpg) no-repeat left;
}
#wrap {
width: 1000px;
height: 801px;
background: url(http://www.plattenumdesigns.com/images/new-template_11.jpg) no-repeat right;
}
#content {
width: 1000px;
height: 801px;
background: url(http://www.plattenumdesigns.com/images/new-template_01.jpg) no-repeat top;
}

</style>
</head>
<body>
<div id="wrapper">
<div id="wrap">
<div id="content">
<!--end content--></div>
<!--end wrap--></div>
<!--end wrapper--></div>
</body>
</html>
All you need to finish this to look like your tabled example is a center div and a footer. Specify the width for you center div and position it with margins. You can put a menu like this at the top of it - http://nopeople.com/CSS/h_ul_menu-with_images/index.html then position your bg image down the height of your menu.
The footer can either go at the bottom of #wrapper or you can make #wrapper longer to contain it, either way would work fine.

plattenumdesign
03-06-2009, 09:18 AM
i tried puttin the middle piece in but it wont move up or down without taking the whole template with it
http://www.plattenumdesigns.com/images/new-template.html

did i do something wrong?

Excavator
03-06-2009, 07:35 PM
Normally, you'd just center #main with your 710px wide image for a background. Centering won't work because your images are different widths, the left one is 153px and the right one is 136px.
So margin:0 auto; doesn't work.

The 1000px width doesn't work either. 153 + 710 + 136 = 999px wide.

One other thing that affects you here is uncollapsing margins. See http://nopeople.com/CSS/uncollapsing-margin/index.html for an explanation of that.

Then try this for your CSS -
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrapper {
width: 999px;
height: 801px;
margin: 30px auto;
background: url(http://www.plattenumdesigns.com/images/new-template_02.jpg) no-repeat left;
}
#wrap {
width: 999px;
height: 801px;
background: url(http://www.plattenumdesigns.com/images/new-template_11.jpg) no-repeat right;
}
#content {
width: 999px;
height: 801px;
border-top: 1px solid #000; /*fixes UNcollapsing margin*/
background: url(http://www.plattenumdesigns.com/images/new-template_01.jpg) no-repeat top;
}

#main {
background: url(http://www.plattenumdesigns.com/images/new-template_13.png);
width:710px; /*750px???*/
height:650px;
margin: 67px 0 0 153px;
}

plattenumdesign
03-06-2009, 09:23 PM
first i would like to thank you for your help so far.

ive been trying to learn how to nest divs for the past month now but cant seem to figure it out right.

anyways i placed that code into my css section and it worked.

i placed my footer at the bottom but will it be stuck there
or do i have to put it somewhere else in my code?

http://www.plattenumdesigns.com/images/new-template.html

Excavator
03-06-2009, 09:50 PM
Footer looks good. Should stay there fine... since it's a fixed height layout you don't want it to move anyway.

Now is a good time to visit the validator and fix some errors, before you start adding your menu bar.

plattenumdesign
03-06-2009, 09:52 PM
no errors in css, but html has 3 errors

also what div container do i place the menu bar into?

plattenumdesign
03-07-2009, 12:14 AM
ive tried adding my images to my nav bar but nothing is showing up.

here is the css and html code.




a.button1{background-image:http://www.plattenumdesigns.com/images/new-template_03.png;
width: 98px;
}


<div id="nav">
<ul>
<li><a href="index.html" class="button1"></a> </li>
<li><a href="designs.html" class="button2"Designs</a></li>
<li><a href="layouts.html" class="button3"Layouts</a></li>
<li><a href="templates.html" class="button4"Templates</a></li>
<li><a href="requests.html"class="button5"Home</a></li>
<li><a href="affiliates.html" class="button6"Affiliates</a></li>
<li><a href="contact.html" class="button7" Requests</a></li>
</ul>

</div>

Apostropartheid
03-07-2009, 12:49 AM
If you want to specify a URI in CSS, you must use url(http://example.com).

plattenumdesign
03-07-2009, 01:12 AM
If you want to specify a URI in CSS, you must use url(http://example.com).


lol i did forget to put that in there.

but it still isnt showing up, idk what i am doing wrong?

Excavator
03-07-2009, 02:12 AM
Try this, straight off that demo menu I linked you to -
CSS


#nav {
list-style-type: none;
overflow: auto;
background: #000;
}
#nav li {
height: 49px;
float: left;
display: block;
}
#nav a {
display: block;
height: 49px;
text-indent:-9999px; /*this will move the link text off the screen*/
}
#button1{background: url(http://www.plattenumdesigns.com/images/new-template_03.png);
width: 98px;
}


markup-
<div id="main">
<div id="nav">
<ul>
<li><a href="index.html" id="button1">home</a></li> <li><a href="designs.html" class="button2" designs=""></a></li>
<li><a href="layouts.html" class="button3" layouts=""></a></li>
<li><a href="templates.html" class="button4" templates=""></a></li>
<li><a href="requests.html" class="button5" home=""></a></li>
<li><a href="affiliates.html" class="button6" affiliates=""></a></li>
<li><a href="contact.html" class="button7" requests=""></a></li>
</ul>

</div>
</div>

plattenumdesign
03-07-2009, 03:13 AM
it still isnt showing up after i placed that code in

Excavator
03-07-2009, 03:24 AM
it still isnt showing up after i placed that code in

Update your online version.

plattenumdesign
03-07-2009, 06:08 AM
yeah i did that but its not showing up for some reason

http://www.plattenumdesigns.com/images/new-template.html

Excavator
03-07-2009, 06:15 AM
Hmm, that's the same as before.
Check your paths.

Have a look at http://nopeople.com/test/plattenum.html
got the first button working there.

plattenumdesign
03-07-2009, 08:38 PM
ok it is working now.

plattenumdesign
03-07-2009, 09:13 PM
for some reason my website is not updating anything, i did the same thing you did with the home button but its not showing up after i updated it?

Rowsdower!
03-07-2009, 09:16 PM
Have you tried clearing your cache?

plattenumdesign
03-07-2009, 10:17 PM
yeah still nothing

plattenumdesign
03-08-2009, 07:47 AM
ok everything is working now and looking good in firefox. but in internet explorer the center and navigation bar are off to the right alot.

how would i fix that?

Excavator
03-08-2009, 11:02 AM
The easiest and most cross browser compatable way to fix that might be to fix your background images. A few posts ago, I pointed out how your left and right column images are different widths.
If they were the same width, you could margin:0 auto; your #main.

plattenumdesign
03-09-2009, 04:54 AM
so in other words i gotta resize the images to the same width?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum