Learn VBA & Macros in 1 Week!

CSS - My Positioning Is Screwed Up

Full Excel VBA Course - Beginner to Expert

My Positioning Is Screwed Up	View Content

Okay first of all I'd like to thank you for taking the time to look over this. The site is at http://projects.bluefusionx.com/scoped/profile/photos/manage/My%20Photos login using demo demo. The positioning is messed up and I can't figure out why. These are the style rules I have set for that section: Code:

   #image_browsem {
	    margin-top: 20px;
	    
	    width: 809px;
    }
    
    #image_browsem_l {
	    float: left;
	    width: 52px;
    }
    
    #image_browsem_m {
	    float: left;
	    width: 705px;
    }
    
    #image_browsem_r {
	    float: right;
	    width: 30px;
	    margin-left: 22px;
	    margin-right: 3px;
    }
    
    #edit_caption {
	clear: both;    
    }
    
    .mp_caption {
	    position: relative;
	   left: 90px;
	   margin-top: 40px;
	  border: 1px solid #9A9A9A;
	  width: 525px;
	  height: 125px;
	  padding-bottom: 0px;
	  padding-right: 0px;
	  margin-left: 35px;
	  margin-bottom: 77px;
  }
  .mp_caption_left {
	  float: left;
	  width: 120px;
	  height: 182px;
	  padding: 10px 10px 10px 10px;
	  padding-bottom: 0px;
	  margin-bottom: 0px;
  }
  
  .mp_caption_right {
	  float: right;
	  margin-top: 5px;
	  margin-right: 5px;
	  margin-bottom: 0px;
	  width: 380px;
	  height: 115px;
	  background-color: #EFEEEE;
  }
  
   .mp_caption_right input {
	  margin-right: 5px;
	  margin-left: 18px;
  }
  
    .mp_caption_right form {
	  position: relative;
	  top: 62px;
    }
    
    .mpcaption_text {
	  margin-top: 8px;
	  width: 318px;
  }
  
  .mpcaption_input {
	  margin-top: 8px;
  }
  
  #move_select {
	  margin-left: 20px;
  }
  
  #mpcaption_delete {
	  margin-left: 127px;
  }
  
  .mp_label {
	  font-weight: bold;
	  position: relative;
	  top: 15px;
  }
  
  #mp_label1 {
	  font-weight: bold;;
  }
  
  #mp_label2 {
	  font-weight: bold;
	  position: relative;
	  top: 15px;
  }
  
  #mp_label3 {
	  font-weight: bold;
	  position: relative;
	  top: 30px;
  }
  
  .mp_caption form {
	  float: left;
	  border: 1px solid black;
  }
  
  .mp_caption_right form {
	  width: 375px;
  }

Any help is appreciated.

Full Excel VBA Course - Beginner to Expert

It's All Screwed Up In Ie, Perfect In Ff, Help?!

Similar Tutorials

View Content

Ie is driving me nuts, well I'm coding this web page and it looks perfect so far in firefox, but it looks messed up in IE

http://drowninginmytears.org/store/blah.html

thats the link.. i want it to look how it is in firefox in IE, but I'm not sure how..

this is my css:
Code:

body
    {
	margin: 0px auto;	
    background-color: #BFD1E1;
    text-align: center;
    padding: 0px;
	background-position: top;
    }

#wrap
    {
    position: relative;
    margin: 0 auto;
    text-align: left;
    width: 679px;
    }
	
#hearts
	{
	background-image: url(hearts.jpg);
	height: 44px;
	width: 43px;
	position: absolute;
	margin-left: 490px;
	}
	
#girl
	{
	background-image: url(girl.jpg);
	margin-top: 190px;
	height: 358px;
	width: 142px;
	margin-left: 10px;
	}
	
h4 {
	font-family: Arial, verdana, tahoma;
	text-transform: uppercase;
	font-size: 1.0em;
	text-align: right;
	font-weight: bold;
	color: #5886B2;
	letter-spacing: 0px;
	padding: 10px 20px 0px 0px;
	margin: 0;
}

h5 {
	font-family: verdana, Arial, tahoma;
	text-transform: uppercase;
	font-size: 0.7em;
	text-align: right;
	line-height: 5px;
	font-weight: bold;
	color: #C3D4E3;
	letter-spacing: 3px;
	padding-right: 17px;
	margin: 0;
}

#navigation
	{
	font-family: verdana, Arial, tahoma;
	text-transform: uppercase;
	font-size: 0.54em;
	text-align: left;
	font-weight: bold;
	color: #769DBF;
	letter-spacing: 1px;
	margin-top: 25px;
	margin-left: 20px;
	position: absolute;
}
	
#toptitle
	{
	background-position:top;
	height: auto;
	width: 768px;
	background-image: url(bg.jpg);
    padding: 0px;
	margin: 0px;	
	}
	
#blueline
	{
	height: 6px;
	width: 752px;
    background-color: #D8E8F8;
    margin-top: 8px;
	margin-left: 8px;
	margin-right: 0px;
	position: absolute;
	}
	
#headerimage
	{
	height: 173px;
	width: 752px;
	background-image: url(main.jpg);
    margin-top: 15px;
	margin-left: 8px;
	position: absolute;
	}

#main {
	margin-top: 100px;
	width: 768px;
	margin: 20px 0;
	margin-left:40px;
	display: inline;
}

#header
    {
	background-image: url(top.jpg);
	vertical-align: bottom;
    height: 10px;
    width: 768px;
	margin-top: 20px;
    padding: 0px;
    }
	
#bottom
    {
	background-image: url(bottom.jpg);
	vertical-align: bottom;
    height: 17px;
    width: 768px;
	margin-top: 0px;
    padding: 0px;
    }
	
p
    {
	text-align: justify;
    color: #555;
    margin-top: 0px;
    margin-bottom: 9px;
    }

.caps
    {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    }

ol
    {
    margin: 0;
    padding: 0;
    }
    
ul, li
    {
    color: #666;
    list-style-type: none;
    border: 0;
    margin: 0;
    padding: 0;
    }

a:link, a:visited
    {
    color: #FA65CD;
    text-decoration: none;
    }

a:hover
    {
    color: #FD92E0;
    }

a:active
    {
    color: #FB7FD7;
    }
	
#container
    {
    position: relative;
    margin: 0 auto;
    text-align: left;
    background: url(bgfront.gif) repeat-y;
    width: 679px;
    }

#content
    {
    padding: 28px 20px 0 20px;
    min-height: 200px;
    }

can anyone help? thanks!

Css Works In Ie But Mozilla Is Screwed

Similar Tutorials

View Content

Ok i have a piece of code for the menu that works the way i want in IE but in Mozilla totaly screwed. Any help to fix this?
Try this link in IE then in FireFox

HTML
Code:

<div id="navcontainer">
<ul id="navlist">
	<li><a href="#">Home</a></li>
	<li><a href="#">Community</a></li>
	<li><a href="#">Members</a></li>
	<li><a href="#">Downloads</a></li>
	<li><a href="#">Servers</a></li>
	<li><a href="#">IRC</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Links</a></li>
</ul>
</div>

CSS
Code:

#navcontainer
{
	heigt:100px;
}
#navlist ul
{
	margin-left: 0;
	padding-left: 0;
}

#navlist li
{
	display: inline;
	list-style-type: none;

}

#navlist a {
	padding: 3px 10px;
	margin: -3px 6px;

}

#navlist a:link, #navlist a:visited
{
	color: #fff;
	background-color: #036;
	text-decoration: none;
	text-align:center;
	background: #366 url(lbg.gif);
	width: 100px;
	height: 100px;


}

#navlist a:hover
{
	color: #fff;
	background-color: #369;
	text-decoration: none;

}

Site Get Screwed When Minimized In Ie.

Similar Tutorials

View Content

Hello,

My site is on Wordpress and I have changed some CSS.
Now my site gets screwed up when I change something in the sidebar. For example if I add something bigger than sidebar width the text on the right drops all the way down in IE. However in firefox everything seem to be fine. But still in IE when I minimize the window the text jumps down.
Also when I checked my site on doomaintools.com it showed a small picture of my site but the page is screwed up. I think it is CSS problem. I want to make the sidebar and right side to a particular width so it doesn't change. How can it be done?

site is sushicup.com

If you are good with css please help me!
I'm so lost.

Thank you.
rush4rk

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

Positioning Help

Similar Tutorials

View Content

stupid question

I have a three column layout I picked up from the web here and there and I am trying to be clever and of course, since I am not a CSS pro...I am blowing it!

the css I am messing with is as follows:

container holds the three columns and the header and footer.

in the header section..which is called #top, I have an image which is the logo for the page. The top is 95 px high. what I wanted to do was split the TOP div into two sections, with the second one starting at 340px from the left and go about 250 px across. naturally, I tried to use:

#new_section
{
margin-left: 323px;
margin-right: 0px;
margin-top:55px;---bottom of #TOP div---
padding:0px 0px 40px 0px;
border-bottom:2px solid #D7C8AC;
background-color:#E2DCDC;
}

all the variations I used either worked in IE and not NS or vice versa.

I know it is just a simple positioning issue I am overlooking.

any help would be appreciated greatly.

thanks!

jpm226@comcast.net
**************************
#container
{
width:auto;
margin:0px 0px 0px 0px;
background-color:transparent;
color: #333;
line-height: 130%;
background-image:url(bg.gif);
background-position:left;
background-repeat:repeat-y;

}

#top
{

padding:0px;
height:95px;
border-bottom:2px solid #E2DCDC;
background-color:#F5F5F5;
background-image:url(header.gif);
background-repeat:no-repeat;
background-position:left;
}

.text{
padding:4px;
fontalatino linotype;
color:#000;
text-align:justify;
}

#leftnav
{
float: left;
width: 322px;
margin-top:0px;
padding:0px;

}

#rightnav
{
float: right;
width: 214px;
margin-top:149px;
margin-right:2px;
padding:0px;
background-color:transparent;
/*border-left:1px solid green;
border-right:1px solid green;*/
}

.news
{

margin: 0px 10px 0px 10px;
background-color:transparent;
/*height:235px;*/
border: 2px solid #fff;
}

#image
{
margin-left: 323px;
margin-right: 0px;
margin-top:0px;
padding:0px 0px 96px 0px;
border-bottom:2px solid #D7C8AC;
background-color:#E2DCDC;
background-image:url(desk.gif);
background-position:right;
background-repeat:no-repeat;

}

#content
{
margin-left:323px;
margin-right: 216px;
margin-top:0px;
padding:10px 0px 30px 0px;
max-width: 36em;
border-left:1px solid red;
border-right:1px solid red;
background-color:transparent;
}

.content2 {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:20px 8px 10px 8px;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
background-color:#F5F5F5;
padding:10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */

}
#footer
{
clear: both;
margin: 0;
padding:0px;
color: #333;
border-top: 1px solid #fff;
background-color:#EEE8E8;

}

Div Tag Positioning

Similar Tutorials

View Content

Hello,

I've got a div tag that I want to position tags off of using css's margin attribute. The data amount is variable, so sometimes the tags that position off of the first tag end up in different locations depending on the amount of data placed in the div tag. I've tried setting a static height attribute, but it doesn't appear to work for me.

Any ideas?

Css Positioning

Similar Tutorials

View Content

I have a few more questions on css positioning.
How to center the content;
What about the positioning of the inside tags? If you want to position at a specific place.
Code:

	<body style="width: 100%; background-color: #808000;" onLoad="parseXML(); bodyOnload();">
		<div id="master" style="float: left; display: block; text-align: left; width: 955px;">
			<div id="navbar" style="position: absolute; left: 10px; top: 10px; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 180px;"></div>
			<div id="picbar" style="position: absolute; left: 10px; top: 200px; margin: 0 0 10px 0; border: none; background-color: #FFCC00; width: 200px; height: 390px; overflow-y: scroll;"></div>		
			<div id="maindiv" style="position: absolute; left: 230px; top: 10px; border: none; background-color: #FFFFAE; width: 700px; height: 580px;">
				<div id="galbar" style="position: absolute; left: 150px; top: 0px; z-index: 3;"></div>
			</div>		
		</div>
	</body>

Css Div And Positioning.

Similar Tutorials

View Content

Hi bit of a newbie but confused by following code;

The images all display ok and the rounded gif work ok but I get a gap between the divs (highlighted below). Is it margins/paddings?

Pulling hair out!

Thanks,

Bill.

.child { width: 200px;
background-color:green;
background-image: url(unt.bmp) ;
}
.parent {margin: 0; padding: 0}
.bl1 {background: url(_round_bl.gif) bottom left no-repeat ;background-color: blue;width: 200px }

.br1 {background: url(_round_br.gif) bottom right no-repeat;}

.tl1 {background: url(_round_tl.gif) top left no-repeat;}

.tr1 {background: url(_round_tr.gif) top right no-repeat;}

</style>

</head>

<body>

<div class="parent">

<div class="child">
<div class="tl1">
<div class="tr1">
<h2>Hello </h2>
</div>
</div>
</div>
/* When displayed in browser the above is separated from the following by a gap of around 20 odd px */
<div class="bl1">
<div class="br1">
<h2>Hello</h2>
</div>
</div>

</div>

</body>

</html>

Css Pop-up Positioning

Similar Tutorials

View Content

I have inputted some css popup text on roll over for some social bookmarking buttons on a new blog skin. (pkevan.blogspot) The problem I am having is placing where they pop-up. I can't use an absolute position because who knows where a post will be along with multiple posts. Right now there floating underneath the icons at the left hand side. I want the text to appear to the right of the icons inline with them. I'm having trouble positioning them there though. Any help, or properties that might be useful will be greatly appreciated. Thanks in advance. Heres what I have applied so far.

div#socialbookmarks a span {display: none;
}

div#socialbookmarks a:hover span {display: block;
float: left;
position: inline; top: 0px; left: 0px; width: 20px;
padding: 0px; margin: 0px; z-index: 0;
color: #4AAAFA; background: transparent;
}

Positioning.

Similar Tutorials

View Content

Okay I need help with this CSS, I am very new with CSS
I am having trouble positioning this Navigation Bar to the right, it is stuck to the left, and I need it to be so it will always stay on top of everything.

My HTML Page

The Code.
Code:

				<head><noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script SRC="http://mytubeforum.webs.com/jquery-1.3.2.min.js"></SCRIPT>
<script type="text/javascript">
function nav(){
$('div#nav ul li').mouseover(function() {
$(this).find('ul:first').show();
});

$('div#nav ul li').mouseleave(function() {
$('div#nav ul li ul').hide();
});

$('div#nav ul li ul').mouseleave(function() {
$('div#nav ul li ul').hide();;
});
};

$(document).ready(function() {
nav();
});
</script>
<style type="text/css">

/*NAVBAR CODE*/ 
#nav{
     width: 460px;
     padding:460px; 
     float: right;
     align: right;
     position: absolute;
     background:url(http://i34.tinypic.com/5bzbmd.png);
     background-repeat: no-repeat;
     height:38px;
     line-height:32px;
     padding:0 10px; 
}


	#nav ul, 
	#nav ul li
	{
		margin:0; 
		padding:0;
		list-style:none;
	}
	#nav ul li{
		float:left;
		display:block;
	}
	#nav ul li a:link,
	#nav ul li a:visited{
		color:#000000;
		font-size:14px;
		font-weight:bold;
		text-decoration:none;
		padding:0 30px 0 10px;;
                margin-top:3.5px; 
		display:block;
	}
	#nav ul li a:hover{
		color:#3b414c
	}
	#nav ul li ul li{
		float:none;
		display:block;
	}
	#nav ul li ul li a:link,
	#nav ul li ul li a:visited{
		color:#444;
		font-size:12px;
		font-weight:bold;
		text-decoration:none;
		padding:0 20px;
		clear:both;
		border-bottom:solid 1px #DEDEDE;
                -moz-border-radius-bottomleft: 10px;
                -webkit-border-bottom-left-radius: 10px;
                -moz-border-radius-bottomright: 10px;
                -webkit-border-bottom-right-radius: 10px;
	}
	#nav ul li ul li a:hover{
		color:#3b414c;
		background:#EBEFF7;
	}
		
	.submenu {
		position: absolute;
		width: 140px;
		background: #efefef;
		padding:20px;
		border:solid 1px #b2b2b2;
		border-top:none;
		z-index: 1000;
		display:none;
		line-height:26px;
                padding: 15px;
                -moz-border-radius-bottomleft: 10px;
                -webkit-border-bottom-left-radius: 10px;
                -moz-border-radius-bottomright: 10px;
                -webkit-border-bottom-right-radius: 10px;
	}
</style>
</head>
<body>
<div id="nav">
<ul>
	<li><a href="#">MyTube</a>
	<ul class="submenu">
	<li><a href="/forum.htm">Home</a></li>
	<li><a href="/portal.htm">Portal</a></li>
        <li><a href="/arcade-f12/">Arcade</a></li>
	<li><a href="/calendar.htm">Calendar</a></li>
        <li><a href="/search.forum">Search</a></li>
        <li><a href="/faq.htm">FAQ</a></li>
        <li><a href="/memberlist.forum">Members</a></li>
        <li><a href="/groupcp.forum">Groups</a></li>
        <li><a href="/MyTube-Chat-h2.htm">Chatbox</a></li>
	</ul>
	</li>
	
	<li><a href="#">Messages</a>
	<ul class="submenu">
	<li><a href="/msg.forum?folder=inbox">Inbox</a></li>
	<li><a href="/msg.forum?folder=sentbox">Sentbox</a></li>
	<li><a href="/msg.forum?folder=outbox">Outbox</a></li>
	<li><a href="/msg.forum?folder=savebox">Saved Mail</a></li>
	</ul>
	</li>
	
	<li><a href="#">Profile</a>
	<ul class="submenu">
	<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile">Information</a></li>
	<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=preferences">Preferences</a></li>
	<li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=signature">Signature</a></li>
        <li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=avatars">Avatar</a></li>
        <li><a href="http://mytube.7forum.net//profile.forum?mode=editprofile&page_profil=friendsfoes">Friends & Foes</a></li>
	</ul>
	</li>

	<li><a href="#">Log In | Out</a>
	<ul class="submenu">
Under Construction<hr>
	<li><a href="/profile.forum?mode=register">Register</a></li>
	<li><a href="/login.forum?connexion">Login</a></li>
	</ul>
	</li>
</div>

Please Help Me, Thank you.

Css Positioning

Similar Tutorials

View Content

Hi guys,

I'm pretty new to web design, so please be gentle.

I have an issue with CSS positioning that I'm trying to figure out. After research, I figured out how to align a div to the centre using an external stylesheet. However, I want this div to be positioned at the very top of the page. Currently, it sits approx 100px from the top and I can't figure out how to position it to 0px.

Here's my code;

body { text-align: center; margin: 5em 0 0 0; vertical-align: middle; }
#content {
width: 760px;
text-align: left;
margin: 0 auto;
background-color: #000000;
top: 0px;
}

Can anyone help me?

Thanks
Luke

Need Help With Css Positioning

Similar Tutorials

View Content

This is a snippet of what I have in my css:
Code:

#page-body {
        width:100%;
        background:#000 url(bg_night.jpg) bottom left repeat-x scroll;
        margin:0;
        padding:0 0 125px 0;
        border:1px solid red;
        border-top:33px solid #cfad34;
        color:#fff;
        clear:both;
}

The css above works great but now I want to include an image in the lower left-hand corner of the page-body also.

So while I have something like the following:

Code:

<html>
 <body>
  <div id="page-body>
    .....
   </div> 
  </body>
 </html>

I am hoping to create a class where I can position this second image. I don't want to use absolute positioning because the page body will increase in height size based on the growth on the content inside.

Any suggestions?

Thanks in Advance.

Ie6 Positioning

Similar Tutorials

View Content

Can somebody help me. I have been dealing with IE6 bugs for awhile, and I know that IE6 has trouble with floating divs. I have listed the code below. It would be easier to look at the page on the website because it is very simple, but I am not allowed to post a URL

Why does IE6 push the "main" div (yellow) down below everything.
If I make the width 874px it takes its normal place just under the red "top" div, but it does not stretch all the way to the edge of the blue "container" div. It looks perfect in IE7, Firefox.
Can anybody tell me why?

Thanks so much in advance,
Mike

Code:


<style type="text/css">
body {background-color: #CCCCCC;}
#container {width:980px;height:1000px;margin:0px auto 0px auto;background-color:#0000FF;padding:0;} 
#top {height:81px;width:980px;background-color:#FF0000;padding: 0px;}
#leftColumn {float:left;background-color:#8781bd;height:5001px;width:103px;z-index: 20;border-bottom:1px solid #000;}
#main {margin:0;padding:0;float:left;height:500px;width: 877px;background-color:#FFFF00;}
</style>
</head>
 
<body>

<div id="container">
<div id = "top"></div>

<div id = "leftColumn">
</div>	<!--end of #leftColumn-->
<div id="main">
</div>
</div>

Need Help Positioning Relatively

Similar Tutorials

View Content

Allright first off this is the first time I have written any web based code in over a year, so its *NOT* cross browser, compliant in any way shape or form, it just works to make the design come together in firefox...
what I am looking for is the menu bar to have the carrot (the downward pointing triangle) centered ON TOP OF whatever page you are on CURRENTLY)
page is he
http://www.gr-p.com/test2.html
what should I be aiming for as far as CSS, or should I start from scratch.. I want suggestions (not necisarily for you to fix my code.) I need to learn again and thats the only way I am going to

Positioning Help

Similar Tutorials

View Content

Hello, I am a complete newb to CSS and I am trying to position on image on my page, what is the correct syntax (the html, and CSS) for me to be able to place an image where ever i want on the screen? Thanks so much for the help

Positioning With Css

Similar Tutorials

View Content

Hello all!

Well I'm just designing my personal website, and I'm encountering a problem with positioning div elements. (This is going to be a very basic question that I couldn't find anywhere.)

To understand the exact problem I am having, here are the links:

lightblu.com/4/1.html
lightblu.com/4/2.html

Notice in the first one, it is perfectly fine.

In the second, when I add more text, it just overlaps everything, including the footer and the bg color.

It only works fine when I add more text on those right boxes.

So question is, what should I do so that when I add text either on the left side OR on the right side, the background expands accordingly?

Thanks for all your help!

Css Positioning In Ie

Similar Tutorials

View Content

I'm using a JS/CSS calender script found at http://www.dynarch.com/projects/calendar/. It works great except for one thing.. it wont position correctly in IE (6 & 7).

I have a form with 20 text inputs strait down a page. As per instruction i place the following code just below my desired text input, say at tab index 12.
Code:

<script type="text/javascript">
Calendar.setup({
inputField     :    "this_fieled_name",   // id of the input field
ifFormat       :    "%Y-%m-%d",       // format of the input field
showsTime      :    true,
timeFormat     :    "24"
});
</script>

When the page and script run, in Firefox its perfect, but in IE, the calender places almost 200px high than desired near tab index 6.

My question is, how do i get IE to position as FF does?

Here are i think the two most important files that may need affecting. Both are stock from download.
http://www.empiresolutions.net/demo/calendar-setup.js
http://www.empiresolutions.net/demo/theme.css

Thanks much.

Cesar

Help Positioning A Div

Similar Tutorials

View Content

thanks for taking the time to read my question.

I have a div that I want to float right, but it is staying on the left side, and I can't figure out why.

HTML:
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>
<meta name="description" content="Warren Persowich Humour Facilitator - Stand-Up Comedian Winnipeg Manitoba. Comedic entertainment performances laughter and insight. Fun professional development. A decade of stand-up experience." />
<meta name="keywords" content="Warren Persowich, Comedian, Comedic, Stand Up, Stand-Up, Comedy, Business, Winnipeg, Manitoba, Cancer, Entertainment, Funny, Hilarious, Interactive, Laughter, Psychology, Professional, Development" />
<meta name="Revisit-After" content="7 Days" />
<meta name="Robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="verify-v1" content="ongXn98vPdWEemx2Lu5qZozNxw3CDdugXLIpK9XzOr4=" /> 
<title>2 Nations Female Hockey League:::::</title>
<script type="text/javascript" src="Javascript/coolmenu.js"></script>
<script type="text/javascript" src="Javascript/menu_items.js"></script>
<link rel="stylesheet" type="text/css" href="menu_styles.css">
<link rel="stylesheet" type="text/css" href="2NFHL.css">
</head>

<body>
<script type="text/javascript">var m1 = new COOLjsMenu("menu1", MENU_ITEMS)</script>
<div class="LogoDiv"><a href="Index.htm"><img class="Logo" src="Images/WOMENSHOCKEY CHOICE 1Small2.jpg" alt="Two Nations Female Hockey League"></a></div>
<div class="NavDiv">
<p class="TeamsNav">Teams: <a href="Team1">Coyotes</a> | <a href="Team2">Extreme</a> | <a href="Team3">Ice Cats</a> | <a href="Team4">Saints</a> | <a href="Team5">Mustangs</a> | <a href="Team6">Lightening</a> | <a href="Team7">On Edge</a></p>
</div>
<div class="ContentDiv">
<div class="prop"></div>
<div class="Welcome">
	<p class="FirstLine">Welcome to the Two Nations Female Hockey Leage web site.</p>
	<p>The Two Nations Female Hockey Leage is a Spring - Summer league that is comprised of female hockey teams hailing from both Canada and United States.</p>
	<p>To learn more about the Two Nations Female Hockey League, click <a href="AboutUs.htm">here</a> or use the About Us link in the navigation bar above.</p>
</div>
<div class="TNFHLTW">
	<p class="TNFHLTWP">This week in the TNFHL the Coyote's and On Edge faced off in Winnipeg, Manitoba. The teams skated to a 3 all tie.</p>
</div>
<div class="Banners">
	<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
	<div class="BannerCont"><img src="Images/ChampWeekend.gif" /></div>
</div>
<div class="clearprop"></div>
</div>
<div class="BottomNavDiv">
	<div class="BottomNavDivCont">
		<p class="BottomNavLinkP"><a href="Index.htm" class="BottomNavLink">Home</a> | <a href="Index.htm" class="BottomNavLink">About Us</a> | <a href="Index.htm" class="BottomNavLink">Philosophy</a> | <a href="Index.htm" class="BottomNavLink">Teams</a> | <a href="Index.htm" class="BottomNavLink">Standings</a> | <a href="Index.htm" class="BottomNavLink">Schedule</a> | <a href="Index.htm" class="BottomNavLink">Contact Us</a> | <a href="Index.htm" class="BottomNavLink">Links</a><p/>
	</div>
</div>
</body>
</html>

CSS:
Code:

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.LogoDiv {
/*background-image:url("Images/WOMENSHOCKEY CHOICE 1Small2.jpg");
background-repeat: no-repeat;
background-position: top left;*/
margin: 2px auto;
padding: 0px;
height: 87px;
width: 800px;
display: block;
}

img.Logo {
border: 0px;
}

.Banners {
float: right;
width: 300;
margin: 20px 20px 0px 0px;
padding: 0px;
background-color: red;
 /*clear: both;*/ 
}

.BannerCont {
width: 300;
height: 50px;
margin: 5px 0px 0px 0px;
padding: 5px 0px 0px 0px;
background-color:#362161;
}


.NavDiv {
background-image: url(Images/N2NavBar2.jpg);
background-repeat: repeat-x;
background-position: top left;
padding: 10px 0px 0px 0px;
margin: 0px 0px -13px 0px;
height: 80px;
width: 100%;
display: block;
}

.TeamsNav {
padding: 0px;
margin: 0px 0px 0px 400px;
font-size: 12px;
}

/*.prop and .clearprop are in here to create a min height of 400px*/
.prop {
height: 400px;
width: 1px;
float: right;
background-color: yellow;
}			 

.clearprop {
clear: both;
height: 1px;
overflow: hidden;
background-color: yellow;
}

.ContentDiv {
width: 800px;
/*height: 400px;*/
overflow: hidden;
background-image:url(Images/Background-Blue3.jpg);
background-repeat: no-repeat;
background-position: top left;
margin: 0px auto;
padding: 0px;
display: block;
position:static;
z-index: -1;
}

.TNFHLTW{
width: 212px;
overflow: hidden;
background-image:url(Images/TNFHLThisWeekShortNarrow.gif);
background-position: top left;
background-repeat: no-repeat;
margin: 50px 0px 0px 30px;
padding: 50px 0px 0px 0px;
}

.Welcome {
float: right;
margin: 10px 20px 0px 0px;
overflow: hidden;
width: 450px;
background-color: aqua;

}

.FirstLine {
font-size: 20px;
margin: 0px;
padding: 0px;
text-align: center;
}

.COC1 {
padding: 2px;
margin: 50px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}

.COC {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-indent: 20px;
}

.OLHolder {
margin: 10px 0px 0px 30px;
padding: 2px;
float: left;
width: 700px;
}

.COCOL li {
margin-bottom: 10px;
}

.COCTitle {
padding: 2px;
margin: 10px 0px 0px 30px;
width: 700px;
float: left;
text-align: center;
font-weight: bold;
text-decoration: underline;
font-size:18px;
}

.LinkList li {
margin-top: 10px;
list-style-type:none;
}

p.TNFHLTWP {
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 4px;
margin: -20px 0px 0px 0px;
font-size: 12px;
background-color: #ffffff;
}

.BottomNavDiv {
padding: 0px;
height: 72px;
width: 100%;
display: block;
border-top: 4px solid red;
margin: 0px;
height: 25px;
}

.BottomNavDivCont {
margin: 0px auto;
width: 800px;
overflow: hidden;
display: block;
height: 25px;
padding: 0px 0px 0px 20px;
}

/*.BottomNavDivCont ul li {
display: inline;
padding: 0px 10px 0px 0px;
font-size: 10px;
color: #ff0000;
margin: 0px;
}*/

.BottomNavLinkP {
font-size: 10px;
color: #ff0000;
display: block;
}

.BottomNavLink {
font-size: 10px;
color: #ff0000;
}

a.BottomNavLink:link{
text-decoration: none;
}
a.BottomNavLink:visited{}
a.BottomNavLink:hover{
text-decoration: underline;
}
a.BottomNavLink:active{}

p.TeamsNav a:link{
text-decoration: none;
color: #000099
}
p.TeamsNav a:visited{}
p.TeamsNav a:hover{
text-decoration: underline;
}
p.TeamsNav a:active{}

.LinkList li a:link {
text-decoration: none;
color: #000099;
}
.LinkList li a:visited {}
.LinkList li a:hover {
text-decoration: underline;
}
.LinkList li a:active {}

I put clear:both on .Banners but then it moves to the bottom under .prop I'd like .Banners to be under .Welcome

The page displays the same in FF and IE7, but in IE6 .Banners stretches across most of the .ContentDiv

help?

Ie6 & Positioning

Similar Tutorials

View Content

I wasn't sure how to title this problem as I'm not sure exactly what it is. I've only been learning CSS over the last few days and transformed an old site as I went.

learnware .com . au/css/index .htm

The page displays fine in IE7 and FF but in IE6 the left menu moves over and sits just over the top of the left hand edge of the green area in the middle.

I'm not sure what code to post or which area to focus on. I'm hoping someone can assist me with what I should be looking at.

I've spent all night looking at forums, etc trying to figure out where the problem lies but I can't even get that far!

(Sorry if I've disobeyed any forum rules)

Positioning Help Please

Similar Tutorials

View Content

Hi,
I am a newbie to CSS and I need some help.
Unfortunately I have not got a domain name for the site as yet, so I am unable to show you the actual site. However I have pasted the relevant CSS and HTML for the index page below.
I want to position the two items in red at the bottom of the side bars. The first image is on the left (sidebar) and the other is on the right (sidebar b)

Many thanks
Dave.

**** CSS ****

/*LEFT CONTENT*/
#sidebar {
float : left;
width: 140px;
margin : 0 0 0 0;
padding: 10px;
color : #000000;
background : #ffffff;
}

/*RIGHT CONTENT*/

#sidebar-b {
float : right;
width : 140px;
margin : 0;
padding : 10px;
background : #ffffff;
color : #000000;
}

HTML

<div id="sidebar" style="height: 372px">
<p> </p>
<p> </p>
<p> </p>

<div><img alt="Help for Heroes" height="51" src="img/helpforheroes_logo.jpg" width="120" /></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div> <a href="no url">
<img style="border:0;width:88px;height:31px"
src="vcss.gif"
alt="Valid CSS!" />
</a></div>

</div>
<div id="sidebar-b" style="height: 372px">

<script type="text/javascript">
/*
Live Date Script-

For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,

*/

var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")

function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
/*var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}*/

var dn = "";

/*if (hours==0)
hours=12*/

if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</b></font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}

</script>

<span id="clock"></span>
<p> </p>
<p> </p>

<h2>Squadron News</h2>
<div class="scroll">
<script type="text/javascript">

//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)

new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
</script>

</div>

<div> <img src="img/next_gen.jpg" alt="Next Generation" title="Next Generation" height="80" width="136"/> </div>
<p> </p>
<p> </p>
<p> </p>

</div>