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>
Related
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 "
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>
when trying to add a <div> inside another it results in the main container to be pushed down and equal amount to the added <div>. I can fix the issue by setting the position of the added to absolute but I am trying to understand which attribute is causing this behavior.
https://imgur.com/t9Q0ocm
for example Adding the red <div> inside the purple <div> caused the purple <div> to be pushed down
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Blue</title>
</head>
<body>
<aside class="side-menu"></aside>
<main class="main-content">
<div class="c-content">
<div class="c-content-text">
</div>
</div>
<div class="r-content">
<div class="r-content-text">
</div>
</div>
<div class="video-container"></div>
</main>
</body>
</html>
CSS
html {
font-family: Roboto, san serif;
font-size: 16px;
font-weight: normal;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
h1 {
font-size: 3.125rem;
line-height: 3.6875rem;
text-transform: uppercase;
color: #ffffff;
}
p {
font-size: 1rem;
font-family: Roboto;
color: #ffffff;
font-size: 16px;
line-height: 24px;
}
body {
background-color: #1458e4;
font-size: 0;
margin: 0;
padding: 0;
}
.side-menu {
width: 5%;
height: 100vh;
/* background-color: coral; */
position: sticky;
display: inline-block;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.main-content {
background-color: cyan;
display: inline-block;
width: 95%;
}
.c-content {
background-color: rgb(184, 11, 184);
border-right: 1px solid rgba(255, 255, 255, 0.2);
display: inline-block;
width: 67%;
height: 100vh;
}
.r-content {
display: inline-block;
background-color: darkkhaki;
width: 33%;
height: 100vh;
padding: 25.4375rem 4.6875rem 19.1875rem 3.375rem;
}
.video-container {
background-color: lemonchiffon;
height: 68vh;
}
.c-content-text {
display: inline-block;
/* position: absolute; */
background-color: tomato;
width: 500px;
height: 500px;
}
.r-content-text {
background-color: turquoise;
width: 500px;
height: 500px;
}```
Remove display: inline-block in class c-content-text should also solved your issue.
I think this thread answer's your question Inline-block element height issue
AFAIK, the inline-block has relation with font-size and line-height, and you set the body to 0px, which makes lots of the issues hard to describe. E.g. Try to remove the font-size: 0px; from the body. And no matter you remove ('inline' or add absolute), the behavior is the same. Althought the page is still looks not good.
Last, i would suggest you to try the grid layout for your layout design, your scenario should be easy to implement with grid layout.
Here's what it currently looks like:
What's supposed to be the header is currently transparent over the body image. I'm trying to get it to sit behind where it says "NEWS" at the top. The header image is currently inserted with <img src="https://i.imgur.com/wLTnUyF.png"> and I don't know what to add to reposition it.
(I can also add additional details if this isn't enough to get the answer I'm looking for.)
Edit: Here's the whole code: PASTEBIN
* {
background: transparent;
border: none;
margin: 0;
padding: 0;
}
.gr1,
.gr2,
.gr3,
.gr-top .tri,
.gr-top .gr h2 img,
.gr-top .gr span {
display: none;
}
.gr-top .gr {
padding-left: 0 !important;
}
/* body { background-image: url('https://i.imgur.com/iYr6KIy.png'); background-repeat: no-repeat; background-size: 950px 540px; } */
h3 {
font-size: 25px;
text-align: center;
color: #c8b46e;
background-repeat: no-repeat;
background-size: 400px;
background-position: center center;
padding: 20px;
background-image: url("https://i.imgur.com/RbBgBbv.png");
}
.scrollbox {
height: 360px;
width: 420px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.scrollbox2 {
height: 100px;
width: 360px;
overflow: auto;
padding: 20px;
font-family: Ubuntu;
font-size: medium;
color: #aaa89e;
background: transparent;
}
.gr-body .gr .grf-indent .text {
max-width: 500px;
}
.gr-body .gr .grf-indent .bottom {
position: relative;
bottom: 160px;
left: 10px;
color: #fff;
}
.gr-body .gr .grf-indent .bottom a {
color: #fff;
}
.gr-body .gr .grf-indent .bottom a:hover {
color: #c8b46e;
}
a:hover {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
body {
cursor: url(https://i.imgur.com/dg8PzHg.png), pointer;
}
.container {
position: relative;
}
.bottomleft {
position: relative;
top: 60px;
left: 10px;
font-size: 18px;
}
.topright {
position: relative;
bottom: 444px;
left: 510px;
font-size: 18px;
}
.top {
position: absolute;
top: 0px;
width: 500px;
}
img.back {
margin-top: 70px;
width: 940px;
height: 540px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='wrap'>
<h3>NEWS</h3>
<img class="top" src="https://i.imgur.com/wLTnUyF.png">
<img class="back" src="https://i.imgur.com/iYr6KIy.png">
</div>
</body>
</html>
I am not sure what you are trying to do. But if you are trying to add an image to the header, you should do:
<!DOCTYPE html>
<html>
<header>
<img src="https://i.imgur.com/wLTnUyF.png">
</header>
<body>
<img src="bodyimage.png">
</body>
</html>
If that doesn't work, remember to actually download the image and upload it into your workspace.
I ended up figuring up a way to get the results I wanted.
What I did is I added a background specifically to .gr-top .gr h2 and then change the alignment on the text.
Now my journal skin looks like this ; Updated Preview
.gr-top .gr h2{
text-align: right;
background-repeat: no-repeat;
background-position: left left;
padding: 33px;
background-size: 600px;
background-image: url("https://i.imgur.com/wLTnUyF.png");
}
Sorry for the bad phrasing on the question. I'll try to be clearer next time.
#header {
z-index: 1;
width: 100%;
padding: 8px 0px 8px 0px;
background-image: url('img/head-img.png');
background-repeat: repeat;
}
#nav {
z-index: 1;
margin: 0px auto;
text-align: center;
font-size: 25px;
}
#nav a {
color: white;
text-decoration: none;
padding-right: 10px;
font-family: fantasy;
}
#nav a:hover {
color: black;
text-decoration: underline overline;
}
#dlogo {
position: absolute;
/* background-color: #feffe3; */
z-index: -1;
width: 100%;
height: 100%;
}
#dtext {
position: absolute;
z-index: -1;
margin: 0px auto;
width: 100%;
height: 100%;
}
#blogo {
display: block;
margin-top: 12%;
margin-left: auto;
margin-right: auto;
}
#btext {
margin-top: 55px;
margin-left: 40%;
}
#wrapper {
}
#content {
margin: 0px auto;
margin-top: 60px;
min-width: 600px;
max-width: 1000px;
font-size: 22px;
font-family: sans-serif;
}
#content h1, h2 {
color: orange;
font-family: serif;
}
#content a {
color: black;
text-decoration: none;
}
#content a:hover {
color: red;
}
#footer {
z-index: 1;
width: 100%;
height: 200px;
background-color: #1d726d;
margin-top: 40%;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title></title>
</head>
<body>
<div id="dlogo">
<img id="blogo" src="img/back-img2.png" />
</div>
<div id="dtext">
<img id="btext" src="img/f-it2.png" />
</div>
<div id="header">
<div id="nav">
Home
About Us
Solutions
Success Stories
Contracts
Careers
Contact Us
</div>
</div>
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="footer">
</div>
</body>
</html>
If you look closely you will see that the black nav bar / header will not stretch all the way from side to side.
It seems like a 10px margin has been applied to the whole website.
How do I get rid of the "margin" that I never applied, but does not happen to any other website.
I am using netbeans, chrome, and xampp.
You should use a reset stylesheet to reset the default rules that browsers add to webpages. Eric Meyer's and YUI's reset stylesheets are good for most webpages. Personally, I use Eric Meyer's for my webpages. Make sure to place the reset stylesheet before any other stylesheets.
Can't you just do this?
html {
padding:0px;
margin:0px;
}
Or am I missing the point here? Not very many details were given, if you could elaborate? It helps. :D
Also, giving your div a negative margin value is what I do sometimes.