Positioning the <h1> to the position that I want.
Here's what I am trying to do: https://imgur.com/a/D0ief0a
CSS File and HTML File
#import url('https://fonts.googleapis.com/css? family=Montserrat:400,600');
body {
font-family: 'Montserrat';
padding: 0;
margin: 0;
}
.header {
position: relative;
background-color: antiquewhite;
}
.header img {
padding: 1em 2em;
width: 10%;
display: block;
border-radius: 80px;
}
.header h1 {
padding: 1em;
text-align: center;
font-size: 3em;
position: relative;
}
<header>
<div class="header">
<img src="../Welcome/images/123.jpg" alt="">
<h1> A Work In Progress</h1>
</div>
</header>
I tried everything that comes into my mind.
See if it helps :
JSFiddle DEMO
.header img {
padding: 1em 2em;
width: 10%;
border-radius: 80px;
position: fixed;
float: left;
display: inline-block;
}
Added float: left; and position: fixed;, also changed the display to inline-block
I think the best way to do this is use position:fixed:
.header h1 {
text-align: center;
font-size: 3em;
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
This will keep it centered regardless of device coming into your site.
Play the with parameters a bit to get the exact position you want, also you might want to do this to the background aswell.
Related
I am trying to create a footer at the end of this website but for some reason it appears above the products :
And when I change the browser size :
But I want a footer like this :
Here is my code :
HTML :
{% load static %}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="{% static 'main.css' %}">
</head>
<body style="background-color: #36454F;">
{% for i in p%}
<div class='card'>
<div class="number">{{i.Number}}</div>
<img src="{{i.image}}"></img>
<p id="id">{{i.description}}</p>
<a href="{{i.buy}}" target='_blank' rel='noopener noreferrer'>
<button><span class="price"> ${{i.price}}</span> buy</button>
</a>
</div>
{%endfor%}
<div class="footer">
<h3>hello</h3>
</div>
</body>
</html>
CSS :
.card {
max-width: 400px;
margin: 0auto;
text-align: center;
font-family: arial;
border-style: solid;
border-width: 6px;
position: relative;
top: 611px;
margin-bottom: 33px;
margin-right: 33px;
justify-content: center;
float: left;
}
.footer {
position: relative;
height: 130px;
clear: both;
background-color: red;
}
.card img {
height: 400px;
width: 400px;
vertical-align: middle;
}
.price {
background-color: #f44336;
font-size:22px;
border-radius: 3px;
position: absolute;
bottom: 0px;
right: 0px;
padding: 3px;
}
.card button {
border: none;
color: white;
background-color: #000;
position: relative ;
cursor: pointer;
width: 100%;
height: 100px;
font-size: 44px;
align-items: center;
}
.card button:hover {
opacity: .5;
background-color: #330;
}
#id {
background-color: palevioletred;
color: white;
margin: 0;
font-size: 17px;
}
.number {
width: 50px;
height: 50px;
background-color: #330;
color: yellow;
border-radius: 50%;
position: absolute;
top: -22px;
right: -22px;
justify-content: center;
align-items: center;
display: flex;
font-size: 22px;
}
#media (max-width: 1864px) {
.card {
max-width: 300px;
}
.price {
font-size:20px;
}
.card img {
height: 300px;
width: 300px;
}
}
I tried to set a negative bottom property to push it to the end :
.footer {
position: relative;
bottom: -674px;
height: 130px;
clear: both;
background-color: red;
}
But it didn't help. How can i solve the problem?
To set the footer to the bottom of the page, you need to use this CSS:
.footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf; /* Set your own background */
}
If you want it to stay at the bottom of the page and stretch along the bottom, I'd do something like this with the CSS
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: (whatever you want);
color: (color of the text, whatever you want);
text-align: center; /*unless you want the text aligned differently*/
}
Also look up how to use the grid-container if you want the items of the footer in rows like the example you gave.
You need the footer tag to do its job!
Read more about the footer tag here:
https://www.geeksforgeeks.org/html5-footer-tag/
Reference: https://code-boxx.com/keep-html-footers-at-bottom/
The easy ways to keep a footer at the bottom with modern CSS are:
Use footer { position: fixed} or footer { position: sticky } to
keep the at the bottom.
Use a flexbox layout that "stretches" the body section, keep the
footer at the bottom.
body{ display: flex; flex-direction: column; }
main{ flex-grow: 1; }
Lastly, use a grid layout to achieve the same "stretch body
section".
<header>HEAD</header> <main>MAIN</main> <footer>FOOT</footer>
html, body { height: 100%;}
body { disply: grid; grid-template-rows: auto 1fr auto; }
My content div that overlaps the header div in my CSS code as per the attached image. Both the content and side-nav divs should be below the header section.
I tried changing the value of position property for the elements but it doesn't work. I also tried introducing top property to the content section to be as same as the side nav but it didn't work too
body {
font-family: "Lato", sans-serif;
font-size: 1.6rem;
line-height: 1.7;
font-weight: 400;
color: #777;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: orangered;
margin: 0;
max-width: 100%;
width: 100%;
}
#media only screen and (max-width: 75em) {
.container {
margin: 0;
max-width: 100%;
width: 100%;
}
}
.header {
font-size: 1.4rem;
height: 8vh;
background-color: #3394e3;
border-bottom: var(--line);
top: 0px;
position: fixed;
width: 100%;
/*
display: flex;
justify-content: space-between;
align-items: center;*/
}
.side-nav {
position: fixed;
margin: 0px auto;
height: 100%;
float: left;
top: 8vh;
clear: both;
background-color: #fff;
bottom: 0;
}
.content {
background-color: #f4f4f4;
min-height: 93vh;
width: 85%;
float: right;
}
.footer {
background-color: green;
height: 7vh;
width: 85%;
float: right;
color: red;
}
<div class="container">
<div class="header-fixed">
<header class="header">
</header>
</div>
<nav class="side-nav">
</nav>
<main class="content">
</main>
<footer class="footer">Footer</footer>
</div>
Your .header has a position:fixed which takes it out of the normal flow of a webpage. So since it is taken out (essentially placed on a different layer of the page flow), your content is relatively positioned in the normal flow. As the .header is taken out of the flow, the .content is technically the first item in the flow of the page now.
So you will just need to give the .content a margin-top that is equivalent to the height of your .header.
Your .sidebar also has a position:fixed, so it's on a different layer, so it doesn't care about where it is placed in relation to the .header. So that's why you had to manually position it and give it a top:8vh to put it 8vh down from the top of the window.
For some reason instead of only being able to click the links by clicking on the text, you can also click below it on empty space.
My friend said I had to reduce div size but I'm not quite sure on what he meant.
#video {
position: fixed;
right: 0;
bottom: 0;
min-height: 100%;
min-width: 100%;
}
#devil,
#steam,
#youtube {
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
#steam,
#youtube {
text-decoration: none;
font-family: cursive;
font-style: oblique;
}
#devil {
border-radius: 120px;
top: 250px;
right: 20px;
}
#steam {
top: 280px;
left: 10px;
}
#youtube {
top: 50px;
left: 115px;
}
a:link,
a:visited {
color: forestgreen;
}
<div>
<img id="devil" src="img/frizzy.jpg">
</div>
<div>
<a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
<a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>
Your problem is probably in here:
#devil,
#steam,
#youtube {
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
You shouldn't need to set the height or width for your links, since they will be automatically set based on the text. You can use something like firefox tools to look at the bounding block of your links and see what's giving them the big space to click. You can even mess with the parameters here to suit your liking.
In your css, you specify height: 230px; for your element that holds the link. Decrease this size to remove the blank space that also responds to your mouse.
As suggested, use a border or background color to help indicate where your elements are, or use the development console (F12 in Chrome) to find your element sizes.
Instead of setting height to links you should set font-size for them and if this didn’t help set line-height same as font-size value.
You are getting a height on your anchors because you are applying a height to them (you should remove this). Also, I wouldn't use absolute or relative positioning for this as you do not need it. I would envelope your image and your social links in their own containers and position them. Here is an example of what I am talking about.
.container {
margin-top: 20px;
}
#video {
position: fixed;
right: 0;
bottom: 0;
min-height: 100%;
min-width: 100%;
}
.social_container {
margin: 0px auto;
padding: 10px;
width: 200px;
}
#steam,
#youtube {
margin: 0px auto;
width: 80px;
display: inline-block;
text-decoration: none;
font-family: cursive;
font-style: oblique;
text-align: center;
}
#devil {
border-radius: 120px;
display: block;
margin-left: auto;
margin-right: auto;
height: 230px;
width: 230px;
position: relative;
}
a:link,
a:visited {
color: forestgreen;
}
<div class="container">
<img id="devil" src="img/frizzy.jpg">
</div>
<div class="social_container">
<a id="steam" href="https://steamcommunity.com/id/impenetrable" target="_blank">steam</a>
<a id="youtube" href="https://www.youtube.com/c/ItsFrizzy" target="_blank">youtube</a>
</div>
I have been trying to solve this problem where I want the text "Sample" and then I want texts "bla1" and "bla2" to the right of text "Sample". I also want them to stay together when someone scales up and down their browser. So 100% and 200% zoom on any browser should not change the relative positioning of the texts. Any help is much appreciated! If javascript can solve the problem, I'll use javascript.
This photo explains what I want
See the code here: https://codepen.io/anon/pen/KZBzmY#anon-login
HTML:
<div id="tophead">
<a href="index.html">
<h1 class="webHeader">Sample</h1>
<h1 class="webHeader2">bla1</h1>
<h1 class="webHeader3">bla2</h1>
</a>
</div>
CSS:
#tophead {
margin: 0px;
padding: 0px;
border: 2px solid black;
position: absolute;
left: 40%;
font-family: Arial;
color: #00284d;
}
#tophead h1 {
margin: -2px;
}
#tophead a:link {
text-decoration: none;
color: #00284d;
}
.webHeader {
top: -50%;
left: -20%;
font-size: 180%;
position: relative;
}
.webHeader2 {
text-align: right;
font-size: 100%;
position: relative;
}
.webHeader3 {
text-align: right;
font-size: 90%;
position: relative;
}
I will suggest you to wrap the bla1 and bla2 text in <h2> and then use display: inline-block. No need to use position: absolute
Updated Codepen
#tophead {
margin: 0px;
padding: 0px;
font-family: Arial;
color: #00284d;
text-align: center;
}
#tophead h1 {
margin: 0;
display: inline-block;
vertical-align: middle;
}
#tophead a:link {
text-decoration: none;
color: #00284d;
display: inline-block;
border: 2px solid #000;
}
.webHeader2 {
display: inline-block;
margin: 0;
vertical-align: middle;
margin-left: 20px;
}
.webHeader2 span {
display: block;
}
.small {
font-size: 90%;
}
<div id="tophead">
<a href="index.html">
<h1 class="webHeader">Sample</h1>
<h2 class="webHeader2">
<span>bla1</span>
<span class="small">bla2</span>
</h2>
</a>
</div>
I'm trying to show off the best hairstyles that I've done on a web site.
When you hover over the images, it gives a little information about each of the styles. The hover works fine and shows up, but even though I have the height set as 100% on the information div, it only takes up enough space needed for the text. I'm using display: table to get the text centered vertically "on the image". When I change it to display block, it works fine, but the vertical centering is a must. This is extremely annoying & after 2 hours of fiddling with it I simply cannot get it to work. Please help! http://jarahairandmakeup.tumblr.com/
div.post {
width: 50%;
height: auto;
position: relative;
float: left;
}
div.information {
display: table;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.65);
text-align: center;
z-index: 2;
opacity: 0;
}
div.post:hover .information { opacity: 1 !important; }
div.info {
color: #fff;
display: table-cell;
vertical-align: middle;
font: 11px/1.4 'Gudea';
letter-spacing: .3em;
text-transform: uppercase;
padding: 0 5%;
}
div.info h3 {
font: 100 20px/1 'Gudea';
margin: 0; padding: 0;
letter-spacing: 6px;
}
div.info hr { color: #fff; background: #fff; margin: 20px auto;}
div.image {
float: left;
position: relative;
z-index: 1;
}
div.image img.hairstyle {
width: 100%;
height: 100%;
display: block;
}
<div class="post">
<a href="/ciara">
<div class="information">
<div class="info">
<h3>CURLED UPDO</h3>
<hr />
A romantic style updo with braided accents for prom
</div>
</div>
<div class="image">
<img src="http://static.tumblr.com/ww0u3rz/BRjn5dotq/img_0919.jpg" class="hairstyle">
</div>
</a>
</div>
I'd like to make it so the black background of the information div takes up the entire length of the photo.
use display:block instead of table.
Edit:
Just wrap the info div with a wrapper and have the following css:
display: table;
position: absolute;
height: 100%;
width: 100%;
it works fine: http://cloud.kerim.me/image/2p3W1x011m0I