I want to have fixed social media icons in the top right corner of my page. I've got working css code that accomplishes this, but I'm wondering if there is a more efficient way since it seems repetitive. I'd also like to hear any compatibility issues you notice.
img.body {
display: block;
margin-left: auto;
margin-right: auto;
}
img.tile1 {
position: fixed;
top: 0px;
right: 0px;
width: 48px;
height: 48px;
}
img.tile2 {
position: fixed;
top: 0px;
right: 48px;
width: 48px;
height: 48px;
}
<img src="graphics/ig.png" class="tile1">
<img src="graphics/fb.png" class="tile2">
You'd be better off wrapping a container around both of the icons, then applying position: fixed; to that container. This will be much easier to control rather than having to use position:fixed; on both of the icons individually.
Use top:0; and right: 0; on the container, this will position the container in the top right corner.
body {
background-color: teal;
height: 200vh;
}
a img {
max-width: 50px;
max-height: 50px;
}
.icon-container {
position: fixed;
width: fit-content;
top: 0;
right: 0;
}
h1 {
text-align: center;
}
<body>
<div class="icon-container">
<img src="http://cdn.onlinewebfonts.com/svg/img_391102.png" class="tile1">
<img src="http://cdn.onlinewebfonts.com/svg/img_391102.png" class="tile2">
</div>
<h1>Element</h1>
</body>
Related
I loosely followed a basic CSS lightbox template from w3 schools for modal lightboxes. I haven't gotten to the Javascript yet, but just laying out the look and style of the lightbox.
I have a fixed position div element serving as the grey background, and inside that the "lightbox-content" div to hold an iframe of a Vimeo link. I followed a workaround to make the iframe responsive by containing it inside another div and adjusting the styling. I want the max-width of my iframe to be 1280px, but up to 100% width on anything smaller.
Everything works great on smaller screens, the iframe and contained link fills the width, stays vertically centered, and scales with the page. However, when I go above the 1280, the iframe moves in all sorts of weird ways. I'd like to have it so when the page width goes about 1280 or so,the iframe just stays at a fixed size in the center of the screen at 1280px wide.
I tried using an #media query to change some of the CSS rules, but I'm getting so lost in the position after several hours of trying. I think what's throwing me is having so many div with different types of positioning inside each other, and also not clearly understanding how to properly clear CSS rules within a media query.
Is there anything obvious I've done wrong that I could fix to help resolve the issue? It's hard to see the effect in the tiny result window, so if there's a way to make it full-screen in the browser, hopefully you can see what I'm talking about.
.lightbox {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: auto;
padding-top: 0px;
z-index: 1;
background: rgba(0, 0, 0, .85);
width: 100%;
height: 100%;
}
.lightbox-content {
position: absolute;
width: 100%;
height: auto;
max-width: 1280px;
max-height: 720px;
top: 45%;
left: 50%;
right: 50%;
margin-top: -25%;
margin-left: -50%;
}
.responsive-container {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
#media only screen and (min-width: 1299px) {
.lightbox {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
padding-top: auto;
z-index: 1;
width: 100%;
height: 100%;
}
.lightbox-content {
position: relative;
width: 1280px;
height: 720px;
max-width: none;
max-height: none;
top: 0;
left: 0;
right: 0;
margin-top: auto;
margin-left: auto;
}
.responsive-container {
position: relative;
overflow: hidden;
padding-bottom: 56.25%;
}
.responsive-iframe {
position: absolute;
width: 100%;
height: 100%;
border: 0;
}
}
<div id="myLightbox" class="lightbox">
<div class="lightbox-content">
<div class="responsive-container">
<iframe class="responsive-iframe" id="lightbox-window" name="lightbox-window" src="https://player.vimeo.com/video/261201719" frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
</div>
Is it possible to move an absolute positioned div outside the parent's borders?
I tried (less) left:calc(~'0%-15px') but does not seem to work :)
.dif-links {
background: pink; width: 25px; height: 100px;
position: absolute; text-align: center;
left:calc(~'0%-15px')
}
I have an article and I would like to maintain the "share" div outisde the article body, this is why I used the absolute position, but now just move it to the left side of parent seems to be complicated...
Here is my pen
Assuming the parent is its containing block (e.g. has position: relative), the easiest way is
position: absolute;
right: 100%;
#wrapper {
position: relative;
background: yellow;
margin: 0 50px;
height: 50px;
}
#inner {
position: absolute;
right: 100%;
border: 2px solid red;
}
<div id="wrapper">
<div id="inner">Foo</div>
</div>
Just set a margin-left of -25px.
i have try like this please check,
.dif-links{
background: pink; width: 25px; height: 100px; position: absolute; text-align: center;left:-15px; top:0;}
.container {
width: #w;
height: calc(~'100% - '#h);
background: yellow;
margin: 0 auto;
border-collapse: collapse;
margin-top: #h;
position:relative;
}
The below css seems to work like you expected. I have not used calc() method but i am sure you can tweak it now to fit your need.
.dif-links {
background: pink;
width: 25px;
height: 100px;
position: absolute;
text-align: center;left:365px;
}
Hope this Helps!
Happy Styling.
I'm trying to figure out how to code my HTML & CSS to have the 3 screenshots images align up like in the screenshot below.
The idea is when the user resizes the window smaller the images on the left and right should move in towards the center, or tighter behind the main image and the main image always stays centered.
My Dev Link:
http://leongaban.com/portfolio/athenasweb/
My CodePen
http://codepen.io/leongaban/pen/AwJFt
And tips or direction would be super appreciated! :D
HTML
<div class="pattern">
<div class="athena_thumbs">
<div class="first">
<img src="../../images/athena1.jpg"/>
</div>
<div class="second">
<img src="../../images/athena2.jpg"/>
</div>
<div class="third">
<img src="../../images/athena3.jpg"/>
</div>
</div>
</div>
CSS
div.inner .pattern {
position: absolute;
width: 100%;
height: 100%;
background-image:url('http://leongaban.com/images/pattern_diagonal_lines.png');
background-repeat: repeat;
z-index:2;
}
.athena_thumbs {
position: absolute;
max-width: 1000px;
margin: 250px auto 0;
}
.athena_thumbs .first {
position: relative;
margin: 0 auto;
float: left;
left: 25%;
right: 25%;
z-index: 3;
}
.athena_thumbs .second {
position: relative;
float: left;
left: 10%;
right: 5%;
z-index: 2;
}
.athena_thumbs .third {
position: relative;
float: left;
right: 10%;
left: 5%;
z-index: 1;
}
Running late for a meeting.
But, if you take a look at
Code Pen: http://codepen.io/anon/pen/bazEr
.athena_thumbs {
position: absolute;
width: 90%;
margin-left: 5%;
text-align: center;
overflow: hidden;
}
.athena_thumbs .first {
position: relative;
margin: 0 auto;
z-index: 3;
}
.athena_thumbs .second {
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
}
.athena_thumbs .third {
position: absolute;
right: 0px;
top: 0px;
z-index: 1;
}
I think this will get you going in the correct direction.
There is nothing in the way of cross-browser checking.
Just the basic according effect more or less in place.
Hope this helps.
I hope this helps you out. I've put together a small demonstration of how I'd go about getting the effect you're after, which you can find here.
I would set the outside thumbnails to position: absolute;, sticking them to either side of the parent container, and ensuring you give them a top position to keep them in line. Set the centered thumbnail to position: relative, and center it with automatic margins as you normally would. z-indexing keeps the outside thumbs behind the centered one.
What I am trying to is have a header image centered on the top with a different color background on either side, dynamically filling the rest of the page. The structure would look like this:
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Center"></div>
<div id="Header_Right"></div>
</div>
The Header_Center is of 960px and the Header_Left and Header_Right should fill either side of the image to the edge of the page and change width as the page width changes.
I can not get the CSS to work properly.
I assume you want those 3 divs to fill each with different content, the outsides filled fluidly or multiline. Otherwise the answer could be much 1) more simple. I also assume that the center div defines the total height of the header.
Given these two assupmtions, still a few different scenarios are thinkable of which I will give 4 examples from which you can choose the best fitting solution.
The HTML is exactly yours.
The CSS looks like:
#Header_Container {
width: 100%;
position: relative;
}
#Header_Left {
position: absolute;
left: 0;
right: 50%;
margin-right: 480px;
}
#Header_Right {
position: absolute;
left: 50%;
right: 0;
margin-left: 480px;
top: 0;
}
#Header_Center {
width: 960px;
position: relative;
left: 50%;
margin-left: -480px;
}
Now, you could change behaviour of left and right with a few extra styles:
height: 100%;
overflow: hidden;
See demonstration fiddle.
1) When the sides may be partially invisible outside the browser window (in case which you would align content in de left div to the right, and vise versa), then I suggest the solution in this fiddle demo which does not require absolute positioning at all so that any content below the header is properly cleared in all circumstances.
You must fix it using padding and box model + position : relative - it can be done without HTML Change
<div id="Header_Container">
<div id="Header_Left"></div>
<div id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
And CSS ( 100px is for example )
#Header_Container{ overflow: hidden; height: 100px; }
#Header_Container *{ box-sizing: border-box; height: 100%; }
#Header_Left{ width: 50%; padding-right: 480px; }
#Header_Right{ margin-left: 50%; width: 50%; padding-left: 480px; position: relative; top: -100% };
#Header_Center{ margin: 0 auto; width: 960px; position: relative; top: -200%; }
Example is here http://jsfiddle.net/ZAALB/2/
EDITed incorrect example
If I got you right then this might be a possible solution.
#container {
width: 100%;
height: 150px;
}
#left {
position: absolute;
left: 0;
width: 50%;
height: 150px;
background-color: #FF0000;
}
#right {
position: absolute;
right: 0;
width: 50%;
height: 150px;
background-color: #0000FF;
}
#center {
position: absolute;
left: 50%;
margin-left: -480px;
width: 960px;
height: 150px;
background-color: #888888;
}
#left basically says that the element will be positioned absolute and attached to the left side with a width of 50%. Same applies to #right just for the right side.
#center positions the element absolute pushed 50% to the left and then with a negative margin of width/2 which in your case would be 480px to position it in the center.
The order of the elements in the HTML is important for this hack.
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
The #center DIV must be the last element if you don't want to work with z-indexes.
Here's a fiddle to test it.
HTML:
<div id="Header_Container">
<div class="Header_Side" id="Header_Left"></div>
<div class="Header_Side" id="Header_Right"></div>
<div id="Header_Center"></div>
</div>
CSS:
#Header_Container {
position: relative;
width: 100%;
}
#Header_Container > div {
height: 158px; /* height of the image */
}
.Header_Side {
position: absolute;
width: 50%;
}
#Header_Left {
left: 0;
background-color: blue;
}
#Header_Right {
left: 50%;
background-color: green;
}
#Header_Center {
position: relative;
width: 158px; /* width of the image */
margin: 0 auto;
background-image: url('...');
}
Also see this example.
This works, but you need to change your HTML: http://jsfiddle.net/gG7r7/1/
HTML
<div id="header_background_container">
<div id="header_left"></div>
<div id="header_right"></div>
</div>
<div id="header_content_container">
<div id="header_content"><p>Content goes here</p></div>
</div>
CSS
#header_content_container {
position:absolute;
z-index:1;
width: 100%;
height: 100%;
}
#header_content {
width: 960px;
margin: 0 auto;
background: red;
height: 100%;
}
#header_left {
background: white;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
#header_right {
background: black;
width: 50%;
height: 100%;
position: absolute;
z-index: 0;
}
I'm working on a prototype of a website here:
http://www.paulgrantdesign.com/valcomp/index.php
I have a div in the middle that is set to stick in the middle. It's got a given height, so in the css I did
#middle {
height: 225px;
width: 100%;
background-color: #56a6c4;
position: absolute;
top: 50%;
margin-top: -112px;
z-index: 100;
}
It sits in the middle, as required. But when the window gets too small, I don't want it to cover what's above it. Can I set it so that there's always a minimum amount of distance between the top of the window and the top of this div?
May be you can use media query for this like this:
#media only screen
and (min-width : 1000px) {
#middle {
color:red;
}
}
You can read these articles
http://css-tricks.com/6731-css-media-queries/ ,
http://css-tricks.com/6206-resolution-specific-stylesheets/
put position:relative on the body.that s a first step. I m trying..hold on..
and bottom--position:absolute. It works! yeah!
I fixed your problem by changing your html like this:
<div id="container">
<div id="top">
<div id="topcontent">
<p id="mobile">Mobile data collection</p>
<p id="slogan">Collect. Send. That's it.</p>
</div>
</div>
<div id="middle"></div>
</div>
Then changing your css like this:
#container{
width: 100%;
position: absolute;
min-height: 350px;
bottom: 20%;
top: 0;
}
#top {
width: 825px;
min-height: 250px;
display: block;
position: absolute;
left: 50%;
height: 50%;
margin-left: -412px;
overflow: auto;
bottom: 250px;
}
#topcontent {
width: 100%;
position: absolute;
bottom: 0;
}
...
#middle {
height: 225px;
width: 100%;
background-color: #56a6c4;
position: absolute;
bottom: 0;
margin-top: -112px;
z-index: 100;
}
It might need some tweaking to get it exactly how you want it; especially with the #bottom div
You need to add the attribute z-index to the elements #top and #bottom, and let them less than the z-index of #middle.