I'm very new to coding with html/css. I'm currently working on a project for uni and am stuck with a problem. I want my footer (about me, socials, imprint) to be in the horizontal middle of the page (so just a little bit further on the right). I have tried everything (text-align, justify-content, align-items, ...) - nothing really worked. Has anyone an idea on how to fix it?
I'm thankful for any kind of help :)
Here's my code so far (with a few other problem areas. plus it's probably super messy - sorry!) :
body,
html {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
overflow-x: hidden;
font-family: Baskerville, Helvetica, serif;
font-size: 20px;
text-align: center;
letter-spacing: .2em;
background-image: url(https://cdn.shopify.com/s/files/1/1362/2563/products/Kariceramicshandmadepotterybluesixhandceramicdinnerplates_2048x.jpg?v=1591292140);
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
color: #A5A58D;
}
.header1 {
height: 90px;
padding: 80px 0;
font-size: 68px;
letter-spacing: 12px;
text-transform: uppercase;
}
nav > ul > li {
display: block;
padding-left: 20px;
padding-right: 20px;
position: relative;
}
<head>
<link rel="stylesheet" href="WS 2020 Screendesign.css">
<title> ALINA'S POTTERY </title>
</head>
<body>
<div class="bg-image"></div>
<div class="header1"> Alina's Pottery </div>
<nav class="categoryContainer">
<ul>
<li class="current">Home</li>
<li>Pottery
<ul class="dropdown">
<li>General</li>
<li>Hand-Building</li>
<li>Pottery Wheel</li>
<li>Materials</li>
<li>Temperatures</li>
</ul>
</li>
<li>Tutorials
<ul class="dropdown">
<li>View All</li>
<li>Get Started</li>
<li>Plates</li>
<li>Mugs</li>
<li>Bowls</li>
</ul>
</li>
<li>Shop
<ul class="dropdown">
<li>Products</li>
<li>Contact Form</li>
</ul>
</li>
</ul>
</nav>
<div class="header2"> Welcome to my pottery portfolio! </div>
<div class="text1"> I am very passionate about creating my own ceramics. </div>
<section class="footerContainer">
About Me
Socials
Imprint
</section>
</body>
<div class="background"></div>
</html>
try to use flexbox to align the items in the section modifying the css rule like so:
.footerContainer {
display: flex;
justify-content: center;
bottom: 3%;
position: absolute;
}
In your current code, the best thing to do is to delete the whole:
.footerContainer{
...
}
The footer will appear centered (behind the menu dropdown), because of the text-align:center you put on the body.
If at a certain point you would remove that from the body, I would also suggest to work with:
.footerContainer{
display: flex;
justify-content: center;
}
And overall feedback: avoid using position: fixed/absolute everywhere, it makes everything more complicated as these elements are removed from the document flow.
You should try to leverage display: flex here, it will solve your issue really fast and it will also adapt easily to further changes. My suggestion here is to change your footer to something like this:
<footer class="footer-container">
<a class="footer-link" href="aboutme.html" title="About Me">About Me</a>
<a class="footer-link" href="socials.html" title="Socials">Socials</a>
<a class="footer-link" href="imprint.html" title="Imprint">Imprint</a>
</footer>
As a side-note, it is better to use <footer></footer> instead of <section></section> to create your footer, and it also helps with SEO. (Read more about it here).
And for styling you can simply do this
.footer-container {
display: flex;
flex-wrap: wrap;
/* Change justify-content as you like */
justify-content: space-around;
}
/* If you don't want or like to use justify-content,
just apply some margins on your links */
.footer-container .footer-link {
margin: 0 16px;
}
Try
.footerContainer {
bottom: 3%;
position: absolute;
text-align: center;
width: 100%;
}
Related
.header{
min-height: 90vh;
width: 100%;
background-image: linear-
gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),
url(../images/background.jpg);
background-position: center;
background-size: cover;
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-attachment: fixed;
}
nav{
min-height: 7%;
background-color: white;
opacity: 0.8;
display: flex;
padding: 2% 4%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 140px;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a{
color: rgb(0, 0, 0);
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 1s;
}
.nav-links ul li:hover::after{
width: 100%;
}
nav .fa{
display: none;
}
<section class="header">
<nav>
<img src="../images/logo.png">
<div class="nav-links" id="navLinks">
<i class="fa fa-close" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>LOCATIONS</li>
<li>PRODUCTS</li>
<li>CONTACTS</li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>AVEM SALAM</h1>
<p>AICI CEVA DESCRIERE<br>YOU KNOW SHORT AND GOOD</p>
PRODUSELE NOASTRE
</div>
</section>
Also, I need some help related to the size of the navbar, how do I make it smaller in terms of height? I did my best to go with "min-height: 7%;" but it is not enough...
It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.
[![It needs to look smh like this][2]][2]
[![So this how the navbar currently looks][1]][1]
[1]: https://i.stack.imgur.com/UVWJg.jpg
[2]: https://i.stack.imgur.com/BNswb.png
Your DOM order is wrong, try this HTML
<section class="header">
<nav>
<div class="nav-links" id="navLinks">
<i class="fa fa-close" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
</ul>
</div>
<img src="../images/logo.png">
<div class="nav-links" id="navLinks">
<i class="fa fa-close" onclick="hideMenu()"></i>
<ul>
<li>LOCATIONS</li>
<li>PRODUCTS</li>
<li>CONTACTS</li>
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
<div class="text-box">
<h1>AVEM SALAM</h1>
<p>AICI CEVA DESCRIERE<br>YOU KNOW SHORT AND GOOD</p>
PRODUSELE NOASTRE
</div>
</section>
if you want elements around your logo and Logo to be centered then your code is totally written wrong.
make parent-div with display property:flex
and then make three child div with class nav-left logo and nav-right and give them width of percentage 33.33 %
include ul li in first div with class nav-left
then add your logo with in second div element so that you can control your image responsiveness
and lastly include ul li in third div with class nav-right
ABOUT HEIGHT
remove height from nav and I am assuming you are new to code then you should also do this
ul,li {
padding: 0;
margin : 0;
}
it should be done before you start styling because some html tags have default padding and margins (give this search on Google so you know which tags have this default styling e.g are p tags heading-tags anchor-tags etc,..) you have to remove this and then add your styles. Hope this will help you out :)
I'm very, very new to HTML and CSS, so sorry for my ignorance! I'm trying to add an image to my header, to go to the left and above the navigation. Any help anyone can give would be amazing!!
I have tried two ways of adding the image, the first using , but it did not show (I could see the image 'content' highlighted in blue on the page when i was in the console, but i couldn't see the image. The second way I used a , then the css below:
body {
background-color:#4A4849;
margin: 0 auto;
font-family:Arial, helvetica, sans-serif;
}
.Logo {
display: inline;
float:left;
width: 100%;
height: 100%;
background-image: url('../Images/Logo.png');
}
header {
text-align: center;
width: 100%;
height: 15%;
background-color: white;
margin: 0;
}
My full CSS includes the below...i feel like the problem is to do with the , as in the console the dimensions show as 1304x0 (but I am able to see the navigation) I therefore tried adjusting the header, which is why it duplicates with the .topnav.(see below) :)
.topnav {
font-weight: bold;
background-color: white;
overflow: hidden;
position: fixed;
top: 0;
left 0;
width:100%;
height:15%;
}
.topnav ul {
list-style-type:none;
overflow: hidden;
margin:0;
padding: 0;
}
.topnav li {
display:inline;
padding: 0px;
margin: 0px;
}
.topnav a {
float: right;
color: #4A4849;
text-align: center;
padding: 20px 10px;
text-decoration:none;
width:10%;
}
It would be great if anyone could help, as I've tried different things based on resources i've found online!
*HTML, in case you need it:
<body>
<header>
<div class="Logo"></div>
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
There are a few things that can be changed with how you are setting things up:
I would recommend not making your logo the background-image on a div, when an <img> tag will work better in your case (<img src="path/to/your/logo.png">).
If you do use it as a background-image on a div, you have to remember that background images do not affect the height of an element.
Setting a % height on the .Logo div will also not work, since a percentage height needs to be relative to a containing element and you also set it to an inline element (height will not apply). Since, its parent (header) has as height of 15%, but that element also has no reference to 15% - e.g. 15% of what? The body tag would need to have a height set to 100%.
Only for your logo, I would simply do this:
<header>
<img src="your logo link">
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
If you absolutely want to make it a background-image:
.Logo {
height: whatever your logo height is;
display: block;
background-image: url( ../Images/logo.png );
background-repeat: no-repeat;
}
<header>
<div class="Logo"></div>
<nav>
<div class="topnav">
<ul>
<li>CONTACT US</li>
<li>ABOUT US</li>
<li>GRAPHIC DESIGN</li>
<li>MARKET</li>
<li>HOME</li>
</ul>
</div>
</nav>
</header>
I'm trying to make a page for a project from FreeCodeCamp.
The problem is that I need to make a header for the page, and for some reason I'm getting some big gaps between my content and their respective containers.
I've already tried setting padding to zero, tweaking margins and things like that. Things like changing the "line-height" to 0 make it so the content take less space, but the container is kept almost unchanged.
I set a color for the background of each one of the objects that make up my content to check the area they are supposed to fill and compare it to the area of the container that surround them.
Problem exemplification
Code below:
#import url('https://fonts.googleapis.com/css?family=Oxygen:300,400,700&display=swap');
html{
}
#header{
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
background-color: grey;
font-family: 'Oxygen', sans-serif;
}
#header-logo{
display: inline-block;
background-color: cyan;
}
#img-container{
display: inline-block;
vertical-align: middle;
overflow: hidden;
width: 30px;
height: 36px;
background-color: pink;
}
#header-img{
width: 60px;
height: 60px;
margin-left: -15px;
margin-top: -12px;
}
#header-text{
display: inline-block;
vertical-align: middle;
font-size: 20px;
font-weight: 700;
background-color: pink;
}
#nav-bar{
display: inline-block;
background-color: cyan;
}
#nav-list{
list-style: none;
background-color: magenta;
}
.nav-item{
display: inline-block;
background-color: pink;
margin-right: 10px;
}
.nav-item > a{
wtext-decoration: none;
}
.nav-item:first-letter{
font-weight: 700;
}
<html>
<head>
<title>
</title>
</head>
<body>
<header id="header">
<div id="header-logo">
<div id="img-container">
<image src="https://zapier-dev-files.s3.amazonaws.com/cli-platform/01368c80-24cc-415d-8262-df1c9382ea01" id="header-img">
</image>
</div>
<h1 id="header-text">
Penguino
</h1>
</div>
<nav id="nav-bar">
<ul id="nav-list">
<li class="nav-item">
<a href="#nav1" id="nav1" class="nav-link"> Home
</a>
</li>
<li class="nav-item">
<a href="#nav2" id="nav2" class="nav-link"> Products
</a>
</li>
<li class="nav-item">
<a href="#nav3" id="nav3" class="nav-link"> About
</a>
</li>
<li class="nav-item">
<a href="#nav4" id="nav4" class="nav-link"> Contact
</a>
</li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
</html>
Here is a link to my codepen:
https://codepen.io/Navarrox/pen/KKPGrxj
Hope someone can help me. Thanks!
EDIT: Removed the extra magenta space on the Navbar by setting padding-left to 0. I'd already done that before but for some reason I deleted the line before posting.
Set header-logo container to display:flex, replace margin with padding for h1.
For right side nav, set height:100% to ul and display:flex.
Check this codepen : https://codepen.io/jsuryahyd/pen/jONXVJG
I hope the following helps:
For the understanding of page layout and the containing block. Click here
To understand more about block display, check here
You can also check out CSS Grid here
Comparison between grid and flexbox here
You can try to increase your width and height. Just manipulating it till it suits you. Otherwise, width: 100%;
I am using Apple's navigation toolbar as my design aesthetic/goal as everything is center justified and the logo included as part of that justification.
Here's how I have it setup currently...
<body>
<header>
<div class="logo"><img src="Images/Logo.png" alt="DIVINITAL"width="35" height="35"></div>
<nav>
<ul class="menu">
<li>Home</li>
<li>Shop</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>User</li>
</ul>
</nav>
<div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
</header>
</body>
This, however, proves difficult for me to properly edit the logo alongside the ul items on the navbar. For some reason when I begin to style them accordingly, both widths have to be set to 100% for the alignment to workout but that obviously isn't allowed as they just move to two separate lines (the logo and the ul items on the nav bar...
So is there a better way to handle this? Thank you!
Welcome to StackOverflow.
You can easily do it using flex. There's a good tutorial that explains how to use flex..
Look at the following example, and see for yourself how flex can easily achieve what you're looking for:
header {
background-color: rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
height: 44px;
}
.logo > img {
width: 35px;
height: 35px;
margin: auto 20px;
}
nav {
flex: 1
}
nav > ul {
color: white;
display: flex;
padding: 0;
list-style: none;
justify-content: space-between;
margin: auto 20px;
}
nav > ul > li {
}
nav a {
color: inherit
}
<header>
<div class="logo">
<img src="https://cdn4.iconfinder.com/data/icons/black-icon-social-media/512/099310-feedburner-logo.png" alt="DIVINITAL">
</div>
<nav>
<ul class="menu">
<li>Home</li>
<li>Shop</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>User</li>
</ul>
</nav>
<div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
</header>
The most important rules I used here were (flex rules):
display: flex
justify-content
align-items
I have a simple website that I've made from scratch. I got confused with the layout of my header:
H1 title
Text line
Logo
Menu (coding from w3school)
These four are within my div header. I'd like to be able to position them wherever I want within the div. The issue I have is that I'm not sure what coding to use for this (margin, position: relative or absolute, padding, top:, right:, etc.).
I've tried all kinds of combinations but it seems they never position where I want them and they mess up each others' position: the menu loses full width, the logo I can't get nicely with same space between top and right of header div, the H1 and tag don't seem to respond to the pixels I set, and so on.
Could someone please take the time and have a look at my code and come with a suggestion how to make this layout stable?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style type="text/css">
body {
background-color: #F8F8F8;
}
#page {
width: 900px;
margin: 30px auto;
background-color: #FFFFFF;
}
#header {
height: 377px;
width: 100%;
background-image: url(images/banner.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#header a {
color: black;
text-decoration: none;
}
#header ul {
list-style-type: none;
margin-top: 0;
padding: 0;
overflow: hidden;
background-color: #3399FF;
position: relative;
top: 264px;
}
#header li {
float: left;
}
#header li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#header li a.active {
background-color: gray;
}
#header li a:hover:not(.active){
background-color: #3366CC;
}
.p1 {
font-family: Consolas, monaco, monospace;
font-size: 20px;
position: relative;
top: 28px;
left: 50px;
}
.p2 {
font-family: Consolas, monaco, monospace;
font-size: 16px;
position: relative;
top: 5px;
left: 200px;
}
.logo {
float: right;
position: relative;
top: 8px;
right: 8px;
}
#content {
position: relative;
top: 12px;
left: 10px;
}
#footer {
font-size: 14px;
padding-top: 12px;
padding-bottom: 12px;
text-align: center;
border-top: #D3D3D3 0.5px solid;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<img class="logo" src="images/logo-d.png">
<span class="p1"><h1>This is my H1 Title</h1></span>
<span class="p2">"This is going to be my tag under H1"</span>
<ul>
<li><a class="active" href="">Link menu</a></li>
<li>Link menu 2</li>
<li>Link menu 3</li>
<li>Link menu 4</li>
<li>Link menu 5</li>
<li>Link menu 6</li>
</ul>
</div>
<div id="content">
<h1>H1 Title of the page content<h1>
<p></p>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<p></p>
</div>
<div id="footer">
The footer of the page
</div>
</div>
</div>
</body>
</html>
Put the contents of the header in an Unordered list as so. If you are using a responsive framework like Bootstrap, this will be completely different - but since you did not specify, here is an example without a framework.
HTML
<div id="header>
<ul>
<li><h1>Your Title</h1></li>
<li><p>some line of text you wanted</p></li>
<li class="logo"><img src="yourlogo.png" /></li>
<li class="spacer"></li>
<li><a href="somepage.html>Some Page</a></li>
<li><a href="somepage.html>Some Page</a></li>
<li><a href="somepage.html>Some Page</a></li>
</ul>
</div>
CSS
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#header li{
padding: 0 20px;
display: inline;
}
#header li.spacer{
width:10%
}
It's just a case of structuring the divs correctly, as Holle points out, this is a list of objects rather than a poster. I think the main issue you are having in positioning is that you're foundation structure within your html isn't beneficial for manipulating.
I would recommend having a container div for each section and then further divs or other content within those. i.e.
<div id="headerContainer">
<h1>Title</h1>
<img id="logo" src="myImagePath">
</div>
<div id="navigation">
<!-- Navigation Bar, your UL list items -->
</div>
<div id="pageContent">
<!-- More content... <img>s, <p>s, <h1>s, probably more divs to structure the content etc-->
</div>
I hope that helps, if you want a suggestion, take a look a DevTips youTube channel, he's great at explaining the design and structuring stages when building a website.
Also, in terms of positioning, check out flexbox froggy (google it), just be aware the browser support isn't fantastic before you jump in.
Cheers,
James
First suggestion: try to think of a webpage as list of objects rather than a poster etc. Screen sizes vary (desktop/mobile) and you should use relative widths and positions to ensure responsiveness of your site. I'm sure you can find a better template to work on.
Second suggestion: If you DO wish to position an element "anywhere" this is an example of correct use of positioning:
<style>
.floatingdiv {
position:absolute;
right:0;
top:0;
}
</style>
<div class="floatingdiv">
<h1>Header</h1>
</div>