So I need to setup multiple divs, one under another that have both a responsive background image with text over top. Right now I have the following setup:
http://secretsofpoolecreekvillage.com/index_temp.php
.. which worked fine when there was only the one div ".bg1". As soon as I add another div under it, they overlap. I'm assuming this has to do with the position: absolute; on each of these divs. I don't know how to accomplish this otherwise though.
.bg1 {
width: 100%;
height:auto;
text-align: center;
position: absolute;
}
.bg1 img {
width:100%;
height:auto;
}
.bg1 h1 {
color: #FFFFFF;
font-family:'ITCFranklinGothicStd-Book';
font-size: 34px;
margin-bottom: 5px;
line-height: 40px;
font-weight: normal;
}
.bg1 h2 {
color: #FFFFFF;
font-family:'TimesEuropaLTStd-Bold';
font-size: 62px;
margin-top: 0;
line-height: 50px;
}
.bgContent1 {
position: absolute;
top: 50%;
left: 50%;
padding: 0;
transform: translate(-50%, -50%);
}
<div class="bg1">
<img src="/images/bg_1.jpg">
<div class="bgContent1">
<h1>SECRETS OF</h1>
<h2>POOLE CREEK VILLAGE</h2>
</div>
Related
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.
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 have the following HTML/CSS code:
<style>.dummy {
color: greenyellow;
}
.middle-container {
position: absolute;
top: 50%;
left: 50%;
}
.middle-container-box {
width: 50px;
height: 50px;
background-color: red;
}
.middle-container-text {
color: red;
font-weight: bold;
font-size: 15px;
}
</style>
<html>
<body>
<div class="dummy">
Lorem Ipsum is simply dummy text...
</div>
<div class="middle-container">
<div class="middle-container-box"></div>
<div class="middle-container-text">
this text needs to be in the center
</div>
</div>
</body>
</html>
In this sandbox: https://codesandbox.io/s/2py075pqnr
I need to have middle-container at the center of the screen and the div and the text elements (which are inside of this container) to be centralized inside of the container.
So it should be moved to the left, something as: https://prnt.sc/n349h1 (we need to move it only to the left). But moving it with fixes values (in pixels) is not an option, since I need this working on all screens resolutions.
You need to use translate to move to box back to the centre and flex to centre it's children:
.dummy {
color: greenyellow;
}
.middle-container {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%, -50%); /* this moves this box back to the middle (back up and left 50% of itself) */
display:flex; /* the following four align it's children to the center horizontally and vertically */
flex-direction:column;
align-items:center;
justify-content:center;
}
.middle-container-box {
width: 50px;
height: 50px;
background-color: red;
}
.middle-container-text {
color: red;
font-weight: bold;
font-size: 15px;
}
<div class="dummy">
Lorem Ipsum is simply dummy text...
</div>
<div class="middle-container">
<div class="middle-container-box"></div>
<div class="middle-container-text">
this text needs to be in the center
</div>
</div>
You can do it with transfom
CSS
.dummy {
color: greenyellow;
}
.middle-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.middle-container-box {
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
}
.middle-container-text {
color: red;
font-weight: bold;
font-size: 15px;
}
DEMO HERE
Change .middle-container, set top, left, right, bottom to 0 then set margin to auto. Your text is already in the center because it's giving the div it's width, what you need to do is put .middle-container-box in the middle setting display to block and margin to 0 auto. See below:
.middle-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.middle-container-box {
width: 50px;
height: 50px;
background-color: red;
display: block;
margin: 0 auto;
}
.middle-container-text {
color: red;
font-weight: bold;
font-size: 15px;
text-align: center;
}
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/
Right now, if you look at my page on my computer, it will look the way I want it to look. Now if you go on a pc with higher/lower resolution, the images will move, BUT the text will stay in place, why is that?
I have tried messing around with the position: and height/width percentages, but haven't managed to get it to work properly yet.
I'd like to get the images to stay in one place and resize depending on the resolution.
1st:
2nd:
The HTML:
<div id="content">
<div class="pricing">Pricing</div>
<div><img src="images/bracket.png" class="bracket"></div>
<div class="skills">Skills</div>
<div><img src="images/bracket.png" class="bracket_02"></div>
</div>
The CSS:
#content
{
margin: 0% 13% auto;
height: 100%;
width: 65%;
border-style: solid;
border-width: 1px;
color: white;
position: absolute;
}
.pricing
{
font-size: 40;
font-weight: bold;
margin-top: 6%;
margin-left: 20%;
color: #1eb1f5;
position: absolute;
}
.skills
{
font-size: 40;
font-weight: bold;
margin-top: 6%;
margin-left: 70%;
color: #1eb1f5;
position: absolute;
}
.bracket
{
margin-top: 11%;
margin-left: 8%;
position: absolute;
}
.bracket_02
{
margin-top: 11%;
margin-left: 57%;
position: absolute;
}
I usually use px for everything, but I wanted to try using %, as I have heard it can be better for mobile for example.
Is this what your looking for?
JSFIDDLE
I changed your css and html quite a lot.
I put the text and image in a container .head-elem
set text-align: center to center your text in its container
The width of the .head-elem to 50%. so that it takes up 50% of the width of #content.
Made the image take of full size of its container width: .bracket { width: 100%;}
#content {
width: 500px; //Change this to test out diffrent sizes
border-style: solid;
border-width: 1px;
color: white;
}
.head-elem {
width: 50%;
text-align: center;
display: inline-block;
font-size: 1em;
font-weight: bold;
color: #1eb1f5;
}
.bracket {
width: 100%;
}
<div id="content">
<div class="head-elem">
<span>Pricing</span>
<img src="http://www.i2symbol.com/images/symbols/brackets/presentation_form_for_vertical_left_curly_bracket_uFE37_icon_256x256.png" class="bracket" />
</div>
<div class="head-elem">
<span>Skills</span>
<img src="http://www.i2symbol.com/images/symbols/brackets/presentation_form_for_vertical_left_curly_bracket_uFE37_icon_256x256.png" class="bracket" />
</div>
</div>
Try adding the width in % for the class images:
.bracket
{
margin-top: 11%;
margin-left: 8%;
position: absolute;
width: 50%;
}
.bracket_02
{
margin-top: 11%;
margin-left: 57%;
position: absolute;
width: 50%;
}