I've used Inkscape to create a very simple icon in a site I'm developing. The icon is absolutely positioned over the border of two side-by-side elements.
In Chrome it looks great:-
But in IE7 not so..:-
Am I doing something wrong? There is no transparency in the coloured part of my image, as far as I can tell.
Here's the code I'm using to display the images:-
<div class="roadmapstep">
<div class="roadmapnumber">1</div>
<h4>Header 1</h4>
<div class="nextarrow"><img src="nextarrow.png"></div>
</div>
<div class="roadmapstep">
<div class="roadmapnumber">2</div>
<h4>Header 2</h4>
<div class="nextarrow"><img src="nextarrow.png"></div>
</div>
CSS for the div containing the image is:-
.nextarrow {
position: absolute;
top: 65px;
margin-right: -35px;
right: 0;
width: 65px;
height: 40px;
}
CSS for the divs with the border:
.roadmapstep {
width: 220px;
height: 150px;
border-left: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
float: left;
position: relative;
}
Use z-index to position an image above another
Add z-index:1000; to .nextarrow
DEMO
Try giving the different class name to second div and position:absolute. it works!!
DEMO 2
Related
I'm not sure what the problem is here, but inside of this element there's some deadspace off to the left that doesn't respond to anything I do. I want to center the text inside the element (and it is centered, only there's some void space to the left that doesn't seem to be taken into account). Here's a picture:
You can see how the padding on the left is much greater than the padding on the right. I tried to manually set padding-left but that didn't work.
here's the element in the page (i'm using rails):
<div class="holder round clear eval_body">
...
<div class="box center">
Before continuing to the next student,
<br />please take a moment to review the scores for <%= #student.name %>.
<br />
<span class='strong'>
Once you have submitted them, they cannot be changed!
</span>
</div>
...
</div>
and the box element
.box {
position: relative;
bottom: 3px;
left: 10em;
width: 50%;
height: 8%;
background: #B05C37;
border: 3px solid #902D00;
color: #fff;
}
change your css class to .box center instead of .box
Add
text-align: center;
to your .box in CSS.
thanks for the suggestions (especially techvineet). Got it working with this:
.box {
position: absolute;
bottom: 3.5%;
right: 7%;
margin: 5px;
padding: 20px;
width: 50%;
background: #B05C37;
border: 3px solid #902D00;
color: #fff;
}
I am wondering if a border like this would be possible in pure css? There will be no content within this box, only an image within the future.
I would like to achieve this in pure CSS, with no jQuery. I have looked around and it seems it isn't really possible, however with CSS constantly evolving I was wondering if it was possible apart from using nested divs etc.
Cheers!
You can fake it. Like this jsFiddle example.
HTML
<div id="wrapper">
<div id="top"></div>
<div id="bottom"></div>
<img src="http://www.placekitten.com/200/100" />
</div>
CSS
#top, #bottom {
width: 200px;
height:50px;
position:absolute;
left:-1px;
}
#bottom {
border-left: 1px solid #f00;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
bottom:0;
}
#top {
border-left: 1px solid #f00;
top:0;
}
#wrapper {
position:relative;
width: 200px;
height:100px;
background: #faa;
}
You can do it with only one div if you use pseudo elements. jsFiddle here
HTML:
<div id="wrapper">
<img src="http://www.placekitten.com/200/100" />
</div>
CSS:
#wrapper {
position:relative;
width: 200px;
height:100px;
background: #faa;
border-left: 1px solid #f00;
border-bottom: 1px solid #f00;
}
#wrapper::before {
content: " ";
position: absolute;
width: 100%;
height: 50%;
bottom: -1px;
right: -1px;
border-right: 1px solid #f00;
border-bottom: 1px solid #f00;
}
Just for the 'think' of it, you could also just stick a small graphic at the bottom right of a div (as a background image) and use a border on the left and bottom. Still just manipulating it via css with one small graphic but at least the height and width would be dynamic and not stuck as if using a full image.
Would also avoid A LOT of extra mark-up and css. 1 div, 1 css declaration and 1 small image.
I have a facebook app and I am working on the front-end now. I am just getting started with css and html, so this might be a silly question- sorry for that.
What I am trying to do is to divide the page in two sections. I've created two divs for that, but the problem is the way they are positioned. My code is the following:
<style>
.choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
}
.frame_div{
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
<hr>
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
I thought that right:0px; for one and left:0px;for the other would position them properly, but they are just one at the bottom of the other.
Can anyone please help with this?
This is the normal way to do what you ask, using float:left;. There were a few other issues with your styles though:
You were targetting .choose_div the class (.), not the id (#)
You need to use box-sizing:border-box when you're doing this otherwise the padding and border is added on top of width:20% making the width larger than 20%.
jsFiddle
#choose_div {
width: 20%;
height: auto;
padding: 1px;
border: 2px;
float:left;
box-sizing:border-box;
}
#frame_div {
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
float:left;
box-sizing:border-box;
}
As for left and right, they can be used to align to a particular side of the screen if using position:absolute. position:relative simply shifts the element a particular amount, for example left:2px would shift the element 2 pixels to the left.
position:absolute positions the element on its closest ancestor that has a position of non-static. Then left/right/top/bottom can be used to indicate the sides of the ancestor.
for the div which to be shown write:
float:left
And for the right one:
float:right
<style>
#choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
float:left;
}
#frame_div{
float:right;
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
If you add borders you must shrink your divs' witdh. Or they overflows the parent section and seen top-bottom.
<style>
html,body{margin:0;}
#choose_div{
display:block;
float:left;
width: auto;
height: 100%;
padding: 1px;
}
#frame_div{
float:right;
height: auto;
width: 80%;
height: 100%;
border: 2px 2px 2px 2px;
border-left:solid 2px #000000;
padding:10px;
overflow:hidden;
}
</style>
<body>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
i am trying to add a footer to my website but the text keeps moving around.
<div id="footer">
<div id="footerchild">
1
</div>
<div id="footerchildone">
2
</div>
<div id="footerchildtwo">
3
</div>
<div id="footerchildthree">
4
</div>
</div>
and the css
#footer {
margin-left: 100px;
background: #812;
box-shadow: 1px 2px 40px 1px #444;
border: 1px solid black;
width: 1040px;
height: 300px;
position: absolute;
}
#footerchildone {
float: right;
margin-right: 500px;
margin-top: -22px;
}
#footerchildtwo {
float: right;
margin-right: 350px;
margin-top: -22px;
}
#footerchildthree {
float:right;
margin-top: -22px;
margin-right: -250px;
}
I want each column to be centrated with a specific distance, but when i move for instance childthree, the second child follows with it. It shouldnt be like that because i have given each of them a separate div. What is the problem?
I think u are trying to accomplish this:
http://jsfiddle.net/65GaS/5/
It's that simple or I misunderstood you.
http://jsfiddle.net/vvjAJ/
HTML
<div id="footer">
<div id="footerchild">1</div>
<div id="footerchildone">2</div>
<div id="footerchildtwo">3</div>
<div id="footerchildthree">4</div>
</div>
HTML
#footer
{margin-left: 100px;background: #812;box-shadow: 1px 2px 40px 1px #444;border: 1px solid black;width: 1040px;height: 300px;position: absolute;}
#footerchild{float:left;width:260px;margin-top: 50px;text-align:center;}
#footerchildone{float: left;width:260px;text-align:center;margin-top: 50px}
#footerchildtwo{float: left;width:260px;text-align:center;margin-top: 50px}
#footerchildthree{float:left; margin-top: 50px;text-align:center;width:260px;}
You need to add text-align:center to center the text for parent div and make every child div as position:relative; display:inline-block; automatically it will align center for parent div and make sure to remove float:right for child divs. hope this will work for you.
I'm having a problem with making one div overlap the rest of the page.
I just need one image to overlap one section. I have kinda got it to work but once you resize the window or look at it on a different resolution the image doesn't appear where it should.
I'm using an position:absolute; and z-index. It is working to some extent. but it won't stay in that position, for example, if you resize your browser window (it moves from where I'd like it to stay).
Here is this website
I need it to overlap the yellow box like this.
Edit: Just a quick follow up: I think your solution has put me a bit of bother. I am unable to place another div directly under it as can be seen here
Move
<div id="medal"><img src="images/star2012medal.png" width="220" height="277"></div>
inside
<div id="box"><img src="images/boxheading.png"></div>
just before the image.
Change the CSS to
#medal {
position: relative;
top: -240px;
right: -80px;
z-index: 50;
}
and apply the following to the boxheading.png image
{
position: relative;
top: -280px;
}
EDIT:
From what I feel you are trying to achieve, you should be looking at a 2-column layout. There's too many good-practice resources online to learn how to do it.
To add another box below the first one, you will need to do the following changes to html:
<div id="box-container">
<div id="box">
<div id="medal">
<img src="images/star2012medal.png" width="220" height="277">
</div>
<img src="images/boxheading.png" width="291px" height="240px" style="position: relative; top: -280px; ">
</div>
<div id="box2">testing</div>
</div>
then add the following css:
#box-container {
float: right;
}
#box {
float: left;
color: #333;
background: #fff;
height: 240px;
width: 291px;
display: inline;
border-style: solid;
border-color: #fff100;
-moz-border-radius: 10px;
border-radius: 10px;
clear: both;
}
#box2 {
float: left;
color: #333;
background: #fff;
height: 240px;
width: 291px;
display: inline-block;
border-style: solid;
border-color: #fff100;
-moz-border-radius: 10px;
border-radius: 10px;
clear: both;
margin-top: 10px;
}
tested only in Chrome. Remember to test it in other browsers!