I have some code as follows where I think my layering is causing a rendered link to be unclickable. Some of this example I've converted to styles from external CSS classes for ease of writing this up as a small use case. This is currently being testing on modern browsers (latest stable FF and Chrome).
<body>
<!-- whole container needs to be at z-index of -1 -->
<div id="container">
<div class="corner" id="backgroundTopLeft"></div>
<div class="corner" id="backgroundTopRight"></div>
<div class="corner" id="backgroundBottomLeft"></div>
<div class="corner" id="backgroundBottomRight"></div>
<!-- whole container needs to be at z-index of 1 -->
<div id="container2">
<div id="headerSection"><img src="images/jClarity_logo.png" alt="logo" /></div>
<div id="navigationSection">
<a class="selected" href="#">Introduction</a><span class="menuDivider">|</span>About
</div>
</div>
</div>
</body>
And the CSS
#charset "utf-8";
/* Default margin, padding and font-family */
*
{
font-family: Arial;
margin: 0px;
padding: 0px;
}
/* All images should have no borders by default */
img
{
border: none;
}
/* Global styling for links, uses black as the color */
a
{
color: #000000;
text-decoration: none;
}
a.selected
{
font-weight: bold;
}
a:hover
{
color:#FF00FF;
}
#container
{
position: relative;
z-index: -1;
height: 100%;
}
.corner
{
position: absolute;
height: 100px;
width: 100px;
background-color: #172944;
z-index: -1;
}
#backgroundTopLeft
{
top: 0px;
left: 0px;
}
#backgroundTopRight
{
top: 0px;
right: 0px;
}
#backgroundBottomLeft
{
bottom: 0px;
left: 0px;
}
#backgroundBottomRight
{
bottom: 0px;
right: 0px;
}
#container2
{
position: relative;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.8;
filter:alpha(opacity=80);
background-image:url('../images/groovepaper.png');
}
/* The headerSection div, designed to fit in a centered logo */
#headerSection
{
margin-left: auto;
margin-right: auto;
padding-bottom: 70px;
padding-top: 54px;
height: 70px;
width: 250px;
}
/* The navigationSection div, designed to fit in the menu */
#navigationSection
{
padding-bottom: 15px;
margin-left: auto;
margin-right: auto;
width: 600px;
text-align: right;
}
.menuDivider
{
color: #666666;
padding-left: 5px;
padding-right: 5px;
}
It all looks fine (lots of other purely color/font-size type styling is applied), but foobar.html is not clickable.
I'm pretty sure I've done something wrong with the layering, but I thought the use of z-indices would sort me out..
Working fine http://jsfiddle.net/hPkTu/, if the problem is with IE8, use z-index:1; IE8 is known to be buggy with this particular problem of z-index's.
UPDATE You changed your question, here is the working jsFiddle of your updated problem http://jsfiddle.net/VjTXu/2/. I changed z-index of container to O, -1 was making it go below body and that's why your link was not clickable, now it is.
Related
I don't have much knowledge about html and css and I couldn't find the answer on the internet so I am here.
Problem:
I am trying to make an image fill top part of the screen but one thing stops me from it and it's the default margin of the <body>. I've managed it by using margin: -10px; But now the image can't fill the screen by 20px, probably because there is no margin, image still thinks screen is that big.
html,body {
width: 100%;
height: 100%;
margin: -10px;
padding: 0;
overflow: hidden;
}
img {
width: 1600px;
height: 300px;
opacity: 70%;
object-fit: cover;
object-position: top 10px;
}
.cont {
position: relative;
text-align: center;
padding: 10px;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<body>
<div class="cont">
<img src="https://i.stack.imgur.com/DWZAk.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
NOTE: If you have any questions or didn't understand anything about the question, please ask because I am ready for any answer. :) Thanks.
If your image is meant to be a decoration(design), then background is fine to use.
.cont can be a flex or grid element, to avoid position absolute and possible unwanted sides effects.
here an example with a background and grid:
body {
margin: 0;
min-height: 100vh; /* optionnal if it does not have a purpose */
}
.cont {
height: 300px; /* guessed from your code */
display: grid; /* default make a single column*/
background: url(https://picsum.photos/id/1015/600/300) 0 0 / cover; /* background covering */
}
.main-text {
margin-block: auto; /* vertical-centering in its row from here */
margin-inline-start:70px;
font-size: 100px; /* from your code */
color: white; /* from your code */
font-weight: normal; /* you looked for this? */
text-shadow: 0 0 1px #000; /*Optionnal increase readability*/
}
<div class="cont">
<h1 class="main-text">Big Ass Title</h1><!-- if that's a title, then make it a title ;) -->
</div>
Generally to eliminate all the margins and paddings you can add:
* {
margin: 0;
padding: 0;
}
By the way I attached a snippet where it's working as you requested. Is better to eliminate the margins than adding a negative margin, if you want to do it that way you must to compensate it in the width to achieve the 100% width intended.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
img {
width: 100%;
margin: 0;
height: 300px;
opacity: 70%;
object-fit: cover;
}
.cont {
position: relative;
text-align: center;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<html>
<body>
<div class="cont">
<img src="https://images2.alphacoders.com/941/thumb-1920-941898.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
</html>
How do I stack images on bg-image exactly like this using html there is a navbar and logo on the BG as well
i tried something like this
// clearfix
.image-stack::after {
content: ' ';
display: table;
clear: both;
}
.image-stack__item--top {
float: left;
width: 66%;
margin-right: -100%;
padding-top: 15%; // arbitrary
position: relative;
z-index: 1;
}
.image-stack__item--bottom {
float: right;
width: 75%;
}
it didnt work as anticipated
enter image description here
There are many ways to approach this.
But first you need to understand
CSS Positioning, CSS Layout (Using Grid / FlexBox / Float, etc ) & CSS BoxModel.
So based on the snippet you posted, I am going with float, but I would have recommended flex as it's powerful and flexible.
Below is what I came up with.
/* USING MOBILE-FIRST APPROACH, I.E DEFINING CSS FOR MOBILE FIRST */
body {
padding: 0;
margin: 0;
font-family: sans-serif;
}
/* Will serve as container */
.image-stack {
position: relative;
}
.image-stack .bg {
position: absolute;
height: 100%;
width: 100%;
/* overlay-color */
background: black;
}
.image-stack .bg>img {
opacity: .75;
width: 100%;
height: 100%;
object-fit: cover;
}
/* will serve as row */
.image-stack .image-stack__item {
position: relative;
padding: 20px 10px;
height: 100%;
}
.col-half {
padding: 0 10px;
position: relative;
height: 100%;
}
.text-format {
color: white;
margin-bottom: 30px;
}
.text-format h1 {
font-size: 3rem;
font-weight: 700;
margin: 5px 0;
}
.img-overlap {
width: 100%;
height: 100%;
object-fit: cover;
}
/* RESPONSIVE CSS FOR BIG DEVICES */
#media screen and (min-width: 768px) {
.image-stack {
background: yellow;
/* height must be set in vh, px, rem, em */
height: 80vh;
margin-bottom: 60px;
}
.col-half {
/* SINCE WE ARE NOT USING `box-sizing: border-box` WE HAVE TO REMOVE THE LEFT AND RIGHT PADDING WE GIVE FROM MOBILE CSS = (20PX) FROM THE WIDTH */
width: calc(50% - 20px);
float: left;
}
.text-format {
margin-bottom: 0px;
}
.img-overlap {
position: absolute;
left: 0;
bottom: -30px;
}
}
<div class="image-stack">
<div class="bg">
<img src="https://picsum.photos/id/1045/1440/400">
</div>
<div class="image-stack__item">
<div class="col-half text-format">
<p>5th Consistent Award Winning Year!</p>
<h1>Modern Design Solutions</h1>
<p>A descriptive paragraph that tells clients how good you are and proves that you are the best choice.</p>
<p>A descriptive paragraph that tells clients how good you are and proves that you are the best choice.</p>
See our Projects
</div>
<div class="col-half">
<img src="https://picsum.photos/id/1008/600/400" class="img-overlap" alt="Overlapping Image" />
</div>
<!-- Notice Break that I used to clear float -->
<br clear="both" />
</div>
</div>
<div style="background: brown">
Other test
</div>
I added comments in the css section to guide you.
CodePen Link => https://jsfiddle.net/d5urpbL2/17/
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'm puzzled by the following problem. I wish to (absolutely) position the baseline of some piece of HTML text at a certain y-coordinate, while the text should be starting at a certain x-coordinate. The following diagram clearly demonstrates the issue.
So I basically want to control where the point (x,y), henceforth called the "basepoint", in the diagram is located on the screen, relative to the top-left corner of the BODY of the document or some DIV. Important: I don't know beforehand what the font-family or font-size of the text is. This is important, because I don't want to change all the positions in my CSS whenever I change fonts.
In the following code, I try to position the basepoint at (200,100), but instead it positions the top-left of the DIV at that point.
<html>
<style>
BODY
{
position: absolute;
margin: 0px;
}
#text
{
position: absolute;
top: 100px;
left: 200px;
font-family: helvetica, arial; /* may vary */
font-size: 80px; /* may vary */
}
</style>
<body>
<div id="text">css=powerful</div>
</body>
</html>
So how should I modify this code? Should I use the vertical-align property of the enclosing DIV? (I tried, but couldn't get the desired result).
Thanks for any useful replies.
Hacky solution based on this blog post.
HTML:
<body>
<div id="text">css=powerful</div>
</body>
CSS:
body {
margin: 0;
}
#text {
font-size: 30px;
line-height: 0px;
margin-left: 100px;
}
#text:after {
content: "";
display: inline-block;
height: 120px;
}
JsFiddle. The basepoint is aligned to (100, 120).
jsFiddle Goofy (and crazy ugly/hacky), but it works.
<body>
<div id="spacer"></div>
<div id="text">
<img src="http://placehold.it/10X100" id="baseline">css=powerful</div>
</body>
...
body {
margin: 0px;
}
#spacer {
float: left;
width: 190px;
height: 100px;
background-color: red;
}
#baseline {
visibility: hidden;
}
#text {
float: left;
background-color: yellow;
font-family: helvetica, arial; /* may vary */
font-size: 60px; /* may vary */
}
Edit
I guess, really, it's all about the image. So you could just simplify and use a transparent spacer gif. Still stupid hacky, I know.
jsFiddle
By default inline-block/inline and text in block are baseline vertical-aligned. Create an pseudo element inside the block you want to move in Y and defining the height of this spacer.
/**
Create a vertical spacer. It will be aligned with the parent's content baseline:
**/
.text::before{
content: "";
/*the Y value:*/
height: 100px;
width: 0px;
display: inline-block;
}
/**
The rest (only for this demo)
**/
body{
font-family: sans-serif;
font-size: 60px;
margin: 0;
}
body::before{
content: "";
display: block;
position: absolute;
top: 100px;
width: 100%;
height: 2px;
margin: -1px 0;
background-color: #00D500;
z-index: 1;
}
body::after{
content: "";
display: block;
position: absolute;
top: 100px;
left: 200px;
height: 8px;
width: 8px;
margin: -4px;
border-radius: 50%;
background-color: #FF0077;
z-index: 1;
}
.text {
margin: 0;
position: absolute;
/*the X value:*/
left: 200px;
}
<p class="text">css=powerful</p>
Try this :
HTML :
<div id="text-holder">
<div id="text-holder-position"></div>
<div id="text">css=powerful</div>
</div>
<div id="heightJudger"></div>
CSS :
BODY
{
position: absolute;
margin: 0px;
}
#text
{
position: relative;
margin-top:-0.938em;
left:0px;
font-family: helvetica, arial;
font-size: 80px;
/*You can remove this*/
background: yellow;
opacity: 0.5;
}
#text-holder
{
position: absolute;
height: 200px;
left: 200px;
}
#text-holder-position {
position: relative;
height: 200px;
width: 200px;
background: green;
}
#heightJudger {
position:absolute;
height:200px; width:200px;
background:red;
top:0; left:0;
}
if you want to change the position, change the "height" and the "left" parameters of the #text-holder
This way you will be able to control your basepoint position.
I put the height judger and some color so you can see if it's what you exepct.
EDIT : Changed the #text margin unit to em.
JSFiddle
The HTML:
<div id="broadcast">
<div id="broadcast_header">
Neighbourhood Broadcast
</div>
</div>
The CSS:
#broadcast_header
{
background-color: #A0522D;
width: 100%;
height: 20px;
position: relative;
top: -20px;
font-weight: bold;
}
Firefox: All fine, header appears 20px above the div, its cool.
IE: Refuses to show div(broadcast_header)!
Overflow: visible
doctype definition: Given
My input: Suppose change top to - top: -5px; It shows the div(header) partially. Thank you :].
try top:-10px,it will show in IE and Firefox
You have to set the height and width css for #broadcast
#broadcast
{
height:200px;
width:200px;
position:relative
}
#broadcast_header
{
background-color: #A0522D;
width: 100%;
height: 20px;
margin-top: -20px;
font-weight: bold;
}