I am trying to center a div, but it is not working. As you can see in the code below, I have the margin set, but the div doesn't move to the center.
body {
margin: 0;
padding: 0;
font-family: Helvetica;
font-weight: bold;
}
.body {
margin: 0 auto;
}
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
li {
float: left;
}
li a {
color: white;
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
.one, .two, .three, .name {
border-bottom: 4px solid black;
}
.one:hover {
border-color: #ED08FD;
}
.two:hover {
border-color: #0821FD;
}
.three:hover {
border-color: #FF41C0;
}
.name:hover {
border-color: #DAD8D9;
}
.name {
color: white;
padding-left: 15px;
}
.main-body {
text-align: center;
}
hr {
border: 1px solid #6E6E6E;
}
.circle-row {
width: 100px;ext-align: left;
padding-left: 4cm;
font-size: 35px;
}
.welcomeHeader, .background {
border: 2px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div class="body">
<div class="navbar">
<ul>
<li class="name">JordanCodes</li>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<div class="header">
<img src="header-background.jpg">
</div>
<div class="main-body">
<h1 id="welcomeHeader">JordanCodes</h1>
<br>
<br>
<br>
<br>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
I have tried setting the width to 50%, which works, but since have the ul width set to 700px the div doesn't center properly.
If you want to center your ul element, try adding this:
body {width:100%;}
ul {margin:auto;}
please see: https://jsfiddle.net/ty8858hq/
on your styles.css try changing this:
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
to this:
ul {
list-style-type: none;
background-color: black;
margin: 0 auto 0; /* When 3 values are entered, the first one is the value for the top margin, the second is for the horizontal margin and the third one is for the bottom margin */
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
this should make your navbar to display at the center of your page, i hope this works well for you!
The property I'm using to center, or at least make it close to center should work. What I've done is added this css.
.one {
margin-left: 125px /*you can modify this*/;
}
You can also change the .one to .name, but .one looks better;
body {
margin: 0;
padding: 0;
font-family: Helvetica;
font-weight: bold;
}
.body {
margin: 0 auto;
}
ul {
list-style-type: none;
background-color: black;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
box-shadow: 0px 11px 26px -6px rgba(0,0,0,0.75);
width: 700px;
}
li {
float: left;
}
li a {
color: white;
display: block;
padding: 14px 16px;
text-align: center;
text-decoration: none;
}
.one {
margin-left: 125px;
}
.one, .two, .three, .name {
border-bottom: 4px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div class="body">
<div class="navbar">
<ul>
<li class="name">JordanCodes</li>
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<div class="header">
<img src="header-background.jpg">
</div>
<div class="main-body">
<h1 id="welcomeHeader">JordanCodes</h1>
<br>
<br>
<br>
<br>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
Related
I have set all elements to be middle of the page fitting at 77%. Using this code here:
body{
margin: auto;
padding: 0;
width: 77%;
font-family: arial;
}
I have added a bottom border with a blue colour and it is also at width of 77%.
How can I extend the blue border to go all the way to fit the page? But keep all other elements at 77%?
I have attached a snippet, I know it doesn't work great, but I am currently practicing on my knowledge of borders, and this is what I have come across to.
I just need the blue line to run across the whole page.
body{
margin: auto;
padding: 0;
width: 77%;
font-family: arial;
}
#head{
border-bottom: 2px solid blue;
overflow: hidden
}
.container{
width: 100%;
}
#head ul{
margin: 0;
padding: 0;
float: right;
padding-bottom: 10px;
}
#head ul li{
list-style: none;
display: inline-block;
font-size: 20px;
padding-left: 20px;
}
#head a{
text-decoration: none;
text-transform: uppercase;
}
#head header{
text-transform: uppercase;
font-weight: bold;
font-size: 30px;
margin-top: 10px;
}
#head .container header{
color: #0D1D6B;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
#head .container span{
color: #fff;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
<!DOCTYPE html>
<html>
<head>
<title>practise</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="head">
<div class="container">
<header>Holiday <span>resort</span></header>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
</ul>
</div>
</section>
</body>
</html>
Typically this would be done with a full-width header that has a 77% width container inside of it. I've added .container elements to the header, main content region, and footer of the page.
I've also updated to use flexbox for the menu items.
body {
margin: 0;
font-family: Arial;
}
nav {
margin: 10px 0;
}
header {
border-bottom: 2px solid blue;
}
footer {
border-top: 2px solid blue;
}
.container {
margin: 0 auto;
width: 77%;
}
.primary-nav {
display: flex;
justify-content: flex-end;
padding: 0;
list-style: none;
}
.primary-nav li {
font-size: 20px;
margin-left: 20px;
}
.primary-nav a {
text-decoration: none;
text-transform: uppercase;
}
.brand,
.brand span {
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
.brand {
text-transform: uppercase;
font-weight: bold;
font-size: 30px;
margin-top: 10px;
color: #0D1D6B;
}
.brand span {
color: #fff;
}
<header>
<div class="container">
<nav>
<span class="brand">Holiday <span>resort</span></span>
<ul class="primary-nav">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<main>
<div class="container">
<h1>Page Title</h1>
<p>
Lorem ipsum dolor.
</p>
</div>
</main>
<footer>
<div class="container">
Footer
</div>
</footer>
Best way to do it is to use parent div, Make the width of the parent 100% and set the border for the parent, then set the width of #head to 100%. you can center the #head by adding margin: auto
Here is the code
body{
margin: auto;
padding: 0;
font-family: arial;
}
.wrapper{
width: 100%;
border-bottom: 2px solid blue;
}
#head{
width: 77%;
overflow: hidden;
margin: auto;
}
.container{
width: 100%;
}
#head ul{
margin: 0;
padding: 0;
float: right;
padding-bottom: 10px;
}
#head ul li{
list-style: none;
display: inline-block;
font-size: 20px;
padding-left: 20px;
}
#head a{
text-decoration: none;
text-transform: uppercase;
}
#head header{
text-transform: uppercase;
font-weight: bold;
font-size: 30px;
margin-top: 10px;
}
#head .container header{
color: #0D1D6B;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
#head .container span{
color: #fff;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}
<!DOCTYPE html>
<html>
<head>
<title>practise</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<section id="head">
<div class="container">
<header>Holiday <span>resort</span></header>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
</ul>
</div>
</section>
</div>
</body>
</html>
Try adding the following css to the #head
#head{
width: calc(100% + 23%);
border-bottom: 2px solid blue;
overflow: hidden;
margin-left: -11.5%;
}
You can set the width to 100% and then add padding of 11.5% on each side of the div, resulting in the div being 77% of the page. Since padding is inside the div, the border will extend till the end of the page, unlike if you set margin to 11.5%, since margin is on the outside of the div.
body{
width: 100%;
font-family: arial;
padding-right: 11.5%;
padding-left: 11.5%;
border-bottom: solid blue 2px;
}
I have a 3 column layout which is successfully giving me 3 columns; however, my third column (similar to my first column) needs margin and padding changes. Unfortunately, I seem unable to adjust margin and padding for that column. I'm not really sure the issue and googling is bringing me no answers.
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
background: #ecf0f1;
color: #2c3e50;
font-family: "Georgia", serif;
}
h1, h2 {
font-family: "Franklin Gothic", sans-serif;
}
.header h1 {
background: #2c3e50;
color:#ecf0f1;
margin: 10px;
padding: 25px 15px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
}
.row {
margin: 0;
padding: 0;
font-size: 0;
}
.row div {
margin: 0;
padding: 0;
font-size: 18px;
}
.col-3 {
width: 25%;
display: inline-block;
}
.col-6 {
width: 50%;
display: inline-block;
}
.menu {
float: left;
}
.menu ul {
list-style-type: none;
margin: 10px 0px;
padding: 0;
}
.menu li {
background: #2980b9;
padding: 10px;
color: #ecf0f1;
padding: 10px;
margin: 5px 25px;
font-family: "Franklin Gothic", sans-serif;
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
}
.right {
float:right;
}
.right p {
margin: 10px;
}
.aside {
text-align: center;
background: #2980b9;
height: 390px;
color: #ecf0f1;
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
/* THESE DO NOT WORK AND I CAN'T FIGURE OUT WHY */
margin: 25px;
padding: 25px;
}
.footer {
width: 100%;
position: absolute;
bottom: 0;
}
.footer p {
-webkit-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
-moz-box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
box-shadow: 2px 2px 5px 0px rgba(136,136,136,1);
padding: 50px 0px;
background: #2980b9;
text-align: center;
color: #ecf0f1;
margin: 10px 10px;
}
HTML:
<html>
<head>
<meta chrset="utf-8" />
<title>CMST-290 Project 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>Jacob Johnson</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>Education</li>
<li>Software</li>
<li>Skills</li>
<li>Awards</li>
<li>Experience</li>
<li>Projects</li>
</ul>
</div>
<div class="col-6">
<h1>Career Objective</h1>
<p>
I want to ensure quality in everything I do. I will work hard to achieve the goals my employer has for as well the goals I have set for myself.
</p>
</div>
<div class="col-3 right">
<div class="aside">
<h2>Developer</h2>
<p>I am familiar with front end tools such as HTML/CSS and JavaScript in addition to languages like C#, Python, and Java.</p>
<h2>Designer</h2>
<p>I have designed several websites from scratch.</p>
<h2>Student</h2>
<p>I am always eager to learn and keep improving my skills.</p>
</div>
</div>
</div>
<div class="footer">
<p>Copyright © 2017 | Jacob B. Johnson</p>
</div>
<script type="text/javascript" src="/d2l/common/math/MathML.js?v=10.6.10.5455-164 "></script>
<script type="text/javascript">document.addEventListener('DOMContentLoaded', function() { D2LMathML.DesktopInit('https://s.brightspace.com/lib/mathjax/2.6.1/MathJax.js?config=MML_HTMLorMML','https://s.brightspace.com/lib/mathjax/2.6.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML'); });</script>
</body>
</html>
CodePen link
Any insight would be awesome as to why I was so easily able to adjust the left-most column but not the right-most. Thanks.
Your styles on aside are being ignored because the .row div selector is more specific, and therefore overriding margin and padding to zero.
Adding this should make it work:
.right .aside {
margin: 25px;
padding: 25px;
}
You just need higher specificity because you've used .row div with margin: 0; padding: 0;. So to override that CSS with a margin or padding change, you will need to use .row in front of a selector like .col-3, so that the rule is .row .col-3 { /* margin/padding *}
You can read more about specificity here - https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I have a banner right above a navigation menu. The two have their own container divs going horizontally across the screen. I have box shadows on both of them to make it look like outer glow. The issue is that the shadow breaks(as it's meant to) between the banner and the navigation. Is there any way that I can modify my code to make it look like the shadows are one? Thanks for your time.
http://i.imgur.com/dJ69OyV.gif
My HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blah Blah</title>
<link href="assets/css/theme.css" rel="stylesheet" type="text/css">
<link href="assets/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapperOuter">
<header>
<div id="bannerContainer">
<div id="banner">
<h1>Scott <span class="green">H.</span> Lacey</h1>
<p>Web Developer <span class="green">♠</span> Photographer <span class="green">♠</span> Musician</p>
</div>
</div>
<div id="toolbarContainer">
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Services</li>
<li>Resume</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div id="toolbar">
<div id="social">
<label>Connect With</label>
<ul>
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-facebook-"></i></li>
<li><i class="fa fa-linkedin-square"></i></li>
</ul>
</div>
<div id="search">
<form action="#" method="POST">
<input type="text" name="searchCriteria" size="30" placeholder="Enter search text, then press enter.">
</form>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
My CSS:
#charset "utf-8";
/* CSS Document */
span.green {
color: #66cc00;
}
body {
background: url(../img/bodyBackground.gif) repeat-x #000;
padding: 0;
margin: 0;
font-family: Verdana;
font-size: 1em;
color: #666666;
}
a {
color: #66cc00;
text-decoration: none;
border-bottom: 1px dotted #66cc00;
}
a:hover {
color: #666666;
}
#wrapperOuter {
margin: 0;
padding: 0;
}
header {
margin: 0;
padding: 0;
}
#bannerContainer {
background: url(../img/themeSprite.gif) 0 0px;
height: 148px;
border-bottom: 1px solid #333;
margin: 0;
padding: 0;
}
#banner {
background-image: url(../img/themeSprite.gif);
background-position: 0px -210px;
height: 148px;
margin: 0px auto;
width: 960px;
border-width: 0px 1px;
border-color: #666;
border-style: solid;
background-repeat: repeat-x;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5), 12px 0 15px -4px rgba(255, 255, 255, 0.2), -12px 0 8px -4px rgba(255, 255, 255, 0.2), 0px 10px 10px 0px rgba(255, 255, 255, 0.2);
text-align: center;
}
#banner h1 {
margin: 0px;
padding-top: 25px;
}
#banner p {
color; #999;
}
#toolbarContainer {
background-color: #222;
border-bottom: 1px solid #666;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5);
margin: 0px;
padding: 0px;
}
nav {
background-image: url(../img/themeSprite.gif);
background-position: 0px -153px;
margin: 0px;
padding: 0px;
width: 960px;
margin: 0px auto;
height: 52px;
border: 1px solid #000;
box-shadow: 12px 0 15px -4px rgba(255, 255, 255, 0.2), -12px 0 8px -4px rgba(255, 255, 255, 0.2), 0px 5px 15px 0px rgba(255, 255, 255, 0.2), 0px -5px 15px 0px rgba(0, 0, 0, 0.2);
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
display: inline;
border-left: 1px solid #333;
border-right: 1px solid #666;
height: 52px;
box-shadow: 15px 0 15px -2px rgba(0, 0, 0, .2);
}
nav ul li a {
display: block;
margin: 0px;
border-bottom: 0;
color: #333;
height: 52px;
padding: 15px 25px;
}
#toolbar {
width: 960px;
margin: 0px auto;
padding: 15px 0;
overflow: auto;
}
#social {
float: left;
}
#social label {
float: left;
display: block;
padding-right: 10px;
}
#social ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#social ul li {
float: left;
display: inline;
margin: 0px 5px;
padding: 0;
}
#social ul li a {
color: #666;
border: 0;
font-size: 18px;
}
#search {
float: right;
}
#search input {
background: #333;
border: 1px solid #666;
box-shadow: inset 5px 5px 26px 2px rgba(0, 0, 0, 0.5);
color: #666;
padding: 10px;
}
Take the drop shadows off of .bannerContainer and .toolbarContainer, then place a div around the outside of both of those and add the drop shadow there. You will have to put the <div id="toolbar"> outside of this div too.
The answer is yes but you'd need to rewrite your code and place the nav menu and center head banner in a wrapping div element then apply the shadow to that element. Right now you have 2 elements which are going to be stacked on one another.
<html>
<head></head>
<style>
.main {
width: 100%;
}
.box1 {
margin: 0 -2px;
width: 50%;
height: 400px;
background: red;
display: inline-block;
}
.box1inner {
margin: auto;
width: 70%;
height: 50px;
background: blue;
-webkit-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
}
.box2 {
margin: 0 -2px;
width: 50%;
height: 400px;
background: orange;
display: inline-block;
}
.box2wrapper {
margin: auto;
width: 70%;
-webkit-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
box-shadow: -4px 10px 35px 0px rgba(0,0,0,0.75);
}
.box2inner {
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">
<div class="box1inner">
</div>
<div class="box1inner">
</div>
</div>
<div class="box2">
<div class="box2wrapper">
<div class="box2inner">
</div>
<div class="box2inner">
</div>
</div>
</div>
<div class="box3">
</div>
</div>
</body>
</html>
I am designing a project and i have faced a bug :
The design of the page ( especially the menu bar ) change on zooming
How can i prevent this ? Is there a shortage in my code ?
HTML Code
<html>
<head runat="server">
<title>Movie Guide</title>
<link href="StyleSheet.css" rel="stylesheet" />
<style>
#main {
text-align: center;
}
#main-menu-container {
text-align: center;
}
#main-menu {
display: inline-block;
width: 1024px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="main" style="text-align: center">
<img src="image.jpg" width="925" height="125" />
<div id="main-menu-container">
<div id="main-menu">
<div id="menubar">
<ul id="menu">
<li class="current">Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
<li>Title 5</li>
</ul>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
CSS Code
body {
font: normal 80% Arial, Helvetica, sans-serif;
background: #23244e;
color: #000;
}
#menubar {
width: 920px;
height: 50px;
text-align: center;
margin: 0 auto;
background: #1D1D1D;
background: -moz-linear-gradient(#535353, #1d1d1d);
background: -o-linear-gradient(#535353, #1d1d1d);
background: -webkit-linear-gradient(#535353, #1d1d1d);
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
}
ul#menu li {
padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
display: inline;
background: transparent;
}
ul#menu li a {
float: left;
font: bold 120% Arial, Helvetica, sans-serif;
height: 24px;
margin: 10px 0 0 20px;
text-shadow: 0px -1px 0px #000;
padding: 6px 20px 0 20px;
background: transparent;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
text-align: center;
color: #FFF;
text-decoration: none;
}
I haven't used css for a while so my apologies if this is not the correct solution, but I believe if you put under the main menu:
position:absolute;
the menu should no longer move
I am trying to add menus to a combined background. But when I nest the background with the menus inside it, they dont co-work and dont align right. For instance when I move one of the menus to the left, the others start moving in another direction. Now I really tried solving this but it seems the only way right now is for me to adjust each of them until all are aligned right. So thats my question today:
How can i make this work, without adjusting each menu over and over again?
Here comes the css and html code
.baked a:hover{text-decoration: none;
color: white;
text-shadow: 1px 1px 1px blue;
}
.baked { list-style-type: none;
float: left;
margin-top: 15px;
margin-left: -20px;
}
.baked li ul {position: absolute;
display: none;}
.baked li{font-family: Berlin Sans FB;
}
.baked li:hover ul { background: silver;
display: block;
box-shadow: inset 0px 12px 15px -2px purple;
list-style-type: none;
width: 400px;
height: 100px;
}
.baked li>a{color: white;
font-size: 12px}
<ul class="baked">
<li>
PointerIndex
<ul>
<li>Reflections</li>
<li>Practicing</li>
<li>NewsFeed</li>
<li>Explanatory Art</li>
<li>Top AI</li>
</ul>
</li>
</ul>
NOTE that i have a total of 9 of these menus, all of which are contained in the following div
div.Console{background: gray;
display: block;
box-shadow: 0px -20px 5px -10px #692, 0px 20px 5px -10px lightblue, 15px 0px 5px -2px #942, -15px 0px 5px -2px #249;
border-radius: 24pt;
list-style-type: none;
width: 300px;
margin-top: -100px;
margin-left: 30px;
height: 50px;
}
I am confused with the information which you have given.
I have modified your code in which the sub menu items are right aligned. Try it. Please specify little more information.
<!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>Untitled Document</title><br />
<style type="text/css">
.baked a:hover{text-decoration: none;
color: white;
text-shadow: 1px 1px 1px blue;
}
.baked { list-style-type: none;
float: left;
margin-top: 15px;
margin-left: -20px;
}
.baked li ul {position: absolute;
display: none;}
.baked li{font-family: Berlin Sans FB;
}
.baked li:hover ul { background: silver;
display: block;
text-align:right; padding-right:10px;
box-shadow: inset 0px 12px 15px -2px purple;
list-style-type: none;
width: 400px;
height: 100px;
}
.baked li a{color: white;
font-size: 12px}
/* div.Console{background: gray;
display: block;
box-shadow: 0px -20px 5px -10px #692, 0px 20px 5px -10px lightblue, 15px 0px 5px -2px #942, -15px 0px 5px -2px #249;
border-radius: 24pt;
list-style-type: none;
width: 300px;
margin-top: -100px;
margin-left: 30px;
height: 50px;
}
*/
</style>
</head>
<body bgcolor="#999999">
<ul class="baked">
<li>
PointerIndex
<ul>
<li>Reflections</li>
<li>Practicing</li>
<li>NewsFeed</li>
<li>Explanatory Art</li>
<li>Top AI</li>
</ul>
</li>
</ul>
</body>
</html>