PDA

View Full Version : First Post :) And need help :P



seriex
Dec 22nd, 2008, 02:30 AM
Hello, I'm Aidiewright, owner or http://seriex.co.uk and i have started to make my first ever template. <--(wooo). but for some reason i cant move the news bar up any further? it is set to.

.news_banner{
position:relative;
height:18px;
width:700px;
top:1px;
border-style: solid;
border-color:#302226;
border-width:thin;
color:yellow;
text-align:center;
margin: 0 auto;
background:black;
}


what is wrong?

http://seriex.co.uk/template/

Benjamin Malin
Dec 22nd, 2008, 03:51 AM
Hey Aidiewright,

I think your "Navigation" bar is keeping the "News" bar pushed down.
It would sure help if you could give us a look at your code.

-Benjamin

bazz
Dec 22nd, 2008, 04:12 AM
Hi.

welcome to CF.

Your site's code has a few errors and this may be contributing to your problems. Certainly, erros such os the ones you have, will make your site render differently in different browsers.

check out validator.w3.org. and post back if you need more help.

bazz

tomws
Dec 22nd, 2008, 04:14 AM
Benjamin:
no need for code since he's provided a link. Use Firebug with Firefox. Everything you need is there.

seriex:
Don't use relative positioning. Float your divs instead (google for css floats). Also, don't use a separate div for the nav and news headings. Stick the headings inside a div with the associated items so that you can position the entire block where you want it. Once you do that, you can apply floats and padding to your divs to get your positioning where you want it.

Now, all that being said, I'd recommend scrapping the whole thing, grabbing a pre-built css layout, and customizing that with your own design. For example, you're building a two column css layout with header and footer. Well, google for it. Thousands of links. Probably hundreds of actually useful layouts (here's one of many (http://www.bigbaer.com/css_tutorials/two-column-header-footer.htm)). This way, you get to start with a working layout and can spend your time on design instead.

seriex
Dec 22nd, 2008, 04:27 AM
Hey Aidiewright,

I think your "Navigation" bar is keeping the "News" bar pushed down.
It would sure help if you could give us a look at your code.

-Benjamin

I don't think it is as when i have it pushed out right to the left it still does not work.

seriex
Dec 22nd, 2008, 04:28 AM
<html>
<head>
<title> seriex </title>
<link rel="stylesheet" type="text/css" href="template.css"/>
</head>
<body>
<div class="title">
<img src="title.jpg">
</div>
<div class="navigation"> <!-- This is the start of my navigation-->
<b>Navigation</b>
</div>
<div class="button"> <!--this is the star of my links-->
<div class="link_divide">
<img src="button_1.jpg">
<br>
</div>
<div class="link_divide">
<img src="button_1.jpg">
<br>
</div>
<div class="link_divide">
<img src="button_1.jpg">
<br>
</div>
<div class="link_divide">
<img src="button_1.jpg">
<br>
</div>
<div class="link_divide">
<img src="button_1.jpg">
<br>
</div>
<div class="link_divide">
<img src="button_1.jpg">
<br>
</div>
<div class="link_divide">
<img src="button_1.jpg">
</div><!-- end of link-->
</div> <!-- This is the end of my navigation -->
<div class="news_banner">

<b>Seriex News</b>

</div>
<div class="Content"><!-- This is the start of my main conent-->
<p>
This is conent. This is conent. This is conent.
This is conent. This is conent. This is conent.
This is conent. This is conent. This is conent.
This is conent. This is conent. This is conent.
This is conent. This is conent. This is conent.
This is conent. This is conent. This is conent.
This is conent. This is conent. This is conent.
This is conent. This is conent. This is conent.
This is conent. This is conent. This is conent.
This is conent. This is conent. This is conent.
This is conent. This is conent. This is conent.
This is conent. This is conent. This is conent.
This is conent. This is conent. This is conent.
This is conent. This is conent. This is conent.
</p><!-- This is the end of my main conent-->
</div>
<div class="Advertisement"> <!--start of advertisment-->
Advertisement
</div>

<div class="advertisement_space" <!-- Advertisement will go here-->
Advertisement will go here.
</div>
</body>
</html>


-----------------------------------------------

body, html{
text-align:center;
margin: 0 auto;
font-family:tahoma;
font-size:small;
}

body{
background:#333333;
font-family:tahoma;
font-size:small;
}
.navigation{
padding:2px;
position:relative;
height:15px;
width:130px;
right:420px;
background: black;
top:25px;
border-style: solid;
border-color:#302226;
border-width:thin;
text-align:center;
color:yellow;
margin: 0 auto;
font-family:tahoma;
}

.button{
position:relative;
top: 25px;
right:420px;
height: 250px;
width:135px;
background:black;
border-style:solid;
border-color:#302226;
border-width:thin;
margin: 0 auto;
}

.link_divide{
padding-bottom:2px;
}

.title{
position: relative;
text-align:center;
margin: 0 auto;
border-style: solid;
border-color:#302226;
border-width:thin;
width:700px
}

.content{
color:white;
position:relative;
height:350px;
width:696px;
background:black;
top:10px;
padding:2px;
text-align:center;
margin: 0 auto;
border-style:solid;
border-color:#302226;
border-width:thin;
}

.news_banner{
position:relative;
height:18px;
width:700px;
top:0px;
border-style: solid;
border-color:#302226;
border-width:thin;
color:yellow;
text-align:center;
margin: 0 auto;
background:black;
}

.advertisement{
position:relative;
height:18px;
width:700px;
top:15px;
border-style: solid;
border-color:#302226;
border-width:thin;
color:yellow;
text-align:center;
margin: 0 auto;
background:black;
}

.advertisement_space{
position:relative;
width:700px;
top:15px;
max-height:80px;
min-height:80px;
background:black;
border-style:solid;
border-color:#302226;
border-width:thin;
text-align:center;
margin: 0 auto;
color:yellow;

}


There my code

Benjamin Malin
Dec 22nd, 2008, 05:04 AM
Hey Aidiewright,

Thanks for posting your code. As Tom pointed out to me, it wasn't necessary for you to post your code, I should have thought about it before I asked.

Follow Tom's advice, he is much more experienced then me.

abduraooft
Dec 22nd, 2008, 08:15 AM
Hi seriex, welcome to CF!.

First of all, you need a valid a DOCTYPE (http://www.alistapart.com/stories/doctype/) at the top of your document, I'd recommend
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Then, you have some divitis (http://csscreator.com/?q=divitis) also. ie, you need to make your markup semantic (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html), by using appropriate html elements for your needs. For example, a list should be made up of an unordered/ordered list (<ul> or <ol> (http://htmldog.com/reference/htmltags/ul/)).

With that said, have a look at http://www.bonrouge.com/2c-hf-fluid.php, to see how to make a good 2-column layout. And always validate your markup (http://validator.w3.org/check?uri=http%3A%2F%2Fseriex.co.uk%2Ftemplate%2F&charset=%28detect+automatically%29&doctype=Inline&group=0), to fix the errors in your markup.

PS: Always use meaningful title (http://www.codingforums.com/postguide.htm) to your threads, so that it may help others in similar issues.

seriex
Dec 22nd, 2008, 01:53 PM
Benjamin:
no need for code since he's provided a link. Use Firebug with Firefox. Everything you need is there.

seriex:
Don't use relative positioning. Float your divs instead (google for css floats). Also, don't use a separate div for the nav and news headings. Stick the headings inside a div with the associated items so that you can position the entire block where you want it. Once you do that, you can apply floats and padding to your divs to get your positioning where you want it.

Now, all that being said, I'd recommend scrapping the whole thing, grabbing a pre-built css layout, and customizing that with your own design. For example, you're building a two column css layout with header and footer. Well, google for it. Thousands of links. Probably hundreds of actually useful layouts (here's one of many (http://www.bigbaer.com/css_tutorials/two-column-header-footer.htm)). This way, you get to start with a working layout and can spend your time on design instead.


But i really wanna make my own layout. what do i need to do to make it work?

thanks.
seriex

jerry62704
Dec 22nd, 2008, 04:00 PM
Hello, I'm Aidiewright, owner or http://seriex.co.uk and i have started to make my first ever template. <--(wooo). but for some reason i cant move the news bar up any further? it is set to.

.news_banner{
position:relative;
height:18px;
width:700px;
top:1px;
border-style: solid;
border-color:#302226;
border-width:thin;
color:yellow;
text-align:center;
margin: 0 auto;
background:black;
}


what is wrong?

http://seriex.co.uk/template/

Index_09.jpg takes the space between the "news" and the menu, if that is what you mean. You have a class "news_banner", but I don't see it ever being used. What is its purpose?

You are using tables for layout which is considered bad. It was good in the 90s, but you probably want to code for the 2000s.