Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
Related
I have been trying to figure out how a pixel pattern overlay can be applied over a website section like in this site: http://www.tinkeringmonkey.com/ (over the background video image at top and image in bottom section)
I'm sure this is fairly straightforward, I just don't know what to google to try and find the css or whatever I need to implement it.
Thanks heaps for any replies!
David
If you inspect the website using your browser's developer tools you will see that they have simply included an empty div, scaled it to 100% width and height of it's container, positioned it absolutely, given it a higher z-index than the video container and used a tile-able background image to produce the diagonal lines you see. In this instance the class applied to the div is called mk-section-mask and the css applied to that class is...
.mk-section-mask {
background: url(../../images/video-mask.png) center center repeat;
position: absolute;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height: 100%;
}
where video-mask.png is a 4px square png with a diagonal line running through it... See here
Hope that helps
Dan
Here take a look at this fiddle
With pseudo element :after, you can add a repeated background and make its position:absolute with top-left-right-bottom to zero.
CSS
div {
width: 300px;
height: 300px;
display: block;
position: relative;
background: url(https://placekitten.com/g/300/300);
}
div:after {
content: "";
background: url(http://dev.bowdenweb.com/a/i/style/patterns/tileables/06/dot-grid-1.png) repeat;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
opacity: 0.5;
}
In general, when you want to know how a certain effect or layout is achieved, try the web inspecting tools in your browser. I use Google Chrome to develop sites, it comes with a very complete tool set.
As for your specific question, there's several ways to attain this. If you want to apply this overlay to a non-void element, my approach would be using HTML pseudo-elements:
.overlay {
position: relative;
}
.overlay:after {
content: "";
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: url(path/to/your/transparent/overlay.png) repeat scroll 0 0;
}
Apply the class overlay to whatever <div> and you're good to go. There's a catch, though: elements inside the .overlay won't respond to mouse/touch events, because the overlay on top will get them first.
I have been trying to edit my header in Joomla. I have added following class to my template to round the corners and add the background:
.holola {
background: #FFF!important;
border-top-left-radius: 15px;
border-top-right-radius: 15px; }
How I can bring the logo up and make it look offside the header, like in attached image. I know how to make this happen using image in header, but I want to make it pure CSS to make the page look better in mobile version.
I have tried to add padding but I think it should be more complicated code to use?
Remove the padding you've added.
Then add some top margin to the .wrapper to push the main content down a bit.
body.boxed .wrapper {
margin: 60px auto 0 auto
}
And now add margin-top to the logo to move it up.
#header_logo {
margin-top: -60px
}
Try adding these also
#zo2-header{
margin-top: 50px;
}
#header_logo .logo_normal{
position: absolute;
top: -103px;
}
Remove your padding: 60px 0; from #zo2-header and replace with margin-top: 60px;.
Add
#header_logo {
position: relative;
top: -60px;
}
You would want to use position relative. See this jsfiddle for a simple example that should work for you situation.
#img {
background-color:red;
height: 80px;
width: 80px;
position:relative;
top: -40px;
}
Basically the important parts here is the combination of position: relative and top: -40px. This says position the element relative to the parent element and "anchor" its top -40 pixels from where it would normally be (top aligned with the header's top)
I am trying to make a tooltip for an anchor tag using only CSS. I have come this far. I am trying to achieve the functionality of having the box and the tip arrow positioned exactly at the center no matter what the length of the text is.
The above image is what I am trying to get at.
I've tried keeping the width:auto but it's not working either.
body
{overflow-x:hidden;}
div
{position:relative;width:700px;border:1px red solid;padding:20px;margin:0 auto;text-align:justify;}
a
{position:relative;white-space:nowrap;}
a > span.tooltip
{
position: absolute;
white-space: normal;
width: 100%;
top: 130%;
left: 0;
}
a > span.tooltip > span
{
position: absolute;
top: 0;
right: 0;
text-align: center;
bottom: 0;
left: -500%;
width: 1100%;
}
a > span.tooltip > span > span
{
display: inline-block;
background: black;
border-radius: 4px;
padding: 10px;
color: white;
max-width: 300px;
}
DEMO:
http://jsfiddle.net/b2Yqf/
works on msie 7 8 9 10, firefox, chrome
not what you might want... since markup is made with three nested <span>s... but YES. it could be done!
The main problem you're facing is that you need a white-space: nowrap this gets you about as far as hint.css by #robooneus. I can't figure out the centering either though. Any widths or margins are relative to the "Tooltip" link's width. A link to where you found the images might be helpful too so we can study the source.
EDIT1:
Additionally, a margin-left: -6px on the arrow (the :before) centers that on the word tooltip, it counteracts the move to the right by the border.
I don't think what you are trying to do (center the tooltip) is possible while having width:auto;.
If you declare a width, you can simple position the tooltip with:
.tooltip:hover:after {
width:100px; /* whatever you want */
left:50%;
margin-left:-50px; /* half the width */
}
EDIT
As #Alexander says in his answer, also repositioning your tooltip arrow using margin-left is a good idea, as it is slightly off center with just left:50%.
I have the following testpage: ***
With a resolution of 1920x1080 the icon bar is located above the purple line.
On any other resolution it isn't anymore.
What is the best way to accomplish this (without javascript if possible)?
While I also would love to have the div element scale automatically, this is only the second problem. The main issue would be to have it always at the specific position.
As you can see % doesn't work.
#icons {
position: absolute;
right: 11%;
bottom: 12%;
width: auto;
height: auto;
z-index: 8;
max-width: 60%;
}
Do I have to work with "rem" or something along those lines (didn't work when I tried it either)? Is there even a way to do this?
Having an element in the top left corner obviously is very easy, since it will always stay the same even when resizing.
With this position there's also the problem of extra toolbars or similar - the position changes as soon as you hide the toolbar of the browser for example.
Any help appreciated!
Have you thought of trying:
#icons {
position: fixed;
right: 11%;
bottom: 12%;
width: auto;
height: auto;
z-index: 8;
max-width: 60%;
}
I use fixed for stuff I want to stay on the same spot, it usually "fixes" it to stay in its set place.
The text is absolutely positioned to the right and bottom edges of the window, so the solution is to position the background there too. Change top center to bottom right.
body {
font-family: Arial, "Myriad Pro";
font-size: 11px;
color: #ffffff;
background: #202020 url(img/body_back.jpg) no-repeat bottom right fixed;
background-size: cover;
}
This site http://doomedfromdayonemerch.bigcartel.com/ is currently scrolling too much down the page, this is because the footer (hidden) is at the bottom of the page. Even when i move the footer with CSS the page still scrolls the same amount. would like it to ideally to only scroll down a little bit. I did have overflow-y:hidden on the body, and although this did work, it doesn't allow for smaller screens/zooming in, as you then cannot scroll at all. Any help would be great! :)
In your CSS code add
html{
height:100%
}
The problem isn't with footer.
The problem resides in your div id="navigation"
I did some questions related to sticking footer into bottom of page. Check them out, maybe will help you.
I know an answer has been selected but let me explain a little further. You have the navigation div positioned relative, instead of absolute. It looks like you were trying to use absolute positioning because I see z-index in the navigation css. To use absolute positioning the parent element needs to be set to position: relative; and the element you want to have absolute needs to be set to position: absolute;
add position relative to #wrap
#wrap {
width: 740px;
height: 700px;
margin: 0 auto;
padding: 5px;
text-align: left;
position: relative;
}
and change navigation to absolute
#navigation {
z-index: 99;
position: absolute;
top: 175px;
padding-top: 10px;
padding-right: 5px;
margin-right: 4px;
height: 442px;
background: rgba(228, 228, 228, 0);
clear: both;
border-bottom-right-radius: 10px;
right: 10px;
}