I am attempting to position my '.store' class 10px above my #linkplaceholder div and my '.lastseen' class 10px below my #linkplaceholder div. Is this possible?
I would imagine this could be done with position absolute & relative, but when I change my #linkplaceholder to position: absolute, it is no longer centered horizontally like it should be. Also, the #linkplaceholdering div's size needs to stay dynamic at 20% of the viewport like it is.
Currently I just have the '.store' and '.lastseen' classes positioned by giving store a top margin percentage and lastseen a bottom margin percentage in order for you to see the idea I'm going for. These are sometimes in the general area of where they need to be, but on different devices they can be way off. That's why I need store to be positioned exactly 10px above and last seen to be positioned exactly 10px below so this is fixed and always accurate.
JSFiddle showing my code: https://jsfiddle.net/1ms9fk63/
body {
background: black;
}
#container {
background-color: black;
z-index: 0;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}
#linkplaceholder {
margin: 0 auto;
z-index: 10000000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20%;
}
#linkplaceholder img {
width: 100%;
}
.store {
top: 0;
margin-top: 21.5%;
}
.lastseen {
bottom: 0;
margin-bottom: 21.5%;
}
.lastseen, .store {
position: absolute;
width: 100%;
text-align: center;
}
.lastseen a, .store a {
font-family: neue-haas-grotesk-text, sans-serif;
color: #ffffff;
font-weight: 400;
font-style: normal;
list-style: none;
text-align: center;
text-decoration: none;
font-size: 15px;
}
.lastseen a:hover, .store a:hover {
text-decoration: underline;
}
<div id="container">
<div id="linkplaceholder">
<a href="/">
<img src="images/image.svg" alt="" />
</a>
</div>
<div id="navcontainer">
<div class="store">STORE</div>
<div class="lastseen">LAST SEEN</div>
</div>
</div>
I would suggest using JavaScript since I don't think something like this can be accomplished just with CSS. Check out this snippet I created.
NOTE: I had to use 20px from the top of the div because if I used 10px the text would get inside the image.
Related
I am adding two images with a text inside a div which should occupy the whole left side of the screen. When I add the second image at the bottom. Half of the image goes out of the div and and the height of the div is not extended.
The screenshot is the output I am getting
Here is the code:
<section className="App">
<div className="First-Half">
<div className="wrapper">
<div className="Lacazette-Image">
<img alt="Lacazette" src={Lacazette}></img>
</div>
<div className="Arsenal-Fans">
Arsenal Fans
</div>
<div className="Celebrate-Image">
<img alt="Celebrations" src={Celebrations}></img>
</div>
</div>
</div>
#import url('https://fonts.googleapis.com/css?family=Kanit|Lobster|Mansalva&display=swap');
.App {
font-family: 'Lobster', sans-serif;
text-align: center;
display: table;
}
.First-Half {
background-color: red;
position: absolute;
left: 0px;
height: 100%;
width: 50%;
}
.wrapper {
width: 100%;
height: 100%;
position: relative;
}
.Arsenal-Fans {
position: absolute;
height: 50px;
left: 74%;
top: 58%;
font-family: 'Lobster', sans-serif;
font-size: 55px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.22;
letter-spacing: normal;
text-align: left;
color: rgba(249, 246, 246, 0.97);
}
.Lacazette-Image img{
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0.8;
border: solid 1px #707070;
}
.Celebrate-Image img{
position: absolute;
width: 100%;
top: 67%;
left: 0;
opacity: 0.8;
border: solid 1px #707070;
}
https://codesandbox.io/s/crazy-bhaskara-6pj9y
By using
position: absolute;
on the images, you are removing them from the flow of the page, and the parent div will not grow with them. Instead of using absolute positioning for layout, you should consider using Flexbox or CSS Grid. These will also help you create a responsive site that will work well on different device sizes.
Here is a short example of how to use Flexbox for layout: https://jsfiddle.net/9swka2gL/
Edit: I like what #novruzrhmv said, but as in the example above, I recommend keeping the whole <h1> together if possible, both for SEO reasons and to make it easier if you collapse to 1 column on mobile. One way to do that is to force just the h1 wrapper to overflow the column as in the example above.
Add following codes to your .css file;
.Arsenal-Fans-In-Lebanon-Image img{width:100%}
This is driving me crazy I cannot work out why my footer appearing at different heights even though it is defined in the _Layout view. I have the following css:
.footer {
position: absolute;
bottom: 0;
background-color: #ffd800;
width: 100%;
text-align: center;
left: 0;
background-image: url(/Content/SiteImages/logosmall.png);
background-repeat: no-repeat;
height: 110px;
border-top: 3px solid #082603;
}
.footer p {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #082603;
font-size: 150%;
font-family: 'Baskerville Old Face'
}
HTML:(_Layout)
<div class="container body-content">
#RenderBody()
<div class="footer"><p>Quote</p> </div>
</div>
How can I get the div to stay at the very bottom of the page. I want it to be under below all content. not covering any so if I add another div the foot will always be a footer. Example of my problem:
What I want:
Please help me get this consistent across my multiple pages. I have looked at lots of questions on stackoverflow but none or resolving the issue.
You would need to position your footer fixed, then offset its height (110px) from the bottom of the body or containing element (since it is taken out of the normal document flow), e.g: .container.body-content {padding-bottom: 110px;}
.container.body-content {
padding-bottom: 110px;
height: 1000px; /* Force height on body */
}
.footer {
position: fixed;
bottom: 0;
background-color: #ffd800;
text-align: center;
right: 0;
left: 0;
background-image: url(/Content/SiteImages/logosmall.png);
background-repeat: no-repeat;
height: 110px;
border-top: 3px solid #082603;
}
.footer p {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #082603;
font-size: 150%;
font-family: 'Baskerville Old Face'
}
<div class="container body-content">
<div class="footer">
<p>Quote</p>
</div>
</div>
Varying Footer Height (Responsive Concern)
If the footer height varies based on the width of the screen, refer to this answer: Keeping footer at bottom of responsive website
And the solution demonstrated in this CodePen: https://codepen.io/anon/pen/BoNBZX
No Fixed Footer
But if you need an absolute positioned footer, add position: relative to the containing element (.container.body-content), so that the bottom: 0 value of .footer is always relative to .container.body-content.
.container.body-content {
height: 1000px; /* Force height on body */
position: relative;
}
.footer {
position: absolute;
bottom: 0;
background-color: #ffd800;
text-align: center;
right: 0;
left: 0;
background-image: url(/Content/SiteImages/logosmall.png);
background-repeat: no-repeat;
height: 110px;
border-top: 3px solid #082603;
}
.footer p {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
color: #082603;
font-size: 150%;
font-family: 'Baskerville Old Face'
}
<div class="container body-content">
<div class="footer">
<p>Quote</p>
</div>
</div>
Edit: position: absolute alternative version included
Another way is to give the main wrapper a minimum height, which will push the footer down. That minimum height should be the height of the screen minus other heights (footer's, nav's etc. heights). Fiddle here.
HTML:
<body>
<div id="header">Nav area</div>
<div id="main">Main content to be here</div>
<div id="footer">Footer be here</div>
</body>
CSS:
#header{
height:30px
}
#main{
min-height:calc(100vh - 60px);
}
#footer{
height:30px;
}
use position: fixed instead of position: absolute for the .footer css
change the position to
.footer {
position: relative;
bottom: 0;
background-color: #ffd800;
width: 100%;
text-align: center;
left: 0;
background-image: url(/Content/SiteImages/logosmall.png);
background-repeat: no-repeat;
height: 110px;
border-top: 3px solid #082603;
}
The best thing to do is to put your header,main content and your footer in a div tag as a place for your elements in a web page than put them in a it's normal flow like working on footer tag at end of the page.
I'm having a very difficult time getting my image centered and responsive without overlapping my text. How do I fix this.
View the issue here
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left:50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="bg3.jpg" /></div>
You have position absolute in your div so you can adjust the top value
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 200px; /* just a sample with a fixed pixel value */
left:50%;
overflow: visible;
}
or try using
position: relative;
That image should probably be a background instead.
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 40px;
margin: 0px;
width: 100%;
background: url('http://kenwheeler.github.io/slick/img/fonz1.png') center top no-repeat;
background-size: contain;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
Or you can move that image behind the text by modifying the z-index.
div.shadow {
position: absolute;
max-width: 45%;
max-height: 45%;
top: 50%;
left: 50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
z-index: -1;
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
<header>
<h1>Welcome to Nepali Kitchen</h1>
</header>
<div class="shadow"><img class="logo" src="http://kenwheeler.github.io/slick/img/fonz1.png" /></div>
It's because of the positioning of your elements.
If you want to have a fixed header your content needs to be pushed down the height of your header. Do this by wrapping your content in a container, and giving it a margin-top equal to the height of your header.
header {
position: fixed;
height: 100px;
}
.content-container {
position: relative;
margin-top: 100px;
}
And your HTML:
<header></header>
<div class="content-container">
</div>
Give your content-container the position: relative. If you want to center items in the center you can either use flexbox or give it a margin: 0px auto;.
Position relative means it's positioned relative to other elements.
Some other things I noticed in your code which could be done better/cleaner:
Use the units em or rem for font-size
It's not necessary to prefix your classes with the element (div.shadow -> .shadow and img.logo -> .logo)
Also I would recommend ordering your CSS following the CSS Box Model. This opts for much cleaner code and better readability.
This means you will get something like this:
.class {
// Positioning first
position: relative;
top: 0;
right: 0;
z-index: 1;
// It's size
width: 500px;
height: 500px;
// It's margin
margin: 0px auto;
// It's border
border: 1px solid blue;
// It's padding
padding: 2em 0;
// Content styling
color: #676766;
background: blue;
}
I don't know why you have written this complex css. It can be possible by some easy css coding.
<style>
div.shadow {
width: 100%;
float: left;
text-align: center;
}
img.logo {
}
header {
text-align: center;
color: black;
text-decoration: none;
font-size: 40px;
font-family: 'existencelight';
width: 100%;
float: left;
}
</style>
I am creating a navbar in my website and I want my logo to show next to my site name within the navigation bar, but it doesn't want to cooperate. In the code below is my html with the image inside of my nav bar.
Below is what my css looks like. I tried all of the different position types and I tried to set the navimage's margin and padding.
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
Any ideas?
The simplest way is to put the image inside your paragraph.
<p id="navtitle"><img src='http://i.imgur.com/Eqbvkgb.png'>Rainforest</p>
Size the image as needed.
Your position: absolute prevents the images from appearing as you want, try removing this and adding display:block so that the elements will appear next to each other. You'll probably want to change the css of your image to make it smaller.
Try something like this. Also the image is larger then 50 px so it automatically goes below the nav bar because it can't fit inside. Also, you have navimage title set to class in your html, but its written as an id in your css. ids are with # and class should be .navimage
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#navtitle {
float: left;
}
.navimage {
float:left;
}
<div class="navbar">
<div id="navtitle"><p>Rainforest</p></div>
<div class="navimage">
<a>
<img src='http://i.imgur.com/Eqbvkgb.png'width="20" height="20">
</a>
</div>
</div>
Concept:
Use of float property.
The Code:
Use float:left; for navbar and its elements.This will allow them to overlap each other.
Use position to position them.
Note: I gave Id to the img itself. It is always easier to manipulate the image directly
.navbar {
width: 100%;
height: 50px;
background-color: #2ecc71;
z-index: 1;
position: absolute;
top: 0;
left: 0;
float:left;
}
#navtitle {
color: white;
font-family: cursive;
font-size: 25px;
position: relative;
top: 20;
margin-top: 10px;
margin-left: 40px;
float: left;
}
#navimage {
position: absolute;
margin-top: 0px;
margin-left: 140px;
float:left;
}
#logoimg{
height: 50px;
position: absolute;
left: 2px;
}
<div class="navbar">
<p id="navtitle">Rainforest</p>
<div class="navimage">
<a>
<img id="logoimg" src='http://i.imgur.com/Eqbvkgb.png'>
</a>
</div>
</div>
You set an absolute positioning of the continer, so you should do in this way:
.navbar {
width: 100%;
background-color: #2ecc71;
z-index: 1;
position: absolute;top:0;left:0;
}
#navtitle {
color: #FFF;
font-family: cursive;
font-size: 25px;
margin-left: 10px;
position: relative;
margin-top:10px;
}
#navimage, img {
display:inline;
float:left;
width:30px;
height:40px;
padding:10px
}
http://jsfiddle.net/u3upgedx/
I have two video tags which I want to align at bottom corner of the screen. further, the inner video tag should overlap outer video tag, like this image given below:
This is what I could come up with:
<body>
<div class="container">
<div class="widget_contaner">
<div class="widget_head">this is head of widget</div>
<div class="widget_body">
<video class="large_video" src="#"></video>
<video class="mini_video" src="#"></video>
</div>
</div>
</div>
</body>
css
.widget_contaner {
right: 0px;
position: fixed;
bottom: 30px;
z-index: 99999999999999;
}
.widget_header {
background-color: #3fa757;
width: 240px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
border: 1px solid #ccc;
font-size: 12px;
height: 25px;
line-height: 25px;
font-family:'Open Sans', sans-serif;
border-radius: 5px;
}
.widget_body {
width: 240px;
height: 150px;
}
.large_video {
height: 100%;
width: 100%;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
bottom: 32px;
right: 4px;
opacity: 0.75;
}
so I was wondering how can I get these video tags to get positioned relative to each other as just given in the image?
Jsfiddle: click here
Like this?
http://jsfiddle.net/EbsaL/3/
I added background colour so it is easier to see
.widget_body {
width: 240px;
height: 150px;
position: relative;
}
.large_video {
height: 100%;
width: 100%;
background: green;
}
.mini_video {
position: absolute;
height: 30%;
width: 30%;
top: 0px;
right: 0px;
opacity: 0.75;
background: purple;
}
The widget body is positioned relatively, and you just need to give the mini video position absolute and top right 0px. If you want the widget positioned at the bottom right corner then do bottom:0; for widget container
See if this is what you are looking for. Note that I changed the background and borders so I could see it. Mainly needed to add absolute positioning to the larger video frame along with some bottom properties set to 0.
.large_video {
height: auto;
width: 100%;
border: 2px solid #000;
position: absolute;
bottom: 0;
}
http://jsfiddle.net/derekstory/EbsaL/2/