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
Related
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.
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>
So here's my current HTML code, within the <head> section:
<ul class="nav">
<li>
<a href="http://www.greg-holmes.com/#/title" target="_blank">
<img src="img/home.png">
</a>
</li>
... <!-- Deleted some elements for readability -->
<li>
<a href="http://www.instagram.com/djspiffy" target="_blank">
<img src="img/instagram.png">
</a>
</li>
</ul>
Here's the CSS that goes along with it:
.nav {
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
}
The code is live at greg-holmes, but for some reason the links aren't working.
You need to put your HTML code inside <body> tag not <head> tag
HTML doesn't go in the page header, all HTML belongs in the body.. your code should be
<html>
<head>
...
</head>
<body>
<ul class="nav">
<li>...</li>
</ul>
</body>
</html>
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;
}
I am currently trying to create some nested lists to display the following...
A...R...X
B...S...Y
C...T...Z
(where the letters will eventually be replaced by words) and have made this work perfectly in chrome and firefox, however when I use Internet Explorer I get something resembling the following...
A
B...R
C...S...X
......T...Y
...........Z
I assume it's probably to do with the css, but please can someone help me with this problem, the html and css are shown below, thanks in advance for any help.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel=stylesheet href="lists in IE.css" type="text/css">
</head>
<body>
<div id="container">
<ul id="links-nav">
<li>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li>
<ul>
<li>L</li>
<li>M</li>
<li>N</li>
</ul>
</li>
<li>
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
CSS
#container{
width:940px;
margin:0px auto;
border: 1px solid #000;
padding: 20px 10px;
height:auto;
font-family: Arial, sans-serif;
font-size:11px;
}
.clear {
clear: both;
height: 0;
overflow: hidden;
}
a{
text-decoration:none;
color:#555;
}
#links-nav li, li ul li{
list-style:none;
}
#links-nav{
list-style-type: none;
margin:0px;
padding:0px;
}
#links-nav li ul{
float:left;
width:168px;
padding: 0px 10px;
list-style-type: none;
}
add in your css
#links-nav > li {
width:168px;
float:left;
}
Demo: http://jsfiddle.net/qUJuy/2/
or
#links-nav > li {
width:168px;
display:inline;
}
Demo: http://jsfiddle.net/qUJuy/3/
The above will fix the error in ie7 (in ie8 it was already correct).