I can't get my images to go side my side (below share and follow) on this page:
http://toddheymandirector.com/REEL/index_newlook_gallery2222.html
The suspect code:
#gallery ul div {
min-width:26.6%;
margin:0;
float:left
background-color:#595959;
}
Any ideas?
find this block into your css file:
img.a {
left: 0;
position: absolute;
top: 0;
z-index: 10;
}
and replace the position to relative:
img.a {
left: 0;
position: relative;
top: 0;
z-index: 10;
}
Related
I have created a code for a page following Stackoverflow answers. It works very well, but I'd like to optimize it, which I do not know since I'm not a programmer. What is the right way?
#black:before {
content: "";
position: fixed;
top: 0;
right: 0; left: 0; bottom: 0; background: none;
z-index: -2;}
#red:before {
content: "";
position: fixed;
top: 0;
right: 0; left: 0; bottom: 0; background: none;
z-index: -2;}
#black:target::before {background: #ACAA92;}
#red:target::before {background: #ACAA92;}
#black:hover .text{display:block;}
#com:hover .text{display:block;}
All selectors which should share the same properties and values can simply be comma separated. You can write them all on one line though a more preferred style is to put each one its own line to aid readability:
#black:target::before, #red:target::before { background: #ACAA92; }
#black:hover .text,
#com:hover .text {
display:block;
}
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors#Groups_of_selectors_on_one_rule
I have following fixed top header using this class:
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
Now, I would like to have a fixed width 840px, not 100% and centered as shown in this JSFiddle example.
You can use a dynamic solution, using transform: translateX(-50%) - (demo on JSFiddle):
.sticky {
left:50%;
position:fixed;
top:0;
transform:translate(-50%);
width:840px;
z-index:100;
}
I wouldn't recommend to use a static solution but you can use it too (demo on JSFiddle):
.sticky {
left:calc(50% - 420px);
position:fixed;
top:0;
width:840px;
z-index:100;
}
Why you should avoid a static solution?
You can define many items like this to set the position of these, but if you change the width in future you have to change the static part of the CSS definitions too. You can't totally avoid using static parts on CSS but you can minimize them!
.sticky {
position: fixed;
width: 840px;
margin-left: -420px
left: 50%;
top: 0;
z-index: 100;
border-top: 0;
}
This is the solution.
Have you try something like this ?
HTML :
<div class="sticky-container">
<div class="nav sticky">
Navigation
</div>
</div>
CSS :
.sticky-container {
position: fixed;
width: 840px;
left: 50%;
top: 0;
z-index: 100;
border-top: 0;
}
.sticky {
position:relative;
left:-50%;
top:0;
}
If you change your .sticky class to the below:
.sticky {
margin:auto;
width: 840px;
z-index: 100;
border-top: 0;
}
and remove that top margin on body:
body {
margin: 0 0 0 0 !important;
padding: 0;
}
This pen probably explains my problem best:
http://codepen.io/anon/pen/xwQpLy?editors=110
I'm using the following trick to keep the box constrained to a 1:1 ratio:
.squarebox {
position: relative;
width: 100%;
}
.squarebox::before {
padding-bottom: 100%;
content: "";
display: block;
}
.content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
But, I'd like the box to always fill the parent's width or height, whichever is smaller. In the above example, the box only ever fills the parent's width.
Do you mean like this?:
http://codepen.io/anon/pen/yYQpqp?editors=110
The parent needs to be position:relative, the .content div needs to be width:100%; height:100%; as well as position:relative with top, right, bottom and left set to 0.
I stripped out the squarebox div.
.squarebox {
position: relative;
width: 100%;
}
.content {
width:100%;
height:100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:orange;
}
I am trying to stick a picture to right of the screen with a fixed height. But this way the dimensions do not fit right in different browsers. I cannot upload pictures, so it's quite hard to describe...
#profile_pic {
float: right;
z-index: 99;
position: absolute;
right: 0;
top: 12;
}
#profile_pic img {
width: 12.73em;
}
I tried it with %, but it also didn't work this way...
Try
#profile_pic {
float: right;
z-index: 99;
position: absolute;
right: 0;
top: 12;
height: 100%
}
#profile_pic img {
width: 12.73em;
height: 100%;
}
DEMO
remove float:right... it will not work on absolute position, set the height and width, can you also post your HTML
I have a small .png file that repeats to form a background image. I need to set the body height of my page to 100% in order to use min-height property on my content wrapper. However, trying to use the background-image in conjunction with height:100% results in the image getting cut off when the page is scrolled. See picture to elaborate what I mean:
Background on top
But when scrolling it is cut off
How do I get the background image to repeat over the whole page, even after the user scrolls down? Here is the css:
body {
background-color:#9AAEBF;
overflow-y:scroll;
height:100%;
}
html:after {
background-image: url('http://www.example.com/img/background.png');
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Thanks for your ideas.
EDIT:
This is the image i need repeated:
Here is a fiddle:
http://jsfiddle.net/Nick_B/x2h3g/
try this
html:after {
background-image: url('http://www.example.com/img/background.png');
background-repeat:repeat;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Now used to background-size
As like this
body {
background-color:#9AAEBF;
overflow-y:scroll;
height:100%;
}
html:after {
background-image: url('http://i.stack.imgur.com/iuzZU.png');
background-size:100%;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Demo Full page
Live Demo
you can achieve your desired result through give the backgroun-size:100% in your html:after
CSS
html:after {
background-image: url('http://i.stack.imgur.com/iuzZU.png');
background-size:100%;
opacity:0.4;
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}