I am able to correctly align the menu bar when the browser is not resized. Once i start zooming out , the content in the menu bar comes below , I am currently concentrating on zooming out the menu.
please advice me what must be the problem, and is there any way i can keep the menu items from wrapping .
<body>
<div id="wrapper">
<div id="header">
<div id="logo">CodePlayer </div>
<div id="run_btn"> <button id="run"> Run </button> </div>
<ul id="menu">
<li> HTML </li>
<li> CSS </li>
<li> JS </li>
<li> Result </li>
</ul>
<div class="clear"> </div>
</div>
</div>
</body>
CSS
body {
padding: 0;
margin: 0;
}
#wrapper {
width: 100%;
}
#header {
width: 100%;
background-color: #EDEDED;
height: 40px;
}
#header #logo {
font-weight: bold;
font-family: Helvetica;
font-size: 0.9em;
padding: 10px 10px;
float: left;
}
#header #menu {
width: 220px;
margin: 0 auto;
border: 1px solid grey;
border-radius: 3px;
height: 27px;
position: relative;
top: 5px;
padding-left: 0px;
padding-right: 0px;
}
#header ul li {
float: left;
list-style-type: none;
padding: 5px 10px;
border-right: 1px solid grey;
font-size: 1em;
}
#header ul li:last-child {
border-right: none;
}
#run_btn {
float: right;
padding: 5px 10px 0 0;
}
#run_btn #run {
font-size: 120%;
}
.clear {
clear: both
}
link
It does not work in the responsive layout . so the solution would be wither use the #media-queries or u can use the bootstrap grid layout , where u can put header as a row and giving the 3 columns of size 4 i.e 'col-md-4',
this will keep the code intact with the window resize.
Related
My navigation bar cannot click any item except the last item. I have checked and follow the tutorial from youtube but unfortunately I checked code is same but not working at all please anyone got solution please share to me.
Here's My html
<html>
<title>UIA | Homepage</title>
<link href="Homepage.css" rel="stylesheet" type="text/css">
<header>
<div class="row">
<div class="logo">
<img src = "Logo.png">
</div>
<ul class="main-nav">
<li class = "active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
And here's my CSS.
*{
margin: 0;
padding: 0;
}
header{
background-image:
linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)), url(Homepage.jpg);
height:100vh;
background-position:center;
background-size: cover;
}
.main-nav{
float: right;
list-style: None;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.main-nav li a{
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a{
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img{
width: 150px;
height: auto;
margin-top:10px;
float: left;
}
.row{
max-width: 1200px;
margin: auto;
}
.title{
position:absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1{
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
So did I miss out something please advice me Thank you.
.title is overlapping the menu.
You can give the menu a higher z-index to ensure it is on top.
Information about z-index
updated code below
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(Homepage.jpg);
height: 100vh;
background-position: center;
background-size: cover;
}
.main-nav {
float: right;
list-style: None;
margin-top: 30px;
/* added */
position: relative;
z-index: 100;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", Sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
margin-top: 10px;
float: left;
}
.row {
max-width: 1200px;
margin: auto;
}
.title {
position: absolute;
width: 1200px;
margin-left: 0;
margin-top: 0;
}
h1 {
color: white;
font-size: 60px;
text-align: center;
margin-top: 255px;
}
<header>
<div class="row">
<div class="logo">
<img src="Logo.png">
</div>
<ul class="main-nav">
<li class="active"> Home </li>
<li> Promotion </li>
<li> Booking </li>
<li> SignIn </li>
<li> About </li>
</ul>
</div>
<div class="title">
<h1>Ready for another adventure?</h1>
</div>
</header>
It is because you do not use clearfix on your floated element parent(similar issues will occur on all floated stuff if you don't use clearfix).
Add this to your css file:
.clearfix:after {
content: "";
display: table;
clear: both;
}
And add clearfix to parent of floated element, in this case to:
<div class="row clearfix">
I recommend reading these two(will come in handy in the future):
https://css-tricks.com/all-about-floats/
https://css-tricks.com/snippets/css/clear-fix/
Just in case, here is a link to jsfiddle with solution to your issue: https://jsfiddle.net/mwgjycv4/1/
I have a navbar on my webpage, I have also got information on my webpage. When I remove the information (paragraph and headings) the navbar functions perfectly. However when I place the information back, the navbar doesn't work whatsoever. Why does a website do this? Thanks.
JSFiddle - With Information
JSFIDDLE - Without Information
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="homepage.css">
<title>CSGOMarble</title>
</head>
<body>
<h3 style="float: right; margin-right: 25px;">SIGN IN WITH STEAM</h3>
<div class="logo">
<img src="logo.png" alt="LOGO" height="60px" width="200px">
</div>
<hr>
<div class="navbar">
<ul>
<li style="background-color: #D9D9D9; font-size: 20px; padding: 12px 0 12px 0;">MENU</li>
<li>COINFLIP</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div class="container">
<h2>CSGOMarble</h2>
<u><h3 style="font-size: 20px; margin-right: 750px; margin-top: 75px;">What is CSGOMarble?</h3></u>
<p style="font-size: 15px; margin-left: 478px; margin-right: 1000px; margin-top: 25px; text-align: justify;">CSGOMarble is a website which enables you to gamble your Counter-Strike skins so that you can try and turn a profit. We have many gamemodes, such as Coinflip, Roulette and Jackpot. Why not SIGN IN to test your luck?</p>
</div>
</body>
</html>
CSS:
body {
font-family: Arial, Verdana, sans-serif;
background-color: white;
}
.logo {
margin-left: 25px;
}
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
}
a {
text-decoration: none;
color: black;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 175px;
background-color: #f1f1f1;
border: 2px solid #555;
}
li a {
display: block;
color: #000;
padding: 12px 0 12px 0;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: white;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
When you added position fixed to container , you can add z-index on both container and nav divs for fix this in your way as you want.
.navbar {
margin-top: 50px;
margin-left: 25px;
padding: 0;
font-size: 15px;
float: left;
display: inline-block;
z-index: 2;
position: fixed;
}
.container {
width: 100%;
margin-top: 20px;
font-size: 25px;
display: inline-block;
position: fixed;
text-align: center;
z-index: 1;
}
Change this Css Hope it helps
Do not use position:fixed unless you want the element to NOT SCROLL with the page. This css settings is great for headers (navbars) that remain fixed to the screen/window and are always visible.
The other one that is similar to position:fixed is position:absolute, except that it will scroll up as the user scrolls down the page. However, both absolute and fixed allow you to use top left right bottom to precisely position the element on the screen. (One tip: the parent element must be either position:absolute or position:relative (relative is common).
Change position:fixed to position:relative for the <div class="container">
so basically I've got this code: HTML and CSS below, using bootstrap as well, and for some reason, it's not centred. It used to be, but at some point it wasn't anymore, now it pulls to the left. See image below. Any ideas?
<div class="row" id="nav-bar">
<div class="col-md-9">
<ul>
<li class="col-md-3 nav-btn" id="home">Home</li>
<li class="col-md-3 nav-btn" id="about">About</li>
<li class="col-md-3 nav-btn dropdown-toggle" id="games">
Games & Apps ▼
<div class="dropdown">
<ul>
<li>Games & Apps ▼</li>
<li id="first">Space Rodeo</li>
<li id="spaced">Boodya's Carpet Ride</li>
<li id="spaced">Ultimate Points Counter</li>
</ul>
</div>
</li>
<li class="col-md-3 nav-btn" id="blog">Blog</li>
</ul>
</div>
</div>
#nav-bar {
margin: 0px 0px 10px 0px;
height: 60px;
}
#nav-bar ul {
margin-top: 20px;
}
.col-md-3 a {
padding: 15px 40px 15px 40px;
font-size: 20px;
text-decoration: none;
text-align: center;
color: #B6B6B6;
}
#nav-bar a:hover {
color: #428bca;
}
.col-md-3 {
display: inline;
}
.col-md-9 {
float: none;
margin: auto;
left: 0;
right: 0;
}
.dropdown {
padding: 0;
margin-top: -48px;
position: absolute;
z-index: 10;
background-color: #ffffff;
box-shadow: -5px -5px 20px;
border-radius: 5px;
height: 210px;
width: 275px;
}
.dropdown ul {
padding: 0;
margin-top: 0;
}
.dropdown li {
list-style: none;
padding: 0;
width: 310px;
}
#games2 {
color: #428bca;
}
#spaced {
margin-top: 10px;
}
#first {
padding-top: 20px;
border-top: 1px solid black;
margin-top: 22px;
}
Showing result of code, the navbar is off centre
http://i.stack.imgur.com/smtTP.png
Your list items are display: inline which means they'll follow the alignment rules of text. Since you set no text-align, it defaults to the left. You can fix that by adding text-align: center to your ul so the contents will be centered.
Now the insides of the dropdown will also inherit that, you can reset that by setting text-align: left back on the dropdown ul again.
Also reset the left padding that ul has by default.
#nav-bar ul {
padding-left: 0;
text-align: center;
}
#nav-bar .dropdown ul {
text-align: left;
}
Works in this jsFiddle
I am having trouble getting my menu items to align next to my logo, within my navbar. My menu items are appearing just below my logo and to the right, the horizontal position is correct, I need to adjust the vertical position up so that the items are in line and within the navigation bar.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Serving Grace - Home</title>
<!-- Stylesheet -->
<link href="Private/stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="content">
<nav id="nav">
<ul>
<li><img src="Logo/logo.png"/></li>
<li>Home</li>
<li>About</li>
<li>Volunteer</li>
<li>Donate</li>
<ul>
</nav>
<div id="image">
<img src="Images/Content.png"/>
</div>
<div id="info">
<img src="Images/info.png"/>
</div>
<div id="footer">
<img src="Images/Facebook.fw.png">
<img src="Images/Twitter.fw.png">
<img src="Images/Google.fw.png">
<p id="copyright">© 2013 Jeffery Evans</p>
</div>
</div>
</body>
</html>
CSS
body {
background-color: #C8C8C8;
}
#content {
width: 1090px;
height: 900px;
background-color: white;
margin-left: auto;
margin-right: auto;
box-shadow: 5px 3px 5px #888;
min-height: 100%;
position: relative;
}
#nav {
background-color: #222222;
height: 100px;
border: 1px solid black;
}
#nav li {
text-decoration: none;
display: inline;
margin: 25px 20px 10px 10px;
font-family: Arial;
color: #F59239;
position: relative;
}
#nav li a {
text-decoration: none;
color: #F59239;
font-family: Arial;
font-size: 18px;
}
#logo {
padding-right: 300px;
position: inline-block;
}
#nav li a:hover {
color: #222222;
}
#image {
top: 100px;
position: relative;
float: left;
left: 15px;
}
#info {
top: 100px;
position: relative;
float: left;
left: 30px;
}
#footer {
display: table-cell;
width: 1090px;
height: 70px;
background-color: #222222;
bottom: 0;
position: absolute;
}
#footer a {
margin-left: 15px;
}
#copyright {
color: white;
text-align: center;
vertical-align: middle;
}
instead of
#nav {
height: 100px;
}
try something like
#nav {
line-height: 100px;
}
if that doesn't work, then also try using line-height for your nav li and/or nav a
THE EASIEST WAY would be to do something just like this
#logo {
padding-top: 10px;
}
That will just push the logo down by 10px , adjust accordingly
If the logo.png is very wide, it may be pushing the menu items to the next line. I tried your code a with small gif for the logo and it worked fine (image and menu text were aligned at bottom) in both Firefox and Chrome.
I have a website I'm designing and I ran across a problem with resizing.
Here is my website when maximized in Chromium 28.0:
and you can see the grey menu bar reaches all the way across.
However, when I go to resize the window:
The code for that div (#header) is:
#header {
background-color: #dcdcdc;
border-bottom: 1px solid #e6e6e6;
padding: 27px 0;
}
so there is no set width.
What's going on?
EDIT: 11/1/2013
Here's my HTML for the header:
<div id="header">
<div>
<div class="logo">
Thumbnails
</div>
<ul id="navigation">
<li class="active">
Home
</li>
<li>
Features
</li>
<li>
News
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
EDIT: 11/1/2013 Firefox Screenshot:
I added a screenshot from Firefox and the problem affects the footer as well (happens in Chromium as well)
After simplifying your html + css, I came up with a solution that appears to work as intended. I believe the problem was the way you had setup the padding + margin.
The HTML:
<div class="page-container">
<header class="top-bar">
<div class="inner">
<h2 class="logo">Logo</h2>
<ul class="main-nav">
<li class="active">Home</li>
<li>Features</li>
<li>News</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
<section class="main-content"></section>
<footer class="bottom-bar">
<div class="inner">
<span class="copyright">Copyright info here.</span>
<span class="contact">Contact info here.</span>
</div>
</footer>
</div>
</body>
The CSS:
body {
margin: 0;
padding: 0;
}
.page-container {
margin: 0;
padding: 0;
}
/* ===============================================
/* ====== HEADER + NAVIGATION STYLES
/* ============================================ */
.top-bar {
background: #EEE;
height: 100px;
text-align: center;
}
.inner {
background: #DDD;
display: block;
height: 100px;
margin: 0 auto;
width: 920px;
}
.logo {
background: #CCC;
display: block;
float: left;
font-size: 16px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 35px 0;
width: 120px;
}
.main-nav {
display: block;
float: left;
height: 30px;
line-height: 30px;
margin: 0;
padding: 35px 0;
}
.main-nav li {
display: block;
float: left;
width: 160px;
}
.main-nav li a {
color: #999;
font-size: 14px;
text-decoration: none;
}
.main-nav li.active a,
.main-nav li a:hover {
color: #F99600;
}
/* ===============================================
/* ====== MAIN CONTENT PLACEHOLDER STYLES
/* ============================================ */
.main-content {
background: #F6F6F6;
height: auto;
margin: 0 auto;
min-height: 500px;
width: 920px;
}
/* ===============================================
/* ====== FOOTER ELEMENT STYLES
/* ============================================ */
.bottom-bar {
background: #EEE;
height: 100px;
}
.bottom-bar .copyright,
.bottom-bar .contact {
display: block;
font-size: 12px;
height: 30px;
line-height: 30px;
margin: 0;
padding: 35px;
}
.copyright { float: left; }
.contact { float: right; }
You can check out the working code here: http://jsfiddle.net/onestepcreative/X8QbD/