Learn VBA & Macros in 1 Week!

CSS - Positioning Of Elements

Full Excel VBA Course - Beginner to Expert

Positioning Of Elements	View Content

Hi guys,

could you help me out with following issue:

See this Picture for better understanding:
http:// picasaweb. google.se/lh/photo/e446yLNWr_eTqkiwPK0-CA?feat=directlink

WHat i have is a div container (mainContent)
In which i have some text in a Paragraph <P>
and in the middle of this <P> i am trying to make a box
which will contain a list of links.

Have no clue how to achieve this.

My idea would be:

<div id: mainContent>
//text//<div style="???">
//Link//<div style="float:right; DONT Know how to lower vertically??">

Good ideas for where i can find a solution?

Full Excel VBA Course - Beginner to Expert

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>

Css Positioning Of Elements (especially For Ie)

Similar Tutorials

View Content

Firstly, I'd like to say that I've been browsing this forum for a while now, as well as sites such as w3schools, and I've found it all to be very helpful. But now I have a situation that I haven't been able to solve on my own.

Essentially, I want to make a clear and simple CSS-based layout that will work across browsers and platforms. I use a Mac myself, and it's difficult for me to check for problems with Internet Explorer. The problem I'm currently having concerns layout and positioning.

Here's a link to the splash page I'm working on for a student organization: http://individual.utoronto.ca/ghp/fasu2006/

Before I make the full site I want to work out layout troubles I've been having.

I got on a PC and the text when viewed with IE did not seem to properly align within the opaque white box I made for it. I've been feeling a little overwhelmed with concepts of absolute vs. relative positioning, unit values such as percents, px, em, and making use of things like padding, margins etc. and I'm hoping I can get some advice.

So in one sentence, here is my question: How can I position elements (text, divs, images, anything) on the screen using CSS in an efficient way that will produce a similar result in different browsers?

Here is the code that I think is relevant:

Code:

p {font-size: .75em; font-weight: bold; margin-left: 12em;
		margin-top: 8em;}

	#content {margin-top: 10px; margin-bottom: 10px;
		margin-right: auto; margin-left: 3em;
		width: 800px; padding: 20px;
		background: transparent;}

	#overlayback {position: absolute; top: 8em;
		left: 15em; width: 250px; height: 250px;
		z-index: 0;
		filter: alpha(opacity=80); opacity: .80;
		background: #FFF;}

	#overlaytext {position: absolute; top: 3em;
		left: 15em; z-index: 1;}
		
	h1 {font-size: 6em; margin-left: .1em;
		margin-top: .75em;}

	h2 {font-size: 1em; font-weight: normal;
		margin-left: 9em; margin-top: -4.5em}
</style>
</head>
<body>
	<div id="content"><img src="images/tower.gif" width="297" height="422" alt="tower">
		<div id="overlayback"></div>
		<div id="overlaytext"><h1>fasu</h1>
		<h2>2006-2007</h2>
		<p>coming soon</p></div>
	</div>

I hope I've been clear and thanks in advance for any advice. It's very much appreciated.

Positioning Form Elements

Similar Tutorials

View Content

Hello all. I'm trying to get the form layout to mimic a table like structure so that all the input elements line up. I have the following:

Code:

<!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">
  <head>
    <title>Search Home</title>
    <style type="text/css">
      .csc-mailform-field label { width: 10em; }
      #mailformformtype_mail { margin-top: 1em; }
    </style>
  </head>
  <body>
    <form action="contact/contact-form/" id="mailform" enctype="multipart/form-data" method="post" onsubmit="return validateForm('mailform','First_Name,First%20Name,Last_Name,Last%20Name,Email,Email,Email_Message,Ema  il%20Message','','','')">
      <fieldset class="csc-mailform">
        <div class="csc-mailform-field">
          <label for="mailformFirst_Name">First Name</label>
          <input type="text" name="First_Name" id="mailformFirst_Name" size="14" value="" />
        </div>
        <div class="csc-mailform-field">
          <label for="mailformLast_Name">Last Name</label>
          <input type="text" name="Last_Name" id="mailformLast_Name" size="14" value="" />
        </div>
        <div class="csc-mailform-field">
          <label for="mailformSuffix">Suffix (e.g. Ph.D., M.D.)</label>
          <input type="text" name="Suffix" id="mailformSuffix" size="14" value="" />
        </div>
        <div class="csc-mailform-field">
          <label for="mailformEmail">Email</label>
          <input type="text" name="Email" id="mailformEmail" size="14" value="" />
        </div>
        <div class="csc-mailform-field">
          <label for="mailformPhone_Number">Phone Number</label>
          <input type="text" name="Phone_Number" id="mailformPhone_Number" size="14" value="" />
        </div>
        <div class="csc-mailform-field">
          <label for="mailformCompany">Company/Institution</label>
          <input type="text" name="Company" id="mailformCompany" size="14" value="" />
        </div>
        <div class="csc-mailform-field">
          <label for="mailformEmail_Message">Email Message</label>
          <textarea name="Email_Message" id="mailformEmail_Message" cols="14" rows="5"></textarea>
        </div>
        <div class="csc-mailform-field">
          <input type="submit" name="formtype_mail" id="mailformformtype_mail" value="Send Message" class="csc-mailform-submit" />
        </div>
      </fieldset>
    </form>
  </body>
</html>

I thought that by setting the width of the labels, it would force the inputs to all line up but apparently this does nothing.

Also I did not place the size attributes on the input, this is a form generated by a CMS.

Positioning Multiple Elements (ie Bug?)

Similar Tutorials

View Content

Ok, I have a really weird problem (don't you love it when people start like that?). I have four elements absolutely positioned inside of a relatively positioned div. As you probably already guessed, everything renders correctly in FF/Moz, but screws up in IE.

In the following code, please ignore any validation mistakes, as the real page does validate xhtml 1.0 strict. Code:

<div id="outside">
  <div id="inside">
    <img id="logo" src="logo.png" />
    <img id="banner" src="banner.png" />
    <img id="topRightCorner" src="topRightCorner.png" />
    <img id="bottomLeftCorner" src="bottomLeftCorner.png" />
  </div>
</div>

Code:

#outside #inside{
  position: relative;
  top: 0;
  left: 0;
  /* positioned parent */
}
#outside #inside #logo{
  position: absolute;
  top: 50px;
  left: 50px;
  /* logo */
}
#outside #inside #banner{
  position: absolute;
  top: 60px;
  left: 75px;
}
#outside #inside #topRightCorner{
  position: absolute;
  top: 0;
  right: 0;
}
#outside #inside #bottomLeftCorner{
  position: absolute;
  bottom: 0;
  left: 0;
}

The first three position corectly. "bottomLeftCorner" seems to follow its own path, and aligns its self to the bottom of the "outside" div. If I remember correctly, absolute positioning of an element will position it absolutely (duh) in relation to its nearest positioned parent, which in this case is my "inside" div.

Here's where it gets quirky (no pun intended) though. When I change the position attribute from "bottom" to "top", the element will gladly position its self wherever I want it, within the "inside" div.

Is the "bottom" attribute causing a problem within IE? Am I trying to reference too many child ID's for IE to handle? Am I missing a rule that says the parent has to have the EXACT same atributes as the child? I assume the answer to all three is no, but I thought I'd give it a shot here anyways. Any ideas? Thanks, all!

Positioning Block Elements

Similar Tutorials

View Content

hey, I have 4 block elements like this:

Code:


<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="test.css" />
</head>

<body>

<div id="banner">
</div>

<div id="logo">
<img src="images/logosmall.png">
</div>

<div id="registercontent">
</div>

<div id="footer">
</div>

</body>
</html>

and the following CSS:

#banner {
height: 75px;
width: 100%;
background-image: url(images/bg1.gif);
}

#logo {
position: absolute;
top: 30px;
left: 34px;
z-index: 10;
}

#registercontent {
position: static;
width: 600px;
margin-left: 50px;
margin-top: 50px;
margin-bottom: 50px;
padding-top: 20px;
padding-left: 25px;
font-family: verdana;
font-size: 12px;
border: 1px solid #39ce96;
color: #39ce96;
background-color: #efefef;
}

#footer {
height: 75px;
width: 100%;
background-image: url(images/bg1.gif);
}

now I have found out that when I include the 'logo' block in the page and view the page in browser, the positioning of my 'registercontent' goes haywire (specifically, the block loses its top margin), if I take out the 'logo' block, the 'registercontent' block returns to normal behaviour. Only problem is, I don't know why..!!! help much appreciated.

Positioning Elements Within Boxes

Similar Tutorials

View Content

I'm new to css. I learned how to center a layout so it stays in the center of the browser when the browser is resized, but now I am having trouble trying to place elements inside the boxes I create. When I create a box and put it inside my main layout box i give it a position as to where I want it to go, but when I go into the browser and resize the browser the box stays where it is, and doesn't move with the rest of the page. the same happens for the text i put inside boxes. I guess I'm not supposed to assign an absolute value to the boxes, but how else to I get it where I want it? It's driving me crazy!

this is my html:<body>
<div id="container">
<div class="box">
<h1>Silver City Food Co-op</h1>
<p1>520 North Bullard Street - Silver City - New Mexico - 88061 - Phone: 575-388-2343 - Monday-Saturday: 9am-7pm</p1></div>
<div class="box1"><p>The Silver City Food Co-op is a member owned full-line grocery store featuring natural, organic, and local foods, everyone can shop the Co-op, anyone can become part owner of the Co-op!</p></div>

<div class="box2"><div class="box3"><p2>Food News</p2></div></div>
</div>
</body>
</html>

this is my CSS

body{background-color: #69916D}
h1{color: #FFF; Font-family: Georgia, "Times New Roman", Times, serif; font-size: 46px; letter-spacing: 7px; font-weight: normal; margin: 0 0 0 130px}
p1{font: Arial, Helvetica, sans-serif; letter-spacing: 2px; font-size: 10px; color:#FFF; margins: 0 0 0 30px}
p{font: Arial, Helvetica, sans-serif; margin: 0 0 0 10px}

div.box {height: 150px; width:750px; border: 0px solid; border-color: #000; background-color: #166501}
div.box1 {height: auto; width: 750px; border: 1px solid black;background-color: #FFF; position: absolute; Top: 200px; z-index:2}
div.box2 {height: 500px; width:750px; border: 0px solid; border-color:#000; background-color: #FFF9F6; z-index: 1}
div.box3{height:auto; width: 200px; border:1px solid; border-color:#000; background-color: #FFF; position:absolute; top: 300px; left:152px}

body {
text-align: center;
}

#container {margin: 0 auto;
width: 750px; text-align: left
}

Thanks for the help!!

Positioning Form Elements

Similar Tutorials

View Content

I'm new to CSS. But I need to position four form elements in a very thin nav bar. Here is my HTML code:
Code:

            <div id="nav">
                 <div id="nav_left">
                <a href="index.php">Home</a> |<a href="complete.php"> Browse All Titles</a> | <a href="author.php">About Author</a></div>
                <div id="bookmark"><table width="307" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="64" valign="middle">Browse by</td>
<td width="113" valign="middle"><form action="" method="get">
                        Title
                        <select name="var" size="1">
                              <option value="A">A</option>
                              <option value="B">B</option>
                              <option value="C">C</option>
                              <option value="E">E</option>
                              <option value="F">F</option>
                              <option value="G">G</option>
                              <option value="H">H</option>
                              <option value="I">I</option>
                              <option value="J">J</option>
                              <option value="K">K</option>
                              <option value="L">L</option>
                              <option value="M">M</option>
                              <option value="N">N</option>
                              <option value="O">O</option>
                              <option value="P">P</option>
                              <option value="Q">Q</option>
                              <option value="R">R</option>
                              <option value="S">S</option>
                              <option value="T">T</option>
                              <option value="U">U</option>
                              <option value="V">V</option>
                              <option value="W">W</option>
                              <option value="X">X</option>
                              <option value="Y">Y</option>
                              <option value="Z">Z</option>
                              <option value="1">1</option>
                              <option value="2">2</option>
                              <option value="3">3</option>
                              <option value="4">4</option>
                              <option value="5">5</option>
                              <option value="6">6</option>
                              <option value="7">7</option>
                              <option value="8">8</option>
                              <option value="9">9</option>
                              <option value="0">0</option>

                </select><input type="image" class="inputbutton" src="img/input.jpg" alt="" width="15" height="15">
</form></td><td width="123" valign="middle"><form action="" method="get">Decade <select name="var" size="1">
                                 <option value="1950">1950s</option>
                                 <option value="1960">1960s</option>
                                 <option value="1970">1970s</option>
                                 <option value="1980">1980s</option>
                                 <option value="1990">1990s</option>
                                 <option value="2000">2000s</option>
                      </select><input type="image" class="inputbutton" src="img/input.jpg" alt="" width="15" height="15">
</form></td>
  </tr>
</table>
                  
                </div>                            
            </div>

And here are the applicable styles:
Code:

#nav {
    background-image: url(../img/navback.jpg);
    background-repeat: no-repeat;
    background-position: left top;
    border: thin solid #7a8251;
    height: 25px;
    width: 771px;
}
#nav_left {
    width: 400px;
    float: left;
    text-align: left;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 7px;
    padding-left: 5px;
}
#bookmark {
    width: 300px;
    float: right;
    text-align: right;
    display: inline;
    padding-top: 5px;
    padding-right: 3px;
    padding-bottom: 5px;
}
.inputbutton {
    margin-right: 3px;
    margin-left: 3px;
}
select {
    display: inline-table;
    font-size: 75%;
    padding: 0px;
}

But, the form elements are sitting low and not aligning as needed. The input buttons are sitting too high.

They sit lot in Firefox on a Mac. On IE 7, the dropdowns sit even lower.

I don't know what to do! Any ideas?

Jeremy

Positioning Elements Inside Div

Similar Tutorials

View Content

How do i layout elements within a div without effecting everything outside the container div? this has been frustrating me, everything on the page seems to get effected.

i want the div (question) and the div (answer) next to each other..... i thought position:relative does this since it changes position from the container div.

The below code has the div(answer) below the div(question). I put top:0px; and position:relative assuming they both start at the top of the container div.
Code:

<div id="adult">
	<?php echo "<ul><li>test1</li></ul>";  ?>
	</div>
	<div id="qanda">
	<?php  echo "
<div id='questions'>
 <ul id='questionsul'>
 <li><font color='#FFFFFF' face='Century Gothic' size='5px'>QUESTION</font><font color='#FFFFFF' face='Arial' size='5px'>?</font></li>
 </ul>
</div>

<div id='answers'>
 <ul id='answersul'>
  <li><font color='#D99C29' face='Century Gothic' size='5px'><a href='answer.php?id=1&search=$search' style='text-decoration:none' class='Options6'>Answer</a></font></li>
 </ul>
</div>
 

";  ?>
	</div>
<div id="amount"">
	<?php echo "<ul><li>test3</li></ul>";;  ?>
		
	</div>
		<div id="results">
	<?php echo "<ul><li>test4</li></ul>";  ?>
	</div>
	<div id="contributing">
	<?php echo "<ul><li>test5</li></ul>";  ?>
	</div>
	<div id="advert">
	<?php echo "<ul><li>test6</li></ul>";  ?>
	</div>
	</div></div>

CSS

Code:

#questions{
position:relative;
top:0px;
text-align:left;

}

#answers{
position:relative;
top:0px;
text-align:right;


}


#adult{
width:700px;
margin:0 auto;

}

#qanda {
width:700px;
margin:0 auto;
}

#amount {

width:700px;
margin:0 auto;
}

#results {
width:700px;
margin:0 auto;

}

#contributing {
width:700px;
margin:0 auto;

}
#advert {
width:700px;
margin:0 auto;

}

Trouble Positioning Elements

Similar Tutorials

View Content

Im having issues positioning a div that contains a background image. The idea is to have the image positioned in the lower right hand corner of the screen. I get it there, but then the problem is that the image floats to the height of the div it contains.

i need it to just be in the bottom right hand corner. how can I do this?

here is the page, im so embarrased to have to ask this but i swear, the CSS people could not have made this more confusing if they tried.

http://www.doublethinkdesigns.com/main.php

Problems Positioning Elements Horisontally

Similar Tutorials

View Content

Needing Some Help With Positioning Of Page Elements

Similar Tutorials

View Content

Ok well the boss asked me to do a XHTML/CSS version of the website and get it up to snuff with web standards. Now I've done the coding to get the site to look the same in XHTML as it did before in HTML and tables... but there is one catch. I can't quite get my head around the easiest way to deal with captions underneath pictures. For example look at this page:

http://www.zeroonedesign.com/aboutus.html

Now in my version I haven't got the picture of the guys, or the "navigating our portfolio" bit.

Take a look at my version he

http://obelix.ca/zeroone/aboutus.html

I was thinking about creating little block divs and positioning them absolute on the page... but that doesn't seem like much of a solution as I could see the stylesheet growing considerably if there was a page with a lot of these pictures with captions. Any reccomendations? How do you guys do captions with pictures?

Positioning Css Elements Inside Tables

Similar Tutorials

View Content

In this sample code, I would like the form to actually be positioned befor the things that follow it in the code, but I just can't figure out how to do this. The document I want to use it on will not be 100% CSS, and maybe even inside a table. How might this be done?

You can see the code in action HERE.

Code:

<html>
  <head>
  <title>Test</title>
<style type="text/css">

.input-box
{
	color: #26a;
	background: #feb;
	border: #26a solid 1px
}
#div1, #div2, #div3, #div4 
{
	padding: 10px;
	margin: 0 auto;
	overflow: auto;
	display: none;
	border 1px;
}
fieldset 
{
	position: absolute;
	left: 50%;
	margin-left: -100px;
	width: 200px;
	padding: 10px 10px 10px 10px;
}
search_label
{
width: 4em;
float: left;
text-align: right;
margin: 0 1em 10px 0;
clear: both
font-family: verdana,tahoma,arial,helvetica,sans-serif;
}
</style>
<script type="text/javascript">
//<![CDATA[
 
function change(which) {
    document.getElementById('div1').style.display = 'none';
    document.getElementById('div2').style.display = 'none';
    document.getElementById('div3').style.display = 'none';
		document.getElementById('div4').style.display = 'none';
    document.getElementById(which).style.display = 'block';
    }

//]]>
</script>
  </head>

  <body onload="change('div1');">
    <h1>Switch Divs</h1>
    		<form method="post" action="">		
		<fieldset>
		<legend>This is my form</legend>
		<label><input class="radios" checked type="radio" name="search_field" value="name" onclick="change('div1');" />Last Name</label><br />
		<label><input class="radios" type="radio" name="search_field" value="city" onclick="change('div2');" />City</label><br />
		<label><input class="radios" type="radio" name="search_field" value="state" onclick="change('div3');" />State</label><br />
		<label><input class="radios" type="radio" name="search_field" value="zip" onclick="change('div4');" />Zip Code</label><br />
		<div id="div1">
		<input class="input-box" type="text" name="search_name">
		</div>
		<div id="div2">
		<input class="input-box" type="text" name="search_city">
		</div>
		<div id="div3">
		<select name="search_state" size="1">
		</select>					
		</div>
		<div id="div4">
		<input class="input-box" type="text" name="search_zip">
		</div>
		<div><input type="submit"></div>
		</fieldset>
		</form>
		<p>Some Content</p>
		<table border="1" width="100%">
			<tr>
				<td>Some other Content</td>
			</tr>
		</table>
  </body>
</html>

Positioning Elements Inside Cells (top Left Bottom Right)

Similar Tutorials

View Content

Positioning Random Form Elements So They Look Good - Any Design Rules Or Suggestions?

Similar Tutorials

View Content

I've just been given the assignment to write a script that given a set of form elements by the user it will create a page with those form elements displayed and a submit button on the bottom. The form elements the user defines can be text fields, text areas, dropdown boxes, option groups, and checkboxes. The user also gives me a title for each form element. He can give me these form elements in any order and I need to display them in that order on the page.

My question is, how do I arrange these form elements so they always look good together and I don't have funny gaps or unprofessional looking design? It would be easy if it was just text fields and area, but then I have to throw in option groups and checkboxes that can be any number in a row.

Does anyone have some good form organization rules that could help me?

Thanks!!

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!

Css Positioning - Footer Positioning Problem

Similar Tutorials

View Content

I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values):

It needs to be sticked to fit after content of 4 column DIV's like it is in example.

http://www.split.info/dev/less-content/
http://www.split.info/dev/more-content/

Code:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF;  top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966;  position: absolute;  top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
	<div id="contentPane">Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
		Content area<br>
	</div>
	<div id="leftPane">Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
		Left Pane area<br>
	</div>
	<div id="rightPane">Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
		Right Pane area<br>
	</div>
	<div id="rightPane2">Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
		Right Pane 2 area<br>
	</div>
</div>
<div id="headwide">
	<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>

Content from above 4 column div's need to push footer DIV below (after them)!

Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns).

Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer...

So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx!

Echo

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

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

Ul Li Div Elements Going Vertical In Ie

Similar Tutorials

View Content

Hi everyone -- first post here in the forums. I hope I can get some pointers on how to get my page to display correctly in IE.

I have 2 div tags at the top of my page that are built sorta like this:

Code:

<div>
   <ul>
     <li>
       some thing (images in my case, and a search bar)
     </li>
   </ul>
</div>

My css for these elements has "list-style:none;" -- and this works great in modern browsers like firefox, chrome, safari, opera... but the old dinosaur which 30% of my visitors still use doesn't handle this all right. See, I am displaying these list elements in a single horizontal row, but IE wants them in a single vertical column. UGH.

I have a post with a screen shot from firefox and IE at this link:

http://corneveaux.com/blog/new-animated-banner-and-internet-explorer-sucks

So, I am sure its something I have done wrong -- but I cannot get my arms around the problem with firebug or IE developer tool bar. I am a total CSS newb here, so any tips much appreciated. Oh, and I checked and indeed my CSS validates.

Thanks everyone!

Space Around Elements

Similar Tutorials

View Content

Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary.
I should go with the flow.
So I copied a basic page structure and twiddled a little.

Here is the result so far
html link

css link

A couple of questions.
1. Would you say I'm on the right track, or should I be looking at a different style structure?
2. The page appears in ie to have gaps around the elements.
In Mozilla it looks like I hoped it would look.
How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix.
No luck so far. Any help, advice appreciated.
Thanks Solar..