I have this code:
<div class="thumbnail">
<div class="image_thumbnail">
<div class="category"></div>
<div class="category2"></div>
</div>
<div class="info_thumbnail"></div>
<div class="footer_thumbnail">
<div class="stars_empty"></div>
<img class="views" src="images/views.png">10
</div>
</div>
How do I have to work on css to have an effect like this?
The green div should be the category div
Thanks!
<div id="container">
<div class="box"></div>
<div class="tab"></div>
</div>
#container{
position:relative;
}
.box{
position:relative;
left:10px;
top:10px;
height:150px;
width:100px;
border-radius:8px;
border:2px solid #666;
background-color:#DDD;
z-index:5;
}
.tab {
position:absolute;
left:105px;
top:35px;
width:25px;
height:40px;
background-color:green;
border-radius:5px;
box-shadow: 3px 3px 3px #888;
}
Demo: http://jsfiddle.net/Q7RkR/
What you'd like to do is not much clear.
Anyway, to handle over-positions you should have a main container for each of your thumbnail; set position:relative to the main container, and set position:absolute to each child layer element.
Related
how to make the boxes overlap and offset both top and left 5px one by one only use css
plz check the result what i want first
plz check the upper link
i thought it can be done in just one style define,no need to define each box's location
can u help me adjust it in this code?
HTML
<div class="holder">
<div class="card" ></div>
<div class="card" ></div>
<div class="card" ></div>
<div class="card" ></div>
</div>
CSS
.holder{
position:absolute;
top:100px;
left:100px;
display:block;
font-size: 0;
}
.card{
position:relative;
background:red;
opacity: 0.4;
width:40px;
height:60px;
margin-top:-55px;
margin-left:-35px;
}
thank u vv much
How about minimalising markup and using a box shadow instead?
this allows you to only declare a single card element, and use multiple box shadows:
.holder{
position:absolute;
top:100px;
left:100px;
display:block;
font-size: 0;
}
.card{
position:relative;
background:red;
opacity: 0.4;
width:40px;
height:60px;
margin-top:-55px;
margin-left:-35px;
box-shadow: 5px 5px rgba(255,0,0,0.4),10px 10px rgba(255,0,0,0.4), 15px 15px rgba(255,0,0,0.4), 20px 20px rgba(255,0,0,0.4);
}
<div class="holder">
<div class="card" ></div>
</div>
I am trying to achieve this layout:
So far, here is the HTML I have:
<body>
<div id="content">
<div id="header">
</div>
<div id="nav">
</div>
<div id="footer">
</div>
</div>
</body>
and the CSS:
#content{
margin:0 auto;
height:1200px;
width:1000px;
border:2px solid black;
}
#header{
margin:0 auto;
width:inherit;
height:200px;
border-bottom:2px black solid;
}
#nav{
margin:0 auto;
width:inherit;
height:50px;
border-bottom:2px solid black;
}
#footer{
width:inherit;
border-top:2px solid black;
margin-top:-1200px;
height:200px;
clear:both;
}
The problem is with the footer - it is not behaving as in diagram.
Can you tell me what is wrong with my code? Please don't give me some other codes because I am new to CSS.
Your footer is moved up because you have margin-top: -1200px
I have the following where I want the right div to align to the top of the parent, but it's just not happening for me..
<div id="container">
<div id="center">Center</div>
<div id="left">Left text here...</div>
<div id="right"><img src="image.png" width="75" height="75" /></div>
</div>
CSS
#container{
width:50%;
overflow:auto;
border-style:solid;
border-width:1px;
border-color:#aaaaaa;
vertical-align: top;
}
#left{
width:100px;
border-style:solid;
border-width:1px;
border-color:#aaaaaa;
}
#right{
float:right;
width:100px;
text-align:right;
vertical-align: top;
border-style:solid;
height:100px;
width:100px;
border-width:1px;
border-color:#aaaaaa;
}
#center{
float:left;
padding-bottom: 10px;
width:100px;
border-style:solid;
border-width:1px;
border-color:#aaaaaa;
}
Fiddle at http://jsfiddle.net/w3Gcb/
If you swap the left div with the right one, then the right div goes to top:
Fiddle
<div id="container">
<div id="right"><img src="image.png" width="57" height="57" /></div>
<div id="center">Centre</div>
<div id="left">Left text here...</div>
</div>
In Css
#right{
float:right;
width:100px;
text-align:right;
vertical-align: top;
border-style:solid;
height:100px;
width:100%;
border-width:1px;
border-color:#aaaaaa;
}
Try this...
Add one more div like this code:
<div id="container">
<div class="mid">
<div id="center">Centre</div>
<div id="left">Left text here...</div>
</div>
<div id="right"><img src="image.png" width="57" height="57" /></div>
</div>
and give the CSS to mid class as following:
.mid{
float:left;
}
This will work properly.
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gall"></div>
CSS
.btns{
float:left;
padding: 2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px; // this top margin doesn't work in IE8
height:70px;
border:thin solid red;
}
here is jsFiddle
It's a known bug in IE8. There are several ways to fix it.
You can try to add overflow:auto to the clearing <div>
Check this fiddle
Try to add display:inline-block; and width how much you want hope it will solve your problem.
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<!-- Adding will solve problem -->
<div id="gall"></div>
Works for me.
http://jsfiddle.net/68myJ/13/
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
<div style="clear:both;"></div>
<div id="gall"></div>
.btns{
float:left;
padding:2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px !important;
height:70px;
width:100%;
display:block; /* can revert inline block when long list for IE8*/
border:thin solid red;
}
try this:
<div id="wrapper">
<div class="btns" id="btnHome">HOME</div>
<div class="btns" id="btnCon">CONTACT</div>
</div>
<div id="gall"></div>
#wrapper{
overflow:hidden;
}
.btns{
float:left;
padding:2px 10px 2px 10px;
}
#gall{
margin:25px 0 15px !important;
height:70px;
width:100%;
display:block; /* can revert inline block when long list for IE8*/
border:thin solid red;
}
see fiddle: http://jsfiddle.net/68myJ/17/
I've two divs leftSide and rightSide whose parent is innerContainer. I've floated both the divs to left.They are appearing side by side but the right div is not covering the remaining space of the parent div.
I tried using overflow:hidden and also specified the width but still it is of the same width.
My Css:
#container {
overflow:auto;
margin:10px auto;
}
#innerContainer{
margin:10px auto;
width:1200px;
background:#FFFFFF;
border:2px solid #09F;
overflow:auto;
}
#leftSide{
overflow:auto;
float:left;
width:700px;
border:3px solid #F00;
}
#topheaderProfile{
margin:5px;
border:1px solid #F00;
}
#middleCompanyDescription{
margin:5px;
border:1px solid #333;
}
#Profile{
text-align:left;
}
.ProfileBox{
padding:10px;
cursor:pointer;
overflow:hidden;
text-align:left;
word-break:break-all;
word-wrap:break-word;
}
.CompanyLogo{
float:left;
padding:5px;
}
.rightCover{
overflow:auto;
padding:1px;
}
.companyTitle{
color:#36F;
font-size:24px;
overflow:hidden;
}
.companyTitle a{
text-decoration:none;
}
.CompanyRating{
float:left;
margin-top:3px;
}
.Companylikedicon{
overflow:hidden;
float:right;
margin-left:10px;
}
.Companycommenticon{
float:right;
margin-right:10px;
}
.CompanySlogan{
color:#999;
word-break:break-all;
word-wrap:break-word;
clear:both;
}
#rightSide{
width:100px;
border:1px solid #000;
}
My Html:
<div id="container">
<div id="innerContainer">
<div id="leftSide">
<div id="topheaderProfile">
<div id='Profile'>
<div class='ProfileBox'>
<div class='CompanyLogo'><img src='../Images/defaultPic.jpg' width='90' height='90'/></div>
<div class='rightCover'>
<div class='companyTitle'>My Company</div>
<div class='CompanyRating'>
Rating : <img src='../Images/FilledStar.png' width='20' height='20' id='Star1' />
<img src='../Images/EmptyStar.png' width='20' height='20' id='Star2' />
<img src='../Images/EmptyStar.png' width='20' height='20' id='Star3' />
<img src='../Images/EmptyStar.png' width='20' height='20' id='Star4' />
<img src='../Images/EmptyStar.png' width='20' height='20' id='Star5' />
</div>
<div class='Companylikedicon'><img src='../Images/LikedIcon.png' width='25' height='25' /> 100</div>
<div class='Companycommenticon' ><img src='../Images/comment.png' width='25' height='25' /> 100</div>
<div class='CompanySlogan'>This is the best offer you get 2Rs. off in the besaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat underwear of the worldffer you get 2Rs. off in the besaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat underwear of the world.</div>
</div>
</div> <!--ProfileBox-->
</div>
</div><!--TopHeeaderProfile-->
<div id="middleCompanyDescription">
sadasdsad
</div>
</div> <!--LeftSide-->
<div id="rightSide">
sadasdasdasd
</div>
</div>
</div>
Ok I've found the problem.There is another css file containing id names same as in this file.This is causing the problem.The properties of that file are being applied here.
Thanks everyone for your help.
I tried using overflow:hidden and also specified the width but still it is of the same width.
Use overflow: hidden but don't specify any width if you want #rightSide to fill the remaining space.
See: http://jsfiddle.net/thirtydot/Yuxzs/
#rightSide {
overflow: hidden;
border: 1px solid #000;
}
Try this:
<style type="text/css">
#rightSide {
width:100px;
border:1px solid #000;
float:left;
}
</style>