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%;
Related
I would like to place an image on a div which I use for a navigation bar, but when I resize the image to 50px or above, the padding on the div gets bigger as well. I don't like this since the image will either be too small to see or the navigation bar will be too big to look pleasing, any ideas on how to fix this?
.navbar{
background-color:green;
padding:20px;
}
.navbar #image1{
width:40px;
margin-left:950px;
padding:0px;
}
<div class='navbar'>
<a href='home.html'>Home</a>
<a href='1.html'>Profile</a>
<a href='2.html'>Transactions</a>
<a href='3.html'><p>Settings</p></a>
<img src='https://picsum.photos/200/300' id='image1'/>
</div>
You should first start by removing
margin-left:950px
as the margin will exclude your item from your navbar
then apply flex properties to your navbar
.navbar {display : flex}
so your navbar items become in the same line
I recommend checking out this flex-box guide as well flexbox properties
can you please share the image's link so we can help you?
also you most edit margin-left:950px; to margin-left: auto; if you want to center it
and this is an example navbar code (press run to see what is it)
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navbar{
padding: 10px 20px;
background: black;
color: white;
display: flex;
align-items: center;
}
.navbar li{
list-style: none;
display: inline-block;
padding: 0 20px;
cursor: pointer;
}
.navbar li a{
color: white;
text-decoration: none;
}
.navbar li:hover,
.navbar li a:hover{
color: #666;
}
.navbar img{
width: 50px;
height: 50px; /*or :auto ; */
}
<ul class="navbar">
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
</ul>
<br><br><br>
<p>or</p>
<br><br><br>
<ul class="navbar">
<img src="https://www.calliaweb.co.uk/wp-content/uploads/2015/10/600x600.jpg"/>
<li>home</li>
<li>project</li>
<li>contact</li>
<li><a>settings</a></li>
</ul>
I think you need to learn the basics before start doing websites
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%;
}
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>
I think I'm going insane over this now, no idea how to resolve it... please help guys.
I have three divs on a page that should all fit onto one line. They have to be square (with rounded corners) so I have to set a width and a height to keep the 1:1 aspect ratio. I have a heading inside them that should be vertically and horizontally centered. The wording of the heading may change and might run over 2 lines so a simple margin-top is not enough in this case.
First problem: there are weird margins at the top despite there not being anything else affecting that (well there must be but I can't see what). If I float the divs they line up but floating isn't the way to go is it... why is inline-block not working?
Second issue (which is likely related, so I'm posting it in one go) is that I'm unable to vertically center the title divs. Any ideas?
Here's a jsfiddle to illustrate: http://jsfiddle.net/fydC4/
The HTML:
<div id="container">
<div class="nav-left">
<p id="nav-left-title">In this section…</p>
<ul>
<li><a class="light" href="#">page title here</a></li>
<li><a class="light" href="#">page title here</a></li>
<li><a class="light" href="#">page title here</a></li>
</ul>
</div>
<div id="main">
<h1>Assignments</h1>
<p>Click on the titles of the assignments to find out more.</p>
<div class="box" id="good-designs">
<h2 class="box">3 good designs</h2>
</div>
<div class="box" id="temp">
<h2 class="box">title here</h2>
</div>
<div class="box" id="temp2">
<h2 class="box">title here</h2>
</div>
</div><!--end main-->
</div>
</div><!--end container-->
The CSS:
#container {
max-width: 960px;
margin: auto;
}
#main {
display: table-cell;
width: 73em;
padding: 1em 2em 2em;
background-color: white;
}
#nav-left-title {
padding-bottom: 0.5em;
margin: 0;
color: white;
}
.nav-left{
display: table-cell;
width: 14em;
background-color: #87a8b1;
padding: 1.1em;
font-size: 1.2em;
}
.nav-left li {
padding: 0.5em 0;
border-bottom: 1px solid white;
}
h2.box {
padding: 15px 0;
margin: 50% 15px;
margin: auto;
text-transform: uppercase;
text-align: center;
}
div.box {
padding: 15px;
height: 180px;
width: 180px;
border-radius: 50%;
margin-top: 25px;
margin-left: 1.5em;
display:inline-block;
/* float: left; */
}
#good-designs {
background-color: green;
}
#temp, #temp2 {
background-color: yellow;
}
Hi you may use two properties to align all your elements
vertical-align:middle;
display:inline-table on div.box and
display:table-cell on h2.box; (for the texts inside your divs)
Check this code http://jsfiddle.net/fydC4/16/
This worked for me, replace inline-block with float left.
you are also calling margins twice on some element which are not necessary
here you go
jsfiddle.net/fydC4/14
For a project of mine I decided to start using Responsive Design. The guide I was using wasn't definitive and purely introductory so I got lost somewhere there and can't find the problem here. If use the code below you'll render yourself a navigation menu. It looks fine on a 13 inch screen but go to a smaller screen size by perhaps shortening the width of your browser you'll notice that the navigation menu will take over the logo's space. How can I tweak this so that the navigation menu won't be on top of the logo and perhaps will stop before it goes over the logo?
HTML:
<header class="bar_top">
<div class="logo_block">
<a href="index.php">
<img alt="Logo" src="/logo.png" class="logo">
</a>
</div>
<nav class="menu_above">
<ul class="menu">
<li class="menu_inner">Home</li>
<li class="menu_inner">Our Products</li>
<li class="menu_inner">Services</li>
<li class="menu_inner">About Company</li>
<li class="menu_inner">Contact
<ul class="menu_layer">
<li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 1</a>
</li>
<li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 2</a>
</li>
<li class="menu_contact_is"><a class="menu_contact_inner" href="#">Menu 3</a>
</li>
</ul>
</li>
<span class="phone_us">000-000-0000</span>
</ul>
</nav>
</header>
CSS:
.bar_top {
background-color: #FFFFFF;
font-size:14.5px;
width: 100%;
height: 82px;
top: 0;
left: 0;
position:absolute;
z-index: 99;
}
.logo_block {
display: block;
position: absolute;
z-index: 998;
}
.logo {
margin-left: 30px;
margin-top: -3px;
height: 85px;
}
.menu_above {
width: 960px;
margin: 40px auto;
float:right;
}
.menu_layer {
margin-left: -40px;
}
.menu_contact_is {
color: #ffffff !important;
}
a.menu_contact_inner {
color: #ffffff !important;
}
.phone_us {
font-size: 1.5625em;
margin-left: 75px;
}
Try the attribute margin: auto; to set elements on the center of the screen or the container, instead of using static values to position the elements
Also you can read about flexible design and responsive design to learn about.
If you are trying to keep the menu next to the logo on the left side of the page you should try this:
.logo_block {
display: inline-block;
vertical-align: top;
}
.menu_above {
margin: 40px auto;
display: inline-block;
}
It's quite common to wrap the content with a div container that has a fixed with and auto margin on the sides to keep it on the center of the page.
You should also consider to revise the other elements on you page as you are using unnecessary relative positioning. ;)