I'm looking for some help to center an ul menu, I've managed to center the images on the page, and the text inside the ul is centered but the actual block itself isn't.
I've tried various bits of coding, but nothing seems to be working.
I'm still fairly new to the coding scene, so I'm just looking for something simple that works.
I don't have any <dev>s, and there's nothing in the head section yet. (I know that's where the coding needs to be added, I'm just not sure what to put)
Really hoping someone can help me with this, I'll get the hang of this one day hopefully. (I have a menu bar, so the text actually has a background ect.)
Here's what I have:
<!-- Main menu content below -->
<ul style="text-align: center;" id="Menubar1" class="MenuBarHorizontal">
<li>Shop</li>
<li>Forum</li>
<li>What's new</li>
<li>Calendar</li>
<li>Newsletter
<ul>
<li>Current</li>
<li>Archived</li>
</ul>
</li>
<li>Blog</li>
<li>Advice</li>
</ul>
Edit:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Work in progress</title>
<style type="text/css">
body {
background-image: url(Homepage_images/Home_background.png);
background-repeat: repeat-x;
background-color: #47807E;
border-top-color: #77D6D2;
text-align: center;
}
{margin: 0; padding: 0; list-style: none;}
ul {
text-align: center;
}
ul li {display: inline-block;}
ul li a {display: inline-block; padding: 5px; text-decoration: none; border: 1px solid #ccc; border-radius: 3px; color: #000;}
ul li ul {display: none;}
</style>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
</head>
<body class="MenuBarHorizontal">
<div align="center">
<p><img alt="New Tome City" src="Homepage_images/New_title.png" style="width: 780px; height: 220px;" title="Click here to enter NTC!" /></p>
<p> </p>
</div>
<!-- Main menu content below -->
<ul id="MenuBar1" class="MenuBarHorizontal MenuBarActive">
<li>Shop</li>
<li>Forum</li>
<li>What's new</li>
<li>Calendar</li>
<li>Newsletter
<ul class="">
<li>Current</li>
<li>Archived</li>
</ul>
</li>
<li>Blog</li>
<li>Advice</li>
</ul>
<p> </p>
<p><big><span style="font-weight: bold; color: rgb(255, 255, 255);"><span style="font-family: Gabriola,sans-serif; font-size: 42pt; text-align: center;">Welcome to New Tome City</span></span></big>
</p>
<p style="text-align: center;">Welcome to New tome City!</p>
<div align="center">
<img src="Homepage_images/FeSt_link.png" alt="FeSt" height="193" width="800" /><br />
Testing</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
</body>
</html>
You can change the display to block for <ul> and inline-block for <li> and give a text-align: center this way:
* {margin: 0; padding: 0; list-style: none;}
ul {text-align: center;}
ul li {display: inline-block;}
ul li a {display: inline-block; padding: 5px; text-decoration: none; border: 1px solid #ccc; border-radius: 3px; color: #000;}
ul li ul {display: none;}
<ul style="text-align: center;" id="Menubar1" class="MenuBarHorizontal">
<li>Shop</li>
<li>Forum</li>
<li>What's new</li>
<li>Calendar</li>
<li>Newsletter
<ul>
<li>Current</li>
<li>Archived</li>
</ul>
</li>
<li>Blog</li>
<li>Advice</li>
</ul>
Preview
Note: I added some styles for it to look better. Hope you like it.
Related
How can I access the ul and the li menu inside the div in CSS?
<section id="main">
<div id="=cont">
<ul>
<li> Our Hitory
<ul>
<li> The Foundation </li>
<li> Our Founders </li>
</ul>
</li>
<li>
Our Company
<ul>
<li> Our Business Practices </li>
<li> Our Brokers </li>
</ul>
</li>
</ul>
</div>
I've tried so many combinations in css but can't seem to be able to access that menu and style it.
Thanks very much in advance!
You have mistake in <div id="=cont"> change it to <div id="cont"> like this
#cont > ul{
list-style-type: none;
}
#cont > ul li{
padding: 10px;
background: green;
}
#cont >ul li ul{
list-style-type: none;
}
#cont >ul li ul li{
padding: 10px;
background: black;
}
<section id="main">
<div id="cont">
<ul>
<li> Our Hitory
<ul>
<li> The Foundation </li>
<li> Our Founders </li>
</ul>
</li>
<li>
Our Company
<ul>
<li> Our Business Practices </li>
<li> Our Brokers </li>
</ul>
</li>
</ul>
</div>
</section>
this is an example of stylization
Taken from: http://www.java2s.com/Code/HTMLCSS/Tags/SettingstyleforULinsideaDIV.htm
#footer ul {
width: 1000px;
text-align: center;
}
#footer li {
display: inline;
list-style-type: none;
line-height: 44px;
}
#footer li a {
color: #574621;
text-decoration: none;
margin: 0 10px;
}
#footer li a:visited {
text-decoration: none
}
#footer li a:hover {
text-decoration: underline
}
?<!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" dir="ltr" lang="en-US"
xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<style rel="stylesheet" type="text/css">
</style>
</head>
<body>
<div id="footer">
<ul>
<li>Home|</li>
<li>About our Hotel|</li>
<li>Services|</li>
<li>Photogallery|</li>
<li>Testimonials|</li>
<li>Locations|</li>
<li>Contacts</li>
</ul>
</div>
</body>
</html>
To speak to a Tag you can use in the CSS Sheet things like
Example 1:
.id ul li {
your Css Code
}
/* in your case */
.cont {
position: ...;
}
/* Or for deeper Tags
* for example:
*/
.cont ul li a {
position: ...;
}
or but that is a bad Programmingstyle
Example 2:
<li style="color:green"> Our Hitory
there is also a third option to put css Code like in example 1 in a styletag in the head tag
Example 3:
<head>
<style>
<!-- Code from Example 1 -->
</style>
</head>
Hope i can help you!
If you have any Questions left just ask.
Good Luck
As my title suggests, my content goes off screen.
I've looked through my css file, and there's isn't any margins with minus something. So why is the content going off screen at both sides?
Appreciate any suggestions to why this is.
Thanks.
body{
background: linear-gradient(rgb(100,50,50), rgb(80,20,20)) no-repeat;
color: white;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
img{
margin: 1%;
}
/*Header*/
header {
background-color: #1d1e21;
height: 100vh;
position: relative;
}
header span {
color: #fff;
}
header input {
margin-top: 20px;
}
p#slogan {
color: #fff;
letter-spacing: 2px;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
padding: 0 0 0 10px;
}
ul li a {
color: #fff;
list-style-type: none;
}
ul li a:hover {
color: black;
list-style-type: none;
text-decoration: none;
}
/*Main*/
/*sloganAndSocial*/
#sloganAndSocial {
background-color: #1d1e21;
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NBC 2011</title>
<link rel="stylesheet" href="css/main.css" type="text/css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
<!--Header section-->
<header>
<div id="topBar">
<div class="row">
<h1 class="pull-left"><span>NORDIC </span>BARISTACUP</h1>
<form class="pull-right">
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div class="row">
<p class="pull-left" id="slogan">be together act together learn together</p>
<ul class="pull-right">
<li>ABOUT NBV</li>
<li>2011 EVENT</li>
<li>NORDIC ROASTER</li>
<li>RESULTS</li>
<li>LINKS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!--Main section-->
<div class="main">
<img src="" alt="bo!" class="cover" />
</div>
<div id="sloganAndSocial">
<div class="container">
<div class="row">
<h2 class="pull-left">"To create an environment in which knowledge<br>about coffee and its sphere can be obtained"</h2>
<ul class="share-buttons">
<li><img alt="Share on Facebook" src="images/flat_web_icon_set/inverted/Facebook.png"></li>
<li><img alt="Tweet" src="images/flat_web_icon_set/inverted/Twitter.png"></li>
<li><img alt="Share on Google+" src="images/flat_web_icon_set/inverted/Google+.png"></li>
<li><img alt="Pin it" src="images/flat_web_icon_set/inverted/Pinterest.png"></li>
<li><img alt="Send email" src="images/flat_web_icon_set/inverted/Email.png"></li>
</ul>
</div>
</div>
</div>
</header>
<!--Section1-->
</body>
</html>
You have two divs in your topBar with class row but which are not inside an element with class container. That is not intended by Bootstrap and therefore leads to unintended behaviour. You have to wrap those two divs in another div with class container.
Also, as #nik_m mentioned: Why are you wrapping the whole page in a header? That's not, what headers are supposed to do.
Remove pull-left and pull-right classes from the elements and better use flexbox for your alignments. It will make your life much easier!
Also, why the wrapper of the whole site is inside a header???
I'm just barely learning how to code. I know there is more than one way to skin a cat, but what is the most efficient way to create a typical menu with lists, search fields, etc.?
I've been able to create all of the elements. I am having a very hard time getting the CSS correct to look the way I want.
Here is what my current project looks like.
This is what I am trying to achieve.
Thanks for the help! Any tips for a beginner would also be appreciated. Thank you!
Here is my HTML
<!DOCTYPE html>
<html lan="en">
<head>
<meta charset ="UTF-8">
<link href = "racemonster.css" rel="stylesheet" type="text/css">
<title>Home</title>
</head>
<body>
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart</li>
<li>Help</li>
<li>Sign In</li>
<li>Sign Up</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Here is the css
.headerLeft{color:#C4D82D;font-family:sans-serif;background-color:#323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight{color:#B1B3B5;font-family:sans-serif;background-color: #323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight ul {list-style-type: none;}
.headerRight ul li{display: inline;margin-right: 20px}
.headerRight ul li a{text-decoration: none;font-family: sans-serif;color: #898B8E;background-color:#323232;}
.headerRight ul li a:hover{color:#B1B3B5;}
.menu ul {list-style-type: none;width:100%; margin:0; padding-top:40px; padding-bottom:40px; background-color: #C4D82D}
.menu ul li {display:inline;margin-right: 20px;}
.menu ul li a {text-decoration: none;font-family: sans-serif;color:#323232;background-color: #C4D82D;}
.menu ul li a:hover {color:#999B9D;}
Updated Answer
Here is a solution... first check out my code (http://jsfiddle.net/ProgrammerKid/s01yuzm1/)
HTML
<div class="headers">
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart
</li>
<li>Help
</li>
<li>Sign In
</li>
<li>Sign Up
</li>
</ul>
</div>
<div class="header-padding"> </div>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
CSS
.headers {
width: 100%;
position: static;
}
.headerLeft {
width: 50%;
float: left;
box-sizing: border-box;
height: 120px;
}
.headerRight {
width: 50%;
box-sizing: border-box;
float: right;
height: 120px;
}
.header-padding {
height: 120px;
}
What I like to do is group the two headers into one big <div> so that they both share a common parent (disregarding the <body>)... Then I added a CSS float property, and set their width to 50%. This will align them...
The <div class="header-padding">[...]</div> element is to provide the links sections with enough padding... Since we float the two div's (.headerRight, and .headerLeft) the links sections would appear underneath the headers... therefore by placing the header padding element, we are providing the links section with enough space.
Old Answer
There is no "correct" way to make a header
That being said, it would be really helpful to the people answering your question if you included the HTML/CSS/JS code...
For now I will use a very abstract method of conveying my tips to you...
If we said the element with the word "NAME" inside it was a <div id="1"></div> and the element in which your menu items are in would be <div id="2"></div>, and the links were <div id="3"></div>
Then here is what your CSS should look like:
#1 {
width: 40%;
float: left;
}
#2 {
width: 50%;
float: left;
}
the above will align both the elements together
and below we will reduce the padding to around 10px;
#3 {
padding: 10px;
}
and that's all I can help you with for now until you upload your code
I have created css as you required it is very straightforward and easy to understand.
enter link description here
.container {
background-color:#323232;
}
.title {
color:#C4D82D;
margin-left:40px;
}
.headerLeft {
width:50%;
float:left;
height:100px;
display:inline-block;
}
.headerRight {
width:50%;
height:100px;
display:inline-block;
}
.headerRight ul li {
display:inline;
color:#B1B3B5;
}
.headerRight ul li a {
color:#b1b3b5;
}
.headerRight ul li a:hover {
color:#B1B3B5;
}
.menu {
background-color:#C4D82D;
height:50%;
position:relative;
padding-top:20px;
margin:(auto, auto, 0, 0);
}
.menu ul li {
display:inline;
}
.menu ul li a {
color:#323232;
}
.menu ul li a:hover {
color:#999B9D;
}
<body>
<div class="container">
<div class="headerLeft">
<h1 class="title">Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart |
</li>
<li>Help |
</li>
<li>Sign In |
</li>
<li>Sign Up |
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</body>
I don't know why my BG colors wont show up? Can you help? Also I am trying to make a nav menu without any video tutorials. Any tips on the CSS formatting?
<!DOCTYPE HTML>
<html>
<head>
<style>
#NavMenu{
Width: 800px;
Height: 100px;
Margin: 0;
Padding: 0;
Background-Color: #333333;
}
#NavMenu Li{
Position: Relative;
Display: Inline-Block;
Float: Left;
Width: 200;
Background-Color: #959595;
}
</style>
</head>
<body>
<UL class="NavMenu">
<Li>Home</Li>
<Li>Games
<UL>
<Li>New Game!</Li>
<Li>New Game!</Li>
<Li>New Game!</Li>
</UL>
</Li>
<Li>Contact Us</Li>
<Li>Copyright</Li>
</UL>
</body>
</html>
It is because you are saying class ( <ul class="NavMenu"> ), but you use # selector ( #NavMenu), which stands for id. Change it to .NavMenu.
I'm having a minor problem with Chrome and IE.
On Firefox, my buttons are perfectly centered inside my navigation bar but on Chrome & IE, my buttons are 1pixel to high and a couple pixels to the left.
Could anyone help me figure this one out?
Here's the url and code : http://nonlocalhost.uphero.com/petshopindex.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pet Shop</title>
<style type="text/css">
/* Background */
body {background-color:black;}
/* Wrapper */
#wrapper {margin:0 auto;width:700px;}
/* Navigation Bar */
#nav_bar {height:95px;}
#nav_bar ul {position:relative;left:47px;list-style-type:none;border:1px solid red;width:565px;}
#nav_bar li {position:relative;left:4px;display:inline-block;height:40px;padding-top:19px;}
#nav_bar a:hover {background-color:#F116BA;}
#nav_bar a {padding:20px;color:white;text-decoration:none;background-color:#790D9E;}
/* Content Box */
#cont_box {background-color:#450768;width:700px;height:500px;border:1px solid white;}
#cont_box ul {border:1px solid white;position:relative;top:10px;left:220px;width:420px;height:450px;list-style-type:none;}
#cont_box li {width:200px;position:relative;top:42px;right:13px;display:inline-block;border:1px solid white;height:180px;}
#cont_box a {color:white;text-decoration:none;position:relative;top:2px;}
#cont_box a:hover{color:red;}
/* Side Menu */
#side_menu {}
/* Product Name Position */
#prod01_namepos {left:70px;}
#prod02_namepos {left:30px;}
#prod03_namepos {left:50px;}
#prod04_namepos {left:70px;}
</style>
</head>
<body>
<div id="wrapper">
<div id="nav_bar">
<ul>
<li> Home </li>
<li> Forums </li>
<li> Shipping Info </li>
<li> Contact us </li>
<li> About us </li>
</ul>
</div>
<div id="cont_box">
<ul>
<li> <img src="1.png" height="120" width="200" /> <a id ="prod01_namepos" href="#">Whiskas</a> </li>
<li> <img src="2.png" height="120" width="200" /> <a id ="prod02_namepos" href="#">Whiskas Temptation</a> </li>
<li> <img src="3.png" height="120" width="200" /> <a id ="prod03_namepos" href="#">Pedigree Adult</a> </li>
<li> <img src="4.png" height="120" width="200" /> <a id ="prod04_namepos" href="#">Dog Toy</a> </li>
</ul>
</div>
</div>
</body>
</html>
I fiddled around with your CSS and I think I managed to obtain the behaviour that you are after. Give this CSS a shot:
Live demo: jsfiddle
/* Navigation Bar */
#nav_bar {
height:95px;
}
#nav_bar ul {
list-style-type: none;
border: 1px solid red;
width: 565px;
height: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#nav_bar li {
display:inline-block;
height:100%;
padding: 0;
margin: 0;
}
#nav_bar a:hover {
background-color:#F116BA;
}
#nav_bar a {
display:block;
height: 100%;
color:white;
text-decoration:none;
line-height: 95px;
padding: 0 1em 0 1em;
background-color:#790D9E;
}