Jump to content


Photo

CSS position problems


  • Please log in to reply
1 reply to this topic

#1 williamrouse

williamrouse

    Advanced Member

  • Member
  • PipPipPipPip
  • 152 posts

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 williamrouse

williamrouse

    Advanced Member

  • Member
  • PipPipPipPip
  • 152 posts

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users