I'm slowly getting into CSS and HTML and so far I've been making a page where there's a navbar on top and a list of elements below it. The elements in said list change their shape, too, but this is not the purpose of my question.
The issue I'm having is that while scrolling, the container class elements just scroll on top of the navbar, making it kinda pointless.
header {
position: fixed;
display: flex;
left: 0;
right: 0;
top: 0;
margin: 0;
background: red;
}
main {
margin: 0 auto;
padding-top: 80px;
background: yellow;
}
.container {
margin: 10px;
display: flex;
border: 1px solid #aaa;
height: 200px;
min-width: 700px;
flex-grow: 1;
position: relative;
}
.container div.containerinfo {
display: flex;
flex-wrap: wrap;
flex: 0.75;
flex-direction: column;
background-color: white;
}
<header>
<h1 id="title">Navbar</h1>
</header>
<main>
<section>
<div class="container">
<img src="broken" alt="broken link">
<div class="containerinfo">
</div>
</div>
<div class="container">
<img src="broken" alt="broken link">
<div class="containerinfo">
</div>
</div>
<div class="container">
<img src="broken" alt="broken link">
<div class="containerinfo">
</div>
</div>
<div class="container">
<img src="broken" alt="broken link">
<div class="containerinfo">
</div>
</div>
<div class="container">
<img src="broken" alt="broken link">
<div class="containerinfo">
</div>
</div>
</section>
</main>
Here's a jsfiddle: https://jsfiddle.net/ckuuxqqr/6/
Any help would be appreciated.
Because your header comes first in the source code, the yellow div elements will layer above it on the z-axis.
Here are two options to make header appear on top:
Add z-index: 1 to header. This will move the header to the top of other elements without a higher z-index value. (The default value for all elements is auto.) revised fiddle
Put the header element last in the source code. revised fiddle
You will need to add z-index:1; to your header css. z index will determine the "stacking" of elements on the page. The higher the index the higher it will stack on the page.
Add the z-index and here's why-->https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Related
I'm trying to put two elements on the top right of a card, but I don't want them to stack. In front of that I want them to stay next to each other but at the top right.
I've seen this W3S page, more in detail the 'Positioning Text in an Image'.
This is the example I'm using right now but only works for one element, if I add a new element with the same class they overlay each other:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.topright {
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="topright">Top Right</div>
<div class="topright">Top Right overlayed</div>
</div>
</body>
</html>
Is there any way of automate the positioning the topright elements next to each other without making two classes and setting the positions manually?
Thank you.
You can simply use flex and other flex properties to make sure the top-right is not stacking each each and this way it will be responsive as well on modern browsers.
I would not suggest using position: absolute or custom top or right for this type of thing.
Live Demo:
.container {
display: flex;
position: relative;
}
.topright {
font-size: 18px;
}
.top_right_item {
display: flex;
justify-content: space-between;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 35%;
}
img {
width: 100%;
height: auto;
opacity: 0.3;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Image Text</h2>
<p>Add some text to an image in the top right corner:</p>
<div class="container">
<img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300">
<div class="top_right_item">
<div class="topright">Top Right</div>
<div class="topright">Top Right overlayed</div>
</div>
</div>
</body>
</html>
.topright {
display:flex;
flex-direction:row;
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
<div class="topright">
<div>Top Right</div>
<div>Hello</div>
</div>
Your problem is solved.
What you have to do is put them in separate divs and wrap them in topright div, and set display to flex,thats all.
You can make an wrapper for the two elements
<div class="topright-wrapper">
<span>Top Right</span>
<span>Top Right Right</span>
</div>
CSS:
.topright-wrapper {
display: flex;
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
I have problem with sidebars on my website. I have two sidebars both 250px, one is on the left side and the second on the right side and have between div with content. That left sidebar is ok but that second doesnt want to change place for the right side and is on the left on place that first.
.info {
float: right;
position: fixed;
z-index: 1000;
height: 100%;
width: 250px;
padding-right: 0;
padding-top: 50px;
box-sizing: border-box;
}
.sidebar-menu {
position: fixed;
z-index: 1000;
height: 100%;
width: 250px;
display: block;
padding-left: 0;
padding-top: 50px;
box-sizing: border-box;
}
.content-main {
height: 100%;
padding-top: 56px;
width: 100%;
}
<div class="fluid-container">
<ul class="sidebar-menu">
<div class="photo">
</div>
<div class="name">
<h2 class="getname">Tommy Hilfiger</h2>
</div>
<div class="active">
<p class="menu">Activity</p>
</div>
<div class="followers">
<p class="menu">Followers</p>
</div>
<div class="friends">
<p class="menu">Friends</p>
</div>
<div class="photos">
<p class="menu">Photos</p>
</div>
<div class="edit">
<p class="menu">Edit</p>
</div>
</ul>
<ul class="info">
<div class="aqt">
</div>
</ul>
<div class="content-main">
</div>
</div>
First, don't use <ul> with <div>, you should use <ul><li>...</li></ul> otherwise change <ul> to <div> (<ul> is unordered list, <li> is list item).
Secondly, the way you're building the html, you're not splitting <div> elements (division), you're actually building one block with two lists and a division.
if you want to have [SideBar][Content][secondBar] use this:
<div class="wrapper">
<div class="leftbar">
anything
</div>
<div class="content">
</div>
<div class="rightbar">
</div>
</div>
Use the following css as fundamental, style after:
div.wrapper{
display: grid;
grid-template-areas: "leftbar content rightbar";
grid-template-rows: 1fr;
}
div.leftbar{
grid-area: leftbar;
}
div.content{
grid-area: content;
}
div.rightbar{
grid-area: rightbar;
}
I have a page wherein I have multiple full-width <img>'s - I have to add a <button> and <h2> overlaid upon each image. Images will have variable heights, so elements within need to conform to the perimeter set by their width + height.
An image is styled thus:
CSS
.FullWidthImg {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
HTML
<div id="container"> <!--ONLY STYLING FOR container IS position: relative-->
<img src="xx" alt="xx" style="FullWidthImg"/>
<h2>TEXT GOES HERE</h2>
<button>i'm a button</button>
</div>
Most approaches suggest styling <h2> and <button> with position: absolute - this works if you have one image element and the image always has the same height, however neither is the case for me.
Another approach I've seen is making something like:
<div style="background-image: url(/img.com)">
<h2>TEXT GOES HERE</h2>
<button>i'm a button</button>
</div>
... And then positioning elements within, which could work but I'd like to avoid in-line styling if possible.
Are there any alternative approaches that would work for this use-case?
Building off your first suggestion, here's how you could accomplish your desired layout without inline styles.
.img-wrapper {
position: relative;
}
.img-wrapper img {
width: 100%;
}
.img-wrapper .overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.img-wrapper h2 {
margin: 0 0 .5em;
}
<div class="img-wrapper">
<img src="http://via.placeholder.com/600x150/eee/ddd" />
<div class="overlay">
<h2>Heading</h2>
<button>Button</button>
</div>
</div>
<div class="img-wrapper">
<img src="http://via.placeholder.com/600x400/eee/ddd" />
<div class="overlay">
<h2>Heading</h2>
<button>Button</button>
</div>
</div>
I have a section that I want to look as if it is centered on the page. I have four boxes that appear inline and I believe the reason they do not like they are centered is because everything is aligned naturally to the left. The thing is, I do not want the content that is in these boxes to be centered, I want them aligned left.
So how can I make the boxes appear as if they are centered within the page, but not have it affect my text?
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
#contact-connect-box-container {
margin: 0 auto;
width: auto;
}
.contact-connect-box {
width: 25%;
margin: 60px 0 0 0;
display: inline-block;
border: 1px solid black;
vertical-align: top;
transition:1s; -webkit-transition:1s;
}
<div id="contact-connect">
<div id="contact-connect-box-container">
<div class="contact-connect-box">
<h2 class="contact-connect-title">Call</h2>
<div class="contact-connect-description">vcxv</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Write</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">Fill out our contact form.</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fgrge
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Connect</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">Visit us on Facebook</div>
<div class="contact-connect-link">See us on Youtube</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
</div>
You can just add "display: flex" on your #contact-connect-box-container
#contact-connect-box-container {
margin: 0 auto;
width: auto;
display: flex;
}
DEMO :
https://jsfiddle.net/w776Lq1u/8/
The problem is the margin on the right side of "Connect." I would recommend using flexbox and using display: flex; justify-content: space-around; That way you won't need any margins at all.
EDIT: plnkr
I would like to put one image above another, but all answers I find are using position absolute with specific pixels. I want to achieve it in a responsiveness way, so I would like to avoid strict composition.
Now my code looks like:
<style>
.header{
margin:20px;
text-align:center;
}
.data{
text-align:center;
}
</style>
<body>
<h1>Hello Stack Overflow!</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
I would like to move the .logo img above the background img and, have different classes to move it:
Center center;
Center right;
Center left;
So, my goal is having the possibility to accomplish the following image with a class that can "move" my logo, but always maintaining it above the background image. Note that the background image could have not always the same size.
I did a plunkr to test with where you can reproduce it.
Although this answer uses absolute positioning it is responsive and should work they way you want. This answer also assumes that you have high quality background images that will not lose quality when scaled to a large size.
The logo is centered by default. There is a .logo-right and .logo-left class for side positioning.
There is a small edge case that the logo breaks out a little at small screens when the height of the background image is less than the logo. To account for this you can set the logo width to a percentage and also give it a max-width so that it doesn't enlarge too far if you are using a rasterized (non-svg) logo (see Snippet) .
.header {
margin:20px;
text-align:center;
position: relative;
}
.data{
text-align:center;
}
.background {
height: auto;
width: 100%;
}
.logo {
bottom: 0;
height: 50%;
left: 0;
margin: auto;
max-height: 100px;
position: absolute;
right: 0;
top: 0;
width: auto;
}
.logo-right {
margin-right: 5%;
}
.logo-left {
margin-left: 5%;
}
<h1>Centered</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
<h1>Right</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo logo-right">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
<h1>Left</h1>
<div class="header">
<img src="http://lorempixel.com/g/800/200/" class="background">
<img src="http://lorempixel.com/100/100/" class="logo logo-left">
</div>
<div class="data">
<label>enter your name</label>
<input>
</div>
Maybe something like this?
http://plnkr.co/edit/wd6wui?p=preview
<style>
.header {
margin: 20px;
text-align: center;
position: relative;
}
.img-container {
position: absolute;
top: 0;
width: 100%;
}
.data {
text-align: center;
}
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
<div class="header">
<div class="img-container">
<img src="http://lorempixel.com/g/800/200/" class="background">
</div>
<div class="img-container">
<img src="http://lorempixel.com/100/100/" class="logo">
</div>
</div>
Not sure I understood your question ;)
wrapping the images in div will do the work
<div><img src="http://lorempixel.com/100/100/" class="logo"></div>