I want to style a nav with a border that overlaps the text, and a text that overlaps an image in order to achieve the layout in the example below.
I tried different methods but nothing worked
Example:
Example 1
here is what I got so far:
Example 2
.menu-link {
list-style: none;
margin: 2rem 0;
text-align: right;
border: 1px white solid;
}
.menu-link a {
text-decoration: none;
font-family: "Montserrat", sans-serif;
color: rgba(255, 255, 255, 0.8);
font-size: 4rem;
text-transform: uppercase;
}
img {
display: block;
object-fit: cover;
}
.intro-image {
position: relative;
width: 100%;
}
.intro-image::after {
content: "";
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<section class="intro-block">
<div class="intro-text">
<h1>Front-End Developer <br />UI Designer</h1>
</div>
<div class="hero-right">
<ul class="hero-menu">
<li class="menu-link">About</li>
<li class="menu-link">Projects</li>
<li class="menu-link">Contact</li>
</ul>
<div class="intro-image">
<img src="./images/heroimg.jpg" alt="" />
</div>
</div>
</section>
I tried using "position: absolute" for the hero text but the image moves to the left.
for the navigation, I'm thinking of adding an element to HTML to contain the nav links and put a position absolute on it instead of adding border in CSS, maybe?
Is there anyway to achieve this layout? Any help is much appreciated!
You could make your elements a fixed width and height. With negative position values you can make it go outside the box. I don't know if this is what you are looking for:
html:
<html>
<head>
</head>
<body>
<div id="wrapper">
<div class="box">
<h1>About</h1>
</div>
<div class="box">
<h1>Projects</h1>
</div>
<div class="box">
<h1>Contact</h1>
</div>
</div>
</body>
</html>
css:
#wrapper
{
position:absolute;
right:150px;
}
.box
{
position:relative;
border: 1px solid black;
width:200px;
height: 50px;
}
.box h1
{
position:absolute;
right: -50px;
top:-18px;
}
https://jsfiddle.net/cm03bjex/21/
The position:relative makes sure that the absolute position is relative to the box not the whole screen.
Related
I need some help, I need to code this image:
This is what I have so far:
I tried adding a margin-top, padding-top, tried all combinations of position relative and absolute, I just need some ideias on how to do it.
This is how my code is structured:
<div class="background-oficina">
<div class="container">
<div class="col-xs-12 text-center">
<img class="logo" src="logo.png" alt="Oficina de Redação">
</div>
</div>
</div>
This is the css for the two classes that I'm using:
.background-oficina {
background: #fff url("bg-texture.png");
}
.logo {
padding-top: 50px;
margin: 0 auto;
}
You could use an additional absolutely positioned element to which you assign the repeated background pattern and which you put behind the original element by using z-index: -1:
html, body {
margin: 0;
}
.background-oficina {
position: relative;
border: 1px solid #333;
border-bottom: none;
}
.bg-container {
position: absolute;
z-index: -1;
left: 0;
top;
width: 100%;
height: 120px; /* or whatever height is desired */
background: url("http://placehold.it/20x15/cff");
}
.text-center {
text-align: center;
}
.logo {
padding-top: 50px;
margin: 0 auto;
}
<div class="background-oficina">
<div class="bg-container"></div>
<div class="container">
<div class="col-xs-12 text-center">
<img class="logo" src="http://placehold.it/200x150/fb7" alt="Oficina de Redação">
</div>
</div>
</div>
Your trying this, you can set default height and width to parent div that consist of that logo then using position:absolute you can push that out of parent div, but don't add overflow:hidden to parent div or else it hides your image or element that you are trying to push outside parent div as hidden.
.background-oficina {
background: #fff url("https://via.placeholder.com/800x100/000") no-repeat;
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.2);
background-size: 100% 100%;
width: 100%;
height: 100px;
position: relative; /*Add this*/
}
.logo {
padding-top: 50px;
margin: 0px auto;
position: absolute; /*Add this*/
bottom: -20px; /*Add this*/
}
<div class="background-oficina padding margin-bottom">
<div class="container">
<div class="col-xs-12 text-center margin-bottom">
<img class="logo" src="https://via.placeholder.com/50/ff2" alt="Oficina de Redação">
</div>
</div>
</div>
i have been trying to place the grandient on top of the image and behind the text but everything i tried from what i could find out in web didnt worked.
i would need to have the source of the image in the div cause if its in the css code it will apply the same image to all other templates i create.
thanks :)
<div class="titles">
<div class="thumb">
<img class="img overlay"
height=260px
width=240px
alt="Shokugeki no Souma: Ni no Sara"
src="https://img7.anidb.net/pics/anime/184719.jpg" />
<div class="titulo">Shokugeki no Souma: Ni no Sara</div>
<div class="epis">Epis. 12</div>
</div>
.titles .thumb {
position: relative;
float: left;
height: 260px;
width: 245px;
max-height: 260px;
max-width: 260px;
margin: 0 auto;
padding: 5px;
}
.thumb .titulo {
position: absolute;
bottom: 0;
left: 0;
padding: 8px;
margin: 5px;
font-size: 15px;
font-weight: bold;
color: white;
}
.thumb .epis {
position: absolute;
top: 0;
right: 0;
padding: 8px;
margin: 10px;
font-size: 15px;
font-weight: bold;
color: white;
}
.titles .thumb .img:hover {
max-height: 260px;
max-width: 260px;
height: 260px;
width: 240px;
opacity: 0.8;
}
.img.overlay {
background: linear-gradient(
to bottom,
black,
rgba(64,64,64,1),
rgba(64,64,64,1),
rgba(64,64,64,1),
rgba(64,64,64,1),
rgba(64,64,64,1),
rgba(64,64,64,1),
black);
}
Do you mind explaining a bit more about what is going wrong when you try to implement this?
My suggestion would be to put the overlay in its own separate div instead of inside the image tag. Then close the overlay div before you start your caption div. Then you can set your "thumb" class to have a certain width and height in your css, and style the overlay div to have height:100% width:100%so that it completely covers your thumbnail image. If you absolutely position the caption text, you can place it on top of the gradient. For example
<div class="titles">
<div class="thumb">
<img alt="Shokugeki no Souma: Ni no Sara" src="https://img7.anidb.net/pics/anime/184719.jpg" />
<div class="overlay"></div>
<div class="titulo">Shokugeki no Souma: Ni no Sara</div>
<div class="epis">Epis. 12</div>
</div>
</div>
How do you place text above an image, such that it runs across the bottom of the image.
i.e.
<div class="i_have_an_image">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
I am struggling to work it out, to see what I mean, The following web site, has a great example of this. I've seen it before on sites, heres an example snapshot of what I mean:
Wrap the image in an inline-block div which has position:relative.
Position the h2 absolutely with bottom:0 and width:100% and the height of the h2 will adjust automatically to the content of the positioned element.
.i_have_an_image {
display: inline-block;
position: relative;
}
.i_have_an_image img {
display: block;
}
.i_have_an_image h2 {
position: absolute;
margin: 0;
bottom: 0;
left: 0;
width:100%;
padding: 1em;
background: rgba(255, 255, 255, 0.5);
color: white;
}
<div class="i_have_an_image">
<img src="http://www.fillmurray.com/460/300" alt="">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
.i_have_an_image{
position:relative;
width:200px;
height:200px;
}
h2{
position:absolute;
bottom:0px;
background:rgba(0,0,0,0.5);
color:#fff;
margin:0px;
}
<div class="i_have_an_image">
<img src="http://i-cdn.phonearena.com/images/article/32854-image/First-samples-from-Sonys-new-13MP-stacked-camera-sensor-capable-of-HDR-video-show-up.jpg">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
.butFrame {
width: 32%;
position: relative;
cursor: pointer;
}
.butFrame .butHeading {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 10px 0;
display: block;
background: rgba(0, 0, 0, 0.5);
margin: 0;
font-family: inherit;
font-size: 1.2em;
color: #fff;
text-align: center;
text-transform: uppercase;
font-weight: 400;
}
<div class="butFrame">
<img src="https://unsplash.it/g/380/210?random">
<div class="butHeading">Heading</div>
https://jsfiddle.net/n0aLts9w/
Another solution of image with heading and sub heading. (As per your given image)
Demo Here
.i_have_an_image{
position: relative;
background-image: url(http://i.imgur.com/McIDx6g.jpg);
background: url((http://i.imgur.com/McIDx6g.jpg) no-repeat center center;
height: 400px;
width: 400px;
}
.title_wrap{
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: 0;
right: 0;
padding: 15px;
color: #ffffff;
}
.title_wrap h2 {
font-size: 20px;
margin: 0;
}
.title_wrap h6 {
font-size: 12px;
margin: 0;
}
<div class="i_have_an_image">
<div class="title_wrap">
<h2>Heading goes here</h2>
<h6>I appear on top of the image, but aligned along the bottom</h6>
</div>
</div>
You can make it like this:
I added only the "wrap" div
.wrap {
max-width: 300px;
}
h2 {
position: relative;
top: -78px;
opacity: 0.8;
background: #222222;
color: #fff;
}
<div class="i_have_an_image">
<div class="wrap">
<img src="http://www.theage.com.au/content/dam/images/g/p/o/1/v/l/image.related.homepagePortrait.300x370.gpnu1x.2f8s9.png/1466499504473.jpg" alt="Angelika Graswald in court with her lawyers. " width="300" height="370">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
</div>
This is how I've been doing it recently. It's using the new html5 tag figcaption
It doesn't matter how big the image is or what you put in the figcaption it should just work.
figure.overlay {
display: inline-block;
position: relative;
margin: 0;
}
figure.overlay figcaption {
position: absolute;
background: rgba(0, 0, 0, .5);
color: #fff;
bottom: 4px;
width: calc(100%-10px);
padding: 5px;
}
<figure class="overlay">
<img src="http://www.dogbreedinfo.com/images/germanshepherdface.jpg">
<figcaption>
<h3>
'Some header of some sort!'
</h3> Words that make up a sentance! Or maybe 2 sentances.
<br />
<br />Even with a new line
</figcaption>
</figure>
Ho you can do it with flexbox simply like this:
.imageWrapper {
width: 200px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: flex-start;
border: 1px solid black;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/a/a8/Tour_Eiffel_Wikimedia_Commons.jpg");
background-size: 100%;
}
.textAboveImage {
width: 100%;
height: 50px;
background-color: grey;
z-index: 200;
opacity: 0.5;
}
<div class="imageWrapper">
<div class="textAboveImage">I'm text</div>
</div>
Cheers.
You can make it like this:
I added only the "wrap" div
HTML:
<div class="i_have_an_image">
<div class="wrap">
<img src="http://www.theage.com.au/content/dam/images/g/p/o/1/v/l/image.related.homepagePortrait.300x370.gpnu1x.2f8s9.png/1466499504473.jpg" alt="Angelika Graswald in court with her lawyers. " width="300" height="370">
<h2>I appear on top of the image, but aligned along the bottom</h2>
</div>
</div>
CSS:
.wrap {
max-width: 300px;
}
h2 {
position: relative;
top: -78px;
opacity: 0.8;
background: #222222;
color:#fff;
}
I have the following html:
<div class="article">
<img src="..." class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
The article divs background image gets set dynamically, so setting the divs background in css is out, I have to use an image tag. I'm not too sure though how to use an img as the divs background, and at the same time have text over the img.
Also the height of the article div should always be 180px, I only have the following simple CSS:
.article {
height: 180px;
padding: 10px;
background-color: blue;
}
Thanks in advance for any tips!
You can do it by this way:
<div class="article">
<img src="http://www.bdembassyusa.org/uploads/images/beautiful-Bangladesh-23.jpg" class="article-bg">
<h1 class="heading">Article Heading</h1>
<h2 class="author">Author Name</h2>
</div>
Ad some more css below:
.article{
height: 180px;
padding: 10px;
background-color: blue;
overflow:hidden;
}
.article img{
position:absolute;
z-index:0;
width: 100%; // make the img fluid
height:200px;
margin:-10px;
object-fit: contain; // similar to `background-size: contain;`
}
.article h1,.article h2{
position:relative;
z-index:1;
}
Test it on jsfiddle:
http://jsfiddle.net/sarowerj/o9L72do0/
What you're looking for in z-index.
Using Z-index allows you to position one element above of the other. But do keep in mind that z-index does only work with positioned elements such as absolute or relative positioning.
You do specify a z-index as follows in the CSS:
.heading { position: absolute; top: 10px; left: 10px; z-index: 900; color: #fff; }
See this jsFiddle for a demo on how to use it:
You can use the CSS property object-fit for this.
However it is worth noting that this property has very little to no support on IE and Edge browser.
.conainer{
position: relative;
width: 500px;
height: 300px;
color: #ffffff;
overflow: hidden;
margin: auto;
}
.conainer img{
position: absolute;
top: 0;
left: 0;
transition: all 1s ease;
}
.conainer:hover img{
transform: scale(1.2);
}
.conainer .content{
position: relative;
z-index: 1;
}
.conainer .content h2{
color: white;
text-shadow: 3px 2px 10px #545454;
text-align: center;
}
<div class="conainer">
<div><img src="https://placeimg.com/640/480/nature" alt=""></div>
<div class="content">
<h2>Here's an example</h2>
</div>
</div>
You can use this code, to make <img> behave like a background image:
<img src="..." class="background-image" />
.background-image {
position: absolute;
z-index: -1;
min-width: 100%;
min-height: 100%;
left: 0;
top: 0;
pointer-events: none;
}
use
<div class="article" style="background: url(imageurl)">
</div>
I have a block <div> I want to define with precise pixel coordinates via position: absolute, but I want to position a heading above its parent <div>. If the font-size changes (or the user enlarges the text), the block <div> must stay in exactly the same place, but the heading may move up/down to accommodate the larger/smaller text.
Here is some sample code that, honestly, doesn't come close, but may help to illustrate the problem. It's just one of the variations I tried:
<!doctype html>
<html>
<head>
<title>Positioning Test</title>
<style>
#box1 { border: red 1px solid; }
#box1 h4 { margin: 0; color: blue }
.inner_box {
background: #aaf;
width: 400px;
height: 50px;
}
.target_pos {
position: absolute;
top: 50px;
left: 100px;
}
#marker {
width: 10px;
height: 10px;
background: red;
}
</style>
</head>
<body>
<div id="box1">
<h4>Heading</h4>
<div class="inner_box target_pos">
This is the <strong>inner_box</strong>.
</div>
</div>
<!-- Marks where the inner_box should begin -->
<div id="marker" class="target_pos"></div>
</body>
</html>
The idea is the blue inner_box must be positioned exactly at the marker (which it is), but the Heading text must be directly above it, and the red 1px border should enclose everything.
Here is how it looks in Firefox:
And here's how I would like it to look instead:
Since I have several of these boxes to work with, and their positions may change depending on viewport size, and the heading font/text will vary, I need a dynamic solution, here. I would prefer pure CSS3, but if JS is required, I could live with that.
I have created a fiddle for you that works for any font size, position and number of boxes.
http://jsfiddle.net/y73sqdr9/3/
Also
HTML
<div class="box target">
<h1>Headingggggggggg</h1>
<div class="inner">
This is the <strong>inner_box</strong>.
</div>
</div>
<div class="square target"></div>
<div class="box target2">
<h1>Headingggggggggg</h1>
<div class="inner">
This is the <strong>inner_box</strong>.
</div>
</div>
<div class="square target2"></div>
CSS
.box {
position: absolute;
border: 1px solid red;
border-top: none; }
.box h1 {
margin: -2em -1px -1px;
padding: .5em;
border: 1px solid red;
border-bottom: none;
line-height: 1; }
.box .inner {
padding: 1em;
background: #CCF; }
.square {
position: absolute;
width: 16px;
height: 16px;
background: red; }
.target { left: 100px; top: 150px; }
.target2 { left: 120px; top: 280px; }
I hope to have helped you!
How this is done:
The position id gives the position of the entire element.
The box class defines the width and height of the box and only has borders for bottom left and right leaving the top open because the header will be there
The header class height is set to zero as to not influence the box's position and is moved up 18 px
The h4 has borders on top left and right but not on the bottom so it will not block out the box
The html:
<!DOCTYPE html>
<html>
<head>
<title>Positioning Test</title>
<style>
.header{
position: relative;
bottom: 18px;
right:1px;
background: white;
height:0px;
}
.header h4{
width: 400px;
margin:0;
padding:0;
border: 1px red solid;
border-bottom:none;
}
.box{
border: 1px red solid;
border-top:none;
width: 400px;
height: 300px;
background: #aaf;
}
#position1 {
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div id="position1" class="box">
<div class="header">
<h4>Title</h4>
</div>
<div class="inner">
I'm inside!
</div>
</div>
</body>
<html>
Firstly your body tags are are not wrapping your code.
Secondly your red box div should wrap all the other divs and be closed last. It closes early