CSS - Noob Syntax Question

I have a footer image on a site and I want to line up some of the text on the left and some of the text on the right. The relevant css footer code is this:

Code:

#footer { 
	clear:both; 
	background:url(images/footer.jpg); 
	width:780px;
	height:71px;
	color:#ffffff;
	font-size:xx-small; 
}

#footer .notover {padding-top:54px;}

The xhtml is this:

Code:

<div id="footer">
	<div class="notover">All this stuff is left aligned 54px from the top of the image.</div>
</div>

Now, how do I add some text on the same line as the class="notover" text that is right aligned? I thought it would be as simple as creating another div that specified text-align:right; but the text shows up right aligned and way below the footer image.

Thanks in advance.

Hey all.

I'm just starting out in web design. To make things even more complicated, I'm using CSS for my first ever website.

So I'm building this website from scratch, using online tutorials and such. But I'm running into a problem. On a PC, everything displays perfectly in IE and Firefox. But on a Mac, the nav bar is stretched with dead space after the last list item. This is the same in Safari, Firefox, and IE for Mac.

Would you guys give it a look and maybe help me around the issue? What I'd like is no dead space after the last list item on any computer, (if you're looking on a PC, it appears correct) and I want a fixed width.

Site
CSS

Thanks.

Hello,

I'm a self taught web designer, i've not really got much experience of CSS and i'm having a few issues with some alignment.

I'm in the process of developing a site for my cousin, what i'm trying to achieve is the left menu to be at the top of the page, and the text to be in the center of the screen, as i'm new here i'm not able to post a link to my site, so have posted the CSS below.

Playing with css and looking at Google I've padded the text so its where i want it, but i can't get the menu to come up from below the text.

Any help / links in the right direction would be really appreciated.

Code for the text:
Code:

p.mainbody
{ 
z-index: 1000; 
vertical-align:top; 
padding-left: 200px; 
padding-right: 250px; 
text-align:left;

code for the menu:
Code:

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */ 
ul.MenuBarVertical 
{ 
vertical-align:top; 
margin: 0; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
cursor: default; 
width: 10em; 
/*height:10em;*/ 
} 
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ 
ul.MenuBarActive 
{ z-index: 1000; } 
/* Menu item containers, position children relative to this container and are same fixed width as parent */ 
ul.MenuBarVertical li 
{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
position: relative; 
text-align: left; 
cursor: pointer; 
width: 10em; 
} 
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ 
ul.MenuBarVertical ul 
{ 
margin: -5% 0 0 95%; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
position: absolute; 
z-index: 1020; 
cursor: default; 
width: 8.2em; 
left: -1000em; 
top: 0; 
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ 
ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 0; } 
/* Menu item containers are same fixed width as parent */ 
ul.MenuBarVertical ul li { width: 8.sem; } 
/******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ 
/* Outermost menu container has borders on all sides */ 
ul.MenuBarVertical { border: 1px solid #CCC; } 
/* Submenu containers have borders on all sides */ 
ul.MenuBarVertical ul { border: 1px solid #CCC; } 
/* Menu items are a light gray block with padding and no text decoration */ 
ul.MenuBarVertical a 
{ 
display: block; 
cursor: pointer; 
background-color: #EEE; 
padding: 0.5em 0.75em; 
color: #333; 
text-decoration: none; 
} 
/* Menu items that have mouse over or focus have a blue background and white text */ 
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus 
{ 
background-color: #33C; 
color: #FFF; 
} 
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ 
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible 
{ 
background-color: #33C; 
color: #FFF; 
} 
/******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ 
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ 
ul.MenuBarVertical a.MenuBarItemSubmenu 
{ 
background-image: url(SpryMenuBarRight.gif); 
background-repeat: no-repeat; 
background-position: 95% 50%; 
} 
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ 
ul.MenuBarVertical a.MenuBarItemSubmenuHover 
{ 
background-image: url(SpryMenuBarRightHover.gif); 
background-repeat: no-repeat; 
background-position: 95% 50%; 
} 
/******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ 
ul.MenuBarVertical iframe 
{ 
position: absolute; 
z-index: 1010; 
filter:alpha(opacity:0.1); 
} 
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ 
@media screen, projection 
{ 
ul.MenuBarVertical li.MenuBarItemIE 
{ 
display: inline; 
float: left; 
background: #FFF; 
} 
}

Many Thanks

Basic positioning problem...

Suppose I want to stack two (or more) elements on top of eachother, sort of a column. I want a masthead (images), and boxes of text below it. So I tried this:

Quote:
<html>
<head>
<title>No Jail Test Page</title>
<style type="text/css" media="screen">
div.box_one
{
width: 100%;
background: url(./Image_Back.gif);

}
div.image_left
{
float: left;
}
div.image_right
{
float: right;
}
div.box_two
{
background-color: #F4F4F4;
width: 100%;
border: 2px solid #006633;
border-collapse: collapse;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<div class="box_one">
<div class="image_left"><img src="images1.gif"></div>
<div class="image_right"><img src="images2.gif"></div>
</div>
<div class="box_two">
Some Text Some Text
</div>
</body>
</html>


But the images end up over the text, so obviously I don't understand the positioning.

SEE ATTACHED IMAGE

Can someone point out my positioning problem here and recomend a tutorial?

[EDIT] This actually looks almost perfict in IE, it's in FF that things "stack up" on eachother...

Hi ..

I have decided to teach myself Web Development .. and I have jumped into HTML and CSS first .. and will be branching off to PHP once I have a solid HTML and CSS foundation ..

To teach myself practically .. I have decided to make a webpage that does nothing but have a blank coloured background and an area to write text that is surrounded by a rounded rectangle constructed of gifs ..

I know this may not be the most efficient way to do this, but I am using this as an exercise to gain a greater holistic understanding of the way CSS works with HTML.

The desired outcome is to have a rounded rectangle box that will be drawn to fit its container, so that it can be reused all over the place ...

The code is pasted below, and any images can be substituted for the ones in my code .. but my question is .. : in the attached code, why is the final element not lined up horizontally with the other 2 elements ??


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "(*********)">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Insert title here</title>
</head>
<body>
<div id="body">
<div id="container">
<div id="box_top_left">
</div>
<div id="box_top">
</div>
<div id="box_top_right">
</div>
</div>
</div>
</body>
</html>

CSS Code

div#container{
width: 500px;
height : 500px;
position:absolute;
background:#7868723;
}

div#box_top_left{
width: 10px;
height: 10px;
display: block;
float:left;
background-repeat: no-repeat;
background-image: *******
}
div#box_top_right{
width: 16px;
height: 10px;
float: right;
position: relative;
display: block;
top: 0px;
background-repeat: no-repeat;
background-image: ********
}
div#box_top{
width: 100% - 26px;
height: 10px;
display:block;
position:relative;
left : -5px;
margin:0;
background-repeat: repeat-x;
background-image: *******
}

Thanks for any assistance you can give ...

Hi guys,
I have this:
Code:

<li style='background-image:url(../images/layout/listitem.png); background-position:0px " . $background . "px; height:23px;   background-repeat:no-repeat;'>

I want a hover effect, I found a w3c article
'http://www.w3.org/TR/css-style-attr'

But copying the syntax just does not work?

Any help?

Hey everyone, the admins have implemented a new hack to the
forums, allowing you to post your code with nicely coloured text
rather than just the normal black or the old php stuff.

More details can be found he
http://forums.devshed.com/t279108/s.html

Html code:
[hig hlight=html4strict]your code here[ /highlight]

For example:
html4strict Code:
Original - html4strict Code <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <h1 class="header_text"> Nice One! </h1> <p id="main_content"> <span style="color:red;">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </body> </html>

  

  


 <?xml version="1.0" encoding="iso-8859-1"?>


 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">


 <head>


 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


 <title>Untitled Document</title>


 </head>


  


 <body>


 <h1 class="header_text">


     Nice One!


 </h1>


 <p id="main_content">


     <span style="color:red;">Lorem ipsum</span> dolor sit amet, consectetur


     adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore


     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco


     laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in


     reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.


     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia


     deserunt mollit anim id est laborum.


 </p>


 </body>


 </html> 

The same goes for CSS highlighting:
[hig hlight=css]your code here[/high light]
css Code:
Original - css Code /*Comments*/ body { property:value; } body, div { property:value; }

  

  


 /*Comments*/


 body


 {


     property:value;


 }


 body, div


 {


     property:value;


 } 

As you can see from the thread I linked, there are many many
other languages supported, but these three examples are more
likely to be used than any other in this particular forum...

Have fun with it, and please do use this feature, I'm sure it will
make things much easier for us to read/understand, rather than
just posting chunks of code.

Enjoy!

--Jon.

I keep getting an error but only when I run the site in IE8:
Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727)
Timestamp: Fri, 13 Mar 2009 16:59:31 UTC

Message: Syntax error
Line: 1
Char: 25
Code: 0

It keeps pointing to this line of code at the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

But if I don't use that the Divs and some CSS seem to break.

With or without that code it works great in FireFox. I have no idea what's going on with this.

Hello I would like to know the difference between:

*name
.name
#name

thanks

Hi! I need some clarification on what the right arrow meant for the UL and LI

Code:

#dmenu li>ul { 
	top: auto;
	left: auto;
}

Thanks...
FletchSOD

Hello. I'm playing around with CSS and trying to learn it, but for some reason, I can't figure out why my code won't work. It's very simple, the site, and all I want to do right now is pub a small black border around my first DIV, "header-left" just for the heck of it.

Code:

<HTML>

<HEAD>
<TITLE>Andy/s</TITLE>

<!--Style Sheet-->
<STYLE type=text/css>
header-left
{
	border:1em solid;
}
</STYLE>

</HEAD>

<BODY>

<DIV ID="header-left">Hi</DIV>

</BODY>

</HTML>

I think it should work. I've tried em and px for the border and FireFox is still showing nothing. Any help? I'm open to anything!

How to define a style so that I can just put <table class="abc"> and it will apply to both table, th, td together?

currently i am using:
table,th,td{
//style here

}

it work in all table, th, td. But i just sometimes want to write <table class="abc"> and it would apply in all cell within this table. so that I don't need to write <th class="abc"> , <td class="abc"> in every tag in same table.

thx.

Hello! I have been teaching myself the ins & outs of CSS for presentation & there is something I'm not exactly clear about "selectors, classes, ids, rules & definitions, delimiters" and the like.

Sometimes I notice people are creating rules for elements or classes that look very different...I think this has to do with parent elements or selectors/properties, but I am not sure.

Here's a few examples of rules that I don't understand:

Code:

div#navigation

#navigation .navigation a

.body div#navigation > a

I know how to define a rule & class, for example #navbar to set the properties such as text color, background, etc. even a background image for this DIV.

What I'm trying to say is "What the heck is the difference between using a Hash mark (#) versus a period (.) and when the heck did > or < come into play?"

No tutorials on learning CSS seemed to actually explain these, just tell you "that's how it is," so I am very curious to learn more.

Thanks for your help!

Hi all,

What does this mean?

H1 A:link { color:#fff }

- or -

.sectionhead H2 { font-size: 12px; }

I'm asking specifically about the space between the name of the selector and the HTML tag reference. What function does that space have? If it were a comma I would know, but I don't know what a space means. Sorry if totally dumb question.

Also, I keep seeing three-character hex values (e.g., #fff, #0cd, #078, etc). How are they used, what do they mean? I would have thought it meant to repeat the three characters to make the six (eg, #ffffff, #0cd0cd, #078078) but that appears not to be the case.

I've been looking around w3schools.org to find answers to questions like these, but no luck. Any suggestions?

Thanks to anybody who takes the time to answer!

Laura S.

Greetings all,

Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it.

I was wondering if there are any good references/books you'd suggest purchasing or looking at online?

Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this:
___________________________
|[ i m a g e ]....................text |

However, it comes out looking like this:

___________________________
|[ i m a g e ]..........................|
|.....................................text|

I suspect it is due to the align: right of the text, but am not sure how to correct it.

Relevant snippets of code:

testpage.html
Code:

...
<div class=header>
<img src="image.jpg"><h1>TEXT</h1>
</div>
...

style.css
Code:

...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}

#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}

Thanks for any advice.