i just started playing around with HTML and CSS a few weeks ago and would appreciate some help. I am looking for an elegant way to align several elements in a header.
I am unfamiliar with using grids. I tried using display: inline-block and display: table but i didnt get it to work the way Id like to. So I had to use floats, which works, but i feel like its forced.
Id also like to have the content appear in the same range as .nav-content, but I guess 55% of the container will be different than 55% of the header?
Anyways, heres the code:
* {
box-sizing: border-box;
}
.container {
max-width: 100%;
height: 100%;
}
/******************************************
Header / Navbar
*******************************************/
.navigation {
width: 100%;
border-bottom: solid 1px #eee;
position: fixed;
Z-Index: 500;
font-size: 14px;
box-sizing: border-box;
font-weight: 400;
font-style: normal;
line-height: 1.6;
min-height: 65px;
padding-top: 10px;
}
.nav-content {
width: 55%;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.nav-logo,
.navigation li {
float: left;
}
.nav-right,
.nav-btn {
float: right;
}
.nav-left {
font-size: 26;
padding-left: 1%;
padding-top: 0.5%;
}
.nav-left li {
margin-right: 1%;
margin-left: 1%;
}
.navigation ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-right {
padding-right: 1%;
margin-top: -25px;
}
<head>
<meta charset="UTF-8">
<meta name="description" content="We are medium. We write about startups.">
<meta name="keywords" content="Medium, blogging, startups, entrepreneurship, Unternehmer, Gründung, Unternehmensgründung, gründen, Venture Capital, Business Angel, Investor, Wagniskapital, Risikokapital">
<meta name="author" content="William Middendorf">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Medium</title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic|Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="container">
<div class="navigation">
<!--Navigation-->
<div class="nav-left">
<ul>
<li><i class="fa fa-bars"></i>
</li>
<li><i class="fa fa-search"></i>
</li>
</ul>
</div>
<div class="nav-content">
<div class="nav-logo">Blogger</div>
<div class="nav-btn">
<button class="wrt-btn">Schreib' einen Artikel</button>
</div>
</div>
<div class="nav-right">
<ul>
<li>Log In
</li>
<li>Register
</li>
</ul>
</div>
</div>
<!--End of Navigation / Header-->
</div>
<!--End of Container-->
</body>
Float is bad way to go here. You will not be able to center them later in mobile view, if needed.
Use display: inline-block; and don't leave spaces or new lines is html code between the buttons, to avoid gap between them.
using inline-block and width percentages and text-align, you can avoid using floats and margins. here's a demo: http://jsfiddle.net/swm53ran/349/
.section, li, .nav-logo, .nav-btn {
display:inline-block;
}
.nav-left, .nav-right, .nav-content {
width: 32%;
}
.nav-right {
text-align: right;
}
.nav-logo, .nav-btn {
width: 49%;
}
Related
Hello everyone I am pretty new to HTML and CSS is there any way for me to make the background of this footer be over the whole footer and not that one bit. I tried a few things but is will over lap the contact forum for a small part but it is pretty annoying that I cant find out how to solve this problem
.footer,
.push {
height: 50px;
}
.footer {
background: #000f14 !important;
padding: 20px !important;
text-align: center !important;
position: absolute !important;
bottom: 0 !important;
margin-top: 50px;
width: 100% !important;
}
.column {
display: inline-block;
width: 25%;
vertical-align: top;
text-align: left;
margin: 0 2.5%;
margin-top: 15px;
background: #000f14;
}
.column h3 {
margin-top: 0;
margin-bottom: 10px;
background: #000f14;
font-size: 25px;
}
.column ul {
list-style: none;
margin: 0;
padding: 0;
background: #000f14;
}
.column ul li {
padding: 5px 0;
background: #000f14;
font-size: 15px;
}
.column p {
margin: 0;
background: #000f14;
font-size: 15px;
}
<!DOCTYPE html>
<html>
<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">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="footer-placeholder">
<div class="footer">
<div class="column">
<h3>Contact Information</h3>
<ul>
<li>1234 Example Street</li>
<li>Example City, XX 12345</li>
<li>Phone: (555) 555-5555</li>
<li>Email: info#example.com</li>
</ul>
</div>
<div class="column">
<h3>Services</h3>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Marketing</li>
<li>SEO</li>
</ul>
</div>
<div class="column">
<h3>Trademark</h3>
<p>© 2023 AquaTech. All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>
.footer,
.push {
height: 100%;
}
With this basically you tell your element with footer class that take the full height of its child elements.
You need to add the height in the class
.footer { height: auto }
And to make the content of footer visible add color in the class
.column{color: white}
The final look of your both CSS classes will be as below;
.footer { background: #000f14 !important; padding: 20px !important; text-align: center !important; position: absolute !important; bottom: 0 !important; margin-top: 50px; width: 100% !important;height:auto; }
.column { display: inline-block; width: 25%; vertical-align: top; text-align: left; margin: 0 2.5%; margin-top: 15px; background: #000f14; color:white;}
Besides, you can also have a look at the link below to see the solution visually: TestWise Replay| fixed the footer height
Simply add height: auto; to the .footer CSS selector.
Improvements suggestions:
Use the <footer> HTML element instead of <div class='footer'> for semantic markup.
Learn flexbox to layout the columns using display: flex.
Read about better ways to place the footer at the bottom
Header Row and div do not center in the middle. The line is only at the top. I don't understand where the problem is.
I tried several methods and failed.
I changed the code several times and I couldn't.
I searched a lot on the site, but I didn't find a solution.
I tried to solve it and I didn't find something to solve this problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
.container {
max-width: 1024px;
width: 100%;
margin: 0 auto;
}
header {
background-color: #192a56;
padding-top: 16px 0;
color: #fff;
}
header>.container {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px
}
nav {
background-color: #575fcf;
padding: 16px 0;
}
nav li {
list-style: none;
display: inline;
margin-right: 16px;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
}
nav li a {
color: #fff;
text-decoration: none;
}
.menu-hamburguer {
width: 32px;
}
.menu-hamburguer span {
height: 2px;
width: 100%;
background-color: #fff;
display: block;
margin-bottom: 4px;
}
<!DOCTYPE html>
<html lang="pt-BR">
<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>EBAC Motors</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="container">
<h1>EBAC Motors</h1>
<div class="menu-hamburguer">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav>
<div class="container">
<ul>
<li>
Sobre
</li>
<li>
Em destaque
</li>
<li>
Promoções
</li>
<li>
Contato
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
Just adjust the padding that you added, which was 16 only at the bottom:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
.container {
max-width: 1024px;
width: 100%;
margin: 0 auto;
}
header {
background-color: #192a56;
padding-top: 16px 0;
color: #fff;
}
header>.container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
nav {
background-color: #575fcf;
padding: 16px 0;
}
nav li {
list-style: none;
display: inline;
margin-right: 16px;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
}
nav li a {
color: #fff;
text-decoration: none;
}
.menu-hamburguer {
width: 32px;
}
.menu-hamburguer span {
height: 2px;
width: 100%;
background-color: #fff;
display: block;
margin-bottom: 4px;
}
<!DOCTYPE html>
<html lang="pt-BR">
<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>EBAC Motors</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<div class="container">
<h1>EBAC Motors</h1>
<div class="menu-hamburguer">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav>
<div class="container">
<ul>
<li>
Sobre
</li>
<li>
Em destaque
</li>
<li>
Promoções
</li>
<li>
Contato
</li>
</ul>
</div>
</nav>
</header>
</body>
</html>
header>.container {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px
If you change this to padding: 8px I think this might be what you want.
I am working on a navigation bar, and I am stuck because my code won't work as attended. When on mobile (760px) I want my nav-bar to show 3 div classes as an icon for the 'pop up' menubar. I just can't figure out why it won't show up.
The code, CSS:
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: 'Poppins', sans-serif;
}
.logo{
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links{
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
}
#media screen and (max-width:1024px){
.nav-links{
width: 60%;
}
}
#media screen and (max-width:760px){
body{
overflow-x: hidden;
}
.nav-links{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
transform: translateX(100%);
transition: transform 0.5 ease-in;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
Code, HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="witdh=device-witdh, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="Stylesheet" href="Style.css">
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links"
<ul>
<li>
Home
<li>
<li>
About
<li>
<li>
Work
<li>
<li>
Our Project
<li>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
If anyone, can see the problem, it would be great if you could tell me.
I found the problem with the code. And it a simple mistake, but one I did not think would matter, or can't see why it worked. So if anyone can explain why this solved the issue, that would be great. Anyway, I moved the 'div burger class' to before the 'nav-links' in my HTML code. I am not sure why this fixed the issue, but it did. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewpoint" content="witdh=device-witdh, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.gstatic.com" rel='Stylesheet'>
<link rel="Stylesheet" href="Style.css">
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Our Project
</li>
</nav>
<script src="app.js"></script>
</body>
</html>
I can't figure out why it would matter to move the code, but I did in an attempt to see if that was the reason, and it was. If you can explain to me why this is the answer, that would be great.
Use Bootstrap for designs like this first.There is an error at the top of the css code you wrote, fix it.
body, *{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
It has to be like this
I am trying to build a custom navigation bar. Currently, it looks like this:
How do I bring each of my anchor element to get in the center of each box (both vertically, and horizontally)? Also, the brand element has a bigger font, but I want a solution which will center all the elements nicely.
In short, I want it to look something like this:
The borders on the first pic is for testing obviously. I made the second pic with a photoshop edit. My code for this page looks is this:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>My Page</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<style type="text/css">
nav.navbar {
height: 50px;
margin: 0 0 25px 0;
background: white;
box-shadow: 0 2px 2px #d3d3d3;
}
ul.navbar-list {
list-style: none;
height: 50px;
}
ul.navbar-list-left {
float: left;
}
ul.navbar-list-right {
float: right;
}
ul.navbar-list > li.navbar-item {
display: inline-block;
height: inherit;
}
ul.navbar-list > li.navbar-item > a.navbar-link {
display: block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
margin-top: 13px;
margin-right: 15px;
}
ul.navbar-list > li.navbar-item > a.navbar-brand-link {
font-size: 20px;
font-weight: bold;
margin-top: 7px;
margin-right: 25px;
}
</style>
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<nav class="navbar">
<div class="container">
<ul class="navbar-list navbar-list-left navbar-brand-list">
<li class="navbar-item navbar-brand-item">
BRAND
</li>
</ul>
<ul class="navbar-list navbar-list-left">
<li class="navbar-item">
Product
</li>
<li class="navbar-item">
Pricing
</li>
<li class="navbar-item">
Company
</li>
<li class="navbar-item">
Blog
</li>
</ul>
<ul class="navbar-list navbar-list-right">
<li class="navbar-item">
Log in
</li>
<li class="navbar-item">
Sign up
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="twelve column">
<h4>Basic Page</h4>
<p>
Lorem ipsum ....
</p>
</div>
</div>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
Note: I am using Skeleton for this.
So how do I fix my navbar? These are the things I want:
The text of each anchor element needs to be centered vertically and horizontally.
I want the element containing the element to take up 100% of the height of the navbar.
Any help is appreciated!
Replace this css and check, it may help you..
<style type="text/css">
nav.navbar {
height: 50px;
margin: 0 0 25px 0;
background: white;
box-shadow: 0 2px 2px #d3d3d3;
}
ul.navbar-list {
list-style: none;
height: 50px;
}
ul.navbar-list-left {
float: left;
}
ul.navbar-list-right {
float: right;
}
ul.navbar-list > li.navbar-item {
display: inline-block;
height: inherit;
}
ul.navbar-list > li.navbar-item > a.navbar-link {
display: block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
margin-right: 15px;
}
ul.navbar-list > li.navbar-item > a.navbar-brand-link {
font-size: 18px;
font-weight: bold;
margin-right: 25px;
}
</style>
I just started using bootstrap and am having a problem with my image shifting out of place when I resize my browser. The background image that is holding my image and text doesn't seem to be scaling either. when I maximise my browser everything is in place and perfect. As you can see in the first image that is where my problem is. The second image is how it looks maximised and how it should look with all screen sizes. Any help appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="images/theater.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<div id="rainbow"><img alt="rainbow gradient" src=
"images/rainbow.png"></div>
<div id="header">
<!--home-->
<p id="logo"><img alt="Bethan Rainforth a comedic dancer" src=
"images/logo.png" class="img-responsive"></p>
</div>
<div id="nav-bar">
<nav class="nav">
<ul class="list-inline">
<li>
Home
</li>
<li>
<a class="gray" href="work.html">Work</a>
</li>
<li>
<a class="gray" href="gallery.html">Gallery</a>
</li>
<li>
<a class="gray" href="hireme.html">Hire!</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="row">
<div class="about-me row">
<div class="col-md-12">
<img alt="Bethan Rainforth" class="img-responsive" id="pic" src=
"images/pic.png">
<p class="about-text">I am a physical comedian, continuously
being inspired by comical characters and exaggerated
movement. I fuse elements of dance and theatre to create
performances that are somewhat over-the-top, and
outrageous. I use locking technique as a foundation build
and produce uproarious performances suitable for an
eclectic audience. I aim to leave audience members feeling
uplifted, swimming in their own tears of laughter,
momentarily forgetting any worries or woes.</p>
</div><!--End of col-md-12 about me-->
</div><!--End of about me row-->
</div><!--End of about me wrapper-->
/********************************
Body of page
*********************************/
html,
body {
background-image: url(images/background.png);
margin: 0 auto;
}
#container{
width: 960px;
margin: 0 auto;
}
/********************************
Header
*********************************/
#rainbow img{
margin-bottom: 15px;
}
#logo img {
width: 320px;
}
/********************************
Navigation
*********************************/
nav a {
font-family: Hobo Std;
padding: 50px;
}
ul {
list-style-type: none;
}
nav {
text-align: center;
margin-left: 20px;
}
a {
text-decoration: none;
}
nav li {
display: inline;
width: 150px;
}
.gray,
a:hover,
a:visited,
a:active {
color: #a5a5a5;
text-decoration: none;
}
#home {
background-image: url(images/pinkpaint.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 30px;
margin: 0 auto;
color: #000;
}
ul.list-inline{
margin-top: 25px;
}
/********************************
About Me
*********************************/
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
.about-me {
background-image: url(images/border.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
width: 730px;
height: 490px;
display: block;
margin: 0 auto;
}
p.about-text{
color: #7ca5d2;
font-family: hobo std;
font-size: 1.2em;
line-height: 35px;
margin: 75px;
}
It seems this is adding 74px to the top of the image:
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
Try removing the margin-top code and see what happens. If needed for desktop, you can add a media query so that it is removed when resized. For example:
#media and (max-width:700px) {
img#pic {
margin-top: 0;
}
}
Let me know if that doesn't work.