I'm trying to separate a text header from a banner for an eBay listing. Here's the code:
body {
background-color: #cccccc;
}
#banner {
position: top;
top: 0px;
left: 0px;
right: 0px;
width: 100%;
height: 275px;
z-index: 1;
}
<div id="banner">
<img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
</div>
<h1 style="font-family:helvetica">[Header text]</h1>
I've tried to add line breaks before the header to separate the header from the banner, but this isn't consistent across all viewing monitors. I converted px to em in the "height" and added the four breaks, but this doesn't work either. Thanks so much.
Try implementing margin-top.
<style>
body {
background-color: #cccccc;
}
#banner {
position: top;
left: 0px;
right: 0px;
width: 100%;
height: 275px;
z-index: 1;
}
h1{
margin-top:150px;}
</style>
<div id="banner">
<img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
</div>
<h1 style="font-family:helvetica">[Header text]</h1>
Update: You can also use percentages for margin-top to get a more consistent view on different browsers. Alternatively you can just put it into one div. You then wouldn't need to specify margin-top.
body {
background-color: #cccccc;
}
#banner {
position: top;
left: 0px;
right: 0px;
width: 100%;
height: 275px;
z-index: 1;
}
<div id="banner">
<img src="http://i592.photobucket.com/albums/tt6/7godsgaming/download%20-%20Edited_zpsx0kaucry.jpg" width="100%">
<h1 style="font-family:helvetica">[Header text]</h1>
</div>
Related
I am new to CSS and HTML, and I am working on my final project for school.
I am trying to absolutely position some text "Welcome" to a div I've made. For some reason it won't position in relation to the div, I've looked it over 10 times and can't figure out why.
I want the "Welcome" text to sit at the bottom of the welcome div, however when I put bottom:0px; into the CSS, it doesn't position according to its parent container and instead goes 0px from the top of the whole screen.
Here's the code:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
height: 150px;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
You are very close. Take the height away from the .w p tag and remove its margin as well:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
/*height: 150px;*/
margin: 0;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
The problem, as CalvinNunes pointed out, is that you have a height set on .w div. And, p elements have margin and line-height values by default. You need to remove the margin and set the line-height to 1 or less (.5 makes the text touch the bottom of the green box).
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
position: relative;
}
#header {
height: 150px;
background-color: red;
position: absolute;
width: 100%;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav">
</nav>
</header>
</div>
<!-- End of wrapper-->
If you use absolute on something, related dom element should be relative, absolute or fixed, depending on your needs.
Also check if your absolute element doesn't have some unneeded margins etc.
But in your usage case i don't think that there is absolute needed. you can use bigger paddings for parent element top. Also this can be achieved using flex-end, which will allow dynamic text input.
https://codepen.io/afrodiameter/pen/OwQmyd
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#head {
position: relative;
width: 100%;
max-height: 160px;
min-width: 320px;
}
img {
width: 100%;
max-height: 160px;
}
h1 {
position: absolute;
bottom: -24px;
font-size: 6em;
}
<header id="head">
<img src="http://via.placeholder.com/1280x160" alt="header image"/>
<h1> Magro Perimeter</h1>
</header>
In the above Pen I have a div that contains both an <img> and an <h1>. I want the bottom of the <h1> to be "locked" to the bottom of the <img>.
When the user resizes the browser I want the font-size to scale accordingly while the bottom of the <h1> stays "locked" to the bottom of the <img>.
I thought using vw would be the way to go but when resizing the browser the <h1> moves vertically and thus does not stay locked to the bottom of the image.
I'd like to accomplish this without JS/jQuery or mixins. Is this possible?
are you testing with bottom:0?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#head {
position: relative;
width: 100%;
max-height: 160px;
min-width: 320px;
}
img {
width: 100%;
max-height: 160px;
}
h1 {
position: absolute;
bottom: 0;
font-size: 6em;
}
<header id="head">
<img src="http://via.placeholder.com/1280x160" alt="header image"/>
<h1> Magro Perimeter</h1>
</header>
A very helpful user on Reddit solved this.
h1 {
position: absolute;
top: 52%;
font-size: 6vw;
}
Why this works I'm not quite sure. It seems counterintuitive to use top as opposed to bottom.
So, I'm trying to create a layout where the paragraph tag should always be aligned to a specific part of the background image.
Link with working example https://codepen.io/marcelcruz/pen/BRgaVL
I want the text to be always inside the crystal ball, but once I resize the window the background shrinks, the crystal ball goes up and they're not aligned anymore.
Is there a way of making the background only shrink on both sides, but not on the top and bottom? Some other better approach for this?
This part of the code looks something like this:
* {
padding: 0;
margin: 0;
}
body {
background: url("https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg") no-repeat;
background-size: cover;
height: 100vh;
}
#text {
color: red;
background: yellow;
width: 60px;
position: absolute;
top: 900px;
left: 50%;
}
<div id="main">
<p id="text">TEXT COMES HERE</p>
</div>
Thanks!
This could be done with an <img> tag and relative positioning, example
.container img {
max-width: 100%;
}
.img-container {
display: inline-block;
position: relative;
}
.positioning {
position: absolute;
left: 45%;
bottom: 30%;
background-color: red;
color: white;
padding: 4px;
font-size: 17px;
line-height: 18px;
}
<div id="container" class="container">
<div class="img-container">
<div class="positioning">
Some Text
</div>
<img src="https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg" />
</div>
</div>
Hope this helps!
<html>
<head>
<style>
body {
background: url("https://s-media-cache-ak0.pinimg.com/originals/d5/b0/57/d5b057f0816424bf45ab7d7a72deec5a.jpg") no-repeat;
background-size: 100% 100%;
}
#text {
color: red;
background: yellow;
width: 60px;
position: absolute;
left: 50%;
top: 80%;
}
</style>
</head>
<body>
<div id="main">
<p id="text">TEXT COMES HERE</p>
</div>
</body>
</html>
It works, when You set background-size: 100% 100%;
What more? Click link_for_more
I've tried for some hours and this is getting on my nerves. I'm working with bootstrap and the spin.js library. I'm trying to put a color layer over an img tag, but this simply doesn't works.
The code which I'm working on is this
The CSS code
.container-fluid {
position: relative;
padding: 0;
margin: 0;
}
.header{
position: relative;
max-height: 920px;
height: 100%;
}
.header_layer{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100px;
background-color: darkgrey;
z-index: 100;
}
.img_header{
position: relative;
top: 0px;
left: 0px;
width: 100%;
z-index: 99;
}
The HTML code:
<div class="container-fluid">
<div class="header col-md-12">
<div class="header_layer"></div>
<img src="http://placehold.it/350x150" class="img-responsive img_header">
</div>
</div>
However, thanks a lot.
As you give position:relative, and top/left : 0 so the elements do not overlap I guess you need position:absolute
I have seen a few questions about somewhat the same issue, but none of the specified answers actually work for this one.
Consider the following snippet :
$(function () {
$(window).on('scroll', function () {
/**
THIS SHOULD NOT BE CALLED!!!
So, change some colors to warn about it, if it happens.
*/
$('#content').css('background-color', 'red');
});
});
body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
#container {
position: absolute;
height: 100%;
width: 100%;
z-index: 9999999;
overflow: auto;
}
#nav {
background-color:rgb(50,50,50);
color: white;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 30px;
padding-top: 10px;
z-index: 100;
}
#content-wrapper {
background-color:rgb(200,200,200);
min-height: 100%;
height: auto !important;
width: 100%;
z-index:2;
}
#content {
padding-top: 40px;
padding-bottom: 40px;
}
#footer {
background-color: rgb(220, 220, 240);
position: fixed;
left: 0;
bottom: 0;
height: 30px;
width: 100%;
padding-top: 10px;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="nav">
Navbar
</div>
<div id="content-wrapper">
<div id="content">
<div>
Begin
</div>
<div style="height: 600px;">
...
</div>
<div>
End
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
The scrollbar goes underneath nav and footer. Since this is very important that only the container element scrolls (the BODY element must not scroll), how can I fix this? Is it possible?
The HTML structure should essentially be as suggested in this question (fixed nav, full height content, etc.). I have tried several tricks; modifying z-indexes, wrapping things around, etc., I'm at a lost here.
The targeted browser is Google Chrome, as this is the adopted browser in use for this application. The ideal solution would make the fixed element adjust their width to compensate for the overflow: auto; on the container element.
Demo in this fiddle
An alternative approach here would be to only scroll the #content-wrapper from your example. Here's a basic example of how this might be done:
HTML
<div id="container">
<div id="nav">
Navbar
</div>
<div id="content-wrapper">
<div id="content">
<div>
Begin
</div>
<div style="height: 600px;">
...
</div>
<div>
End
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
CSS
body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
#container {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
}
#nav {
background-color:rgb(50,50,50);
color: white;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 30px;
padding-top: 10px;
}
#content-wrapper {
position:absolute;
top:40px;
bottom:40px;
left:0;
right:0;
background-color:rgb(200,200,200);
width: 100%;
overflow:scroll;
}
#footer {
background-color: rgb(220, 220, 240);
position: fixed;
left: 0;
bottom: 0;
height: 30px;
width: 100%;
padding-top: 10px;
}
See this fiddle
Remove overflow:auto from #container.
So the CSS for #container would be like
#container {
position: absolute;
height: 100%;
width: 100%;
z-index: 9999999;
}
UPDATE
Add overflow:auto to #content.
http://jsfiddle.net/a8xqhh3L/
Remove overflow: auto from #container.