How can I create two separate divs with css shapes to overlap each other? I need to be able to load content to the particular divs as well.
The shape is a circle then behind is a rounded rectangle. I need to be able to place custom img to fit within the circle and to place small copy and images into the rectangle.
Any suggestions? Right now, I just have all the content in one div.
<div class="box">
<img src="images/profile_image.png" /><br />
First Last <br />Chicago, IL
<br /></div>
Heres the CSS:
margin: 4px;
border: 1px solid #58585B;
text-align:left;
font-size:12px;
width:200px;
border-radius:10px;
For this task, I would use 2 divs and have the circle with a z-index value so that it will overlap the rectangle div. Make your border-radius size fairly large so that the circle div will accurately resemble that shape.
Try using this code:
CSS:
#circle {
background-color:#333333;
width:50px;
height:50px;
border-radius:25px;
z-index:10;
margin-left:25px;
}
#rectangle {
width:100px;
height:50px;
border-radius:10px;
background-color:#AAAAAA;
}
HTML:
<div id ="rectangle">
<div id="circle">
</div>
</div>
here's a jsFiddle
Related
This is a screenshot of it. I want the label and the image both to fit inside the blue div
I want both of them to fit inside the blue div. But nothing i did worked. I read i should have them float left/right but it stills have the blank space. Set the margin on 0. Still the blank space. The only thing that removed the blank space was line height on 0px. But this messed up the label placement. So i am kinda lost on this one
Html :
<div class="playerInfo">
<div class="playerChamp">
<img src="profileIcon10.jpg" width="100" height="100" >
<div class="playerName">
<label for="male">Male</label>
</div>
</div>
</div>
css
.playerInfo {
height:120px;
width:130px;
background:blue;
border:solid 1px black;
}
.playerChamp {
width:100px;
height:100px;
background :red;
}
.playerName {
width:100px;
height:20px;
background :red;
}
add margin-top: -4px; to .playerName will pull it up and you won't have the space between the two divs.
SEE THE FIDDLE
In my page I have a menu icon on top left corner, and it is wrapped inside a circle, SO I used CSS3 border radius.
But the circle is not that smooth and I am getting some distortion along the corner. Is there any way to make it smooth.
If the height and width increased, I am getting the circle shape without distortion.
#container{
width:400px;
height:400px;
background:#000;
padding:100px;
}
#circle{
width:40px;
height:40px;
border-radius: 50%;
border:1px solid white;
}
<div id="container">
<div id="circle"></div>
</div>
Read this
http://www.sitepoint.com/how-to-get-smoother-rounded-corners/
and do lemme know if this helps
I am trying to position elements centrally, and in other positions within a fixed, centered box which overlays (when the user scrolls, the overlay-box stays put) my whole mobile site.
I have attached an image diagram to demonstrate what i'm trying to achieve:
Extra details include:
The 'overlay' has a width & height dependent upon the width and height of the users mobile device. i.e, width:80%; height:60%;.
I would like for the image in the top right hand corner of the diagram to always be that way on my site (as far in that corner as possible).
Any help is greatly appreciated. Cheers.
Check out the code. This mostly requires the use of relative and absolute positioning. You can tweak a bit to meet your needs
HTML
<div class="body" style="position:relative">
<div class="box">
<div class="box1"></div>
<div style="clear:both;height:20px"></div>
<div class="child"></div>
<div style="clear:both;height:20px"></div>
<div class="child"></div>
</div>
</div>
CSS
.body{
width:400px;
height:250px;
background-color:#888;
}
.box{
width:80%;
height:150px;
border:1px solid #FFF;
position:relative;
margin:auto;
top:10%;
}
.child {
height:10px;
width:50px;
position:relative;
margin:auto;
background-color:red;
}
.box1{
width:10%;
height:10%;
border:1px solid #FFF;
position:absolute;
top:0;
right:0;
}
I have added the fiddle too. http://jsfiddle.net/nQvEW/176/
I am trying to create a website where I have several divs positioned in-front of a background div by using z-index and position:absolute. This background div will be transformed later into a content carousel so it is vital that its text are selectable. My current code does not allow for the text and link to be selected and I am wondering how would I fix this.
http://jsfiddle.net/6fwf9/2/
HTML:
<div id="header" class="box">header</div>
<div id="bg">
Cannot highlight this text <br>
Cannot click on this link
</div>
<div class="box">content</div>
CSS:
.box { width: 150px; height:50px; background:aqua; margin:20px; }
#header { margin-bottom: 150px; }
#bg { width:200px; height:200px; padding-top:100px; background:pink;
position:absolute; top:0; z-index:-10;}
EDIT - Image of what I am trying to achieve: http://imgur.com/r9tYx
Make sure the overlaid elements (.box) don't sit in front of the text content, if they are to be selectable. That means positioning them some other way than by using margins. This example works because the boxes uses absolute positioning: http://jsfiddle.net/2pPKz/
Alternatively, if the background is to become a carousel, couldn't you worry about it when it's actually a carousel, and move it to the front then?
I just saw your picture, This is how I would do it.
<div id="bg">
<div id="container">
Cannot highlight this text
<br>
Cannot click on this link
</div>
</div>
<div id="header" class="box">header</div>
<div class="box">content</div>
And for the CSS, Please take notes that I put border around the container to show where it is and what is the width and height
.box{
width:150px;
height:150px;
z-index:2;
position:absolute;
background: cyan;
top:150px;
left:20px;
}
#bg{
background-color:pink;
width:200px;
height:170px;
position:absolute;
top:0px;
}
#header{
position:absolute;
width:150px;
height:50px;
left:20px;
top:20px;
z-index:2;
background: cyan;
}
#container{
width:100%;
position:relative;
border:1px solid black;
margin-top:100px;
}
The only thing left is you play with your dimention.
Actualy I put everything absolute exept the container.
It is because the bottom margin of the Header is over the text. I sugest you to change the way you are doing things here. Why don't you just make elements be inside the bg box?
<div id="bg">
<div id="header" class="box">header</div>
<p>Cannot highlight this text Cannot click on this link</p>
<div class="box">content</div>
</div>
With static position? Even if you want to use absolute positioning, you could have everything inside the bg div and have it with position:relative, so the elements inside will be positioned absolutely respected to it.
Unfortunately the only way to do what you're trying to do is to split up the background and the text content for the slider.
That means each slide would need to consist of a background div that is absolutely positioned behind the content, and a content div that is absolutely positioned in front of everything else.
jsFiddle
I am trying to get these 4 divs to sit on the same vertical line. Why does the presence of buttons change the position of the first div?
HTML
<div class="box">
<button>Y</button> <button>N</button>
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
CSS
.box {
width:200px;
height:200px;
padding:10px;
display:inline-block;
border:1px solid black;
text-align:center;
}
RESULT
Add vertical-align:bottom to the style of your divs.
The cause of your problem is the presence of any content, as it defines the baseline for the div.
Adjusting the css like this works
.box {
width:200px;
height:200px;
padding:10px;
border:1px solid black;
text-align:center;
}
div.box{display:inline;float:left;}
jsFiddle solution
Just change the display property of the div's and they'll align vertically:
display: block
Edit: #ben said he wanted the div's aligned vertically. Vote me down if you must, but it's not my fault if he didn't know the difference between horizontal and vertical.