CSS - Frustrated Newbie With 2 Questions (for Now)

Hi everyone,

this problem has been annoying me for some time now, and I have finally decided to address the issue. but it has only become more annoying!

I have a right sidebar on my site which for some reason always aligns any text in it centrally. i have scoured my css for anything that says text-align=centre, but everything is text-align=left

nothing is telling it to align centrally!

If anyone can spot the problem it would be a huge help!!

here is a link to the page i am referencing, onyahead.com/arsenal

if need be I can post the css, but there is a lot of it!

Im trying to make a link that is based on 2 images, one for the un-hovered or normal state, and the other for the hover state. I just did 2 of these at 3dotmedia.com/redesign and now I'm trying to do the same thing at greedydogkennel.com/redesign but it WILL NOT WORK.
I am totally stumped, it has to be something to do with the positioning inside my css I assume...

on the page, I want the pictures of the dogs to be normal, but when hovered I have a frosty shaded grey image (as in some kind of lighting) to serve as the hover state..I am masking the a href with a class with a transparent .gif (since SOMETHING has to serve as the object of the anchor yes?) but here is my css:

.rock-link {background-image: url(looks/Rock_small_w_frame.jpg); }

.rock-link:hover {background-image: url(looks/Rock_small_w_frame-up.jpg); }

.suade-link {background-image: url(looks/Suadey_Ladysmall_w_frame.jpg); }

.suade-link:hover {background-image: url(looks/Suadey_Ladysmall_w_frame-up.jpg); }

and the HTML is as follows:

<a href="suade.html" class="suade-link"><img src="looks/seethru2.gif" border="0"/></a>
<img src="looks/spacer2.gif" border="0" />
<a href="rock.html" class="rock"><img src="looks/seethru.gif" border="0" /></a></div>

but there is nothing that displays, only the transparent .gif

on the index page you will not see any images under the heading "The Dogs" because this is where the problem is, but if you click on any of the links you will see the pages where I have not applied the class for the a href to take on the hover states, just so you can see how the images look and where they appear.

I have done this so many times, and my code is IDENTICAL at 3dotmedia.com/redesign and it works fine...any help would be GREATLY appreciated...it has to be something Im missing, but WHAT?!?!?

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

Does anyone know much about IE 7? In particular does it conform to the WWW consortium's box model (margins and padding). This would reduce a whole lot of extra CCS elements and headaches. Does is finally support transparent PNG files? Support for PNG will change the look of the web dramatically!

Hi,

I'm designing a web site using a full CSS layout with XHTML. It's quite challenging as I'm used to complex table designs. My design is located at http://www.definitedigital.com/vida/index.html
And the style sheet at http://www.definitedigital.com/vida/style.css

There's some things that look different across browsers, and I'm not sure if it's some sort of bug or my mistake. For example,

1. On Firefox the 'Punta Del Este Vida Beach House' link image is sometimes detected and sometimes unclickable.
2. There's much more vertical spacing between the divs (logo, photo, menu) in Firefox than in IE.

I'd really appreciate if someone could take a look at my CSS, as I don't really know whether I'm doing this right or not.

Thanks,
Ralph

Id really like to use css for page layout. Im using asp.net and I need to setup a template that all my pages use. Id rather not use tables, but ive had trouble using css in the past.

I need a layout that allows for a
header
certered section (used to do it with a nested, centered table)
center section should have shaded edges to simulate a printed page
footer
menubar below the header

I also need the content area to expand and not go bezerk when i add data in a table or a large image.

Can anyone point me to an example that does this ?

I know how to center an element horizontally, but why does it not work with vertical centering?

Horizontal (working) -
Code:

   element.foo {
   margin: auto;
   width: 0;
   }

Vertical (not working) -
Code:

   element.fuu {
   margin: auto;
   height: 0; /* no values work */
   }
   

I've seen an entire layout vertically centered by containing the entire layout in a single-cell table and applying the "valign" attribute to the cell, but I'd rather not use tables. I've also checked out the W3C's "Centering Vertically" example, but it relies on the author knowing the height of the content. Since height doesn't work with %, I can't use that.

Does somebody know of a way to center vertically without using absolute positioning (relative is fine) or tables, and without knowing the height of the content?

I'd rather not use trial and error, but this does seem like a question that is virtually impossible to answer 100% affirmatively (about as sure as 100% height works ).

So I just started a class about 4 weeks ago with CSS and I have run into a problem. Its probably a stupid mistake on my part somewhere but I can't figure it out.

I have div id tags and for those id tags I have created for example:

#test h2, p {
font-style:italic;
text-align:center;
font-weight:bold;
display:inline;
padding: 10px;
}

This is because I want only the header and p content in this specific div tag to have these properties. But for some reason its spilling out onto the rest of my p and h2 tags. Why is this happening and how do I stop it so that I can control which h and p tags have specific properties?

Hope someone can help!!

Thanks

I have the following code:
Code:

<div class="Outer">
	<div class="Inner">
		Text one
	</div>
</div>
<div class="Outer">
	<div class="Inner">
		Text two
	</div>
</div>

I have the following CSS
Code:

.Outer{
width:150px;
float:left;
}
.Inner{
Margin:10px:
}

I would like to set the Inner div in first instance of Outer to have a margin-left of 0px.
I have tried the following
Code:

 .Outer:first-child .Inner{
margin-left:0px;
}

This works in Chrome but not in IE, but it does work if I apply the style inline to the First Inner Div. Can it be done within the CSS file?

I never usually code my layouts and test for validation (which after this I see they would fail horribly), even though it displays right theres so many mistakes. I finally got my layout to pass validation in HTML 4.1, but some things went wrong.

First heres the links: (and yes this does involve CSS):
http://65.26.50.204/ec/index.php - My Layout (View Source)
http://65.26.50.204/ec/stylesheet.css - The CSS

One thing I was told to do is take out height="100%" but it only told me to take it out in some places and not otheres... strange. Anyways how do I get it to stretch 100% with CSS?

Second question, is it a bad practice to use a lot of css classes, I mean like if I have a CSS class used only once is that bad? Does it even matter how many I use?... it wont delay page loading time will it?

Third question, I was told to remove the cellspacing tag in most of the places, is that not used anymore or what?

I am working on css for a project of mine and I am having a few minor problems with the position and widths of my divs.

If I have a parent container and divs within the parent container do the child containers not inherit the width and height of the parent containers?

For example here is my css thus far:
Code:

/* CSS Document */
h1 {
	font-family: Geneva, Arial, sans-serif;
	font-size: 20px;
	color:#000000;
}

h2{
	font-family: Geneva, Arial, sans-serif;
	font-size: 16px;
	color:#000000;
}

h4{
	font-family: Geneva, Arial, sans-serif;
	font-size: 12px;
	color:#000000;
}

body {
	margin: 0;
	border: 0;
	background: #ededed;
}

/*============================ Begin Layout Structure ============================*/

#wrapper {
	width: 1024px;
	min-height: 768px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px, auto;
	background: #ffffff;
}

#accountselector {
	position: relative;
	height: 15px;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
}

#headerwrapper {
	position: relative;
	padding-top: 5px;
	width: 100%;
	height: 200px;
}

#headerwrapper-left {
	position: relative;
	width: 65%
	height: 100%;
}

#headerwrapper-left-logo {
	position: relative;
	height: 75px;
	width: 100%;
	background: blue;
}

#headerwrapper-left-navigation {
	position: relative
	height: 15px;
	width: 100%;
	background: red;
}

#headerwrapper-left-banner {
	position: relative;
	height: 110px;
	width: 100%;
}

#headerwrapper-right {
	position: relative;
	width: 35%;
	height: 100%;
}

#headerwrapper-right-heading {
	position: relative;
	width: 100%;
	height: 15px;
}

#headerwrapper-right-customer{
	position: relative;
	width: 100%;
	height: 185px;
}

#bodywrapper {
	position: relative;
	min-height: 478px;
	width: 100%;
	padding-top: 10px;
}

#bodywrapper-leftwrapper {
	position: relative;
	height: 100%;
	width: 20%;
}

#bodywrapper-leftwrapper-subnav {
	position: relative;
	height: 50%;
	width: 100%;
}

#bodywrapper-leftwrapper-news {
	position: relative;
	height: 50%;
	width: 100%;
}

#bodywrapper-rightwrapper {
	position: relative;
	height:100%;
	width: 80%;
}

#bodywrapper-rightwrapper-body {
	position: relative;
	height: 100%;
	width: 100%;
}

My HTML is as follows:
Code:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="test5.css" />
</head>

<body>
<div id= "wrapper">

	<div id= "accountselector">Home&nbsp;&nbsp;&nbsp;&nbsp;Business</div>
	
	<div id= "headerwrapper">
		<div id="headerwrapper-left">
			<div id= "headerwrapper-left-logo">US Sonet Logo</div>
			<div id= "headerwrapper-left-navigation">Link1&nbsp;&nbsp;&nbsp;&nbsp;Link2&nbsp;&nbsp;&nbsp;&nbsp;Link3</div>
			<div id= "headerwrapper-left-banner">US Sonet Banner</div>
		</div>
		<div id="headerwrapper-right">
			<div id="headerwrapper-right-heading">Manage Account</div>
			<div id="headerwrapper-right-customer">Account Control Center</div>
		</div>			
	</div>	
	<div id="bodywrapper">	
		<div id="bodywrapper-leftwrapper">
			<div id="bodywrapper-leftwrapper-subnav">Link1 &nbsp; Link2 &nbsp; Link3</div>
			<div id="bodywrapper-leftwrapper-news" >News</div>
		</div>
		<div id="bodywrapper-rightwrapper">
			<div id="bodywrapper-rightwrapper-body">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
				adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
				penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
				libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
				cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
				pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
				in dui. In eget elit. Praesent eu lorem.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
				adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
				penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
				libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
				cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
				pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
				in dui. In eget elit. Praesent eu lorem.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
				adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
				penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
				libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
				cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
				pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
				in dui. In eget elit. Praesent eu lorem.</p>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac pellentesque 
				adipiscing, mauris ligula convallis metus, vitae scelerisque nibh orci quis mi. *** sociis natoque 
				penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur porttitor aliquam 
				libero. Quisque molestie ornare sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor 
				cursus aliquam. Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
				pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. Pellentesque 
				in dui. In eget elit. Praesent eu lorem.</p></div>
		</div>		
	</div>
</div>

</body>
</html>

Why aren't the children divs inheriting their width from the parents or do they not function this way?

After using tables for most of my web development life (which isn't very long) I'm diving into using divs and css to try and learn that art form. Obviously I'm running into issues that I could use some help on.

I'm trying to layout a login area and I would like some direction. Here's what I have currently:

Code:

            <div id="headerSignin">
                <asp:MultiView ID="mvSignin" runat="server" ActiveViewIndex="0">
                    <asp:View ID="vwNotSignedIn" runat="server">
                        <div class="signInTitle">
                            Username:</div>
                        <div class="signInTextbox">
                            <asp:TextBox ID="txtUsername" runat="server" Width="200px" /></div>
                        <div class="signInTitle">
                            Password:</div>
                        <div class="signInTextbox">
                            <asp:TextBox ID="txtPassword" runat="server" Width="200px" TextMode="Password" /></div>
                    </asp:View>
                    <asp:View ID="vwSignedIn" runat="server">
                        <div>
                        </div>
                    </asp:View>
                </asp:MultiView>
            </div>

And the css for those tags:

Code:

#container #header
{
    color: Blue;
    width: 1000px;
    height: 100px;
    position: relative;
}

#header #headerLogo
{
    width: 600px;
    position: relative;
    float: left;
}

#header #headerSignin
{
    background: #A9A9A9;
    width: 400px;
    position: relative;
    float: right;
}

.signInTitle
{
    width: 130px;
    text-align: left;
    vertical-align: middle;
    float: left;
}

.signInTextbox
{
    width: 200px;
    float: right;
}

With what I currently have stated there, I get the two columns evenly filling 50% of the headerSignin div. And the 'Username:' and 'Password' text are sqished at the top and the textboxes are squished together. (The colors are there just so I differntiate. )

I would like obviously for the Username and password to be next to the textboxes with a width of 130px and the textboxes be 200px with some padding in between them to seperate them.

If any confusion I apologize. I'm new at divs...

I have 3 problems with the CSS I'm attempting (been a very long time). You can see my crud in progress at .shelleysjewelry.com/uploads/newsite/shelleys/index dot html (and, yes, it is pure crud -- besides the god-awful CSS & JS, none of the links work). I've been banging my head on these...

Problem the First:
I have a tricky absolute positioning situation that uses a combination of sliding dropdown menus and Javascript, like so:

var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
var dimensions = getPosition(h);
c.style.left = dimensions[0];
c.style.top = dimensions[1] + h.offsetHeight + 5;
c.style.display = 'block';

"c" represents the slideout submenu and is absolutely positioned. Both values are being set to something that is expected (e.g., dimensions[0] is not zero). However, while it works in IE, it doesn't work in Firefox -- the top is being respected, but the left isn't. I understand I have a lot of margin/padding that will mess with absolute positioning, but AFAIK, that should only affect a few pixels, not render it unusable. Anyone have insight why?

Problem the Second:
I love the overflow property. The tabs are wrapping around. However, I'd like them to not overlap, without explicitly breaking them into two rows. I don't suppose there's any way to do that?

Problem the Third:
In IE, to run the site, I have to "allow ActiveX Content". There is a Javascript function that runs on startup to calculate minimum div heights and other innoconous methods. How do I get rid of that warning?

Any help much appreciated... )

First: I have seen:

p.classname
and just
.classname

What is the difference between the two if the latter is applied to a paragraph?

Also:

I have seen classes stack on top of each other like:

<p class ="classname" class ="classname2">text</p>
<p class = "classname" id = "idname">text</p>

So is there a way to use classes with other classes id with other ids or classes and ids together like the above?

Hi,

I'm a fairly experienced programmer and am learning how to make websites in a modern way with xhtml and css. I'm trying to create a fairly simple looking front page in the vein of http://www.facebook.com/ . but i have a few css questions. Firstly, how can i give the background of my website a gradient (non -flat) colour using css? also - what is the best process when trying to make a website. I have mocked up a quick design in photoshop (image is attached to the post) and want to begin implementing. Would each part (e.g.) logo be a seperate div which links to an image?

any help is appreciated as i'm used to working with tables and divs are a whole new realm for me!

thanks