Killersites Community: CSS position problems - Killersites Community

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

CSS position problems

#1 User is offline   williamrouse 

  • PipPipPipPip
  • Group: Member
  • Posts: 149
  • Joined: 23-December 08

Posted 02 September 2011 - 08:01 PM

In the code below, I don't know/understand why the <div> that has the id='slideShowBoxControlls' is not positioned under the <div> that has the id='slideShowBox', since they have the same basic CSS.
Can someone explain this to me?

<!DOCTYPE html>
<html>
	<head>
    	<title>Practice jQuery slider and gallery</title>
    	<style>
        	html, body{
            	width: 100%;
            	height: 100%;
            	margin: 0 auto;
            	font-family: 'PT Sans Narrow', Arial, sans-serif;
            	font-size:12px;
            	background-color: #DEDEDE;
            	color: red;
        	}

        	#header{
            	margin: 0 auto;
            	width: 860px;
            	height: 95px;
            	background-color: #FAF6FA;
            	background: #ffffff;
        	}

        	#container{
            	position: absolute;
            	top: 0px;
            	left: 80px;
            	width: 885px;
            	height: 970px;
            	background-color: #EFEFEF;
            	border-style:solid;
            	border-width:1px;
            	border-color: silver;
        	}

        	#slideShowBox{
            	position: relative;
            	width: 640px;
            	height: 500px;
            	margin: 150px auto 0;
            	background-color: #F5F5F5;
            	border:1px solid #FFFFFF;

            	-moz-box-shadow:0 0 22px #111;
            	-webkit-box-shadow:0 0 22px #111;
            	box-shadow:0 0 22px #111;
        	}
        	#slideShowBoxControlls{
            	position: relative;
            	width: 640px;
            	height: 34px;
            	margin: auto 2px auto;
            	border: 1px solid red;
        	}

        	#arrowLeft{
            	background: url('cssimages/arrowLeft.png') no-repeat;
            	width: 32px;
            	height: 32px;
            	border: 1px solid green;
            	display: inline-block;
            	float: left;
        	}

        	#arrowRight{
            	background: url('cssimages/arrowRight.png') no-repeat;
            	width: 32px;
            	height: 32px;
            	border: 1px solid green;
            	display: inline-block;
            	float: right;
        	}
        	
        	h1{
            	font: 30px "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
            	text-align: center;
            	padding-top: 10px;
        	}
    	</style>
	</head>
	<body>
    	<div id="container">
        	<div id="header">
            	<h1>Practice jQuery Slider and Gallery</h1>
        	</div>
        	<div id="slideShowBox">

        	</div>
        	<div id="slideShowBoxControlls">
            	<div id="arrowLeft"></div>
            	<div id="arrowRight"></div>
        	</div>
    	</div>
	</body>
</html>

0

#2 User is offline   williamrouse 

  • PipPipPipPip
  • Group: Member
  • Posts: 149
  • Joined: 23-December 08

Posted 02 September 2011 - 08:52 PM

I found my error in this line:
margin: auto 2px auto;
Should be just:
margin: 2px auto 0;




0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users