CSS - How Do I Organize The Css For A Large Site?

Hi everyone

I recently stumbled upon the CSS sprite idea and i've been loving it! Makes changing and adding graphics so much easier. However i've run into a concern. My image sprite is becoming quite large (>150KB) and my HTML code has many divs who's background refers to this sprite (can get upto 100 divs). With this i've started to notice slight sluggishness of my HTML page and got me thinking weather i should divide my large sprite into a number of smaller ones to enhance performance. This is mainly because i have quite a lot of hover effects (which merely shift the background position) and i suspect this is causing the sluggishness and high memory usage.

It's far too time consuming to try this myself so i'm wondering if anyone has any experience with such an action.

Many thanks

Hi - Im new to css and I need to develop a website for IE 6. I am getting a large gap between two divs for an unknown reason - I would like to have them flush against eachother as they seem to appear in IE 8 but not in IE 6. The two divs with the gap a #welcomeandsearch and #welcometext

below is the basic html and css I am using:

Code:

#welcomeandsearch {width:940px; float:left; margin: 0px;}
#welcome {width:700px; float:left; color:#FFA000; font-size:1.75em; font-weight:normal; margin: 0px;}
#welcometext {width:970px; float:left; padding: 0; margin: 0px;}
#search {width:190px; float:left; color:#363636; font-size:0.75em; font-weight:normal;}
#searchbox {width:200px; float:left; color:#363636; font-size:1.0em; font-weight:normal;}
form input.button {width:25px; height:15px; background:#FFC666; color:#363636; font-weight:bold; border:none; font-size:11px; margin:0 auto; padding:0px;}
form input.textfield {color:#363636; font-size:0.75em; font-weight:normal;}

<div id="welcomeandsearch">
  <div id="welcome">Welcome</div>
  
  <div id="searchbox">
    <form id="form1" name="form1" method="post" action="">
      <label>Search:</label>
        <input name="textfield" type="text" class="textfield" id="textfield" value="enter keywords here" />
        <input name="button" type="submit" class="button" value="Go" />
    </form>
   </div></div>
   <div id="welcometext">to the Customer Self Help Resource. This online resource has been developed to assist all staff with their most common IT related problems and requests.</div>

Any help much appreciated!

I have a menu that I'm working on which uses <A> elements for the menu items. I've given these A elements height and width dimensions and background images which works pretty well -- except the text in these A elements is top-aligned. I've tried adding a vertical-align directive in my CSS but this doesn't seem to do anything at all.

I'd also like to add a bit of space around the text. Is this possible?

here's a bit of my CSS:
Code:

ul.menu li a {
  width: 295px;
  height: 59px;
  background: url(button_bg.jpg) no-repeat;
  display: block;
  padding: 0px;
  margin: 0px;
  border: none;
}

[link removed]

In IE6, the category "At-A-Glance Telephone/Address Book" has a large vertical gap inserted at the first space. It only happens on this page (that I've found). It doesn't happen on other pages with the same number of nested lists. Shortening the name of the category so it doesn't wrap just moves the gap to the next category down.

Any idea what's causing this? Thanks much in advance.

-------

Someone on another forum figured it out. It was just IE6 choking on the left padding used to indent each sublevel. Reduced the padding for IE6 only to fix it.

I have a data table within my content div. It appears fine on my screen in several browsers, however, coworkers have a large (full screen) of white space where the table should be. They have to scroll down a full screen to get to the table.

I have everything on the site set up using CSS. The table contains the dates, times and municipalities for Trick or Treat events.

I have a vertical-align:top on the table.

Here is the CSS:
Code:

table#halloween {
    margin-left: 2px;
	text-align:center; margin-right:auto; width:100%;
	vertical-align:top;
	font-size:12px;
	padding: 3px;
	width:100%;
	border: solid #000000;
	}	
	
td.halloweencell {
	border-color: #000; 
	border-style: solid;
	}

Here is a sample of the HTML :
Code:

 <table width="100%"  id="halloween" summary="Table of municipalities, date of trick or treat and times for trick or treat">
                       <tr>
                         <th width="50%"  class="rowcoloryellow"><strong>MUNICIPALITY</strong></th>
                         <th width="20%"  class="rowcoloryellow"><strong>DATE</strong></th>
                         <th width="30%"  class="rowcoloryellow"><strong>HOURS</strong></th>
                       </tr>
                       <tr>
                         <td colspan="3">&nbsp;</td>
                       </tr>
                       <tr>
                         <td class="halloweencell" width="50%">City of Hartford </td>
                         <td class="halloweencell" width="20%">October 30th  </td>
                         <td class="halloweencell" width="30%">4:00 p.m. - 6:00 p.m.   </td>
                       </tr>
                       <tr>
                         <td class="rowcolororange">City of West Bend </td>
                      <td class="rowcolororange">October 30th </td>
                         <td class="rowcolororange">4:00 p.m.- 6:00 p.m. </td>
                       </tr>
                       <tr>
                        <td class="halloweencell">Town of Addison </td>
                         <td class="halloweencell">October 30th </td>
                         <td class="halloweencell">3:00 p.m. - 6:00 p.m. </td>
                       </tr>
                       <tr>
                         <td class="rowcolororange">Town of Barton </td>
                         <td class="rowcolororange">October 30th  </td>
                         <td class="rowcolororange">4:00 p.m. - 6:00 p.m.  </td>
                       </tr>
                       <tr>
                         <td class="halloweencell">Town of Erin </td>
                         <td class="halloweencell">No Set Schedule </td>
                         <td class="halloweencell">&nbsp;</td>
                       </tr>
</table>

It is located at: www.washingtoncountysheriffwi.org/halloween.php

Any suggestions?

Thanks!

Helen

I want to create smaller sidebars with large sidebar.
Like small boxes within a large box on left hand side and the same on the right.

I will put up an example soon but don't i use absolute positioning for the large box, a relative postion within this box for smaller box containers.
The css tags are class and an id so I can keep the appearance of each smaller container the same.

I have a page with some very large (dynamically populated) tables in an application. Is there a way to prevent these table from being pushed to a new page when printing?

I don't care where the tables break, but what I am trying to avoid is a printed header and then a huge gaping whitespace on the 1st printed page and then the table , that should have been printed just below the header, on a new second page.

Any thoughts?

Thanks, Stephen

Hi - I'm a bit of a noob when it comes to CSS etc. but have been asked to modify some code for someone. Basically it's a simple site that has the main content centered on the screen (about 960px wide). However there is a large banner image that is about 2000px wide that is supposed to stretch as wide as say a large 27" mac. I am not sure if this is the correct way to do it but I guess they couldn't use a smaller image and repeat it because there is a unique design/pattern throughout the whole width. Anyway, on smaller browsers everything looks good except the horizontal scroll bar allows the user to scroll all the way to to the right. Is there anyway to clip the image on the top to prevent the scroll bar from showing based on screen width?

Hope that makes sense. Thanks.

Hi guys!

Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work!

Here is what I'm trying to do, complete with pictures to help visualize things.

Example
This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides.

Code:

http://img708.imageshack.us/img708/2458/layoutstyle.jpg

The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page.

The dark blue outline shows a much higher resolution display

The light blue color shows the extra artwork only revealed to higher resolutions

The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move)

The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements.

The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness.


Problems
Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser".

The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place.

I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser).


If you want a real world example of what I'm trying to achieve, please view the following website:

Code:

http://us.blizzard.com/diablo3/?rhtml=y

unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language).

Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do.


P.S. Sorry about the weird links, seems new accounts can't use url's *shrugs*.

Hi

Any comments, especially CSS wise would be muchly appreciated...

URL

One thing I did notice was that when you click on a link to go to a page with more content that the one you were on before, that the entire layout shifts...any ideas anyone?

thanks!

Modo

Hi I need css help to make it a 3 column and add google adsense to my site

its a music portal my18friends.com

I am currently getting back into creating websites and learning new ways to make them. I like using Photoshop to create the graphics, but is there any way that I can use CSS to make it so that on all my pages the main portion on the site remains the same, such as the header, footer and side bars? Appreciate the help. BTW... the site address is Orpheus Designs .

hello, ive made a site for a client but for some reason when they first see it it moves up and then after they go back its fine.

they use an old IE so i cant see why it does on my computer and its fine on mozzilla to.

www.designerbagsboutique.co.uk

is the website, can anyone help?

Here is a new template I am working on for my site (only "Home", "Events" and "People" work, at the moment).

It displays as designed in Firefox but it looks absolutely terrible in IE6. I am aware that there are several ways of hacking IE6 to make it behave differently, however I'm not entirely sure of where in particular I should be applying these.

Hey guys. I've been looking for this site that I should have bookmarked when I found but have lost. I can TRY and describe it as best I can.

The main background color was white with, depending on the style you've set, a glass of wine or mug of beer fairly large in size and with a low opacity.

The styles were simple. Purple or yellow. Wine or beer. Mostly black text. I forget how it was you were able to change them, but he used it in some examples.

The menu had list items similar to the naving convention:
liquid 2 column nf
fixed 3 column nfnh
liquid/fixed 3 column
etc.

The header was the whole wording of whatever the menu items were.

Each page he showed examples using css, xhtml and sometimes javascript with the code on the page.

At the bottom of each example it had a group for user comments. Some were empty.

I don't remember any logos at all on the site other than the wine and beer. I think the url was something like: www.site.com/nameNO~/

I found it the same day I found the "seabold why tables are stupid" site. I remember reading a solution to a problem that I've encountered but I don't remember the code, I was just skimming the site. I tried finding other solutions, or the same solution somewhere else with no luck.

Thanks