The following code snippet shows my wished position for my headline in the footer.
* {
box-sizing: border-box;
}
/*HEADER*/
.header{
overflow: hidden;
height: 91px;
background-color: #000000;
width: 100%;
}
.header a {
color: #34E034;
text-decoration: none;
}
.header a.logo {
font-family: Wiz;
font-size: 55px;
font-weight: bold;
}
html, body {
margin:0;
padding:0;
}
<div class = "header">
<div class="header-row">
<div class="left-main-header">
<div class="header-box">
<div class="new-header">Techwizards</div>
<a class="logo"><b>Techwizards</b></a>
</div>
</div>
</div>
</div>
If I now wanna add a font style for the headline. This one:
#font-face {
src: url("fonts/MagicSchoolTwo.ttf");
font-family: wiz;
}
I don't have margin to the bottom like in this picture.
I tried everything - margin, padding but I don't get the space to the bottom. How can I fix that?
Fixed Your Code:
You had an absolute height on your header. Then an "a" tag can't have a margin on default, you have to set it on display block to render the margin. I also added display flex to your header as suggested in the comments.
Codepen
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
/*HEADER*/
.header {
background-color: #000000;
width: 100%;
display: flex;
}
.header a {
color: #34e034;
text-decoration: none;
}
.header a.logo {
font-family: Wiz;
font-size: 55px;
font-weight: bold;
display: block;
margin-bottom: 40px;
}
<div class="header">
<div class="header-row">
<div class="left-main-header">
<div class="header-box">
<div class="new-header">Techwizards</div>
<a class="logo"><b>Techwizards</b></a>
</div>
</div>
</div>
</div>
Related
So far, I have managed to get my footer to always stick to the bottom, however, I have been struggling to get the content or images on my webpage to push the footer down. I have been trying absolute, fixed, relative positions for the footer but to no avail as the content in the class "container2" continues to go under the footer. It also shouldn't be sticky footer similar to the nav bar but like a natural footer where it is pushed down by content.
HTML/CSS: https://jsfiddle.net/jof0hzhc/2/
HTML
<!DOCTYPE html>
<html lang="en" class="app">
<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>ResponsiveNav</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body class="bg2">
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
ResponsiveNav
</div>
<div class="menu">
<ul>
<li>Home</li> <!--Classifying the button as "activepage" will allow the button to be red when the user is on the page.-->
<li>Current page</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<section class="content">
<p class="apphead">Heading</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container2">
<p class="apptext">Sub-heading</p>
<div class="games">
<img src="images/1.png">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
<br><br><br><br><br><br><br><br>
</div>
</section>
</div>
<footer>
<p class="foot">
Footer text. <br>
__________________________________________________________________________________________________ <br> <br>
About us
|
Contact us <br>
__________________________________________________________________________________________________
<section>
<p class="foot">Social Media</p>
<span class="social">
<img src="images/mail.png" alt="Mail" width="50px" height="50px"/>
<img src="images/facebook.png" alt="Facebook" width="50px" height="50px"/>
<img src="images/twitter.png" alt="Twitter" width="50px" height="50px"/>
</span>
</section>
<section>
<h3>All rights reserved<br></h3>
</section>
</p>
</footer>
</body>
</html>
CSS
html, body {
margin: 0;
padding: 0;
width: 98%;
background-color: black;
min-height: 100%;
}
body {
font-family: "Helvetica Neue",sans-serif; /*Keep this font or hamburger disappears*/
font-weight: lighter;
}
header {
width: 98%;
height: 13vh;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
footer { /*How do I even make the footer always stick at the very bottom no wonder the dimensions of the browser?*/
width:100%;
position:absolute;
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
p {
color: black;
position: relative;
margin: 5px;
padding: 10px;
}
a { /*General styling for links to other pages or websites*/
text-decoration:none;
position:relative;
font-family: Trebuchet MS, sans-serif;
}
h2 { /*Styling for site title*/
font-size: 50px;
text-align:left;
color:white;
margin: 20px;
font-family: courier;
}
h3 {
font-size:20px;
padding-left:20px;
color: white;
}
.content { /*the main container that consists of most of the existing content*/
margin-top:5px;
width:100%;
height: 1400px;
margin-left: auto;
margin-right: auto;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
.welcome {
font-family: courier;
}
.inquiry {
font-size: 17px;
color: white;
}
.container2 {
background-color: darkgrey;
padding: 10px;
margin: 0;
width: 97.8%;
height: 1000px;
z-index: 0;
position:absolute;
overflow:hidden;
}
p.heading {
font-size: 25px;
font-weight: bold;
font-family: courier;
}
.foot {
color: white;
}
.bg2 {
background-image:url("hex.jpg");
height: 550px;
width: 102%;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
width: 640px;
height:250px;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
First off, I am a bit confused why you are using the <br> tag so much, but it almost looks like you are trying to space the elements with them. You may want to use padding or margin to do that.
Lastly, I think what you are looking for is position: fixed. Try this:
footer {
width:100%;
position: fixed; /* use fixed instead of absolute */
bottom: 0; /* set bottom to 0 */
height:300px;
font-size: 15px;
margin-left:auto;
margin-right:auto;
text-align:center;
background-color:black;
border-width: 10px;
color: white;
}
You have several problems in your css. The main problem for your content not to appear is that you're using overflow: hidden; in container2 and height: 1000px; this causes everything that exceeds 1000px won't be show. Try removing overflow: hidden or overflow: x-scroll.
This is the documentation for the overflow property, I suggest you read it for a better understanding of your problem. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
There are some things that you should change 1. you are using absolute position outside relative 2. using absolute values for hight is not good practice 3. is always better use padding and margin to make space ect. Keep fixed position only for header nav and comment out all fixed hight values(px)and absolute and relative positioning to start with. Absolute position should be inside relative if there is not special reason not to do that. To get out from main problem start with footer and container2. But there is lot more to fix.
You need set a min-height for html, body {min-height: 100vh;}
Set footer as position: fixed; bottom: 0; left: 0;
Hopefully this will help you.
Ok, so I'm trying to create this div that shows information of the Civilian and Vehicle the user put in. I created the HTML and CSS for it, it was working all fine until I added 2 divs to the mix. With the one div, it looks like
this, with 2 divs, it looks like this. IDK what is happening here, really. When I add a background to everything, there is no white background where the giant gap is from "Information: " and "Civilian: ". To go with that, when I put the width of the 2 divs to %49.99 and set the display to inline-block, it shows up like this. IDK how to explain it, it just goes off of the screen into oblivion. I'm soo sorry if this is basic ass stuff to fix inside of my HTML/CSS, I have minor knowledge of either and I'm just trying to use jQuery to mess around with some stuff in there (basically edit the text). Here is my HTML/CSS code:
HTML:
<div id="civinfo">
<h1>Information</h1>
<!-- CIV SIDE -->
<div>
<h2>Civilian: </h2>
<span><h3>Name: </h3><p id="civname">None, None</p></span>
<span><h3>Warrant: </h3><p id="civwarrant">None</p></span>
<span><h3>Citations: </h3><p id="civcit">None</p></span>
</div>
<!-- VEH SIDE -->
<div>
<h2>Vehicle: </h2>
<span><h3>Plate: </h3><p id="vehplate">None</p></span>
<span><h3>Stolen: </h3><p id="vehstolen">None</p></span>
<span><h3>Registered: </h3><p id="vehregi">None</p></span>
<span><h3>Insured: </h3><p id="vehinsured">None</p></span>
</div>
</div>
CSS:
#civinfo {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
background: #000000;
width: 35%;
height: 30%;
display: none;
font-family: 'Lato', sans-serif;
color: white;
border-radius: 10px;
}
#civinfo h1 {
text-align: center;
font-size: 35px;
margin: 8px;
}
#civinfo div {
margin: 0;
padding: 0;
display: inline-block !important;
width: 45%;
height: auto !important;
}
#civinfo div h2 {
text-align: center;
margin: 0 5px;
font-weight: 400;
font-size: 20px;
}
#civinfo div h3 {
display: inherit;
font-weight: 400;
margin: 0 10px;
}
#civinfo div span {
display: inline-block;
margin: 0;
padding: 0;
margin-bottom: 5px;
width: 75%;
height: auto;
}
#civinfo div p {
float: center;
text-align: center;
display: inherit;
padding: 5px 15px;
background: #bbbbbb;
color: black;
border-radius: 25px;
font-size: 16px;
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
.content-wrapper{
display:flex;
}
.content-wrapper > div{
width:50%;
}
.content-wrapper > div > span{
display:flex;
}
h1{
display:block;
}
</style>
</head>
<body>
<div id="civinfo">
<h1>Information</h1>
<div class="content-wrapper">
<!-- CIV SIDE -->
<div>
<h2>Civilian: </h2>
<span><h3>Name: </h3><p id="civname">None, None</p></span>
<span><h3>Warrant: </h3><p id="civwarrant">None</p></span>
<span><h3>Citations: </h3><p id="civcit">None</p></span>
</div>
<!-- VEH SIDE -->
<div>
<h2>Vehicle: </h2>
<span><h3>Plate: </h3><p id="vehplate">None</p></span>
<span><h3>Stolen: </h3><p id="vehstolen">None</p></span>
<span><h3>Registered: </h3><p id="vehregi">None</p></span>
<span><h3>Insured: </h3><p id="vehinsured">None</p></span>
</div>
</div>
</div>
</body>
</html>
Hi just wrap both civilian and vechicle div into one div and display it as flex.Try above code.Some css modification is done.
I've the following problem:
The a tags automatically align to the bottom of the bigger a tag.
I would like to know why and what i can do against it.
Here is my code:
body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}
#navigation {
background-color: #760209;
width: 100%;
height: 55px;
}
#navigation a {
text-decoration: none;
color: #FFF;
/*line-height: 55px;*/
}
#navigation .logo {
font-size: 28px;
font-weight: bold;
}
<div id="navigation">
<div class="container_12">
<a class="logo" href="#">test1</a>
<a class="btn" href="#">Mein Profil</a>
<a class="btn" href="#">Fragen</a>
</div>
</div>
Do a vertical-align to your <a>
#navigation a {
text-decoration: none;
color: #FFF;
/*line-height: 55px;*/
vertical-align:middle; //This line over here
}
You need the vertical-align css property.
You can either use vertical-align: middle; or vertical-align: top;
body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}
#navigation {
background-color: #760209;
width: 100%;
height: 55px;
}
#navigation a {
text-decoration: none;
color: #FFF;
vertical-align: middle; /* <------- */
}
#navigation .logo {
font-size: 28px;
font-weight: bold;
}
<div id="navigation">
<div class="container_12">
<a class="logo" href="#">test1</a>
<a class="btn" href="#">Mein Profil</a>
<a class="btn" href="#">Fragen</a>
</div>
</div>
You can add:
.btn{
vertical-align:top;
}
if you need to align them to the top.
The default value of vertical align is baseline, which means that the element will be aligned to the baseline of the parent element.
That's why in your case the other 2 links seems aligned to the bottom comparing to the first element, just because of different font-size.
http://preview.goodinkproductions.com/CG8F13
I've managed to get the footer to span the site (unlike body which is inside a container and AOK). But, I can't get the footer background to be solid. It appears I have a band of solid color below, but the footer content is not in that "space". All I want is a solid span footer with content in it!
CSS
/* Footer
--------------------------------------------------------------------------------*/
#footer {
width: 100%;
background-color:#FF8800;
}
#footer-content{
width: 950px;
height: 80px;
margin-left: auto;
margin-right: auto;
}
#footer p {
color: #878787;
font-size: 12px;
}
#footer blockquote {font-size:11px; color:#999;}
#footer a {
color: #a59b8c;
}
#footer a:hover {
color: #cab99f;
}
#footer span {
vertical-align: middle;
}
#footer h2 {
font-size: 15px;
margin: 0 0 2px;
padding: .3em 0;
line-height: 1.5;
font-family: "Lato", Arial, Helvetica, sans-serif;
font-weight: 700;
color: #ebb058;
}
.wsite-footer { /* make sure enough space between element footer and attribution */
margin-bottom: 15px;
}
HTML
--------------------------------------------------------------------------------
{logo}
{menu}
{phone:text}
{social}
{search}
{content}
</div>
</div>
<div style='padding: 20px; width:100%; text-align:center;'>{footer}</div>
</body>
<div id="footer">
<div id="footer-content">
</div>
</div>
</html>
END
I don't quite understand what's going on here, but you need your footer div's inside the body tag.
</div>
</div>
<div style='padding: 20px; width:100%; text-align:center;'>{footer}</div>
<div id="footer">
<div id="footer-content">
</div>
</div>
</body>
</html>
The footer appears to be there, with a background of #F8F8F8
There is no text in the footer in youc code...
I have coded the layout below, but when tested the 'Login or Signup' link is not positioning to the right side of the page. Any help is appreciated.
HTML
<header>
<h1>Heading</h1>
<p>A clean, minimal, grid-based layout focusing attention on your work.</p
Login or Signup
</header>
CSS
body {
font-family: 'open sans';
color: #333;
}
header {
padding: 20px 20px 20px 50px;
}
a {
color: #333;
text-decoration: none;
}
h1, h2 {
font-weight: 300;
}
Desired Outcome
Here is a working solution:
DEMO
html
<header>
Login or Signup
<h1>Heading</h1>
<p>A clean, minimal, grid-based layout focusing attention on your work.</p>
</header>
css
body {
font-family: 'open sans';
color: #333;
}
header {
padding: 20px 20px 20px 50px;
}
header a {
color: #333;
text-decoration: none;
float: right;
padding-top: 30px;
}
h1, h2 {
font-weight: 300;
}
First thing, please write html in correct way and write css with class name.
here is your answer :
HTML :
<header>
<h1>Heading</h1>
Login or Signup
<p>A clean, minimal, grid-based layout focusing attention on your work</p>
</header>
CSS :
* {
padding: 0;
margin: 0;
}
body {
font-family: 'open sans';
color: #333;
}
header {
padding: 20px;
}
a {
color: #333;
text-decoration: none;
float: right;
}
h1, h2 {
font-weight: 300;
margin :0;
padding: 0;
}
header h1{
width: 70%;
display: inline-block;
}
header a{
width: 30%;
display: inline-block;
padding-top: 10px;
}
Demo Link
Some small changes. the H1 and p have full width so a must be below p. Change the css to
a {
color: #333;
text-decoration: none;
float: right;
margin-right: 70px;
}
p{width: 70%;float: left;}
h1, h2 {
font-weight: 300;
width: 70%;
float: left;
}
Will work fine.
First of all there is a missing > at the end of <p>...</p>
Then try this :
CSS
a
{
color: #333;
text-decoration: none;
display : block;
float : right;
}
HTML
<header>
Login or Signup
<h1>Heading</h1>
<p>A clean, minimal, grid-based layout focusing attention on your work.</p>
</header>
And the jsFiddle http://jsfiddle.net/HxWNh/
<div class="wrapper" style="margin:auto; width:960px:">
<div class="header" style="height:80px;">
<div style="float:left">
<h1 style="float: left;">Heading</h1>
</div>
<div class="login" style="float:right">
Login or Signup
</div>
</div>
<div class="DisplayArea" style="float:left;">
<p>A clean, minimal, grid-based layout focusing attention on your work.</p>
</div>
</div>
.wrapper{
margin:auto;
width:960px;
}
See if this helps...
i always find it easy to easy n convenient to position elements using .