thanks for your help. I just starting to learn HTML and CSS. I have been wrestling with this oversize logo problem for a week now. How do I put the logo overlap the nav like a layer look?
my html file:
<nav class = "navigation-bar">
<link rel="stylesheet" href="{% static 'financeapp/style1.css' %}">
<div class = "navigation-container">
<ul>
<li><img class = "logo" src ="{% static 'financeapp/family examiner 2.png' %}"
alt="company logo" height = 150px width = 150px>
<li> Home </li>
<li> About </li>
<li> Contact </li>
<li> Join Us </li>
</ul>
</div>
my css file:
.navigation-bar {
display:flex;
margin: 0;
padding: 0;
align-items: center;
text-align: center;
}
.logo {
float: left;
}
.navigation-container {
display: flex;
justify-content: space-betwee;
width: 100%; /*left side*/
margin-top: 5rem;
border: 1px solid;
border-color: green;
}
.navigation-container ul {
margin: 0;
padding: 0;
width: 100%; /*right side*/
height: 70px;
background-color: yellow;
}
.navigation-container li {
display: inline;
}
.navigation-container a {
padding: 10px;
text-decoration: none;
thanks for your time.
First you need to put your image inside your List
<div class = "navigation-container">
<ul>
<li><img class = "logo" src ="{% static 'financeapp/family examiner 2.png' %}"
alt="company logo" height = 150px width = 150px style="background-color: black;"></li>
<li> Home </li>
<li> About </li>
<li> Contact </li>
<li> Join Us </li>
</ul>
</div>
Then you can put a margin-top on your list to make it go down, so the picture does properly fit later
.navigation-container {
display: flex;
justify-content: space-betwee;
width: 100%; /*left side*/
margin-top: 5rem;
}
Then you can set your .logo to margin-top: -43px; as example and the logo will move up.
You will need to play around with the numbers to make it so you like the look.
Also important note is that none of this is responsive and it will probably not look good later on.
You always should start to design for mobiles first.
Related
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 need to display images in my grid with the following idea: every li elements of each ultag should stay in the same row and be 100% width of the container.
As you can see in the jsfiddle, for the demo, I created 3 ul. So I would like 3 rows of images.
The jsfiddle: is here
The final result should be like below:
I don't know how to proceed so that every row takes 100% width.
So every row (ul) may contains 1, 2, 3, 4 or 5 images.
every li elements of each ultag should stay in the same row and be 100% width of the container
You needs to use Flexbox
Result
ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
margin-bottom: 3px;
}
li {
flex-grow: 1;
}
li+li {
margin-left: 3px;
}
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
<ul>
<li>
<img src="https://via.placeholder.com/250x200?text=A1">
</li>
<li>
<img src="https://via.placeholder.com/150x200?text=A2">
</li>
<li>
<img src="https://via.placeholder.com/350x200?text=A3">
</li>
</ul>
<ul>
<li>
<img src="https://via.placeholder.com/200x200?text=B1">
</li>
<li>
<img src="https://via.placeholder.com/300x200?text=B2">
</li>
<li>
<img src="https://via.placeholder.com/150x200?text=B3">
</li>
</ul>
<ul class="fivePerRow">
<li>
<img src="https://via.placeholder.com/250x200?text=C1">
</li>
<li>
<img src="https://via.placeholder.com/150x200?text=C2">
</li>
<li>
<img src="https://via.placeholder.com/350x200?text=C3">
</li>
<li>
<img src="https://via.placeholder.com/200x200?text=C4">
</li>
<li>
<img src="https://via.placeholder.com/300x200?text=C5">
</li>
</ul>
And same code on JSFiddle
I think using Flexbox will do the job.
ul {
width: 100%;
list-style: none;
display: flex;
justify-content: space-between;
}
li {
display: inline-block;
vertical-align: top;
}
Codepen Demo
I'm trying to add a site banner above the menu on my site using a simple img tag but whenever I do so the menu just overlaps the image. What I want to achieve is the menu to be pushed down by the image above it so it appears right under it.
HTML:
<header>
<img src="site_logo.jpg" alt="">
<img src="banner_small.png" alt="" id="banner">
<nav>
<ul>
<li class="selected">Main page
</li>
<li>Classes
</li>
<li>Game modes
</li>
<li>Contact
</li>
</ul>
</nav>
</header>
My first img is for the site logo and the second one is in the menu. I want to position the first img to be on top of the site and push the menu down
CSS:
header {
height: 50px;
background: #333333;
}
header nav {
display: inline-block;
vertical-align: middle;
}
header nav ul {
margin: 0;
padding: 0;
}
#banner,
header ul li {
display: inline-block;
vertical-align: middle;
}
header nav > ul > li {
box-sizing: border-box;
height: 50px;
padding: 12px;
position: relative;
}
Try to put the images inside div elements:
<div id='x'><img src="site_logo.jpg" alt=""></div>
<div id='y'><img src="banner_small.png" alt="" id="banner"></div>
Then if you want to increse ou decrease the space between elements use the Margin property:
x{margin-bottom:...px;}
y{margin-top:...px; margin-bottom:..px;}
I'm a really new at this but I don't manage to ge the menu bar to get in line with the rest of the content on the page. Can someone just explain how to think to get everything in line and so everything scale nicely?
HTML:
<div id="all">
<ul id="menu1">
<li><img src="Pic/Homemini.png"></li>
<li><img src="Pic/MeMINI.png"></li>
<li><img src="Pic/portfolioMINI.png"></li>
<li><img src="Pic/contactMINI.png"></li>
</ul>
<ul id="menu2">
<li><img src="Pic/Home.png"></li>
<li><img src="Pic/Me.png"></li>
<li><img src="Pic/portfolio.png"></li>
<li><img src="Pic/Contact.png"></li>
</ul>
<div id="box1MINI"><img src="Pic/box1MINI.png"></div>
<div id="main"><img src="Pic/main.png"></div>
<footer>
<p>DID YOU KNOW?</p>
<p>alsdjaljsdkasjd askldjalksdj <br> asdlkjaslkd asldkjasldj asldk <br> alsdkjalksdj lakdj</p>
</footer>
</div>
CSS:
/* ALL CONTENT */
* {
max-width: 100%;
}
#all{
margin: auto;
}
/* END ALL CONTENT */
/* HEADER */
ul li{
display: inline-block;
width: 20%;
}
#menu2{
display: none;
}
#box1MINI{
max-width: 80%;
min-width: 60%;
margin: auto;
}
/* END HEADER*/
/* MAIN SPACE */
#main{
margin: auto;
max-width: 80%;
}
/* END MAIN SPACE */
/* FOOTER*/
footer{
background-color: darkgreen;
width: 80%;
padding: 1px;
margin: auto;
text-align: center;
}
/* END FOOTER*/
The issue you were getting because you gave "60%" width to "#box1MINI" and "80%" to "#main and footer". And no width to "Menus"
Whereas you should give width to the "Outermost" container which is "#all" in your case. and set that to center by "margin: 0 auto;" property. And keep everything else inside the "#all" container.
I have updated your code and made some modifications as per good practice.
Please find the Updated code below:
HTML
<div id="all">
<ul id="menu1">
<li>
<img src="Pic/Homemini.png">
</li>
<li>
<img src="Pic/MeMINI.png">
</li>
<li>
<img src="Pic/portfolioMINI.png">
</li>
<li>
<img src="Pic/contactMINI.png">
</li>
</ul>
<ul id="menu2">
<li>
<img src="Pic/Home.png">
</li>
<li>
<img src="Pic/Me.png">
</li>
<li>
<img src="Pic/portfolio.png">
</li>
<li>
<img src="Pic/Contact.png">
</li>
</ul>
<div id="box1MINI">
<img src="Pic/box1MINI.png">
</div>
<div id="main">
<img src="Pic/main.png">
</div>
<footer>
<p>DID YOU KNOW?</p>
<p>
alsdjaljsdkasjd askldjalksdj
<br>
asdlkjaslkd asldkjasldj asldk
<br>
alsdkjalksdj lakdj
</p>
</footer>
</div>
CSS
html,
body {
height: 100%;
}
body {
margin: 0 auto;
}
#all {
margin: 0 auto;
width: 80%;
}
/* END ALL CONTENT */
/* HEADER */
ul {
margin: 0;
padding: 0;
}
ul li {
display: inline-block;
width: 24.6%;
margin: 0;
padding: 0;
}
#menu2 {
display: block;
}
#box1MINI {
min-width: 60%;
margin: auto;
}
/* END HEADER*/
/* MAIN SPACE */
#main {
margin: auto;
}
/* END MAIN SPACE */
/* FOOTER*/
footer {
background-color: darkgreen;
padding: 1px;
margin: auto;
text-align: center;
}
/* END FOOTER*/
Working Fiddle: http://jsfiddle.net/96ft87ev/1/
Hope this will help!
Let me know if you were looking for something else!
Add this selector:
#menu1 {
text-align:center;
}
Since you've set the li elements to be displayed as inline, they conform to text-alignment rules.
Edit: After this, the nav bar was still slightly off-center. This is due to a couple reasons. First of all, parts of your HTML are invalid, resulting in tags not being nested properly. Your link, img, and br tags all need to be self-closing. That just means you need to add a / (slash) before the > symbol on the tag.
After you've fixed that, simply remove the padding that is added to the li elements by adding padding:0 to the #menu1 selector.
Here is an example (I've added borders, but you can remove them).
When using percentages, it uses the parent to calculate. You want each li to be 20% of the page, not 20% of the parent (ul). Set the width for menu1 as 80%, then each li is 25% of that. Give the ul auto margins and it will line up with content.
#menu1{
margin: auto;
width:80%; //same as content
padding: 0px;
}
ul li{
display:inline-block;
width: calc(25% -4px); //each image is 25% of the parent, parent is 80% of page
box-sizing: border-box; //includes border and padding in box size
}
fiddle
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. ;)