I am new to Css. I have an HTML page.
<body>
<div id="viewer">
<div id="flow">
<img src="images/beatles.jpg">
<img src="images/blink.jpg">
<img src="images/doves.jpg">
<img src="images/flash.jpg">
<img src="images/floyd.jpg">
<img src="images/jurassic.jpg">
<img src="images/naked.jpg">
<img src="images/prodigy.jpg">
<img src="images/xx.jpg">
<img src="images/zabiela.jpg">
</div> <!--end of <div id="flow"> -->
<ul>
<li id="left">
<a href="#" title="Move Left">Left</a>
</li>
<li id="right">
<a href="#" title="Move Right">Right</a>
</li>
</ul>
</div> <!--end of <div id="viewer"> -->
</body>
Each image is 200×200. Now i am confused with the css of it. Here i show it step by step
#viewer {
width:700px;
height:220px;
padding:100px 0 30px;
margin:auto;
border:1px solid #000;
position:relative;
}
You define width and height of main Div. Define padding, means each element that is place inside div will place 200px from top, no sapce from left and right, 30px space from bottom of div. Also i want to ask here we define position relative. Is it relative with respect to body or html?
We didn’t define the #flow div width and height. So it calculated by the padding. The #flow div width is same as the #viewer width, but place 30px below from top of #viewer div, it’s height is 190px, place 30px above from bottom. Please tell me if i am wrong.
#flow:after {
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
Now we are defining content that we want to enter after the #flow div. We set it’s visibility hidden, means it is there, taking up the space but not showing. Is it? The thing that i want to ask here is this, that we are using clear:both here. What are we clearing here? we didn’t set any float property in the #viewer div?
Now comes the confusing part
#flow img {
display:block;
margin-left:-165px;
position:relative;
top:-15px;
left:245px;
float:left;
background-color:#fff;
}
Now we are setting images, that are in the #flow Div. First thing that i notice which is confusing that if i set it’s top property to 1px. Then it align with respect to # flow div. Which is fine because it’s position is relative, and it is inside #flow div, so it is aligning with respect to #flow div.
But when i change it’s left property to 1px. Then it goes beyond the both divs(#viewer and #flow). Align itself somewhere between the mid of scree left corner and left of div. Why it is happening. If it’s position is relative, then it should remain inside the #flow div. This is my confusion.
Also images are shrink to accommodate inside the div. I think it’s because of the dov size. That each image is 200×200. Our #flow width is 700px only.
Another thing we set margin-left:-165px;. Right now images are arrange horizontally and also shrink to accommodate in the div. But if i change to margin-left:165px;. Then images are expand vertically and all images are shown. Images are not shrink. Also we set top:-15px;. When are we set values in negative?
It’s not an assignment or homework. I am just practicing and i want to know how things are working. Here are the remaining css
#viewer li {
list-style-type:none;
position:absolute;
bottom:10px;
}
#left {
left:20px;
}
#right {
right:20px;
}
Thanks
A good start to find out how the css works is to install firefox with firebug. In firebug, you can hover over elements to see their styling.
Secondly, I would place the images in
litags for better organization.