would you know why my picture link doesn't work when inside a container (the picture is the white triangle on the right side)? Note that it works fine when outside this block.
Thanks
CSS:
.block {
position: relative;
display: block;
clear: both;
overflow: hidden;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
padding-right: 20px;
padding-left: 20px;
width: 100%;
}
.block img {
float: right;
margin-left: 40px;
}
Adding this CSS should fix your issue:
.arrow-circle{
position:relative;
z-index: 9999;
}
i think .block is coming up on the image.. set z-index of image very high . or do this one.
.block {
position: relative;
display: block;
clear: both;
overflow: hidden;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
padding-right: 20px;
padding-left: 20px;
width: 100%;
pointer-events:none;
}
i had done this using inpect element on chrome ..
and link worked...
#touchPointContainer {
position: relative;
height: 600px;
pointer-events: none;
}
I don't think it's a z-index issue since the position of .block is relative. However tough point out the issue with the very little info given.. provide some deatils or jsfiddle link
Your issue is that #touchPointContainer is positioned over the button. The suggested "pointer-events: none;" solution is a firefox hack that is not widely supported.
The z-index solution was the correct one, but for z-index to work you have to add position:relative to the element so Gurpreet Singh nailed it.
The image needs to be given a positioning context so that the Z-index will apply
.block img {
float: right;
margin-left: 40px;
position:relative;
z-index: 100; /* probably any number more than 1 will do */
}
Related
I have created a website however when I shrink the browser the website stays in position, apart from the form.
If anyone know's how I can stop the form from moving, I will be very grateful.
I have tried position: relative and white-space: no-wrap; but still no luck.
Thanks in advanced
Unique
My Code:
http://jsfiddle.net/r5cu1157/
#form-holder {
float: left;
width: 400px;
height: 400px;
padding-left: 100px;
padding-top: 30px;
display: block;
*display: block;
white-space: nowrap;}
If you want the form to be center aligned then do a
Margin: 0 auto;
remove the float left and i would suggest to stay away from specifying a height of elements
http://jsfiddle.net/r5cu1157/1/
This is the CSS that I have for my container that holds my table and forms, could try using it for your form, I believe it is a mix of position and margin:
.container
{
position: relative;
top: 250px;
background-color: #877CB0;
margin:0 auto;
text-align: center;
}
I am new to webdesign, I am using Phonegap (HTML5) I centered my image horizontally this way:
.html
<div id="loginholder" >
<img id="image_person" src="img/icon_login.png" />
...
.css
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
margin-top: 30px;
}
...
#loginholder{
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
}
...
Please why my margin-top is not working?
You need to trigger layout. Add overflow:hidden to #loginholder
I'd add padding-top: 30px; to #loginholder instead and remove the margin-top: 30px; from #image_person:
CSS
#image_person {
display:block;
margin-left:auto;
margin-right:auto;
}
#loginholder {
background-color: #29AAE1;
height: 200px;
width: 70%;
margin: 0 auto;
padding-top: 30px;
}
Check out this JSFiddle: http://jsfiddle.net/bazC4/.
Also, if you wanted the #loginholder the same size, just remove 30px from the height so it would be height: 170px;.
The margin might be collapsing with the parent, causing the 30px margin to appear above the loginHolder div (more on margin collapsing). To resolve this, you could do one of the following:
Add a border or padding to loginHolder; this separates the margins so they won't collapse.
Change to using padding-top on the image instead of margin-top.
Try wrapping it in a div:
JSFIDDLE:
http://jsfiddle.net/MBLKs/
CSS:
#loginholder {
width: 300px;
border: 1px solid red;
overflow: hidden;
position: relative;
}
#stabilizer {
float: left;
position: relative;
left: 50%;
}
img {
display: block;
position: relative;
left: -50%;
}
Images behave like characters, so entering them doesn't always work. In this case, the position of the wrapping div and the image offset each other, leaving the image in the middle. Now your margin-top and everything else should work.
I am creating a simple blog template. In the right corner of the template there is a search box in the header. The search box should appear there, but at some moments it appears under the header.
This happens every now and then, if I refresh the page a few times the box will somethimes jump positions. I have used Google Chrome for the developent The html of this page is purely static, so I don't have a clue why this is happening. Could anyone find out why this box is jumping up and down.
The affected page can be found here.
I can't re-create your problem, but I'm sure adding position:relative to either nav or .wrapper
.wrapper {
width: 800px;
margin: 0 auto;
position: relative;
}
and position:absolute to the searchbox will prevent any jumping.
header#top #searchBox {
position:absolute;
top: 0;
right: 0;
display: block;
width: 240px;
height: 45px;
// line-height, any other styles
}
Try the following
header#top #searchBox{
float: right;
display: inline-block;
line-height: 45px;
width: 63%;
text-align: right;}
The solution is quite simple,
just ad float: left; to the menu element ( header#top nav ul)
header#top nav ul {
list-style: none;
height: 45px;
display: inline-block;
float: left;
}
than you will only need to add height to the wrapper
.wrapper {
width: 800px;
margin: 0 auto;
height: 46px;
}
So I have two divs that are overlapping and I don't know what caused it to.
Here's the URL:
http://dennis-reviews.netne.net/
As a side problem:
How can I center the navigation list at the top?
change #container_info to this:
#container_info {
height: 185px;
width: 1024px;
margin: 0px auto;
overflow: hidden;
}
and to center add this css rule:
#navigation ul {
width: 1024px;
margin:0px auto;
}
Use following property in CSS for the footer div clear: left;
Your class .info need to have max-height:180px;in the css
If you add clear: left; to the #footer then that will fix it.
#footer {
height: 80px;
width: 100%;
background: #1A1A1A;
clear: left;
}
If you're unsure how this works there's a good article on CSS-Tricks that explains it all.
I have this code: http://jsfiddle.net/5qLDz/ inside which I want to have images vertically aligned to bottom of the container (with some padding from container itself). It doesn't work even with li having display: table-cell and both li and img having vertical-align:bottom set. What can it be?
Please stop posting solutions using position: absolute. As you can see in my code, I used text-align: center which is important there.
One simple fix is to set the line-height to be the same as the container height:
ul.thumbnails li {
box-sizing: border-box;
text-align: center;
background: grey;
padding-bottom: 22px;
height: 222px;
line-height: 222px;
display: table-cell;
}
ul.thumbnails li img {
border-radius: 5px;
bottom: 22px;
vertical-align: bottom;
}
That seems to work, http://jsfiddle.net/audetwebdesign/5qLDz/20/
You only need to declare vertical-align: bottom on the img rule.
However, if you add other elements like captions or social media links this could affect how you implement the solution.
For the love of god don't use display:table-cell just to vertically align something. Just using relative positioning will also do this far more easily: forked Fiddle.
Only changed the parent to position:relative and the child to position:absolute.
Update your CSS:
div.left section.box ul.thumbnails {
margin: 0;
padding: 0;
}
ul.thumbnails li {
text-align: center;
background: grey;
height: 222px;
position:relative;
}
ul.thumbnails li img {
border-radius: 5px;
bottom: 22px;
position:absolute;
}