I'm with a problem that i trying solve: i'm making a website, and i was going put the final part of the site, using a div, but this part can't stay glued in the bottom, no matters the code editing that i make
follow my site code below:
#font-face {
font-family: Open-Sauce-One;
src: url("OpenSauceOne-Bold.ttf") format("truetype");
}
#font-face {
font-family: Archivo-Black;
src: url("ArchivoBlack-Regular.ttf") format("truetype");
}
body {
display: flex;
background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(153, 153, 153));
height: 100vh;
}
div.Idrv2v {
position: relative;
left: 5%;
bottom: 15px;
width: 250px;
}
div.Edrv1v {
position: absolute;
background-color: #B4ADAD;
max-width: 100%;
width: 1366px;
height: 95px;
padding: 1px;
top: 0px;
left: 0px;
right: 0px;
}
#titlelogo {
font-family: Open-Sauce-One, "Comic Sans MS", sans-serif;
font-size: 35px;
color: #301111;
}
#subtitlelogo {
font-family: Archivo-Black, "Arial Black", sans-serif;
font-size: 18px;
position: relative;
bottom: 28px;
color: #302e2e;
}
.svgmenu_dev {
background-color: gray;
width: 1366px;
max-width: 100%;
position: absolute;
height: 90px;
bottom: 0;
right: 0px;
left: 0px
}
.svgmenu_dev #svgmenudev1 #svgmenudev2 {
font-family: Open-Sauce-One, "Comic Sans MS", sans-serif;
font-size: 10px;
position: absolute;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>CoinCot</title>
<link href="css-data/styles.css" rel="stylesheet">
<meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
<div class="Edrv1v">
<div class="Idrv2v">
<h1 id="titlelogo"> CoinCot.com </h1>
<h2 id="subtitlelogo">A simple and efficient quotes website.</h2>
</div>
</div>
<div class="svgmenu_dev">
Menu Icon by Alex Martynov
</div>
</body>
</html>
I wait can solve this
I tryed change the position of the div, set the position as absolute, but not works, i too set the position as relative, it got worse, becuase that the div has sttoped on the top of page (and its need stays in bottom), i'm sets the values of bottom, left and right as 0 pixels, but nothing, continues hover the bottom part.
set "box-sizing: border-box" to " div.Edrv1v "
Related
I have a problem with the z-index. I have simulated my problem in this jsfiddle . I have two siblings div inside a container. one of them works as a background of the container and has a hover effect on its elements so when you hover on its elements , the color of the elements changes. to place it behinde the second div I used a negative z-index , but the hover effect doesn't work on it. any solutions to this proplem? I have seen some questions about this subject but without any valid answer...
Thanks in advance.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.container {
width: 1000px;
height: 600px;
position: relative;
}
.div1 {
position: absolute;
z-index: -10;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: lightgreen;
}
.div2 {
width: 200px;
height: 200px;
background-color: rgb(245, 189, 116);
margin: 0 auto;
}
.div1 p:hover {
color: red;
}
.div2 p:hover {
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="div1"><p>div 1 doesn't work</p></div>
<div class="div2"><p>div 2 works</p></div>
</div>
</body>
</html>
See the edits I made to your CSS. It will work better if you set div1 with the background limegreen as z-index: 0; which is the default layer for elements and use z-index: 1; for div2 so it's on the first layer above the default one. See below.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.container {
width: 1000px;
height: 600px;
position: relative;
}
.div1 {
position: absolute;
z-index: 0;
top:0;
left: 0;
bottom: 0;
right: 0;
background-color: lightgreen;
}
.div2 {
position: relative;
width: 200px;
height: 200px;
background-color: rgb(245, 189, 116);
margin: 0 auto;
z-index: 1;
}
.div1 > p:hover{
color: red;
}
.div2 > p:hover{
color: red;
}
<div class="container">
<div class="div1"><p>div 1 works now</p></div>
<div class="div2"><p>div 2 works</p></div>
</div>
From your code, you are hovering over the container div, not the div1.
Z-index see as elevations in a building, and you watching it from birdseye.
To solve this, you should set both div1/div2 with positive z-index, and changing div2's position relative to parent div.
Get more information about div positioning:
https://tomelliott.com/html-css/css-position-child-div-parent
Edit: Here's a quick example simulating your desired hover effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
text-decoration: none;
font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
}
.grandparent {
width: 250px;
height: 250px;
background-color: lightgreen;
position: relative;
}
.parent {
width: 150px;
height: 150px;
/*position:absolute;*/
bottom: 0px;
}
.child {
width: 70px;
height: 70px;
background-color: rgb(245, 189, 116);
position: absolute;
right: 0px;
top: 0px;
}
.parent p:hover {
color: red;
}
.child p:hover {
color: red;
}
</style>
</head>
<body>
<div class="grandparent">
<div class="parent">
<p>div 1 does work now</p>
<div class="child"><p>div 2 works</p></div>
</div>
</div>
</body>
</html>
This question already has answers here:
How to position text over an image with CSS
(8 answers)
Closed 3 years ago.
I have to remake a page for my web design class. I've got the rest done, but how do I add a white box over an image and position the text so that it's within the box? Like where it says "adventures off the beaten path" or "hiking" or "camping." Should I be using a div?
Basically, how do I make it look like this:
<div class="white_box">
<img src="img/banner image.png">
<h2>ADVENTURES OFF THE BEATEN PATH</h2>
<p>It's time to explore your path. Where will you go?</p>
</div>
<h3>POPULAR ARTICLES</h3>
<div class="red_box"></div>
<div class="hiking">
<img src="img/hiking trail image.png" alt="trail" title="trail">
<h4>HIKING</h4>
<p>Trek along the edges of a glacier, through wildflower-filled valleys, meandering streams, and admire the turquoise blue glacier-fed lakes. This is hiking in the Rockies where there are countless places to roam and an endless tangle of trails.</p>
</div>
<div class="camping">
<img src="img/tent image.png" alt="tent" title="tent">
<h4>CAMPING</h4>
<p>There’s nothing quite like camping among stunning ancient mountain tops and feeling like you’re one with nature. Take a ride through breathtaking blue lakes, go for quiet walks in the forest, or go bird watching to truly get away from it all.</p>
</div>
.white_box {
width: 430px;
height: 200px;
}
h2 {
font-size: 48px;
font-family: 'Fjalla One', sans-serif;
color: rgb(60 61 64);
}
p {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
color: rgb(60 61 64);
}
.red_box {
background-color: rgb(134, 25, 25);
width: 640px;
height: 12px;
margin-left: 10px;
}
h4 {
font-size: 24px;
font-family: 'Fjalla One', sans-serif;
color: rgb(60 61 64);
}
Try this code. You can use the grid structure for the second section. Here is your solution. You use the main div height and width as per your requirement.
CSS:
.white_box {
width: 500px;
height: 500px;
position: relative;
}
.image_div {
width: 100%;
height: 100%;
}
.image_div img {
max-width: 100%;
max-height: 100%;
min-width: 100%;
object-fit: cover;
}
.content_div {
position: absolute;
background-color: #fff;
bottom: 10px;
left: 30px;
right: 30px;
padding: 10px;
}
.red_box {
background-color: rgb(134, 25, 25);
width: 640px;
height: 12px;
}
p {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
color: rgb(60 61 64);
}
h2 {
font-size: 30px;
font-family: 'Fjalla One', sans-serif;
color: rgb(60 61 64);
}
h3{
margin-bottom: 0;
}
h4 {
font-size: 24px;
font-family: 'Fjalla One', sans-serif;
color: rgb(60 61 64);
}
HTML:
<div class="white_box">
<div class="image_div">
<img src="download.jpg">
</div>
<div class="content_div">
<h2>ADVENTURES OFF THE BEATEN PATH</h2>
<p>It's time to explore your path. Where will you go?</p>
</div>
</div>
<h3>POPULAR ARTICLES</h3>
<div class="red_box"></div>
<div class="hiking">
<img src="images.jpg" alt="trail" title="trail">
<h4>HIKING</h4>
<p>Trek along the edges of a glacier, through wildflower-filled valleys, meandering streams, and admire the turquoise blue glacier-fed lakes. This is hiking in the Rockies where there are countless places to roam and an endless tangle of trails.</p>
</div>
<div class="camping">
<img src="images.jpg" alt="tent" title="tent">
<h4>CAMPING</h4>
<p>There’s nothing quite like camping among stunning ancient mountain tops and feeling like you’re one with nature. Take a ride through breathtaking blue lakes, go for quiet walks in the forest, or go bird watching to truly get away from it all.</p>
</div>
Should I be using a <div>?
Yes. By using a <div> element, this will allow you to have an extremely high level of control over all of the individual elements that you want to work with (e.g. your image, your message box, etc.)
The Background
A common approach would be to use CSS along with a <div> as your image via the background property with something like this along with several other properties that govern size, positioning, and more:
.pretty-background {
/* Settings for your image */
background: url('yourimage.png');
background-size: cover;
background-position: center;
/* Size info */
height: 400px;
width: 100%;
/* Positioning (important as it dictates how child elements will be positioned) */
position: relative;
}
.pretty-background {
/* Settings for your image */
background: url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
background-size: cover;
background-position: center;
/* Size info */
height: 400px;
width: 100%;
/* Positioning (this is important as it dictates how child elements will be positioned */
position: relative;
}
<div class='pretty-background'>
</div>
Next, you need to focus on your standout box and how it is positioned, which can be either absolute or relative, and function as they sound (e.g. this element appears x pixels from the right, or this element appears at this specific spot).
The Inner Box
Again, you'll add another child <div> element for this box that will be positioned relative to the bottom-left of your previous background:
.standout-box {
/* Box color */
background: #FFF;
/* Size info */
height: 100px;
width: 300px;
/* Spacing from parent */
margin: 20px;
padding: 10px;
/* Positioning (appear 0px from lower left corner, spacing provided by margin) */
position: absolute;
left: 0;
bottom: 0;
}
.pretty-background {
background: url('https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500');
background-size: cover;
background-position: center;
height: 400px;
width: 100%;
position: relative;
}
.standout-box {
/* Box color */
background: #FFF;
/* Size info */
height: 100px;
width: 300px;
/* Spacing from parent */
margin: 20px;
padding: 10px;
/* Positioning (appear 0px from lower left corner, spacing provided by margin) */
position: absolute;
left: 0;
bottom: 0;
}
<div class='pretty-background'>
<div class='standout-box'>
<b>This is a test</b>
<p>
Here is some more content
</p>
</div>
</div>
That's it! It's really just those two <div> elements working in conjunction:
<div class='pretty-background'>
<div class='standout-box'>
<b>This is a test</b>
<p>
Here is some more content
</p>
</div>
</div>
At this point, you should have a reasonable starting point to adjust your positioning, the sizes of your boxes, etc.
Try this code:
.white_box {
background-image: url(your image path);
height: 65vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
.white_box_text{
padding: 15px;
width: 350px;
background-color: #fff;
position: absolute;
bottom: 25px;
left: 25px;
}
h3{
margin-top: 20px;
font-size: 40px;
margin-left: 10px;
}
h2 {
font-size: 42px;
font-family: 'Fjalla One', sans-serif;
color: rgb(60 61 64);
}
p {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
color: rgb(60 61 64);
}
.red_box {
background-color: rgb(134, 25, 25);
width: 640px;
height: 12px;
margin-left: 10px;
}
h4 {
font-size: 24px;
font-family: 'Fjalla One', sans-serif;
color: rgb(60 61 64);
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="white_box">
<div class="white_box_text">
<h2>ADVENTURES OFF THE BEATEN PATH</h2>
<p>It's time to explore your path. Where will you go?</p>
</div>
</div>
<h3>POPULAR ARTICLES</h3>
<div class="red_box"></div>
</body>
</html>
I'm trying to center a headline for a webinar signup page.
Here is what it's doing:
It's sliding off the left side...
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Sat, 21 Nov 2015 22:11:09 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text.css" href="style.css">
<title>Event Lander</title>
</head>
<body>
<div class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
</body>
</html>
And here is my CSS:
*{
margin:0px;
}
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
line-height: 1.2;
text-align: center;
position: absolute;
left: -55.656px;
top: 39.867px;
width: 682px;
height: 48px;
z-index: 4;
align:center;
display:inline;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
height: 143px;
margin: 0px;
width: 100%;
text-align: center;
}
I've tried adding the inline markup to the html as well as adding different text-aligns multiple times to both css classes.
I want it to fill the width of the browser, no margin, and with the white text in the center of the page with the classes defined.
Can anyone help? Thanks!
HTML
<div class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
CSS
* {
margin:0px;
}
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
text-align: center;
line-height: 143px;
}
This center aligns your whiteheadline horizontally and vertically
Live Demo
Let me know if there is anything else I can do. If this doesn't work for you, I will revise it :)
* {
margin: 0px;
}
.whiteheadline {
font-size: 48px;
font-family: "Open Sans";
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
width:100%;
}
.header-rectangle {
background-color: rgb(104, 115, 251);
margin: 0px;
width: 100%;
text-align: center;
width:100%;
padding-top:20px;
padding-bottom:20px;
}
<div class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</div>
<link rel="stylesheet" type="text.css" href="style.css">
Use type="text/css" not type="text.css" or delete it all together because it's no longer needed.
The changes are annotated on the CSS. Basically you need to put your absolute positioned title inside a relative positioned header. That way when you apply left, right, bottom, and/or top positions, it'll be in relation to your header and not the whole page.
DEMO
CSS
html, body {
box-sizing: border-box;
font: 400 16px/1.5'Open Sans';
/* 100% of viewport width and height */
height: 100vh;
width: 100vw;
}
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0;
}
.wrap {
width: 100%;
height: auto;
margin: auto;
}
.whiteheadline {
font-size: 3em;
color: rgb(255, 255, 255);
font-weight: bold;
text-align: center;
position: absolute;
/* 50% of container (i.e. header) then subtract 50% of your title width (580px/2) */
left: calc(50% - 290px);
top: 39.867px;
width: 580px;
height: 48px;
z-index: 4;
/*align:center;<<<Not HTML5*/
/*display:inline;*/
}
.header-rectangle {
background-color: rgb(104, 115, 251);
height: 143px;
margin: 0px;
width: 100%;
text-align: center;
/* If using position: absolute, make the container (i.e. header) position: relative */
position: relative;
}
HTML
<div class="wrap">
<header class="header-rectangle">
<h1 class="whiteheadline">Join Us for a Free Webinar!</h1>
</header>
</div>
I am having trouble with finding my link. When I open up my html and css in the file, I cannot visibly see it (I believe it is stuck under my div, even though the z-index is higher?) I am not entirely sure why, any help would be greatly appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="Stylesheet" href="Stylesheet.css" />
<title>Derpycats.com</title>
</head>
<body>
<!--Background (Carbon Fibre)-->
<body background="background.jpg" alt="Background" />
<!--Header-->
<h1 id="header">DerpyCats.com</h1>
<div id="headerdiv"></div>
<!---Links-->
Home
</body>
</html>
CSS:
/* Sets the pixel density to "fill browser" */
* {
width: 100%;
height: 100%;
}
/* Heading */
#header {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #D9411E;
z-index: 2;
position: fixed;
font-size: 50px;
bottom: -50px;
}
/* CSS for the heading div */
#headerdiv {
border-radius: 5px;
z-index: 1;
position: fixed;
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}
/* Css for the links */
a {
z-index: 3;
font-family: Verdana, sans-serif;
}
/* CSS for the normal paragraphs */
.paragraph {
color: white;
font-family: Courier, serif;
}
P.S. I don't believe this matters, but I am on OSX using sublime text 2.
I didnt understand what are you trying to do but, #headerdiv overlays your link.
You can give z-index = -1 value to your #headerdiv to send it back.
little Change in css will work here
#headerdiv {
border-radius: 5px;
z-index: 1;
/*position: fixed; this is creating problem*/
width: 99%;
margin-top: -20px;
height: 100px;
background-color: white;
margin-bottom: 10px;
}
I've been trying to center text and put more text in the same line right next to it, while keeping the whole thing centered on the first text and not the whole line. Is there an easy way to do this?
All the solutions that I tried so far were either centering on the whole line or failed to put everything on the same line. Of course I also searched through stackoverflow but could not find a solution.
I've made this as a mockup: http://jsfiddle.net/mzqC5/
The way it should behave is that the alignment is centered on "A" and not the whole line. I'd appreciate any help with it since I've been trying to solve this for a good time now.
Thank you very much.
<div class="centered">A<div class="subtext">[24]</div>
.centered {
font-family: Meiryo, sans-serif;
font-size: 75px;
text-align: center;
color: black;
background-color: cornflowerblue;
max-width: 175px;
margin: 0 auto;
}
.subtext {
font-family: Arial;
font-size: 24px;
display: inline-block;
}
One way to achieve this is to absolutely position [24] with the relatively-positioned A.
.centered {
font-family: Meiryo, sans-serif;
font-size: 75px;
text-align: center;
color: black;
background-color: cornflowerblue;
max-width: 175px;
margin: 0 auto;
position: relative;
}
.subtext {
font-family: Arial;
font-size: 24px;
display: inline-block;
position: absolute;
bottom: 24px;
}
Because the element is absolutely-positioned it is not in the document-flow and doesn't affect the text-alignment.
You can adjust bottom to move it higher up.
You could set it up like this (red line added just to demonstrate page center):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {
text-align: center;
height: 100%;
}
span {
position: relative;
}
b {
position: absolute;
left: 100%;
font-weight: normal;
}
html, body {height: 100%;}
body {padding: 0; margin: 0;}
div::after {content: ''; height: 100%; width: 2px; background: red; left: 50%; margin-left: -1px; position:absolute;}
</style>
</head>
<body>
<div>
<span>
A
<b>[24]</b>
</span>
</div>
</body>
</html>