I have a banner div element that has a picture overlapping it. I want to have my text not be overlapped by the image, but am having issues.
Example of the problem:
Here is what my html looks like:
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: white;
position: relative;
top: 50%;
transform: translateY(-50%);
}
<img class="header-logo img" src="../../../assets/CatPicture.png">
<div class="container-fluid header-banner-container">
<span class="banner-text">There is a cat above me</span>
</div>
My questions are:
Should the image be in the container-fluid div, as a best practice? Or is having it outside the banner as I do currently, correct?
How can I get the text to not be overlapped by the image?
Thanks for any advice for the questions, and any other advice you may have!
If the image is a logo or something that belongs in the header, then yes, you should keep the image in the header container, and the text too. You could resolve the issue of the overlapping text easily by simply increasing the vh of the container div and moving the banner-text top attribute down slightly this way.
However, if the case is other than above, and you want to keep the text in that position but make it visible, then you could move the banner text out of the text and position it absolutely from the top. As-is, adjusting the z-index to 0 (e.g.) while it is still within the container div would have no effect as the container div's z-index of -1 would take precedence, and if adjusted higher, would overlap the image also.
Hope this helps
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: white;
position: absolute;
transform: translateY(-50%);
top: 70px;
z-index: 0;
}
<img class="header-logo img" src="http://ssl.gstatic.com/images/icons/gplus-32.png">
<div class="container-fluid header-banner-container">
</div>
<span class="banner-text">There is a cat above me</span>
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Example</title>
<style>
.header-banner-container {
background: #221E1F;
position: relative;
width: 100%;
height: 11vh;
top: 38px;
z-index: -1;
}
.header-logo {
position: absolute;
padding-left: 3px;
height: 89px;
width: 92px;
border-radius: 100%;
}
.banner-text {
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: white;
position: absolute;
transform: translateY(-50%);
top: 49px;
z-index: 0;
left: 50px;
text-shadow: 0px 3px 3px black;
}
</style>
</head>
<body>
<img class="header-logo img" src="https://image.freepik.com/free-vector/geometric-background_23-2148064464.jpg">
<div class="container-fluid header-banner-container">
</div>
<span class="banner-text">There is a cat above me</span>
</body>
</html>
Related
I am trying to create a relatively simple classroom-like site with overlaying images. Basically, there are a bunch of pictures you can interact with that will take you to different websites with different resources. I am struggling immensely with getting the sizing and proportions of all the images correct. I want there to be a background image that stretches to span the entire page and then carefully placed images/text over the background image/other images. As you can tell, when resizing the JSFiddle, everything gets disproportionate.
A more concrete example of what I'm trying to do: You can see the text over the "chalkboard" image. I want it to appear as if the text is writing on the chalkboard so it shouldn't be moving off the blackboard when resizing the window or looking at it through different aspect ratios. I'm trying to do this with lots and lots of images so a thorough explanation would be most helpful.
JSFiddle
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(71, 71, 71);
color: white;
text-align: center;
opacity: 0.75;
}
a {
color: lightgray;
}
p {
font-family: 'Schoolbell', arial, serif;
color: white;
}
.container {
position: fixed;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
background-image: url("https://images.unsplash.com/photo-1630699376059-b781970715b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
background-repeat: no-repeat;
background-size: 100%;
}
#whiteboard img {
width: 40%;
position: absolute;
top: 20%;
left: 35%;
}
#chalkboard img {
width: 20%;
height: 40%;
position: absolute;
top: 2%;
left: 78%;
}
#chalkboard p {
position: absolute;
top: 10%;
left: 80%;
color: white;
font-size: 140%;
text-align: center;
}
<body>
<div class="container">
<div id="whiteboard"><img src="https://images.unsplash.com/photo-1497409988347-cbfaac2f0b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" /></div>
<div id="chalkboard">
<img src="https://images.unsplash.com/photo-1614292253351-4deb4913c142?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<p>
Hi all!
</p>
</div>
</div>
<div class="footer">
<p>Footer Stuff</p>
</div>
</body>
// Side Note: These aren't the images I'm trying to use, just stock photo examples.
Thank you!
As you already have the positioning done in terms of % of the actual picture I think all you basically need to do is make sure that that picture's container maintains the same aspect ratio whatever the viewport aspect ratio is.
I did a rough look at your webp image and converted it to a png and took the dimensions - you will probably want to refine that to be more accurate.
Here is the snippet:
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(71, 71, 71);
color: white;
text-align: center;
opacity: 0.75;
}
a {
color: lightgray;
}
p {
font-family: 'Schoolbell', arial, serif;
color: white;
}
.container {
position: fixed;
top: 0%;
left: 0%;
/*height: 100%;*/
width: 100%;
aspect-ratio: 873 / 579;
background-image: url("https://i.stack.imgur.com/FJHjE.png");
background-repeat: no-repeat;
background-size: 100% auto;
}
#whiteboard img {
width: 40%;
position: absolute;
top: 20%;
left: 35%;
}
#chalkboard img {
width: 20%;
height: 40%;
position: absolute;
top: 2%;
left: 78%;
}
#chalkboard p {
position: absolute;
top: 10%;
left: 80%;
color: white;
font-size: 140%;
text-align: center;
}
</style>
<html>
<body>
<div class="container">
<div id="whiteboard"><img src="https://images.unsplash.com/photo-1497409988347-cbfaac2f0b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" /></div>
<div id="chalkboard">
<img src="https://images.unsplash.com/photo-1614292253351-4deb4913c142?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<p>
Hi all!
</p>
</div>
</div>
<div class="footer">
<p>Footer Stuff</p>
</div>
</body>
</html>
Note: you will need to decide what to do about the writing - the font-size also needs to be defined in relative terms so it shrinks appropriately.
ADDITION: It's been pointed out that keeping the width always at 100vw causes cropping of the image.
Here is a snippet which 'decides' whether to make the width or the height of the classroom as much as it can be (100vw or 100vh) and adjusts the other dimension so the aspect ratio is always maintained.
<!doctype html>
<html>
<head>
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: rgb(71, 71, 71);
color: white;
text-align: center;
opacity: 0.75;
}
a {
color: lightgray;
}
p {
font-family: 'Schoolbell', arial, serif;
color: white;
}
.container {
position: fixed;
top: 0%;
left: 0%;
aspect-ratio: 873 / 579;
background-image: url("https://i.stack.imgur.com/FJHjE.png");
background-repeat: no-repeat;
background-size: 100% auto;
}
#media (min-aspect-ratio: 873/579) {
.container {
height: 100vh;
}
}
#media (max-aspect-ratio: 873/579) {
.container {
width: 100vw;
}
}
#whiteboard img {
width: 40%;
position: absolute;
top: 20%;
left: 35%;
}
#chalkboard img {
width: 20%;
height: 40%;
position: absolute;
top: 2%;
left: 78%;
}
#chalkboard p {
position: absolute;
top: 10%;
left: 80%;
color: white;
font-size: 140%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div id="whiteboard"><img src="https://images.unsplash.com/photo-1497409988347-cbfaac2f0b12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" /></div>
<div id="chalkboard">
<img src="https://images.unsplash.com/photo-1614292253351-4deb4913c142?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
<p>
Hi all!
</p>
</div>
</div>
<div class="footer">
<p>Footer Stuff</p>
</div>
</body>
</html>
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%}
I've taken up interest in HTML/CSS Coding as of late and have run into a problem very quickly that I cant seem to solve or properly understand based on other answered questions similar to mine.
My positioning is based off pixels when it should be percent?
How to get my elements and pictures to stop rescaling as the browser shrinks, have it simply cut off like in near every website?
How do I choose between Absolute and Relative positioning?
Here's my HTML&CSS:
body {
font-family: "Courier New", Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
min-width: 100%;
min-height: 100%;
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
.boi:active,
.iob:active {
top: 2px;
}
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
width: 310px;
height: 250px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
width: 310px;
height: 250px;
right: 10px;
}
#verr {
position: absolute;
margin-left: 31px;
margin-top: 285px;
color: #6458b7;
}
#special {
position: absolute;
left: 77.9%;
top: 50%;
color: #6458b7;
}
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 95%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~" id="manyarms">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" id="sensible">
<p id="verr">Here comes a very special boi!</p>
<p id="special">He loves to pose for photos!</p>
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Either fix my code to what is desired (I'll just see what you did and understand it) or explain what I need do.
Whatever you do, thank you for reading and/or assisting.
You could change min-width: 100%; to min-width: 1000px; in html, body, #wrapper to set the min page width to 1000px. this will make the browser add a scrollbar when the window width is below 1000px.
Only applying min-width: 1000px; to html, body, #wrapper will not work for you since you also used absolute positioning. To fix this add position: relative; to #wrapper.
Why do we need to add position: relative; to #wrapper?
Absolute positioned elements will always position based on the first parent that has position: relative;. If none has this rule, it will just position based on the body. (https://developer.mozilla.org/de/docs/Web/CSS/position)
To learn more about position relative and absolute refer to: https://css-tricks.com/absolute-positioning-inside-relative-positioning/
With those changes being made, your website will stop scaling when the browser window reaces < 1000px in width. Ofc you can change the 1000px to any width you want.
body {
font-family: "Courier New", Courier, monospace;
background: linear-gradient(to bottom, #1D4350 , #A43931);
background-attachment: scroll;
}
html, body, #wrapper {
min-width: 1000px;
min-height: 100%;
}
#wrapper {
position: relative;
/* max-width: 1200px; Edit 1 */
}
#content {
height: 1200px;
}
.Octagon {
color: #2aa186;
text-align: center;
line-height: 30%;
margin-top: 25px;
}
.LT {
text-align: center;
color: #3a5454;
line-height: 0%;
font-style: italic;
}
.boi {
cursor: pointer;
margin-right: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
right: 16px;
}
.boi:active {
top: 2px;
}
.iob {
cursor: pointer;
margin-left: 30px;
padding: 8px 18px;
border: 1px solid #204156;
border-color: #52AEC9;
color: #52AEC9;
position: absolute;
top: 8px;
}
.boi:active,
.iob:active {
top: 2px;
}
/* Edit 2 */
#wrapperForTheFirstImage {
position: absolute;
margin-top: 30px;
margin-left: 31px;
width: 310px;
height: 250px;
}
#wrapperForTheSecondImage {
position: absolute;
margin-top: 30px;
margin-right: 31px;
width: 310px;
height: 250px;
right: 10px;
}
/* Removed
#manyarms {
position: absolute;
margin-top: 30px;
margin-left: 31px;
width: 310px;
height: 250px;
}
#sensible {
position: absolute;
margin-top: 30px;
margin-right: 31px;
width: 310px;
height: 250px;
right: 10px;
} */
#verr {
/*position: absolute;
margin-left: 31px;
margin-top: 285px;*/
color: #6458b7;
}
#special {
/*position: absolute;
left: 77.9%;
top: 50%;*/
color: #6458b7;
}
/* Edit 2 END */
.boi:hover,
.iob:hover {
text-shadow: 0 0 10px #a193ff;
}
#footer {
padding-left: 95%;
}
<html>
<head>
<title>The Pragmatic Octopus</title>
<meta charset="utf-8"/>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1 class="Octagon">The Pragmatic Octopus</h1>
<p class="LT">Lee Townsend</p>
<a href="www.google.com">
<p class="boi">Contact</p>
</a>
<a href="www.google.com">
<p class="iob">Information</p>
</a>
</div>
<div id="content">
<!-- Edit 2 -->
<div id="wrapperForTheFirstImage">
<img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792 .jpg" alt="mmm~">
<p>Here comes a very special boi!</p>
</div>
<div id="wrapperForTheSecondImage">
<img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm">
<p>He loves to pose for photos!</p>
</div>
<!-- Edit 2 END -->
</div>
<div id="footer">
© Hecc
</div>
</div>
</body>
</html>
Edit 1:
Added max-width to #wrapper to provide an example for (if i understand correctly):
What do I need to do for proper positioning if somebody looks at this
with a higher pixel count screen?
Edit 2:
I think i know what u want now. Consider wrapping your <img> and <p> inside a div and position the div and not the img and the p tag separately.
I just updated the source to provide an example. (and removed the max-width thing)
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/