CSS - Css For A Large Project

Even though I tag my CSS - it's so large for my site that it's a pain to scroll through and use, even using the search.

Is it possible to reference more than one stylesheet from style tags - and have it all work ok? No duplicate classes or anything, I just would like to divide it up into a few different files, but before I do I wanted to know if there's issues with this.

Thanks!

On http://www.h****inson.co.uk/h****inson5.4 (I guess you can work out the name of the site...I've used a tiny-url in the link though) a horizontal scrollbar is displayed even though there is not content (as far as I can see) that is pushing the sides out this far.

Although it is not detremental to the website, can anyone please suggest what is wrong.

The main css code is at http://www.h****inson.co.uk/h****inson5.4/files/css.css

Thanks for any help.

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!

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

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

[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 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.

So basically im a total noob. I'm in a CS110 level class, and can't figure out this stupid project. I need to make two pages using html/css wtf do I do? I can't get the header image to work, and i need to connect the two pages using css.

This is what i have so far:
<html>
<body>

<img border="1" src=/home10/mwh/public_html/110/Project 2/Images/javajam.JPG alt="JavaJam" />

</body>
</html>

Could someone please help?

I have been give the challenge of converting everything to use CSS. The original website is at (URL address blocked: See forum rules)

And my css version at (URL address blocked: See forum rules)

The header and footer I am happy with. The main content section is a content, left, and right DIV. I would like this section to be always aligned centrally with each having a fixed width. What will happen is that the main section (content,left,right) will be more narrow than the header and footer.

I cannot get the content section to go alongside the left calendar type bar.

Any help would be appreciated.

Many thanks
Martin

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.

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

Hey guys, I missed a day of my XHTML class in college and he went over most of the CSS that day, I was sick with the flu and he said that day was the most important, so I'm lost, I need to "Remove any <b>, <i>, <u> and <font> tags and replace them with inline CSS code."

So i come up with something like this

<Style Type="css/text">
<B style="color:blue> This is my display text </b>
</style>

PLEASE HELP ME WITH THIS INLINE CSS! HELP! I'M LOSTTTT!

hi, i have a small website i need to make for a school project.

Ever since i added the CSS MENU

the sidebar just appears half in the middle of the site and no matter what i do, i cannot get it to the right edge.

I have tried margin-right but it does nothing, even if i put it at 5. Its 5 closer away from some strange margin almost in the center of the screen





HTML:::::::::::::::::::::::::::::::::::::::::::::::::::

</head>

<body class="about">

<div id="page-container">


<! header--------------------------------------------------------------->
<div id="header">
<h1><img src="images/headings/heading.gif"

width="700" height="76" alt="Enlighten Designs" border="0" /></h1>
<ul id="navigation">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>Take a tour</span></a></li>
<li><a href="#"><span>About us</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul>
<p><h1><br>Thermal IR - What is it? </h1></p>

</div>
<! SIDEBAR A--------------------------------------------------------------->
<div id="sidebar">

<p>Sidebar, work please, Please work!</p>

</div>

<! CONTENT--------------------------------------------------------------->
<div id="content">
<div class="padding">

</div>
</div>


<! COPY RIGHT--------------------------------------------------------------->
<div id="copyright">

</div>

</div>

</body>
</html>





CSS:::::::::::::::::::::::::::::::::::::::::

MENU START/////////////////////////////////

#navigation a
{
color: #000;
background: ##00E5EE url(left-tab.gif) left top no-repeat;
text-decoration: none;
padding-left: 10px
}

#navigation a span
{
background: url(right-tab.gif) right top no-repeat;
padding-right: 10px
}

#navigation a, #navigation a span
{
display: block;
float: left
}
/* Hide from IE5-Mac \*/
#navigation a, #navigation a span
{
float: none
}
/* End hide */

#navigation a:hover
{
color: #fff;
background: #781351 url(left-tab-hover.gif) left top no-repeat;
padding-left: 10px
}
#navigation a:hover span
{
background: url(right-tab-hover.gif) right top no-repeat;
padding-right: 10px
}
#navigation ul
{
list-style: none;
padding: 0;
margin: 0;
}
#navigation li
{
float: left;
margin: 0 1em;
}


//////////////////////////////////////////MENU END


#page-container {
width: 760px;
margin: auto;
background: #c9c9d9;
}

body { font-family: Verdana; }

html, body {
margin: 0;
padding: 0;
color: black;
}
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}

.hidden {
display: none;
}

#header {
margin: left;
height: 250px;
background: #c9c9d9;
border-top: 1px solid #efefef;
}

#sidebar {
top: 200px;
float: right;
width: 170px;
padding: 5px;
line-height: 18px;
background: #AAAAAA;
border: solid 2px black;
}
#sidebar .padding {
padding: 25px;
}

#content {
margin-right: 240px;
line-height: 18px;
background: #c9c9d9;
}
#content .padding {
padding: 25px;
}

#copyright {
margin-left: 25px;
background: #c9c9d9;
}

h1 {
margin: 0;
padding: 0;
float: right;
margin-top: 57px;
padding-right: 31px;
}

#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}


#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}

Hey guys, please help me out with this, I missed the last day of css in my class and I'm confused, and right now I'm working on my final project.

I'm kinda confused, I want to do a few things from an external stylesheet but I think I have the code wrong. PLEASE HELP!

href {onmousemover:color:red}
P {text-align:justified;font-size:12pt}
h1 {style=font-size:24pt}
h2 {style=font-size:18pt}

PLEASE HELP ME OUT! is this right? It doesn't work, but I know my external stylesheet stuff works cause I did the all uppercase thing and that worked, sooo help!!!

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*.