I am currently designing a simple web page which will consist of a logo, a horizontal navbar to the right of that, a full width image with a fixed height underneath and if on a certain page, an extra horiontal navbar underneath. Something like this:
HTML
<img src="img/imgicon.jpg" />
<nav id="mainnav" style="float: right />
<img src="img/fixedimg" style="width: 100%; height: 30%; />
<nav id="secondnav" />
The problem I have is that the fixed image is always full size and not fixed. I've tried using a parent container (div) and setting a fixed height on that, however the image always goes full size. The only solution I could find is setting the position of the image to absolute but then the nav bar underneath is hidden under the image, and I don't want to use 20 <br> to get it underneath.
What would be the best possible way to solve this?
Here's a snippet:
body {
font-family: cambria;
margin: 0;
}
/*TOP NAVBAR */
#topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
float: right;
height: 71px;
}
#topnav li {
margin-top: 13px;
float: right;
}
#topnav li a {
display: block;
padding-top: none;
padding: 14px 16px;
text-decoration: none;
font-weight: bold;
color: #4d4d4d;
margin-right: 3px;
}
#topnav li a:hover {
color: blue;
}
.active1 {
color: blue;
}
/*SECONDARY NAVBAR */
#secondnav {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #666666;
border-bottom: 5px solid #8c8c8c;
width: 100%;
}
#secondnav li {
float: left;
}
#secondnav li a {
display: block;
padding-top: none;
padding: 14px 16px;
text-decoration: none;
color: white;
margin-right: 3px;
font-weight: bold;
}
#fullwidth {
width: 100%;
}
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="stylesheet/stylesheet.css" />
<title>Website</title>
</head>
<body>
<!--LOGO-->
<div style="width: 100%; height: 71px;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png" style="float: left; margin-left: 150px; height: 71px; width: 220px;" />
<!--MAIN NAV-->
<ul id="topnav">
<li>LOGIN
</li>
<li>GALLERY
</li>
<li>CONTACT
</li>
<li>INFORMATION
</li>
<li>HOME
</li>
</ul>
</div>
<div style="height: 5%; width: 100%;">
<img src="http://images.freecreatives.com/wp-content/uploads/2016/04/Blue-Scratched-Textured-Background.jpg" alt="welcome" style="width: 100%; height: 5px%;" />
</div>
<!--SECONDARY NAV-->
<ul id="secondnav">
<li>HOME
</li>
<li>HOME
</li>
<li>HOME
</li>
<li>HOME
</li>
<li>HOME
</li>
</ul>
</body>
</html>
As you can see from the snippet, even though the image is set to small it goes full size, as if I haven't set any attributes at all.
Use css and give the img a class
#fixed {
width: 100% height: 30%;
}
<img src="img/imgicon.jpg">
<nav id="mainnav" style="float: right;>
<img class=" fixed; src="img/fixedimg,png">
<nav id="secondnav"></nav>
Related
I don't know how to align it with the logo. I'm trying to use padding but it won't work and even float maybe I would change the container size for it to work. Btw you won't be able to see the image and the li option due to overflow not allowing links so I have attached an image for more convenience
if possible maybe even tell some tips to be better in HTML
enter image description here
header {
height: 600px;
background-image:urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo{
height: 150px;
width: 450px;
}
img.logo{
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
}
nav ul {
margin: 0;
padding:0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
color: #111111;
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
If you want to make logo and menu in a line, you should add "float: left" style to your div. So your style will be this:
.header-logo {
height: 150px;
width: 450px;
float: left;
}
Then if you want change your menu vertical align you can add "margin-top: px" to your ul like this:
nav ul {
margin: 0;
padding: 0;
margin-top: 50px;
}
As logo div and ul are children of same parent,
you can make their parent i.e <nav> as display: flex to align it's children in a flex-row
Learn More on FlexBox
nav {
display: flex;
}
header {
height: 600px;
background-image: urlenter code here;
background-repeat: no-repeat;
background-size: cover;
}
.header-container {
height: 1240px;
width: 1240px;
padding-left: 3%;
}
.header-logo {
height: 150px;
width: 450px;
}
img.logo {
width: 400px;
height: 150px;
}
nav {
padding-top: 10px;
display: flex;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-flex;
margin-left: 50px;
list-style-type: none;
}
nav ul li a {
padding-bottom: 11px;
font-family: 'Raleway', sans-serif;
font-weight: bold;
font-size: 16px;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.1em;
/* color: #ffffff; */
color: #000; /* changing this so that you can see color */
}
nav ul li a:hover {
border-bottom: 2px solid #f22222;
}
<html lang="en">
<head>
<link rel="stylesheet" href="./css/style.css">
<title>Katalyst Incorporation LLC.</title>
</head>
<body>
<header id="up">
<div class="header-container">
<nav>
<div class="header-logo">
<img class="logo" src="./img/katalyst incorporation logo.png" alt="logo">
</div>
<ul>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
<li>HOME</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
I have changed the font color, so that you can see it working.
I am aware that there are plenty of question identical to mine, but it seems that I have a problem with my code. I'm trying to make a website, and for now the layout I'm looking for is a logo at the very top followed by the name of the brand and then under it a navigation bar. I did the nav bar first, but when trying to put the image in, I couldn't resize it, let alone center it with text. Can somebody help me achieve what I'm trying to do, or at least explain what I'm doing wrong? Thanks
P.S. Here is my code.
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo img{
float: center;
width: 80;
height: 80;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
P.S.S. If it helps, when I inspect the image on the page, I get this thing here.
There is no float: center. Instead, you can use text-align: center; on .logo (the container of the image). And you need to use the px unit on width and height of the image.
BTW: Since you wrote about centering image and text, I added an h1 in my snippet which is also centered via text-align: center. (You could also add settings for margin-top and margin-bottom if you want to change the default distance to the elements above and below)
body {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li {
float: left;
}
h1 {
text-align: center;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
text-align: center;
}
.logo img {
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<h1>Header Text</h1>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
Use display: flex is much easier to use and flexible
body {
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: sticky;
}
li{
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.6s ease;
}
li a:hover {
background-color: #111;
}
.logo {
display: flex;
justify-content: center;
}
.logo img{
width: 80px;
height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style2.css">
<title>QPlugs</title>
</head>
<body>
<header>
<div class="main">
<div class="logo">
<img src="logo.PNG">
</div>
<ul>
<li>Home </li>
<li>Join </li>
<li>Shop </li>
<li>More Info </li>
</ul>
</div>
</header>
</body>
</html>
I'm making a website from scratch and all I currently have is the NAV bar. But I figured I'd get this problem solved before I continue on with development. Anytime I minimise the browser, my nav bar will not stay in a straight line. I've included the code below. The text editor I use is Brackets, I've tried multiple things for the past week but nothing has worked.
//CSS
body {
margin: 0;
background-color: beige;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 86.5%;
margin: 0 auto;
}
.header {
background-color: grey;
width: 100%;
top: 0px;
position: fixed;
}
.header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 0.5%;
}
nav {
float: right;
position: relative;
top: 0px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 99px;
padding-top: 25px;
position: relative;
}
//HTML
<!doctype html>
<html>
<head>
<link href="MPstyle.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>M/P</title>
</head>
<body>
<div class="header">
<div class="container">
<img src="logo.png" alt="logo" class="logo" width="50" height="50">
<nav>
<ul>
<li> Home</li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
</div>
</body>
You are probably looking for something like this.
When I'm stuck with a layout and I cannot get it right, I start by adding borders to each element. This way you see how each element is spaced on the page and based on that I start to tweak CSS properties to place items in its place. Obviously, the more you work with CSS the easier it gets. Once I'm happy with the layout I then remove the borders.
Adjustments I've made:
Made the header full width so it covers the entire width of the page
Gave the logo 20% width of the page.
The remaining space 80% is taken up by the menu
Then each list-item is allowed to take up 20%.
If you resize the page, you'll see that by using percentages it will assign space properly. I hope this helps you along and good luck with the rest of the page.
//CSS
body {
margin: 0;
background-color: beige;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
margin: 0 auto;
}
.header {
background-color: grey;
width: 100%;
top: 0px;
position: fixed;
border: 1px solid black;
}
.logo {
float: left;
width: 19%;
border: 1px solid blue;
}
nav {
float: right;
position: relative;
top: 0px;
width: 80%;
border: 1px solid yellow;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
text-align: center;
}
nav li {
position: relative;
display: inline-block;
width: 20%;
margin: 1rem 0;
border: 1px solid red;
}
//HTML
<!doctype html>
<html>
<head>
<link href="MPstyle.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>M/P</title>
</head>
<body>
<div class="header">
<div class="container">
<img src="logo.png" alt="logo" class="logo" width="50" height="50">
<nav>
<ul>
<li> Home</li>
<li> About</li>
<li> Portfolio</li>
<li> Contact</li>
</ul>
</nav>
</div>
</div>
</body>
/*==================this is the part that is causing me headaches, I can't get the Header to stay flush with the top without losing the layout*/
header {
background-image: url("images/song.png");
background-color: #00020e;
height: 210px;
width: 1050px;
margin: auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top: 180;
width: 100%;
height: 40px;
}
li {
float: left;
}
li a {
display: block;
color: #620000;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-family: 'oswald', sans-serif;
font-weight: 600;
}
li a:hover {
color: white;
}
li a:active {
color: white;
}
body {
background-image: url(images/v_bkgd.png);
Background-repeat: no-repeat;
background-position: center;
background-color: #00020e;
}
P {
font-family: 'roboto condensed', sans-serif;
font-size: 16px;
font-weight: 400;
}
#logo {
float: left;
padding: 5px 30px;
}
#nav_title {
color: #620000;
height: 170px;
line-height: 170px;
}
#nav_title p {
display: inline;
font-size: 36px;
font-family: 'oswald', sans-serif;
}
section {
width: 700px;
background-color: #d1d1d1;
height: 600px;
float: left
}
aside {
width: 300px;
background-color: #d1d1d1;
height: 600px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
</style>
<!-- Index.html -->
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css" />
<title>Lilydale Football Club</title>
</head>
<body>
<header>
<div id="fixed_header">
<a id="logo" href="index.html">
<img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
</a>
<div id="nav_title">
<p style="font-weight:400;">LILYDALE</p>
<p style="font-weight:200;">FOOTBALL CLUB</p>
</div>
<nav>
<ul>
<li> Home
</li>
<li> History
</li>
<li> Players
</li>
<li> Sponsors
</li>
<li> News
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<section></section>
<aside></aside>
</div>
</body>
</html>
So basically, I can't seem to get the header flush with the top of the page. I can see the background image at the top behind the header, I don't want that. I am clearly new to all of this and this is my first attempt at coding a website.
Here is a screenshot
The reason there is a small gap here is because the standard element styling in many browsers includes automatic value for things like padding and margin. It's a good idea to initialize these CSS values for all elements when starting new projects.
Learn more about CSS resets here.
Adding padding:0 and margin:0 to your body solves the issue. I changed the styling of your header to better illustrate that it is indeed flush with the top of the page now. There is still a small gap between your logo and the top of the page however because of the padding on your logo.
/*==================this is the part that is causing me headaches, I can't get the Header tostay flush with the top without losing the layout it self*/
header {
background-image: url("images/song.png");
background-color: white;
border:1px solid red;
height: 210px;
width: 1050px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
top: 180;
width: 100%;
height: 40px;
}
li {
float: left;
}
li a {
display: block;
color: #620000;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-family: 'oswald', sans-serif;
font-weight: 600;
}
li a:hover {
color: white;
}
li a:active {
color: white;
}
body {
padding:0;
margin:0;
background-image: url(images/v_bkgd.png);
Background-repeat: no-repeat;
background-position: center;
background-color: #00020e;
}
P {
font-family: 'roboto condensed', sans-serif;
font-size: 16px;
font-weight: 400;
}
#logo {
float: left;
padding: 5px 30px;
}
#nav_title {
color: #620000;
height: 170px;
line-height: 170px;
}
#nav_title p {
display: inline;
font-size: 36px;
font-family: 'oswald', sans-serif;
}
section {
width: 700px;
background-color: #d1d1d1;
height: 600px;
float: left
}
aside {
width: 300px;
background-color: #d1d1d1;
height: 600px;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
</style>
<!-- Index.html -->
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css" />
<title>Lilydale Football Club</title>
</head>
<body>
<header>
<div id="fixed_header">
<a id="logo" href="index.html">
<img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
</a>
<div id="nav_title">
<p style="font-weight:400;">LILYDALE</p>
<p style="font-weight:200;">FOOTBALL CLUB</p>
</div>
<nav>
<ul>
<li> Home
</li>
<li> History
</li>
<li> Players
</li>
<li> Sponsors
</li>
<li> News
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<section></section>
<aside></aside>
</div>
</body>
</html>
write following on the top of your CSS file (before any other code)
*
{
margin:0;
padding:0;
}
Every browser has some default padding and margin. By writing the above lines on the top your css file you are saying that every element (denoted by *) should have margin and padding as 0 when the page loads. I hope this helps
Somehow there is this fixed white space between the name "Larry Rosenburg" and the picture below it. No matter how I change the margin, it doesn't affect the distance. Here is a screen shot screenshot!
How can i shorten the white space?
here is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Larry Rosenburg Official Website </title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<img src ="lincoln.jpg" width ="27%" alt="Lincoln logo" id="logo_picture">
<nav>
<ul>
<li> Home </li>
<li> Lincoln </li>
<li> About </li>
<li> Contact </li>
</ul>
</nav>
</div>
</header>
<div class="clearfix"> </div>
<div id="title">
<p>Larry Rosenburg </p>
</div>
<div id="profile">
<img src="picture.jpg" width="25%" alt="" id="profile-pic" >
</div>
</body>
<footer>
</footer>
</html>
And here is the css:
body{
width: 100%;
}
#logo_picture{
margin-left: 80px;
}
#logo img, #logo nav{
float: left;
}
#logo nav{
line-height: 120px;
margin-left: 250px;
}
nav ul{
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li{
display: inline;
}
nav a{
color: black;
font-size: 20px;
font-family:'Arsenal', 'sans-serif';
font-weight: 300;
padding: 2px 38px;
text-decoration:none;
}
nav a, nav a:visited {
color: black;
}
nav a.selected, nav a:hover{
color: grey;
}
#title{
font-size: 70px;
margin-top: 70px;
margin-bottom: 0;
text-align: center;
font-family: 'Anton','sans-serif';
}
#profile-pic{
border-radius: 30px;
background: url('picture.jpg');
margin: 30px auto;
display: block;
padding: 0;
border-top: 0;
}
.clearfix {
clear: both;
}
Your CSS margin: 30px auto; of #profile-pic sets the top and bottom margin as 30px. That is the white space you are seeing. Either set the margin individually or set it all at once. Don't use the current style.
Before posting questions like this, please try to inspect the html element using any Web Browser. All web browsers shows the layout and margins of elements. It would help you in solving issues faster.
I have edited this. now you may try this because it works fine in my device.
#profile-pic {
background: rgba(0, 0, 0, 0) url("picture.jpg") repeat scroll 0 0;
border-radius: 30px;
border-top: 0 none;
display: block;
margin: -60px auto;
padding: 0;
}
[here the screenshot][checked]
Try this.
<p style="margin-bottom:0px">Larry Rosenburg </p>
There might be some margin-top on the image as well.