PDA

Click to See Complete Forum and Search --> : Background URL?

Nibinaear
October 10th, 2006, 11:20 AM
I've been doing stylesheets for a while and I'd say I've done at least 7-8 now. But I just can't get this one. I'm trying to add bg pics to my div boxes, but the only way I can show the entire image is if I have enough text in it to stretch to the full size. Even setting the height of the div box to 400px won't do so, it'll just stay small. Here is my html:


<body>

<div class = "topBar">
<div class = "dainsiderLogo"></div>
<div class = "stretchedBlack"></div>
<div class = "blackEndcap"></div>
</div>

<div class = "topMenu">
<div class = "homepageButton"></div>
<div class = "newsbutton"></div>
<div class = "archiveButton"></div>
<div class = "newsletterButton"></div>
<div class = "recruitmentButton"></div>
<div class = "eventsButton"></div>
<div class = "stretchedBlue"></div>
</div>

<div class = "sideBar">
<div class = "orangeButton">Tasks</div>
<div class = "bluebutton">Add News Article</div>
<div class = "bluebutton">Search for News Articles</div>
</div>

<div class = "mainContent">hello</div>

</body


And an example of my css:

.dainsiderLogo
{

float:left;
clear:none;
background-image:url(images/dai1.gif);
}


Now these images are found correctly, but how do I get it to show the full image and resize the box to that size?
PeejAvery
October 10th, 2006, 12:27 PM
Don't put spaces in your <div> tags with your classes. That will cause some browsers to parse errors.
<div class="topBar">

Remember that <div> tags are inline objects. They do not function as a regular HTML object would. I would suggest not using them so heavily as you have. Use tables not divs in that manner.
Nibinaear
October 10th, 2006, 02:53 PM
But we are talking about css here and not tables, css is a replacement for tables unless you are using tables for tabular content. I think css is used often in this way with divs.
PeejAvery
October 10th, 2006, 03:12 PM
CSS is not a replacement for tables in any way whatsoever. Tables are HTML, CSS are stylesheets which go along with HTML.

Tables are the best way to format a HTML document. They have been for a long time and will be for quite a long time more.
Nibinaear
October 10th, 2006, 03:48 PM
Tables are the best way to format a html document? I think that goes aggainst most of current opinion - that CSS is best for layout.

Have a look at this tutorial from sitepoint:

http://www.sitepoint.com/article/rock-solid-css-layouts

It uses divs for layout, so do most websites these days.
PeejAvery
October 10th, 2006, 04:07 PM
CSS goes hand in hand with HTML it does not replace it. Yes, some sites use CSS instead of tables but the majority do not.

When it comes to formatting text CSS is the best way to go. I will admit that. But when laying out a page, it is not.

It uses divs for layout, so do most websites these days.
This is not true. Go searching. You will find that about 1 out of every 15 to 20 websites uses Divs instead of tables. Simply view the source.

EDIT: Some people like CSS better. Some prefer tables. It is a matter of personal opinion.
cherish
October 10th, 2006, 08:33 PM
Nibinaear, I wonder if your <div class="dainsiderLogo"> will contain only that image? If so, why not just use <img> inside that <div>? The best way to display an image (if it's important, like a logo) is by using <img> tag. It should not be made a background image. Just my two cents. :)
Nibinaear
October 26th, 2006, 06:39 AM
The reason I am using background-image is because, as you intimated, that I not just putting the image in the box. I am also writing text over the top which is why I needed it.


Solution:
To solve the problem I ensured that I was using a height attribute in the class which contains an image and also ensured there was a width if I didn't wan't it to go right to the end. Removing all other non-essential attributes such as float and clear if not required also helped.
Alsvha
October 26th, 2006, 07:32 AM
The reason your image isn't shown is because there is no content in the div with the background image. Background is simply that - background of the shown element. No content - no shown area.

If you need to show an image in its full you need to make sure that the div has the same size as the image (height and width).



As for the div vs. table layout debate (off topic-ish though), then more and more design goes towards div's (and similar elements) for a number of reasons.
One of the main arguments for using divs is also it reduces the complexity needed, thus making it easier to change layout by simply changing the stylesheets, instead of having to redesign, recalculate and re-colspan/rowspan the table cells you can simply get your designers to make a new stylesheet with new positioning of elements and upload that. It also makes it loads easier for having multiple designs - for instance printing vs. screen for the same page using only stylesheets.

Also an argument would be because tables can be devastatingly complex to figure out across multiple include files or asp.net usercontrols where div elements are (IMO) easier to manage.