CSS - Div Tag Positioning

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

Hey guys,

I am in need of a bit of help. The following URL incurs some pretty bad busts in IE (Mac and PC), that busts differently depending on the version. If I could get some feedback on what is happening and if possible maybe some posting of the code that fixes the problems.

URL: http://clients.gravitydigital.com/pure_excitement/welcome.html

Thanks for your help in advance,

Collin

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

I am having some problems getting this to perform properly.

I want this to look like this:
http://img108.imageshack.us/img108/8540/newestdesign5qd.jpg

But it is displaying like this:
http://img119.imageshack.us/img119/8716/problem1qk.jpg


Could you guys tell me what is causing that, and maybe any other touch ups in the code I should do. I will gladly list anyone that helps out in the site credits.

BTW, HTML in Next Post, the post was too long with it.

Here is the CSS:
Code:

ul{
	display: inline;
	list-style-type: none;
	}
li{
	display: inline;
	list-style-type: none;
	}
	
BODY {
	background: #104080 url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/bg.gif) repeat-x;
	color: #000000;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	
}

a:link {
	font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvectica, sans-serif;
	color: #a4a4a4;
	font-weight: bold;
}

a:visited {
	font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvectica, sans-serif;
	color: #a4a4a4;
	font-weight: bold;
}

#wrapper {
	width: 740px;
	color: #FFFFFF;
	background: url(images/sidebar_all.jpg) repeat-y;
}

#logo_2 {
	float: left;
}

#logo_3 {
	float: right;
}

#logo_3 IMG {
	border: none;
	}

#ads {
		margin-left: 216px;
		margin-top: 0px;
		background-color: #FFFFFF;
		}

#sidebar {
	margin-top: 0;
	background: url(images/side_bg.gif) repeat-y;
	float: left;
	width: 187px;
	height: 100%;
	}
	
.content-title {
	background: url(images/content.jpg);
	width: 554px;
	float: right;
	height: 28px;
	}
	
.content-title-text {
    padding-left: 2px;
    margin-top: -7px;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #7489b9;
    float:left;
    }

.content-title-text a:link {
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #7489b9;
    }

.content-title-text a:visited {
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #7489b9;
    }

.content-title-text a:hover {
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: #a6c1ff;
    }
    
.postmetadata {
	background: url(images/content_2.jpg);
	width: 554px;
	height: 22px;
	float: right;
	}

.postmetadata-text {
	color: #bdc4d9;
	font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    margin-top: 1px;
    }

.post {
	font-family: verdana, arial, sans-serif;
    	font-size: 10px;
	color: #000000;
	float: right;
	
	}

.entry {
	margin-left: 187px;
	}

#footer {
 	margin-left: 187px;
	width: 554px;
}

.contentcol {
	width: 554px;
}

#sidebar_fix {
	background: url(images/side_bg.gif) repeat-y;
	height: 100%;
}

#left_bg {
	background: url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/pagebg_l.gif) repeat-y;
	float:left;
}

#right_bg {
	background: url(http://www.digitalsupremacy.com/forums/ds_01/alt_index/pagebg_r.gif) repeat-y;
	float:right;
}

#sidebar ul li ul li {	
	color: #666666;
	list-style-type: square;
	list-style-image: none;
	}
	
.side_exp {
	background: url(images/side_bg.gif) repeat-y;
	}
	
.categories {
	float: left;
	margin: 0;
	}
	

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)

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?

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

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;

}

Hello all, i have a page setup which is working well in all browsers. I have a div layer positioined in the page at the moment it is positioned absolute, and it is in the correct place you can see it at www.loadedtechnologies.com/impact , the layer is id="demoImage", you can have a look at the css file in page source.

I don't want this layer positioned absolute, i want it to be relative to the "MidTopContent" layer, so that when the ADMIN menu appears on the top of the page once logged in, the demoImage layer will follow down within MidTopContent,

Please help THANKS

Hi all,
hoping someone can help me with what feels like it should be a simple problem, but one I can't work out. Apologies if the problem seems too obvious to you, I'm a total noob at this.

I basically have two div objects within a space beneath the header. These are a video player, which is fine, and a scrolling menu.
Presently the menu (navigation.php) is off the bottom-right, beneath the video, and I simply want to force it to the TOP right, parallel with the player.

My code is below, and I'm looking for an elegant css solution if possible.

Any more info needed, just ask. I took a grab, but the forum won't let me post links.
Cheers in advance.

</style>
</head>
<body bgcolor="#B94F1F">

<div id="container">
<div id="header"><?php include("header.php"); ?></div>

<div id="wrapper">

<p id='preview'>The player will show in this paragraph</p>
Words here?
<p>Paragraph
<p>Paragraph

<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','640','380','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=xxx');
s1.write('preview');
</script>

<div id="navigation" style="width:300px;height:430px;overflow:auto;border-width:1px;border-color:000000;border-style:solid;">

<font size=2>

<div id="header"><?php include("navigation.php"); ?></div>


</font></div>

Hello,
I have a flash movie that keeps moving out of place when the browser size is altered. How can I make it so the movie stays in one spot no matter what the browser size?

I have a select menu that I want to sit on the bottom of the page regardless of the length of the page. How can this be achieved? Height of menu is 235px and width is 150px.

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>

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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<div><img alt="Help for Heroes" height="51" src="img/helpforheroes_logo.jpg" width="120" /></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

</div>

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>