Learn VBA & Macros in 1 Week!

CSS - Opposite Align Two Elements

Full Excel VBA Course - Beginner to Expert

Opposite Align Two Elements	View Content

Hello, I have this small problem with aligning two elemets. I want the other element to be left aligned and the other right aligned.

This is how it looks like

Code:

<div class="links">
   <div class="name">Kimppa</div>
   <div class="date">10/20/05</div>
</div>

<style>
.links {
   width: 700px;
}

.name {
   // Left-align this element
}

.date  {
  // Right-align this element
}
</style>

Both the name and date elements must be horizontally on the same line (so no line breaks).

Any idea how I could do this?

Full Excel VBA Course - Beginner to Expert

How To Vertically Align 3 Elements

Similar Tutorials

View Content

If you go to the page http://electrojams.com/2010/05/03/n...le-some-chords/ you will see at the top of my post the "social sharing" icons...

They are all embedded JavaScripts, but how can I align them? The Stumbleupon button is lower than the others...

Is It Possible To Align Vertically Block Elements In A Fixed-height Container?

Similar Tutorials

View Content

Hi!

Is it possible to align vertically block elements in a fixed-height (unknown) container?

If not, this is a serious shortcoming of the css model of placing objects on the screen.

Thanks!

Combining 'float' With Opposite Margins

Similar Tutorials

View Content

Hi!

I am beginning to use and learn CSS in more depth as of recent, and I've came across an issue which I wonder if it is a known one, or if it is related to my code.

Within a parent div, I have floated a div element to the right of another div element with the use of float:right; . The floated div is a class which is used two times in this instance, thus I want to define the margin-left it should have to the leftmost element in the parent div, but also which the second iteration of this will have in relation to the first one.

However combining the float:right; and margin-left:xx; lines, the element margin does not start with the end of the leftmost div element which I am seeking to float it to the right of, rather, the margin is for some reason beginning in the middle of the parent div.

Is there any known issue here that I need to be aware of, and is it possible to get the margin to start at the end of the first (and leftmost) div element.

I am using a margin-right for the time being to get some reasonable positioning, however the result is a compromise of what I originally intended.

Alligning The Logo With The Menu, Opposite Side.

Similar Tutorials

View Content

Hello,

I'm having some problems with with the menu and CSS.

I'm trying to retouch some aspects of my website, and the last think I need to do now is the menu.

Right now, here is how it looks like:
www.lightblu.com

You see the menu on the very top, then the logo below it, and then the banner below the logo. My users were "annoyed" by the amount of empty space between the top menu and the banner. Having thought of many possibilities, I encountered a template over at TemplateMonster, which is the exact menu I need. The reason I did not purchase it is that usually TM uses tables rather than pure CSS.

And here is the menu I'm talking about:
http://www.templatemonster.com/website-templates/18925.html

You see the menu?

And that's the exact same menu-concept that I'd like to have. Of course the background will be Black just as my website, rather than the greyish one you see at TM.

Now here is the problem I'm having. When I'm trying to align the logo with the menu, it just doesn't happen. I have the logo the on top left, which is fine, but then the menu appears below the logo on the right side. And I just cannot figure this thing out. Grrrr.. What am I doing wrong?

Thanks a ton guys!

Absolute Elements Appearing Behind Floated Elements

Similar Tutorials

View Content

Hello all,

I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly.

The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements.

Code:

		#wrapper-body ul.staff-list{
			list-style-type:none;
			padding-top:10px;
			position:relative;
		}
	
		#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
	
			#wrapper-body ul.staff-list li{
				float:left;
				width:230px;
				position:relative;
				padding:8px 0 8px 15px;
				z-index:1;
			}
			#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
			#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
			#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
			#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
				#wrapper-body ul.staff-list li p{
					padding:0 0 9px 0;
					margin-left:91px;
				}
	
				#wrapper-body ul.staff-list li small{
					padding:0 0 5px 0;
					margin-left:91px;
				}
		
				#wrapper-body ul.staff-list-clerks li span{
					color:#A6302B;
					display:block;
					float:left;
				}
		
				#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
				#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
				#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
		
		
				#wrapper-body ul.staff-list li div.staff-list-detail{
					display:none;
					background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
					padding-bottom:3px;
					margin-top:-15px;
					left:4px;
					z-index:10;
					top:15px;
					position:absolute;
				}

				#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }

				#wrapper-body ul.staff-list li:hover div.staff-list-detail{
					display:block;
}

An image of what is happening below:

Thanks for reading!

Left Align And Right Align On The Same Line??

Similar Tutorials

View Content

I have a header wrapper for a column heading that sets the width and background of the column header. In that column header I have a tag for the header title, which is aligned left.

Know, I find that the customer wants to add an "As of Date", on the same line, but wants it aligned right.

Is this even possible to do? I cannot seem to come up with the correct .css code that would allow me to do this.

html code

Code:

<div class="wide_column_header"><span class="headerbartext">Make Your Enrollment Selection</span><span class="headerbartextright">As of 3/31/2008</span></div>

css tags:
Code:

.wide_column_header {
  float:left;
  width:558px;
  margin:0 0 0 5px;
  background-image:url(../images/wide_header.jpg);
  height:21px;
  font-size:100%;
  font-weight:900;
  line-height:100%;
  vertical-align:bottom;
  color:#fff;}

.headerbartext {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-left:15px;
  line-height: 140%;}

.headerbartextright {
  font-size: 12px;
  font-weight:bold;
  text-align:right;
  padding-right:15px;
  line-height: 140%;}

Css In <td> Elements

Similar Tutorials

View Content

I'm making a webpage for myself, and am coding to current Transitional XHTML and CSS standards. I'm using Firefox 0.9.2 for viewing the page.

The problem I'm having is with adding a class to a <td> element and getting it to work correctly in IE 6. The CSS class I'm using for the <td> element is as follows:

Code:

.w3type{color: black; background-color: #FFCE6B;}

Code:

.w3type:hover{color: white; background-color: red; background-image: url(images/mrgreen.gif); background-repeat: no-repeat; background-position: right;}

I add this class to a <td> tag:

Code:

<td class="w3type">

and when i view it in FF, the text and background work correctly, changing color and adding a little image to the right when I hover my mouse over it.

The problem is that when I go to view the code in action with IE 6, neither the background nor the image will appear on hover. Is this a problem with IE, or my code?

If you want to see the code on my site, here's the link. The css formatting in question is on the lower left corner of the page (the W3C webbadges).

Thanks for any help

Align To Top

Similar Tutorials

View Content

Hi,

I know this must be a real stupid question but I've tried loads of googling around and just cant figure out how to do this. Please could someone tell me what I'm doing wrong. I want the <a> to be aligned to the top right.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">

body {
	font: 12px Verdana, sans-serif;
}

.assignment {
	margin: 2px;
	padding: 4px;
	border: 1px solid;
	border-color: gray;
	background-color: lightyellow;
	text-align: left;
	width: 150px;
	height: 20px;
	vertical-align: center;
}

a.removeAssignment {
	align: top;
	padding: 1px;
	margin: 0px;
	border: 1px solid gray;
	position: relative;
	top: 0px;
	right: 0px;
	float: right;
	width: 16px;
	height: 16px;
	background-image: url('remove_icon.png');
	background-repeat:no-repeat;
	background-position: center;
}

</style>
</head>

<body>
<div class="assignment">Hello<a href="#" class="removeAssignment" /></div>
</body>
</html>

Help With Right Align

Similar Tutorials

View Content

here is the page...
emarketing and design . com /spa/

Its the "sign up for specials and promotions" with sign up box..

how do I get it to flush right?

here is my css--it's "newsletter" (this is my first try with css - be nice)

p
{
margin: 0.4em 0.5em;
font-size: 0.85em;
}

a
{
color: #197EF1;
text-decoration: underline;
}

a:hover
{
color: #DF3A00;
text-decoration: none;
}

a img
{
border: none;
}

ul, ol
{
margin: 0.5em 2.5em;
}

h2
{
margin: 0.6em 0 0.4em 0.4em;
}

h3, h4, h5
{
margin: 1em 0 0.4em 0.4em;
}

*
{
margin: 0;
padding: 0;
}

body
{
background: #000000 0 0;
color: #a9a9c7;
font-size: 1em;
font-family: "Trebuchet MS", Tahoma, "Geneva CE", lucida;
}

#container
{
margin: 0 auto;
width: 770px;
position: relative;
}

#top
{
height: 50px;
background: url("image/top.jpg") 0 0 no-repeat;
}

#top p
{
margin: 0;
padding: 0;
}

#header
{
height: 150px;
margin-top: 0px;
background: url("image/header1.jpg") 0 0 no-repeat;
}

#menu
{
position: absolute;
top: 152px;
left: 0px;
}
#newsletter
{
position: absolute;
top: 0px;
}

#content
{
clear: both;
margin-top: 23px;
width: 770px;
background: url("image/content.gif") 0 0 repeat-y;
}

#text
{
width: 518px;
background: #313040 0 0 no-repeat;
color: #9c9cd0;
float: left;
}

#column
{
float: right;
width: 247px;
background: #414169 url("image/column.gif") 0 0 no-repeat;
}

#content-bottom
{
clear: both;
display: block;
width: 770px;
height: 13px;
background: url("image/content-bottom.gif") left bottom no-repeat;
font-size: 0;
}

#footer
{
margin-top: 5px;
padding-top: 2px;
height: 33px;
background: url("image/footer.png") left bottom no-repeat;
}

#header h1
{
margin: 5px 0 0 50px;
padding: 0;
font-size: 1.2em;
}

#header h2
{
margin: 10px 0 0 90px;
padding: 0;
font-size: .3em;
color: #9c9cd0;
}

ul#menu
{
margin: 0;
}

#menu li
{
list-style-type: none;
float: left;
text-align: center;
width: 80px;
margin-right: 1px;
font-size: 1.05em;
}

#menu a
{
display: block;
height: 18px;
padding-top: 1px;
text-decoration: none;
background: #414169 no-repeat 0 0;
overflow: hidden;
width: 100%;
font-size: .75em;
font-family: Verdana, "Geneva CE", lucida, sans-serif;
color: #fff;
}

ul#newsletter
{
margin: 0;
}

#newsletter li
{
list-style-type: none;
float: right;
text-align: center;
width: 290px;
margin-right: 0px;
font-size: 1.05em;
}

#newsletter a
{
display: inherit;
height: 18px;
padding-top: 1px;
text-decoration: none;
background: #414169 no-repeat 0 0;
overflow: hidden;
width: 100%;
font-size: .75em;
font-family: Verdana, "Geneva CE", lucida, sans-serif;
color: #fff;
}
#menu li>a, #menu li>strong
{
width: auto;
}

#menu a.actual
{
background: url("image/menu-actual.gif") no-repeat 0 0;
color: #952020;
}

#menu a:hover
{
color: #ff5900;
}

#column p
{
font-size: 0.7em;
}

#column ul
{
font-size: 0.8em;
}
#column h2
{
position: relative;
height: 26px;
width: 215px;
margin-top: 40px;
padding-top: 6px;
padding-left: 6px;
font-size: 0.7em;
background: url("image/h3-column.gif") 0 0 no-repeat;
z-index: 1;
font-family: arial, "Geneva CE", lucida, sans-serif;
}
#column h3
{
position: relative;
height: 5px;
width: 215px;
margin-top: 4px;
padding-top: 2px;
padding-left: 6px;
font-size: 0.8em;
background: url("image/h3-column.gif") 0 0 no-repeat;
z-index: 1;
font-family: Arial, "Geneva CE", lucida, sans-serif;
}

#column h3 span
{
margin-left: 10px;
}

#column span.name
{
text-align: right;
color: #9c9cd0;
margin-right: 5px;
}

#column a
{
color: #9c9cd0;
}

#column a:hover
{
color: #9c9cd0;
}

#text h1,#text h2,#text h3,#text h4
{
color: #a9a9c7;
}

#text h3.headlines a
{
color: #a9a9c7;
}

p.comments
{
text-align: right;
font-size: 0.8em;
font-weight: bold;
padding-right: 10px;
}

#footer p
{
text-align: center;
}

#footer a
{
color: #9c9cd0;
}

#footer a:hover
{
color: #DF3A00;
}

#your-url
{
position: absolute;
left: 70px;
top: 15px;
font-size: 1.1em;
}

#your-url a
{
color:#9c9cd0; text-decoration:none;
}

#your-url a:hover
{
color: #9c9cd0;
}

ol.comments
{
font-size: 0.9em;
}

Align Without Div's

Similar Tutorials

View Content

Hey i'm new to this forum thing so here goes.

I'm stuck trying to align an image in the center of an e-mail template.
I'm using inline CSS to keep the template as small as possible.

The code i have is:
<img src="yes_group.jpg" alt="Yes Company Logo" height="100" width="50%" />

I need something i can put into that line of code to center the image. I've searched a few different site for hints (or the actual tag i need) but can't seem to find it anywhere.

Any help would be greatly received so if you have any idea's please let me know.

Thank You.

Img Align

Similar Tutorials

View Content

Hi,
How do I place "progress.gif" so that it is in the vertical middle in relation to <input type="text"
Right now it is OK in Interent Explorer 6 but appears too high in FireFox.
Code:

<div>
<label>City:</label>
<span><input type="text" name="city" /><span><img src="progress.gif" border="0" /></span></span></div>

I tried this to no avail.
<span style="padding-top:5px"><img src=...
Thank you.

Align

Similar Tutorials

View Content

Hi,

I have this content

Lunch - Chinese
Drinks - Soda
Dinner - Italian
Breakfast - american

i want to align these choices

So

Lunch and drinks, Dinner, breakfast are one below each other and then the - and the corresponding choices

Right now it appears likes this

Lunch - Chinese
Drinks - Soda
Dinner - Italian
Breakfast - american

I want chinese, soda, italian and american all aligned one below each other

So i want all the dashes in center and then the content on side of them

can someone tell me how i can use css for it

charles

Need Help To Align In Css

Similar Tutorials

View Content

I have a problem where my image on top there is a little gap below it. This only happens in Internet Explorer and not Mozilla; i wish to rid of that gap. Also I am wondering how would I align the text on the right, i have tried applying the vertical-align: bottom but it does not work. Here is the link: http://www.bluebushel.com/temp/real.html The code is below.

MARKUP
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xml:lang="en">
 <head>
  <title>Bluebushel | The bushels are alright</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="includes/bluebushel.css" />
 </head>

<body>

<div align="center">
<div id="topBar">
<div class="logo">
<img src="images/testimage.jpg" alt="Bluebushel" />
</div>
<div class="nav">
View Bushel | Account | Order Status | Shipping & Returns | Help
</div>
</div>

</body>
</html>

CSS
Code:

body						{
								background-color: #E9E9DF;
								margin: 0em;
}
a.nav:link,
a.nav:visited				{
								color: #000000;
								font-family: Arial, Verdana;
								font-size: .8em;
								text-decoration: none;
}
a.nav:hover					{
								color: #336699;
								font-family: Arial, Verdana;
								font-size: .8em;
								text-decoration: none;
}

#topBar					    {
								background-color: #FFFFFF;
								border-left: 2px solid #C5C5C5;
								border-right: 2px solid #C5C5C5;
								border-bottom: 1px solid #EEEEEE;
								height: 5.79em;
								margin: 0em;
								padding: 0em;
								width: 50em;
}
#topBar .logo				{
								float: left;
								text-align: left;
}
#topBar .nav				{
								color: #E3E3E3;
								float: right;
								font-family: Arial, Verdana;
								font-size: .73em;
								height: 100%;
								text-align: right;
								vertical-align: middle;

Thank you for your time.

Css Align In Ie

Similar Tutorials

View Content

I can usually figure out most CSS problems but this one is a mystery.

The following creates a curved box by covering the corner with an image. The problem is in IE6.0, the corner images do not align at the top but display about 10 pixels below it, so therefore I have a the box line and corners at the top and then the curved corners below it. Other browsers display fine, including IE7.0.

Why is it doing this?

Here is the CSS:

Code:

<style type="text/css">
.contain {
position:relative; top:0; left:0; text-align:left; padding:0; border:1px solid #ccc; margin:0 0 10px 0; background-color:#fff; vertical-align:top;
}
.corner-top { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; top:-1px; right:-1px; background:transparent url(/images/crn_tr_bb.gif) no-repeat top right;}
.corner-top .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background:transparent url(/images/crn_tl_bb.gif) no-repeat top left; }
.corner-bottom { display:block; font-size:0; line-height:0; margin:0; height:8px; width:100%; position:relative; bottom:-1px; right:-1px; background: transparent url(/images/crn_br_bb.gif) no-repeat bottom right;}
.corner-bottom .corner-left { display:block; font-size:0; line-height:0; margin:0; height:8px; width:8px; position:relative; left:-2px; background: transparent url(/images/crn_bl_bb.gif) no-repeat bottom left; }
</style>

<div class="contain">
	<div class="corner-top"><div class="corner-left"></div></div>
    <div class="intro" style="position:relative;"><p>Text here...</p>
	<div class="corner-bottom"><div class="corner-left"></div></div>
    </div>

Misaligned Elements

Similar Tutorials

View Content

I'm trying to learn CSS. I've taken great pains to get everything right. My pages all validate and they look correct on Firefox and mostly correct on Chrome. However IE is all over the place. If you view the below pages side by side on Firefox and IE, the following occur (in order of importance):
- the top main box is pushed below where the left boxes end
- the upper-right drop-down stuff is totally off in the weeds (Chrome also looks like IE)
- "Recipes" tab isn't borderless on the bottom edge
- left boxes are the wrong size and push "Clear List" out of bounds
- search button is off in relation to search box

mcrackan.com/recipes/csstest.htm
mcrackan.com/recipes/css/default.css
(Sorry about the non-links. I'm apparently not allowed to post click-able links yet.)

Can anyone point me in the right direction for whatever I'm doing wrong?

- Dinah

Some Elements Within Div Won't Show

Similar Tutorials

View Content

Block Elements In A Li Tag

Similar Tutorials

View Content

Hi Guys,

I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet.

Like this (. is the li):
.
Here is My Div Content

I want it to be like this:
. Here is My Div Content

Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure).

Here is my markup.

<ul>
<li>
<div class="dragHandle">
</div>
</li>
</ul>

DragHandle class is as follows
.dragHandle
{
width: 20px;
height: 25px;
background-image: url(/styles/icons/selectarrow.JPG);
background-position: center;
background-repeat: no-repeat;
cursor: move;
}

Positioning Elements In A Div

Similar Tutorials

View Content

I have a header set up as a div. Inside the header are three elements: #logo, #picture and #contact_info. #logo and #picture are images (image tags in the "html") and #contact_info is a div.

I want #logo to float to the left (no problem), #picture to float to the right (problem), and #contact_info to be flush against #picture's left side. How might I accomplish this? Nothing is positioning correctly except #logo.

the (pertinent) css is:
Code:

#main {
	width: 875px;
	background-color: #FFCC77;
	border-style: inset;
	border: 2px solid #008080;
	margin-left: auto;
	margin-right: auto;
	
	}

#header {
width: 875px;
height: 177px;
margin-left: auto;
margin-right: auto;
background:url("gradient2.jpg") repeat-x;
border: 2px solid #008080;

}

#logo { 
	width:300px;
	height:155px;
	float: left;
	} 

#contact_info { 
		color: #800080;
		font-variant: small-caps;
		font-family: sans-serif;
		font-weight: 500;
		font-size: 14px;
		padding-top:0px;
		padding-right:10px;
		float: right;
		}

#picture {
	width: 160px;
	height: 139;
	margin: 10 10 10 10px;
	}

The html is:
Code:

<body>

<div id="header">
			
			<img src="Styles/redonelogo.jpg">
			
			<img src="Styles/picture.jpg">
			
			<div id="contact_info">
			<p>Casa Grande Acclaim Realty<br/>
			11283 N. Henness Road<br />
			Casa Grande, Arizona 85194 <br />
			Phone: (520) 560-8366 <br />
			Fax: (520) 421-1444
			</p>
			</div>
			
			
			
			<div id="slogan">
			Serving All of Pinal County
			</div>			
			
			<ul id="nav">
			<li><a href="About" target="_self">About Us</a></li>
			<li><a href="#">Contact Us</a></li>
			<li><a href="index">Home</a></li>
			</ul>
	
</div>
 
<div id="main">

	<div id="border"></div>
	
		<div id="innerloop">

		
		
		<div id="equal"></div>	
		<div id="mls"></div>		
		
		<div id="secondinnerloop">
		<h2><strong>Welcome to Casa Grande Acclaim Realty</strong></h2>
				<div id="PicBackground">
  				<img alt="slide show" src="Graphics/One.jpg" width="540" height="405" id="FirstPicture">
		</div>
												
			<script type="text/javascript">
			RunSlideShow("FirstPicture","PicBackground","Graphics/One.jpg;Graphics/Two.jpg;Graphics/Three.jpg;Graphics/Four.jpg;Graphics/Five.jpg;Graphics/Six.jpg;Graphics/Seven.jpg;Graphics/Eight.jpg;Graphics/Nine.jpg;Graphics/Ten.jpg;Graphics/Eleven.jpg;Graphics/Twelve.jpg;Graphics/Thirteen.jpg;Graphics/Fourteen.jpg",14);
			</script>	
					
		</div>
		
		</div>
		
</div>		





</body>
</html>

Elements Will Not Center In Ie7 Or 8

Similar Tutorials

View Content

I am definitely a novice in web design and CSS, so I hope I can tap into the collective knowledge of the more seasoned individuals on this board. Essentially, the website I created (http://www.wacwineclub.com) looks fine in Firefox, but some of the elements are shifted to the left in IE (Such as the menu and horizontal rule). For the life of me, I cannot figure out what is wrong. Any ideas? My code for the index and CSS files are as follows:

INDEX.PHP<?
Code:

session_start();
?>
<meta name="description" content="Washington Athletic Club - Wine Club">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
<!--
.style5 {color: #FFFFFF}
.style7 {
	font-size: 12px;
	color: #FFFFFF;
}
.style8 {
	font-size: 12px;
	color: #ADADAD;
}
-->
</style>
<script src="/Scripts/swfobject_modified.js" type="text/javascript"></script>
<HEAD><TITLE>WAC Wine Club</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="Shaun Lewis" name=author>
<link rel="shortcut icon" href="Images/favicon.ico">
<LINK 
href="wacwineclub.css" type=text/css 
rel=stylesheet>
<META content="MSHTML 6.00.5730.11" name=GENERATOR><style type="text/css">
<!--
body {
	background-color: #666666;
	padding-bottom: 150px;
	padding-top: 100px;
	margin-left: 0px;
	text-align:center;
}
#Slideshow {
	padding-top: 4px;
}
#header {
	height: 125px;
	width: 800px;
}
#awmAnchor-menu {
	background-color: #000000;
	height: 30px;
	padding-top: 0px;
}
#Layer1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 493px;
	top: 1187px;
	background-color: #FF00FF;
}
#Layer2 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:3;
	left: 380px;
	top: 1187px;
}
#Layer3 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
	left: 200px;
	top: 1187px;
}
#Layer4 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:0;
	left: -208px;
	top: 171px;
	visibility: visible;
}
#xawmMenuPathImg-menu {
}
a:link {
	color: #ADADAD;
	text-decoration: none;
}
#Layer5 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
}
#Layer6 {
	position:absolute;
	width:200px;
	height:190px;
	z-index:1;
	margin-left: 50px;
	margin-top: 40px;
	border-bottom: #000000 2px solid;
	border-left: #000000 2px solid;
	border-right: #000000 2px solid;
	border-top: #000000 2px solid;
	background-color: #E5E5E5;
	float: left;
}
#Layer7 {
	position:absolute;
	width:180px;
	height:160px;
	z-index:1;
	margin-left: 10px;
	border-right: #000000 1px solid;
	border-bottom: #000000 1px solid;
	border-top: #000000 1px solid;
	border-left: #000000 1px solid;
	margin-top: 5px;
}
#Layer8 {
	position:absolute;
	width:500px;
	height:300px;
	z-index:1;
	margin-left: 275px;
	margin-top: 15px;
	left: -127px;
	top: 347px;
}
#Layer9 {
	position:absolute;
	width:160px;
	height:69px;
	z-index:1;
	margin-left: 50px;
}
.style4 {
	font-size: 16px;
	color: #ADADAD;
}
.style6 {color: #ADADAD}
.style9 {font-size: 14px}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}

function MM_controlSound(x, _sndObj, sndFile) { //v3.0
  var i, method = "", sndObj = eval(_sndObj);
  if (sndObj != null) {
    if (navigator.appName == 'Netscape') method = "play";
    else {
      if (window.MM_WMP == null) {
        window.MM_WMP = false;
        for(i in sndObj) if (i == "ActiveMovie") {
          window.MM_WMP = true; break;
      } }
      if (window.MM_WMP) method = "play";
      else if (sndObj.FileName) method = "run";
  } }
  if (method) eval(_sndObj+"."+method+"()");
  else window.location = sndFile;
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</script>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1035787-2']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</HEAD>
<BODY>
<? if($_SESSION['userid']>0) {?>
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu2",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="menu2.js" type="text/javascript"></script>
<? } else {?>
<script type="text/javascript">var MenuLinkedBy="AllWebMenus [4]",awmMenuName="menu",awmBN="766";awmAltUrl="";</script><script charset="UTF-8" src="menu.js" type="text/javascript"></script>
<? }?>
<script type="text/javascript">awmBuildMenu();</script>
<DIV id=container>
  <DIV id=header><img src="Images/WWC-logo.jpg" width="258" height="125" align="left">
<table class="metroLog" border="0" cellspacing="0" cellpadding="0" align="right">
    <tbody>
    <? if($_SESSION['userid']>0){?>
    
      <tr>
            <td></td>
            <td></td>
            <td><span class="advLogRemoveChk style6 style9"><label for="masterPageUC_ctl00_ctl00_chkRM">Welcome WAC Wine Club Member</label></span>
            </span></td>
            <td></td></td>
            <td></td>
        </tr>
      <tr>
            <td></td>
            <td></td>
            <td><span class="advLogRemoveChk style6 style9"><a href="logout.php" class="logTxt style8">Logout </a></span>
            </span></td>
            <td></td></td>
            <td></td>
        </tr>
        
    
    <?
    } else {?>
<form action="logincheck.php" method="post">
        <tr>
            <td><span class="memLog style6 style9">Member Login</span></td>
            <td width="8"></td>
            <td class="unpwField" width="118"><input name="uname" type="text" class="unpwField" id="uname" style="#unpwField" tabindex="1" onFocus="tbFocus(this);" onBlur="tbBlur(this);" value="USERNAME" maxlength="50" /></td>
            <td width="8"></td>
            <td class="unpwField" width="118"><input name="upass" type="password" value="PASSWORD" maxlength="50" id="upass" tabindex="2" class="unpwField" onFocus="tbFocus(this);" onBlur="tbBlur(this);" onKeyPress="pwKeypress(this);" style="" /></td>
            <td class="metroBorder"><input type="image" name="masterPageUC$ctl00$ctl00$btnLogin" id="btnLogin" tabindex="3" src="Images/btn_Login.jpg" alt="Click to Login" style="border-width:0px;" /></td>
        </tr>


        <tr>
            <td height="5" colspan="6"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td><span class="advLogRemoveChk style6 style9"><input id="rememberme" type="checkbox" name="rememberme" value="1" />
            <label for="masterPageUC_ctl00_ctl00_chkRM">Remember Me </label>
            </span></td>
            <td></td>

            <td><a href="Login-Help.html" class="logTxt style8">LOGIN INSTRUCTIONS </a></td>
            <td></td>
        </tr>
        </form>
<? }?>
                <tr>
            <td colspan="6"></td>
        </tr>
    </tbody>
</table>

  </div>
  <hr align="center">
		<div id="awmAnchor-menu"> &nbsp;</div>  
		<div id="Slideshow">
          <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="250">
            <param name="movie" value="/slideshow.swf">
            <param name="quality" value="high">
            <param name="wmode" value="opaque">
            <param name="swfversion" value="6.0.65.0">
            <param name="expressinstall" value="/Scripts/expressInstall.swf">
<object type="application/x-shockwave-flash" data="/slideshow.swf" width="800" height="250">
  <!--<![endif]-->
  <param name="quality" value="high">
  <param name="wmode" value="opaque">
  <param name="swfversion" value="6.0.65.0">
  <param name="expressinstall" value="/Scripts/expressInstall.swf">
<div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
          </div>
</object>
            <!--<![endif]-->
          </object>
</div>
		<?php
require 'footer.inc';
?>
</DIV>
  </DIV>
</DIV> 
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="Development">
  <tr>
    <td><div align="right" class="style7">Website Development by  <a href="mailto:shaun@wacwineclub.com">Shaun Lewis</a></div></td>
  </tr>
</table>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
</script>
</BODY></HTML>

WACWINECLUB.CSS
Code:

#container {
	BORDER-RIGHT: #000000 15px solid;





	div align='center'
	PADDING-RIGHT: 0px;
	BORDER-TOP: #000000 5px solid;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	BORDER-LEFT: #000000 15px solid;





	MARGIN:0 auto
	WIDTH: 800px;
	PADDING-TOP: 5px;
	BORDER-BOTTOM: #000000 5px solid;
	POSITION: relative;
	BACKGROUND-COLOR: #000000;
	TEXT-ALIGN: center;
	margin-top: 20px;
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	font: Garamond;
	font-family: Garamond, Georgia, Serif;
}
#content {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 10px 0px 10px 120px;
	WIDTH: 663px;
	PADDING-TOP: 0px;
	height: 811px;
	border-bottom: #000000 2px solid;
	border-top: #000000 2px solid;
	border-left: #000000 2px solid;
	border-right: #000000 2px solid;
	background-color: 000000;
}
#footer {
	PADDING-RIGHT: 0px;
	BORDER-TOP: #000000 1px solid;
	PADDING-LEFT: 10px;
	PADDING-BOTTOM: 0px;
	MARGIN: 25px 0px 0px;
	COLOR: #ADADAD;
	PADDING-TOP: 0px;
	HEIGHT: 1.5em;
	background-color: #000000;
	text-align: right;
	width: 800px;
	font-family: Garamond, Georgia, Serif;
}
#masthead {
	MARGIN: 0px;
	BORDER-BOTTOM: #000000 1px solid;
	HEIGHT: 250px;
	background-color: #000000;
}
#navigation {
	BORDER-RIGHT: #7c70da 1px solid; LEFT: 4px; WIDTH: 170px; POSITION: absolute; TOP: 230px
}
#upper {
	width: 400px;
}
#upper #Upper2 {
	background-position: right;
	width: 400px;
	right: auto;
	float: right;
}
DIV.menu A:link {
	PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 2em; BACKGROUND: url(../images/bullet.gif) no-repeat 3px 0.5em; PADDING-BOTTOM: 2px; COLOR: #3e31a2; PADDING-TOP: 2px
}
DIV.menu A:visited {
	PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 2em; BACKGROUND: url(../images/bullet.gif) no-repeat 3px 0.5em; PADDING-BOTTOM: 2px; COLOR: #3e31a2; PADDING-TOP: 2px
}
DIV.menu A:hover {
	PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 2em; BACKGROUND: url(../images/bullet.gif) #7c70da no-repeat 3px 0.5em; PADDING-BOTTOM: 2px; COLOR: #ffffff; PADDING-TOP: 2px
}

@media Print    
{
#container {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0 auto; WIDTH: 100%; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px
}
#footer {
	BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 10px 0px 0px; WIDTH: 800px; COLOR: #000000; PADDING-TOP: 0px; BACKGROUND-COLOR: transparent; BORDER-RIGHT-WIDTH: 0px
}

}
#container #awmAnchor-menu {
	background-color: #000000;
	width: 800px;
}
#Developer {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: right;
	margin-top: -15px;
}
#Development {
	font-family: Garamond, Georgia, serif;
	font-size: 14px;
	color: #FFFFFF;
	left: auto;
	right: auto;
}
.unpwField {
	font-family: Garamond, Georgia, serif;
	font-size: 12px;
}
#metroLog {
	font-family: Garamond, Georgia, serif;
	font-size: 12px;
}

Overlapping Elements...

Similar Tutorials

View Content

Hi All,

Still working on a site for a friend.

www dot helenstow-cpsychol.co.uk/faqs dot html

On this page, I want the scrolling '#content1' box to be about 200-250 pixels longer, but in making it longer it overlaps vertically with other elements on the page ('#nav1' etc) and displaces them.

The way elements are placed relative to each other was designed by someone very kind on another forum. I find it quite confusing to be honest (Im a total newb.) and was wondering if this is the best way to do this or if there is a way of aligning elements by just specifying where on the page they should be without necessarily affecting the position of other elements? (Is this possible using z-index?)

If this is possible, how might I go about it and is it a good or bad idea? (the guy who helped me previously appeared to be pretty smart, so I'm guessing there's a reason he laid things out the way he did)

Here is my CSS:

Code:

* {
    padding:0;
    margin:0;
    list-style-type:none;
 }
.link1 a:link,.link1 a:visited,.link1 a:active { 
    color:#000000;
    font-family:arial,helvetica,sans-serif;
    font-weight:bold;
 }
.link1 a:hover { 
    background-color:#000000;
    text-decoration:none;
 }
.link2 a:link,.link2 a:visited,.link2 a:active { 
    color:#00def5;
    font-family:arial,helvetica,sans-serif;
    font-size:16px;
    font-weight:bold;
 }
.link2 a:hover { 
    color:#fff;
    background-color:#286d8c;
    text-decoration: none;
 }
.link3 a:link, { 
    color:#FFFFFF;
    font-family:arial,helvetica,sans-serif;
    font-size:24px;
    font-weight:bold;
 }
.link3 a:visited,.link3 a:active { 
    color:#42daf5;
    font-family:arial,helvetica,sans-serif;
    font-size:24px;
    font-weight:bold;
 }
.link3 a:hover { 
    color:#FFFFFF;
    text-decoration: none;
 }
body {
    background-color:#000;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:100%;
    text-align: center;
 }
h1 {
    font:bold 20px tahoma,helvetica,arial,sans-serif;
    color:#ffa507;
    text-shadow:0 1px 1px #000;
    text-align:center;
    text-decoration:underline;
 }
h2 {
    font:bold 18px tahoma,helvetica,arial,sans-serif;
    color:#ffff01;
    text-shadow:0 1px 1px #000;
    text-align:center;
    text-decoration:underline;
 }
h3 {
    font:italic 16px tahoma,helvetica,arial,sans-serif;
    color:#fff;
    text-shadow: 0 1px 1px #000;
    text-align: center;
 }
h4 {
    font:bold 16px tahoma,helvetica,arial,sans-serif;
    color:#000;
    text-shadow: 0 1px 1px #ffa507;
    text-align:center;
    text-decoration:underline;
 }
h5 {
    font:bold 16px tahoma,helvetica,arial,sans-serif;
    color:#000;
    text-align:center;
 }
#container1 {
    width:1008px;
    height:1168px;
    margin:auto;
    background-image:url(../images/Alt-Pages-BG.jpg);
 }
#content1 {
    width:515px;
    height:448px;
    padding-top:20px;
    padding-bottom:0px;
    padding-right:5px;
    padding-left:5px;
    border:3px solid transparent;
    margin-top:0px;
    margin-bottom:0px;
    margin-right:0px;
    margin-left:55px;
    text-align:center;
    overflow:auto;
 }
#content2 {
    width:900px;
    height:20px;
    border:3px solid transparent;
    padding:0px 0px 0px 0px;
    margin:185px 54px 0px 54px;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:14px;
    color:#fff;
    text-align:center;
    overflow:auto;
 }
 #content3 {
    width:260px;
    height:100px;
	padding-top:0px;
    padding-bottom:0px;
    padding-right:15px;
    padding-left:15px;
    margin-top:20px;
    margin-bottom:0px;
    margin-right:110px;
    margin-left:110px;
    border:3px solid #000;
    background-color:#fff;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:14px;
    color:#000;
    text-align:center;
    overflow:auto;
 }
	#content4 {
    width:400px;
    height:180px;
	padding-top:0px;
    padding-bottom:0px;
    padding-right:15px;
    padding-left:15px;
    margin-top:20px;
    margin-bottom:0px;
    margin-right:0px;
    margin-left:42px;
    border:3px solid #000;
    background-color:#fff;
    font-family:tahoma,arial,helvetica,sans-serif;
    font-size:14px;
    color:#000;
    text-align:center;
    overflow:auto;
 }
#nav1 {
    margin-bottom:36px;
    overflow:hidden;
 }
#nav1 li {
    margin-bottom:40px;
    position:relative;
 }
#li1a {margin-left:835px;}
#li1 {margin-left:761px;}
#li2 {margin-left:687px;}
#li3 {margin-left:613px;}
#li4 {margin-left:539px;}
#li5 {margin-left:465px;}
#li6 {margin-left:391px;}
#li7 {margin-left:28px;}
#li8 {margin-left:96px;}
#li9 {margin-left:90px;}
#li10 {margin-left:92px;}
#li11 {margin-left:332px;}
 }
#nav1 a,#nav2 a { 
    position:relative; 
    display:block;
    height:30px;  
    background-image:url(../images/Icons.jpg);
 } 
#nav1 span,#nav2 span { 
    position:absolute;
    top:0;
    left:0;
    height:30px; 
    z-index:1;
    background-image:url(../images/Icons.jpg);
    cursor:pointer;
 }
#home,#home span {
    width:149px;
    background-position:-835px -584px;
 }
#about,#about span {
    width:223px;
    background-position:-761px -644px;
 }
#appts,#appts span {
    width:297px;
    background-position:-687px -704px;
 }
#fees,#fees span {
    width:371px;
    background-position:-613px -764px;
 }
#faq,#faq span {
    width:445px;
    background-position:-539px -824px;
 }
#links,#links span {
    width:519px;
    background-position:-465px -884px;
 }
#blog,#blog span {
    width:593px;
    background-position:-391px -944px;
 }
#home:hover span {
    width:149px;
    background-position:-835px -3px;
	background-image:url(../images/Icons.jpg);
 }
#about:hover span {
    width:223px;
    background-position:-761px -63px;
    background-image:url(../images/Icons.jpg);
 }
#appts:hover span {
    width:297px;
    background-position:-687px -123px;
    background-image:url(../images/Icons.jpg);
 }
#fees:hover span {
    width:371px;
    background-position:-613px -183px;
    background-image:url(../images/Icons.jpg);
 }
#faq:hover span {
    width:445px;
    background-position:-539px -243px;
    background-image:url(../images/Icons.jpg);
 }
#links:hover span {
    width:519px;
    background-position:-465px -303px;
    background-image:url(../images/Icons.jpg);
 }
#blog:hover span {
    width:593px;
    background-position:-391px -363px;
    background-image:url(../images/Icons.jpg);
 }
#nav2 li {
    float:left;
    display:inline;
    position:relative;
 }
#nav2 a {
    height:124px;
 }
#nav2 span { 
    height:124px; 
 }
#bps,#bps span {
    width:131px;
    background-position:-28px -1041px;
 }
#hps,#hps span {
    width:131px;
    background-position:-180px -1041px;
 }
#scp,#scp span {
    width:131px;
    background-position:-332px -1041px;
 }
#pay,#pay span {
    width:131px;
    background-position:-484px -1041px;
 }
#email,#email span {
    width:131px;
    background-position:-849px -1041px;
 }
#bps:hover span {
    width:131px;
    background-position:-28px -460px;
    background-image:url(../images/Icons.jpg);
 }
#hps:hover span {
    width:131px;
    background-position:-180px -460px;
    background-image:url(../images/Icons.jpg);
 }
#scp:hover span {
    width:131px;
    background-position:-332px -460px;
    background-image:url(../images/Icons.jpg);
 }
#pay:hover span {
    width:131px;
    background-position:-484px -460px;
    background-image:url(../images/Icons.jpg);
 }
#email:hover span {
    width:131px;
    background-position:-849px -460px;
    background-image:url(../images/Icons.jpg);
 }

I'd also like to be able to move '#content1' down about 10 pixels from the top of the page (but when I add 10 pixels to the 'margin-top' it moves the background image for '#container1' down with it!?

I would be incredibly grateful for any and all help.

My very best wishes,

Tom