So I'm building a website in html and css. I have made a navigation bar with the links, but when I zoom out, the links go underneath one another instead of inline. If someone can give me some pointers, that'd be great. Thanks
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="wrap">
<div class="logo"><img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>
body {
padding: 0;
margin: 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.wrap {
width: 960px;
margin: auto;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
min-height: 300px;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}
"the links go underneath one another instead of inline"
To fix this, you will want to add the float: left; property to your li like so:
ul li {
display: inline-block;
float: left;
color: #828282;
padding: 2px 40px;
background: #595959;
border:1px solid #828282;
margin: 0 10px;
}
Related
I'm making an HTML web-page with Notepad++, but the navigation bar items won't adjust it's length to the screen. I could really need help with that.
Here is my code:
<head>
<style>
html {
height: 100%;
width: 100%;
}
body {
background-color: #FFE4E1;
font-family: jokerman, 'times new roman', serif;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
nav ul {
display: table;
width: 99, 5%;
height: 40px;
border: #F08080 4px solid;
list-style: none;
margin: 0;
padding: 0;
white-space: nowrap;
text-align: center;
}
nav ul li {
text-align: center;
float: left;
order: 1;
display: table-cell;
}
nav ul li a {
display: table-cell;
position: relative;
padding-left: 95.85px;
padding-right: 95.85px;
line-height: 41px;
border-right: #F08080 4px solid;
border-left: #F08080 4px solid;
text-decoration: none;
font-size: 20px;
color: #DAA520;
background-color: #CD5C5C;
}
inline li {
width: calc(100/5)
}
</style>
</head>
<body>
<div style="background-color: peachpuff">
<div id="Logo" style="background-color: darksalmon">
<img src="DragonaxeYT.jpg" alt="Logo" width="200">
<h1>DragonaxeYT.no</h1>
<nav>
<ul>
<li>Hjem</li>
<li>Kalender</li>
<li>Blogg</li>
<li>Om meg</li>
<li>Quizer</li>
</ul>
</nav>
</div>
</div>
</body>
Hope anyone knows how to fix it? I would like it to adjust itself so that the website would work well also on phones. Thanks in advance.
Update your nav ul li and nav ul li a with the following (I commented out code and added width style):
nav ul li{
text-align: center;
/*float: left;*/
order:1;
display: table-cell;
}
nav ul li a{
display: table-cell;
position: relative;
/*padding-left: 95.85px;*/
/*padding-right: 95.85px;*/
line-height: 41px;
border-right: #F08080 4px solid;
border-left: #F08080 4px solid;
text-decoration: none;
font-size: 20px;
color: #DAA520;
background-color: #CD5C5C;
// New style
width: 20vw;
}
View this is action in Codepen: https://codepen.io/Tiarhai/pen/WgGPbj
Here's my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Squallz Test Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>This is a header</h1>
</header>
<div class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Repo</li>
<li>Code</li>
</ul>
</div>
<div class="footer">
<div class="footerinfo">
<p id="copyright">Copyright © Squallz 2017 - Rights Reserved</p>
<p id="info">Personal website by <b>Squallz</b></p>
</div>
</div>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: url("../images/bg.png") no-repeat;
background-attachment: fixed;
}
header {
background-color: #088CAF;
color: white;
width: 100%;
padding: 20px 0;
text-align: center;
}
.navigation {
position: sticky;
}
.navigation ul {
background-color: #075E75;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
border-top: 2px solid #2E2E2E;
border-bottom: 2px solid #2E2E2E;
}
.navigation ul li {
display: inline-block;
padding: 20px;
}
.navigation li:hover {
background-color: #069DAA;
}
.navigation ul li a {
text-decoration: none;
color: white;
font-size: 20px;
}
.footer {
color: white;
text-align: center;
width: 100%;
background-color: #2E2E2E;
border-top: 2px solid #099C9E;
position: absolute;
bottom: -800px;
height: 80px;
overflow: hidden;
}
I just want it to where when I highlight the li with a link in it, the entire thing will be clickable. I know that I could make them all individual divs wrapped by anchors but that's messy
You need to make your a tag full width and height of the li. Moving padding:20px; to your a tag css and adding display:block; allows the links to be clickable, without modifying your HTML.
Update your li tag css to:
.navigation ul li {
display: inline-block;
}
Update your a tag css to:
.navigation ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 20px;
display:block;
}
Full Code:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: url("../images/bg.png") no-repeat;
background-attachment: fixed;
}
header {
background-color: #088CAF;
color: white;
width: 100%;
padding: 20px 0;
text-align: center;
}
.navigation {
position: sticky;
}
.navigation ul {
background-color: #075E75;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
border-top: 2px solid #2E2E2E;
border-bottom: 2px solid #2E2E2E;
}
.navigation ul li {
display: inline-block;
}
.navigation li:hover {
background-color: #069DAA;
}
.navigation ul li a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 20px;
display:block;
}
.footer {
color: white;
text-align: center;
width: 100%;
background-color: #2E2E2E;
border-top: 2px solid #099C9E;
position: absolute;
bottom: -800px;
height: 80px;
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Squallz Test Page</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>This is a header</h1>
</header>
<div class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Repo</li>
<li>Code</li>
</ul>
</div>
<div class="footer">
<div class="footerinfo">
<p id="copyright">Copyright © Squallz 2017 - Rights Reserved</p>
<p id="info">Personal website by <b>Squallz</b></p>
</div>
</div>
</body>
</html>
Simply interchange <li> to <a> like:
<li>Home</li>
Then just change this in your css to retain the design
.navigation ul a {
text-decoration: none;
color: white;
font-size: 20px;
}
Take the padding off your li and set the anchor within to display: block with its own padding.
.navigation li a {
display: block;
padding: 20px;
}
The only real concern is that the targets may be too close together, which you can solve with slightly larger margins between each list item.
Simple add to .navigation ul li a
padding: 20px;
display: block;
And remove it from .navigation ul li
padding: 20px;
Full code:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: url("../images/bg.png") no-repeat;
background-attachment: fixed;
}
header {
background-color: #088CAF;
color: white;
width: 100%;
padding: 20px 0;
text-align: center;
}
.navigation {
position: sticky;
}
.navigation ul {
background-color: #075E75;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
border-top: 2px solid #2E2E2E;
border-bottom: 2px solid #2E2E2E;
}
.navigation ul li {
display: inline-block;
}
.navigation li:hover {
background-color: #069DAA;
}
.navigation ul li a {
padding: 20px;
display: block;
text-decoration: none;
color: white;
font-size: 20px;
}
.footer {
color: white;
text-align: center;
width: 100%;
background-color: #2E2E2E;
border-top: 2px solid #099C9E;
position: absolute;
bottom: -800px;
height: 80px;
overflow: hidden;
}
<header>
<h1>This is a header</h1>
</header>
<div class="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Repo</li>
<li>Code</li>
</ul>
</div>
<div class="footer">
<div class="footerinfo">
<p id="copyright">Copyright © Squallz 2017 - Rights Reserved</p>
<p id="info">Personal website by <b>Squallz</b></p>
</div>
</div>
I'm learning HTML and I've made a program I need help for. I have written all the code but I want the pictures BOB 1/2/3 to be next to each other. Futhermore I don't know why I can't see the "Home". Also want that the the information at the buttom of the page should be next to each other
Thanks in advance :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first website</title>
<meta name="viewport" content="width=divice-width, initial-scale=1.0">
<style>
body{
background: #00FF33;
font-family: Verdana, Tahama, Arial, sans-serif;
font-size: 18px;
overflow: auto;
}
h1, h2, h3 {
text-align: center;
padding-left: 5%;
color: #000066;
}
p {
padding: 2%
color: #000066;
}
img {
text-align: center;
max-width: 100%;
height: auto;
width: auto;
}
#wrapper {
margin: 0 auto;
max-width: 1020px;
width: 98%
background: #000000;
border: 1px solid #878E63;
border-radius: 2px;
box-shadow: 0 0 10px 0px rgba(12, 3 , 25, 0.8);
}
#callout {
width: 100%;
height: auto;
background: #000000;
overflow: hidden;
}
#callout p{
text-align: right;
font-size: 13px;
padding: 0.1% 5% 0 0;
color: #FFFF00;
}
#callout p a{
color: #CC0000;
text-decoration: none;
}
header {
width: 96%;
min-height: 125px;
padding: 5px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 50px;
}
nav ul li {
float: left;
border: 1px solid #878E63;
width: 15%;
}
nav ul li a {
background: #F1F0D1;
display: black;
padding: 5% 12%
font-weight: bold;
font-size: 18px;
color: #878E63;
text-decoration:none;
text-align: center;
}
nav ul li:hover, nav ul li.active a {
background-color: #878E63;
color: #878E63;
}
.banner img {
width: 100%;
border-top: 1px solid: #878E63;
border-bottom: 1px solid: #878E63;
}
.clearfix {
clear: both;
}
.BobContainer{
width: 29%;
display: inline-block;
text-align: center;
margin: 0 1.666%;
}
.left-col {
width: 55%;
margin: -2% 1% 1%;
float: left;
}
.sidebar {
width: 40%;
float: right;
margin: 1%;
text-align: center;
}
.hallo{
float: left;
margin: 0 auto;
width: 100%;
height: auto;
padding: 1%;
}
.section{
width: 29%;
margin: 2% 2%;
display: inline-block;
text-align: center;
}
footer{
background: #878E63;
width: 100%;
overflow: hidden;
}
footer p, footer h3{
color: #F1F0D1;
}
footer p a{
color: #F1F0D1;
text-decoration: none;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
ul li img{
height: 50%;
}
.footerLogos{
width: 45%;
margin: 0 2.45%;
display: inline-block;
text-align: center;
}
/*---------MEDIA---------*/
#media screen and (max-width: 478px){
body{
font-size: 13px;
}
}
#media screen and (max-width: 740px){
nav{
width: 100%;
margin-bottom: 10px;
}
nav ul{
list-style: none;
margin: 0 auto;
padding-left: 0;
}
nav ul li{
text-align: center;
margin-left: 0 auto;
width: 100%;
border-top: 1px solid #878E63;
border-left: 0px solid #878E63;
border-bottom: 1px solid #878E63;
border-right: 0px solid #878E63;
}
nav ul li a{
padding: 8px 0;
font-size: 16px;
}
.left-col {
width: 100%;
}
.sidebar{
width: 100%;
}
.section{
float: left;
width: 100%;
margin: 0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="callout">
<p>Call us at <b>123456</b></p>
</div>
<header>
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"
</header>
<nav>
<ul>
<li class='active'>Home</li>
<li>Prices</li>
<li>Who are we?</li>
</ul>
</nav>
<div class="banner">
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
</div>
<section class="left-col">
<p style ="text-indent: 50px;">Restaurant websites are a great place to find inspiring designs and also to check out some nice ways of displaying photographs within a design. Since the main content of a restaurant is their food – or at least it should be – there is no better thing to do than show beautiful images of the food</p>
<p style ="text-indent: 50px;">HELLOZZ</p>
</section>
<aside class="sidebar">
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
<div class="hallo">
</div>
</aside>
<div class="BobContainer">
<h3>BOB1</h3>
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
<p>Du</p>
</div>
<div class="BobContainer">
<h3>BOB2</h3>
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
<p>Er</p>
</div>
<div class="BobContainer">
<h3>BOB3</h3>
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
<p>Dum</p>
</div>
<footer>
<div class="footerLogos"
<p>Call us at:</p>
<p><b>123456</b><br>
Or write to<br>
www#hotmail.com<br>
2670 Greve</p>
</div>
<div class="footerLogos"
<ul>
<li><img src="http://www.adweek.com/socialtimes/wp-content/uploads/sites/2/2013/04/2-150x150.png"</li>
<li><img src="http://virtualmarketingpro.com/blog/empreendeglobal/wp-content/uploads/sites/897/2015/01/logo-youtube-335x320.png"</li>
</ul>
<div class="footerLogos"
<img src="http://www.logodesignbuzz.com/creativelogos/wp-content/uploads/2010/07/alnabulsi-creative-logos.jpg"</a>
</div>
</footer>
</div>
<p style="text-align: center; padding:0px;">©Copyright - hala hala, 2015</p>
</body>
</html>
In CSS Code Try Adding To Section Styles : display: inline-block;
Also Delete : float : left;
It seems that when I zoom in on my browser, my navigation buttons completely go on top of each other. Check the following images:
Normal: http://i.imgur.com/yFxwrXw.png
Zoom: http://i.imgur.com/OnUP6Sg.png
Does anyone know a way to prevent this / stop this from happening?
body {
width: 100%;
height: 100%;
padding: 0;
max-width: 960px;
margin: 10px auto 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
.logo {
margin-bottom: 10px;
margin: auto;
width: 524px;
}
.nav {
height: 37px;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
margin-bottom: 10px;
}
ul {
margin: 0;
padding: 0;
text-align: center;
line-height: 38px;
}
ul li {
display: inline;
color: #828282;
padding: 0.4166666666666667% 2.5%;
background: #595959;
margin: 0 10px;
border:1px solid #828282;
}
ul li a {
text-decoration: none;
color: white;
font-family: arial;
}
ul li a:hover {
}
.main {
width: 99.79166666666667%;
min-height: 50%;
height: auto;
background-color: rgba(26,26,26,0.8);
border: 1px solid black;
}
<html>
<head>
<link rel="stylesheet" href="style/style.css" />
</head>
<body>
<div class="logo">
<img src="img/logo.png"></div>
<div class="nav">
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>SHOPS</li>
<li>FAQ</li>
<li>ABOUT US</li>
</ul>
</div>
<div class="main">
</div>
</body>
</html>
body {
width: 100%;
height: 100%;
padding: 0;
min-width: 960px; /* Change max-width to min-width */
margin: 10px auto 0;
background: #1b1b1b url('../img/bg.jpg') no-repeat fixed top center;
}
Set min-width: 960px; in body
DEMO
Here is a Fiddle
I am a bit stumped as to how I can center the text on the navigation bar as at the moment it is only going to the left. I have already tried center align but it still continues to stick to the side. If anyone could tell me what error I am making this would be greatly appreciated.
HTML:
<body>
<div id="wrap">
</div>
<ul id="nav">
<li>About Us</li>
<li>Our Products</li>
<li>FAQs</li>
<li>Contact</li>
<li>Login</li>
</ul>
<div id="content">
</div>
</body>
CSS:
body {
margin: 0;
padding: 0;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
background-color:#425eb4;
}
*{
margin: 0 auto 0 auto;
}
#wrap {
height:150px;
background:url(images/header1.png) no-repeat center;
text-align:center;
background-color:#FFF;
}
#nav {
width: 100%;
float: left;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left;
text-align:center; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
text-align:center;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
text-align:center;
background-color: #fff;}
/* End navigation bar styling. */
#content {
padding: 0 50px 50px;
width:1000px;
height:800px;
background-color:#FFF;
}
You need to take the float:left off of both your #nav and li elements.
Then add display:inline-block; to both. Next add your text-align:center to the #nav.
#nav {
width: 100%;
display: inline-block;
text-align: center;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
margin-left: 0px; // looks like bootstrap is putting a left margin on your #nav you may want it off.
}
#nav li {
display: inline-block;
text-align:center;
}
Use this CSS:
Take the floats off, use display:inline-block to put the lis beside each other, and use text-align:center on the #nav. Is this what you're looking for?
body {
margin: 0;
padding: 0;
text-align: justify;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #425eb4;
}
* {
margin: 0 auto;
}
#wrap {
height: 150px;
background: url(images/header1.png) no-repeat center;
text-align: center;
background-color: #FFF;
}
#nav {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
display: inline-block;
text-align: center;
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: 700;
text-align: center;
color: #069;
border-right: 1px solid #ccc;
}
#nav li a:hover {
color: #c00;
text-align: center;
background-color: #fff;
}
/* End navigation bar styling. */
#content {
padding: 0 50px 50px;
width: 1000px;
height: 800px;
background-color: #FFF;
}
IMO adjust your CSS to be something generally like (I am omitting values specific to your code and just including generally necessary ones for your general goal):
#wrap {
width:100%;
}
#nav {
width:300px; //however wide your nav container needs
margin:auto; //this is what will center an elem, relative to its parent (in
//this case a 100% wide wrap; the 100% is relevant because it
//keeps things centered as window is resized.
}
All good input, I think this will help someone too,,,
I use something like this usually,
It's balanced / centered / and block so all is clickable
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
a {
display: inline-block;
width: 80px;
background-color: #dddddd;
text-align: center;
}
li {
width: 100px;
margin: auto;
display: inline;
}
p {
clear: both;
margin: 10px 5px;
text-align: center;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<p>Notice we are all centered</p>
<p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>