21 replies to this topic

[goku112]

j0, to increase my sites loading time, i decided to switch to CSS XHTML, and i checked out the CSS/XHTML twodded tut and stuff, but i am currently running into an issue

here is my html code:

<div id="container">
	<div id="banner">
  <img src="v4/header.jpg" width="800" height="218" alt="header" /></div>
	<div id="affsupport">
	<div id="left1">
	<font face="verdana" color="white" size="1">
    <a href="http://anime-eden.com" target="_blank">Anime Eden</a>
    <a href="http://elemental-anime.com" target="_blank">E. Anime</a><br>
    <a href="http://narutoclub.net/" target="_blank">NarutoClub</a>
    <a href="http://liquid-fear.net" target="_blank">Ranime</a><br>
    <a href="?dbfn=affapply">Apply</a> <a href="?dbfn=affapply">Apply</a><br>
    <a href="?dbfn=affapply">Apply</a> <a href="?dbfn=affapply">Apply</a><br>
    <a href="?dbfn=affapply">Apply</a> <a href="?dbfn=affapply">Apply</a><br>
    <a href="?dbfn=affapply">Apply</a> <a href="?dbfn=affapply">Apply</a><br>
    <a href="?dbfn=affapply">Apply</a> <a href="?dbfn=affapply">Apply</a><br>
    </font>
	</div>
	<div id="right1">
	<script type="text/javascript"><!--
google_ad_client = "pub-0603487876169799";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "333333";
google_color_bg = "000000";
google_color_link = "FFFFFF";
google_color_url = "999999";
google_color_text = "CCCCCC";
//--></script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    
    
    
    
    
    
    
</script>
	</div>
	</div>
</div>

and here is the CSS code for that part:

#banner{
width: 800px;
height: 218px;
}
#affsupport{
background-image: url(v4/affsupportbg.jpg);
}
#left1{
margin-left: 5px;
float: left;
}
#right1{
margin-right: 5px;
float: right;
}

okay now pay attention to this:

#affsupport{
background-image: url(v4/affsupportbg.jpg);

ok what is supposed to this play for that part of the code is this
http://dbfn.net/v4/affsupportbg.jpg but it doesnt, this is really important, cuz with my tables layout i made the bgs along with the rest of the layout on photoshop, so what do i do? ill upload the css and layout so you can see what i mean later

EDIT: this is what i got http://dbfn.net/v4.1beta.htm this is the fluidity i want to get through CSS -> http://dbfn.net

Edited by goku112, 04 October 2005 - 07:36 PM.

[sdesign]

You have to put the dimensions of the image in you style sheet for it to display the image.

Some thing like this,

#affsupport
{ background-image: url(v4/affsupportbg.jpg);
width: 800px; height: 1px
}

[goku112]

kk thanks
im trying it out now

[goku112]

never mind lol, i figured out the problem, i dont need the v4/ lol since the .css and the image files are in the same directory

EDIT: i figured that problem out but now i got a new one lol:

http://dbfn.net/v4.1beta.htm <- check out the problem for yourself

http://dbfn.net/v4/v4beta.css <- CSS coding

http://dbfn.net <- what its supposed to look like

EDIT: when i preview it on frontpage it looks normal but on Opera it looks like crap

Edited by goku112, 04 October 2005 - 08:50 PM.

[rc69]

You have to put the dimensions of the image in you style sheet for it to display the image.

I know you got the problem fixed, but for future reference, the dimensions of an image are never required. The only time they are, is when you put a background image on something that defaults to 0x0 and has to content to make expand and display a bg.

[sdesign]

You have to put the dimensions of the image in you style sheet for it to display the image.

I know you got the problem fixed, but for future reference, the dimensions of an image are never required. The only time they are, is when you put a background image on something that defaults to 0x0 and has to content to make expand and display a bg.

I don't think that statement is accurate, you do need the dimensions when using a background image within in the CSS file.

Unless its a background image that you would like to repeat vertically or horizontally. In which you would set the width to your dimension and the height to auto or vise versa for horizontal.

The only time you don't need the dimensions in the CSS file are if the image is within the html. Then the image will automatically expand the div.

So I wouldn't say the image dimensions are never required, cause from my experience they are commonly used.

goku112      Posted on Oct 5 2005, 01:18 AM
      never mind lol, i figured out the problem, i dont need the v4/ lol since the .css and the image files are in the same directory

EDIT: i figured that problem out but now i got a new one lol:

http://dbfn.net/v4.1beta.htm <- check out the problem for yourself

http://dbfn.net/v4/v4beta.css <- CSS coding

http://dbfn.net <- what its supposed to look like

EDIT: when i preview it on frontpage it looks normal but on Opera it looks like crap

I tried to check out your problem, but I'm having trouble accessing your pages. Timed Out.

Will check back later

[goku112]

you should be able to now

[d7x]

you need a

clear: both;

on the footer css block...

if you dont know its like a little 'hack' that fixes floats....

just tested this, it pushes it to the bottom, now if u want it in the middle you will need to add

margin-left: 215px;

or near that to the footer css code....

#footer{
margin-left: 215px;
width: 800px;
height: 136px;
clear: both;
}

little quick code...

Edited by d7x, 05 October 2005 - 06:59 PM.

[sdesign]

I noticed a lot of minor errors in your code. I fixed most of them for you, I also fixed your footer.

The reason it was floating left was it was below your container div. Not contained within it. So its defaulting to float left cause it doesn't have any rules set.

The idea for the container is to keep the content within a certain set of rules. When the content is outside of the container then it will required a separate set of rules.

Like d7x posted above.

But if you want to keep the footer separate then create another div around your content making is separate from the header and footer. But make sure its between the container div you already have. Think of the container as an actual container holding the content with in its grasp.

An example of what I mean:

<div id="container">
    <div id="header">
      Header
    </div>
    <div id="content">
      Main Content
    </div>
    <div id="footer">
      Footer Content
    </div>
</div>

Here are a few things to keep in mind.

Image urls should always have a closing tag and alt text, you also don't need the border tag cause you can do that with one simple entry within your CSS file. Using the following element in your CSS file.

Example: no border on all images (Gotta love CSS)

img { border: none }

Example: Url

<img src="your url" alt="desired description" />

Your br should also look like the below example as well.

<br />

And last but not least all your meta tags also require the closing tag.

<meta name="PUBLISHER" content="dbfn.net" />

I didn't fix all your errors but I got it down from over 150 to around 30. So I hope that will help.

Here are the edited files.

http://www3.telus.ne...dited_html.html

http://www3.telus.ne...ited_v4beta.css


Best of Luck:

sdesign

[goku112]

well shucks man, thanks!

[sdesign]

Your Welcome,

So is it working?

[Althanis]

Sdesign I need your help with something. On the site I'm working on right now (http://www.tobiasbuc...alrain/news.htm) I'm using the exact method to get my footer.

However, when the content on the page doesn't take up an entire page, my footer ends up showing below where that content ends, eg. in the middle or 3/4 way down. How can I fix this? Do you understand what I mean, if not I'll explain some more. I dont mean to hijack but this looks like a good place to clear this matter up.

[sdesign]

Sdesign I need your help with something. On the site I'm working on right now (http://www.tobiasbuc...alrain/news.htm) I'm using the exact method to get my footer.

However, when the content on the page doesn't take up an entire page, my footer ends up showing below where that content ends, eg. in the middle or 3/4 way down. How can I fix this? Do you understand what I mean, if not I'll explain some more. I dont mean to hijack but this looks like a good place to clear this matter up.

Not totally understanding what you mean, but I think I have a good idea after checking out your code.

Make another div around your left, center, and right columns. Also make your Footer the same width as your Frame div, this will make sure it stays at the bottom no matter if you add more content to either the left or right columns which I'm think was the reason it was showing 3/4 of the way down.

Example: XHTML

<div id="frame">
   <div id="header">
     Header
   </div>
   <div id="content">
      <div id="contentleft">
      </div>
      <div id="contentcenter">
      </div>
      <div id="contentright">
      </div>
    </div>
  <div id="fooer">
    Footer
  </div>
</div>

Example" CSS

#content {
    text-align: center;
    height: auto;
    width: 802px;
}

#contentfooter{
	text-align: center;
	font-size: 10px;
	height: auto;
	width: 802px;
}

Well I hope that helps, and isn't to hard to understand.

Best of Luck,

SDesign

[Althanis]

Im sorry I wasn't too clear with the explanation. But wow I'm amazed you took the time off to go through the code and read it to understand, and you seem to do this often, hats off to you man. And yeah I understand exactly what you mean.

I'll try this first thing in the morning and let you know if it worked out, thanks again.

[sdesign]

No problem, glad I could be of some help.

[Althanis]

Hi sdesign, this didn't work :\

Here exactly is the problem I'm having:

http://www.tobiasbuc.../newsletter.htm

[sdesign]

Add float left to your footer and all should be good. I tested it in both IE and Firefox should be ok now.

Regards,

SDesign

[Althanis]

I've added float:left; and it's still not working, I've also uploaded this version of it for you to see yourself :\

http://www.tobiasbuc.../newsletter.htm

[sdesign]

Hey Althanis

From my understanding you want the footer to be below the content, centered without it creeping up the left or right columns when adding new content. Or are you reffering to the columns themself, where one is taller then the other?

Just trying to make sure we are both on the same page.


Regards,

SDesign

[Althanis]

Oh we must have misunderstood each other. I want the footer at the very bottom of the page at all times. I'm getting what I want where there's lots of content no the screen. However when there're not much, like on the newsletter page, the copyright info is towards the middle (center) of the screen.

I'd like it to be at the bottom center. I guess it's a bit hard :\ But I dont think it looks good when it's toward the middle like on the newsletter page.