So I recently started creating some Webpages in my freetime and I was wondering how I can create a list that normally has a distance of like 95 pixels to the its next element to automatically detect if the window you're using gets smaller and thus decrease the distance to a certain minimum. Another solution would be to enforce a minimum width for the webpage but I couldn't find a way to do that either. The current problem for me is that I have 2 headers, and whenever I make the page small enough, it creates a new line with 1 word of the 2nd header.
HTML
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Nunito|PT+Serif+Caption|Heebo" rel="stylesheet">
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class='header'>
<h1>This is my homepage welcome!</h1>
<nav id='nav'>
<ul>
<li>
<a href='#'>My Life</a>
</li>
<li>
<a href='#'>My Skills</a>
</li>
<li>
<a href='#'>My Hobbys</a>
</li>
<li>
<a href='#'>My Qualifications</a>
</li>
</ul>
</nav>
</div>
<div class='container'>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
border: 0;
}
.header {
width: 100%;
height: 60px;
line-height: 60px;
background: #222;
color: white;
text-align:center;
}
h1{
font-family: 'Heebo', sans-serif;
text-align: center;
text-transform: uppercase;
}
#nav {
height: 25px;
line-height: 25px;
width: 100%;
background: LightGrey;
position: absolute;
}
#nav ul li {
display: inline-block;
list-style: none;
}
#nav ul li a {
color: grey;
font-family: 'Heebo', sans-serif;
text-decoration:none;
margin: 50 ;
width: 500px;
}
.container{
height: 500px;
width: 100%;
background-image: url("https://wallpaperscraft.com/image/mountain_lake_landscape_reflection_86115_3840x2400.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Links are inline elements. Adding display: inline-block will make them have box model:
a {
display: inline-block;
width: 100px;
line-height: 100px;
background: #ccf;
text-align: center;
}
Link
Related
I cannot get hover to work on the dummy links in my CodePen. The cursor won’t even change to the hand icon. I am referring to the navigation bar, the dummy links do not work properly. Here is the CodePen
* {
box-sizing: border-box;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background-image: url("wallpaper2.jpg");
background-repeat: repeat;
}
.header {
width: 100%;
background: black;
height: 100px;
color: white;
}
.wrapper {
margin: 0 auto;
width: 75%;
background: pink;
height: 1000px;
}
h1 {
margin: 0 auto;
position: relative;
top: 30px;
left: 15px;
font-size: 2em;
}
ul {
list-style-type: none;
float: right;
margin: auto;
}
li {
display: inline-block;
padding-left: 20px;
font-size: 1.4em;
}
.lastlist {
padding-right: 65px;
}
a:hover {
color: #f0c330;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<div class="header">
<nav>
<h1>Daniel Savva</h1>
<ul>
<li> Home </li>
<li> Gallery </li>
<li> About </li>
<li class="lastlist"> Contact </li>
</ul>
</nav>
</div>
<div class="wrapper"></div>
<div class="column"></div>
</body>
</html>
Your h1 tag is overlapping the ul tag
Solution is to add position:relative to your ul tag :)
Because Without any z-index value, elements stack in the order that they appear in the DOM and elements with non-static positioning ( relative ,absolute ..) will always appear on top of elements with default static positioning.
h1 : position:relative
ul : default static position
Adding position:relative will force your ul element to be on TOP.
* {
box-sizing: border-box;
}
body {
width: 100%;
margin: 0 auto;
padding: 0;
background-image: url("wallpaper2.jpg");
background-repeat: repeat;
}
.header {
width: 100%;
background: black;
height: 100px;
color: white;
}
.wrapper {
margin: 0 auto;
width: 75%;
background: pink;
height: 1000px;
}
h1 {
margin: 0 auto;
position: relative;
top: 30px;
left: 15px;
font-size: 2em;
}
ul {
list-style-type: none;
float: right;
margin: auto;
position : relative ;
}
li {
display: inline-block;
padding-left: 20px;
font-size: 1.4em;
}
.lastlist {
padding-right: 65px;
}
a:hover {
color: #f0c330;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
<body>
<div class="header">
<nav>
<h1>Daniel Savva</h1>
<ul>
<li> Home </li>
<li> Gallery </li>
<li> About </li>
<li class="lastlist"> Contact </li>
</ul>
</nav>
</div>
<div class="wrapper"></div>
<div class="column"></div>
</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
So I cant find a way to keep this navbar in my website from automatically putting itself over top of a header image! I try setting the navbar's position to relative, but that doesn't do anything! I wanna keep my header image's position to be both top and left 0, but without setting the images position to absolute, I cannot get the image to stay at 0 top and left on the screen!
body {
font-family: Roboto;
background-color: #F0F0F0;
}
.header-img {
position: absolute;
background-repeat: no-repeat;
top: 0px;
left: 0px;
}
.navbar ul {
list-style-type: none;
color: white;
position: relative;
}
.navbar ul li {
border: 1px solid black;
padding-right: 2em;
padding-left: 2em;
display: inline;
}
<!DOCTYPE html>
<head>
<title>Official Rusty Ohio Server</title>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<img src="rusty ohio background.png" class="header-img" width="100%" height="95%">
<nav class="navbar">
<ul>
<li>Plugins</li>
<li>Server Status</li>
<li>Donate</li>
</ul>
</nav>
</body>
</html>
try this in css
.navbar{
position: absolute;
z-index: 11;
}
.header-img{
z-index:10;
}
I would recommend using a background image which will give you more control over the image re-sizing respective to your container. You can implement something like below to achieve what you want.
body {
font-family: Roboto;
background-color: #F0F0F0;
}
#header-wrapper {
width: 100%;
height: 50px;
}
.header-img {
float: left;
width: 100px;
margin: 0px;
height: 100%;
background-image: url("http://cdn6.bigcommerce.com/s-kjbnzo2/products/12634/images/13240/LP_8206__81949.1444680903.500.500__96128.1446754363.1280.1280.jpg?c=2");
background-repeat: no-repeat;
background-size: auto 100%;
top: 0px;
left: 0px;
}
.navbar {
float: left;
width: 80%;
}
.navbar ul {
list-style-type: none;
color: white;
position: relative;
}
.navbar ul li {
border: 1px solid black;
padding-right: 2em;
padding-left: 2em;
display: inline;
}
<div id="header-wrapper">
<div class="header-img"></div>
<nav class="navbar">
<ul>
<li>Plugins</li>
<li>Server Status</li>
<li>Donate</li>
</ul>
</nav>
</div>
I have been in this problem for a while now, everytime I resize the navigation bar it keeps on adding 1 line at the bottome if the size ddint match. can anyone help me delete that little space after the contact me tab? thanks in advance.
this is the link of the outcome
my codes is this
obj.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="obj1.css">
<title>Objective 1</title>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li class="navbutton">About Us</li>
<li class="navbutton">Our Team</li>
<li class="navbutton">Education</li>
<li class="navbutton">Health Care</li>
<li class="navbutton">Advertising</li>
<li class="navbutton">Contact Us</li>
</ul>
</div>
</div>
</body>
</html>
obj1.css
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
ul {
display: inline-block;
list-style-type:none;
margin:0;
padding:0;
}
li {
float: left;
}
.header{
width: 900px;
height: 385px;
background-image: url(header.jpg);
}
.navbutton {
position: relative;
top: 310px;
width: 145px;
height: 75px;
margin-left: 0px;
margin-right: 5px;
background-image: url(link.png);
}
.navbutton a {
text-decoration:none;
}
.navbutton:hover{
background-image: url(linkselected.png);
}
You can fix this by adding the following rules:
//Change the header width to 901px to fit all the tabs
.header{
width: 901px;
height: 385px;
background-color: #ccc;
}
//Change the navbutton to be 146px wide
.navbutton {
position: relative;
top: 310px;
width: 146px;
height: 75px;
margin-left: 0px;
margin-right: 5px;
background-color: white;
}
//Remove the margin on the last child
.navbutton:last-child {
margin-right:0;
}
Here is the jsFiddle in case you need it - http://jsfiddle.net/XXczL/
place all the <li> tags in a <div>
set css for that <div id="customDiv">
#customDiv {
margin-left:auto;
margin-right:auto;
}
this will make the left and right margin equal and the extra space is distributed equally on both sides..
You have 2 problems going on here. First, you have margins being applied where you don't actually want them. Even when you correct this, your header's width still causes the appearance of the undesirable "space"
http://tinker.io/0191d/2
Include the following modifications:
.header {
width: 895px; /* or modify the width of the button elements */
}
ul {
margin: 0 0 0 -5px;
}
.navbutton {
margin-left: 5px;
margin-right: 0;
}
You could use the :last-child selector to remove the margin on the last element, but it doesn't work very well in instances where you actually want your elements to wrap (see: http://codepen.io/cimmanon/pen/dwbHi). Also, IE8 doesn't support it.
Check this jsfiddle for a fluid layout solution.
This solution uses the display: table, display: table-row, and display: table-cell property values.
Markup
<div class="header">
<div class="nav">
<ul>
<li class="navbutton">
About Us
</li>
<li class="navbutton">
Our Team
</li>
<li class="navbutton">
Education
</li>
<li class="navbutton">
Health Care
</li>
<li class="navbutton">
Advertising
</li>
<li class="navbutton">
Contact Us
</li>
</ul>
</div>
</div>
CSS
body{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
.nav ul{
display: table-row;
list-style-type: none;
margin: 0;
padding: 0;
}
.header{
width: 900px;
height: 385px;
background: #f00 url(header.jpg);
overflow: hidden;
border: 1px solid #000
}
.nav{
display: table;
width: 100%;
margin-top: 310px;
}
.navbutton{
display: table-cell;
height: 75px;
background-image: url(link.png);
padding: 0 4px;
}
.navbutton a{
background: none repeat scroll 0 0 #FFFFCC;
color: #FF0000;
display: block;
height: 100%;
line-height: 75px;
text-decoration: none;
text-align: center;
}
.navbutton:hover{
background-image: url(linkselected.png);
}
li:last-child, li.the_last_child{ padding-right: 0; }
li:first-child, li.the_first_child{ padding-left: 0; }