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; }
Related
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>
I'm starting ton code and I have some struggles with this website. First, I made the header with a nabber in it but I can't align it to the right, if I try it with float:right it switches the links. And underneath all that I want a big picture but auto height and width doesn't work if I make the page bigger.
<!DOCTYPE html>
<style>
header{ background-color: white;
margin-left: 20px;
margin-top: 30px;
}
img.logo{ width: 200px;
height: 30px;
}
li{ display: inline;
}
ul{ position: fixed;
top: 20px;
}
a{ font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
}
img.picvp{margin-top: 20px;
width: auto;
height: auto;
}
</style>
<header>
<img class="logo" src="#">
<ul>
<li style="float:right;">Projecten</li>
<li style="float:right;">over</li>
<li style="float:right;"><a href='#'>Contact</a></li>
</ul>
</header>
<sec>
<img class="picvp" src="https://lh4.googleusercontent.com/G3M2vxtCatAm1yxWxUA0VVLZjtePu32ziMPd6TLL3wQhk53s4mokl5v_7Rx0crGBp_2Q6iZJnRU-lzQ=w1262-h905">
</sec>
Thank you!
Using display:flex will help with this.
.header{
background-color: white;
align-items: center;
display: flex;
margin-left: 20px;
margin-top: 30px;
}
.logo{
background-color: #0f0;
width: 200px;
height: 30px;
}
.nav {
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 0.5px;
margin-left: auto;
}
.nav li{ display: inline-block; }
.nav a {
border-left: solid 1px;
display: block;
padding: 1em;
}
img.picvp{
margin-top: 20px;
width: auto;
height: auto;
}
<header class="header">
<img class="logo" src="#">
<ul class="nav">
<li>Projecten</li>
<li>over</li>
<li><a href='#'>Contact</a></li>
</ul>
</header>
<sec>
<img class="picvp" src="https://lh4.googleusercontent.com/G3M2vxtCatAm1yxWxUA0VVLZjtePu32ziMPd6TLL3wQhk53s4mokl5v_7Rx0crGBp_2Q6iZJnRU-lzQ=w1262-h905">
</sec>
Here is a link to the solution: Fiddle N1
You just needed to add: width: 100%; to the class img.picvp.
Another thing is that you should've set your ul elements like that:
ul{
position: relative;
display: inline;
text-align:right;
}
text-align:right automatically pulls the elements to the right side of the parent div. Also use relative positioning rather than fixed one. I have made some changes to the width of the background image as well. Compare the changes to the code so you can see what exactly has been changed.
hii i modify some of code but impornant i use parent and child an example in your i use as parent and as child see example as follow
(dont forgot to change img src)
header{ background-color: white;
margin-left: 20px;
margin-top: 30px;
}
img.logo{
width: 1100px;
height: 130px;
}
ul,li{ display: inline;
text-decoration:none;
}
a,li{
display: inline;
}
a{ font-family: 'Open Sans', sans-serif;
text-decoration:none;
display: inline;
}
img.picvp{margin-top: 20px;
width: auto;
height: auto;
}
<img class="logo" src="nows.jpg">
<ul>
<li style="float:right;">Projecten</li>
<li style="float:right;">over</li>
<li style="float:right;"><a href='#'>Contact</a></li>
</ul>
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
I'm trying to vertically stretch my vertical side banners to the bottom of the page, and make the footer in the bottom left be in the bottom center. I've been looking for a solution to this issue, but am unable to find it as of yet. I am doing this for a school assignment, and thus, am still in the learning process. Please explain what needs to be done to fix this too if you can. Thanks!
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="headers_t">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240" />
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
</span>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers_t{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
margin: 0px;
padding-top: 191px;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h, img{
display: block;
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
This is what the problem in the site looks like:
Image of Problem http://i.tinyuploads.com/cwPP9R.jpg
Jokan welcome! Its typical for front end questions like this to be mocked up on a site like jsfiddle.com, that way other users can easily see what your talking about and help you find a solution.
If I understood you correctly, heres your solution in a fiddle. You just want the banner to be the height of the browser window right?
I just set the height of .banner_h to 100% like so:
.banner_h {height:100%;}
#footer {width:100%; text-align: center;}
This may help you, ammend your following css style to-
.banner_l{
float: left;
border:thin solid #000;
width:200px;
position:fixed;
height:auto;
min-height:380px;
margin-top:-20px;
}
.banner_r{
float: right;
border:thin solid #000;
margin-top:-20px;
width:200px;
min-height:380px;
height:auto;
}
#footer {
width:100%;
height:30px;
background:#090;
float:left;
position:fixed;
padding:5px;
bottom:0px;
text-align:center;
}
change position style to relative or absolute as u need.
I have six links inside a 100% width DIV.
How can I stop my links from stacking on top of each other, moving, down, and disappearing as I shrink the size of my browser? I would like to have them remain inside the horizontal div.
Here is my code:
.nav {
width: 100%;
height: 84px;
float: left;
background: #333;
}
.logo {
width: 317px;
height: 84px;
float: left;
background: url('img/lifesign.png');
}
.navlink {
height: 84px;
font-family: 'open_sansbold';
color: #FFF;
text-align: center;
line-height: 84px;
padding-left: 22px;
padding-right: 22px;
float: right;
font-size: 80%
}
<div class="nav">
CONTACT
GET INVOLVED
Q+A
HOW IT WORKS
WHO WE ARE
<a class="logo" href="home.htm"></a>
</div>
Set a min-width on your .nav class.
.nav {
width: 100%;
height: 84px;
float: left;
background: #333;
min-width: 960px; /* or whatever width you need */
}
I think the ideal here would be to create a div of fixed width (id of 'page' below) to contain your nav and other page elements. I also took the liberty of cleaning up some of the structure of the nav itself, as well as some of the more unnecessary rules. I think a list is ideal here. You may want to reverse the order of it since you are floating right but otherwise it works great.
<html>
<head>
<style>
body { text-align: center; }
#container { width: 960px; margin: 0 auto; }
#nav { overflow: hidden; list-style: none; padding: 0; margin: 0; background: #333; }
#nav li { float: right; }
#nav li.logo { float: left; }
#nav li a { display: block; padding: 0px 22px; color:#FFF; background: #333; text-align:center; line-height:84px; font-family: 'open_sansbold'; font-size:80%; }
#nav li.logo a { width: 317px; height: 84px; background:url('img/lifesign.png') red; }
</style>
</head>
<body>
<div id="container">
<ul id="nav">
<li class="logo"></li>
<li>CONTACT</li>
<li>GET INVOLVED</li>
<li>Q+A</li>
<li>HOW IT WORKS</li>
<li>WHO WE ARE</li>
</ul>
<div id="main">
<!-- page content here -->
</div>
</div>
</body>
</html>