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>
Related
I am setting up a new web page and making a horizontal menu. The hypertext is made by 2 words. It should be in one row, but actually one word = 1 row. I have here in CSS a hover effect over it, whenever the hover effect works, the hypertext is in this moment in one row. I am a little bit lost and confused. I don't know what to change, can you help me?
I have already tried changing in CSS display attribute to table, block, solid. Also I have tried min-width, with hopes that text will expand on one line, but it didn't helped at all. Also I tried to change margin and padding but nothing changed.
https://i.stack.imgur.com/AgqOJ.jpg
HTML
<div id ="panel">
<img src= "Logo.jpg" alt="Logo">
<h3>Nabidka</h3>
<ul>
<br />
<br />
<br />
<li>Hlavní stránka</li>
<li>Program 2020</li>
<li>Kde sídlíme</li>
<li>Organizátoři</li>
<li>O nás</li>
<li>Galerie</li>
<li class ="last">Facebook</li>
</ul>
</div>
CSS
#panel{
width: 15%;
float: left;
background: rgb(153,153,153);
padding: 5px 0 0 0;
}
#panel h3{
display: none;
}
#panel ul{
margin: 0;
padding: 0;
list-style-type: none;
background: rgb(153,153,153);
}
#panel li{
/*border-top: 0px solid rgb(0,176,176);*/
/*border-width: 2px 0px 0px 0px;*/ /*line between hypertexts*/
/*margin: 0px 0px 0px 0px;*/
/*margin-bottom: 1px;*/
display: block;
}
#panel a{
display: block;
width: 100px;
height: 30px;
color: black;
font-size: 120%;
font-weight: bold;
text-decoration: none;
padding: 6px 185px 6px 4px;
margin: 5px 0px 0px 0px;
background: rgb(153,153,153);
}
#panel a:hover{ /*redrawing*/
color: white;
text-decoration: none;
background: rgb(0,0,0);
padding: 4px 0px 4px 2px;
min-width: 100%;
}
#panel li.spodni{
height: 1500px;
}
img {
width: 200px;
height: 200px;
padding: 0px 0px 0px 20px;
}
The a tag width has been limited in normal state:
#panel a{
display: block;
width: 100px; --> this line
height: 30px;
color: black;
font-size: 120%;
font-weight: bold;
text-decoration: none;
padding: 6px 185px 6px 4px;
margin: 5px 0px 0px 0px;
background: rgb(153,153,153);
}
You could remove the line width: 100px; because display:block will set the element width to 100% of its container.
the width in your a tag selector in CSS was limiting the width of the elements forcing a text wrap. this fixes it
<div id ="panel">
<img src= "Logo.jpg" alt="Logo">
<h3>Nabidka</h3>
<ul>
<br />
<br />
<br />
<li>Hlavní stránka</li>
<li>Program 2020</li>
<li>Kde sídlíme</li>
<li>Organizátoři</li>
<li>O nás</li>
<li>Galerie</li>
<li class ="last">Facebook</li>
</ul>
</div>
<style>
#panel{
width: 15%;
float: left;
background: rgb(153,153,153);
padding: 5px 0 0 0;
}
#panel h3{
display: none;
}
#panel ul{
margin: 0;
padding: 0;
list-style-type: none;
background: rgb(153,153,153);
}
#panel li{
/*border-top: 0px solid rgb(0,176,176);*/
/*border-width: 2px 0px 0px 0px;*/ /*line between hypertexts*/
/*margin: 0px 0px 0px 0px;*/
/*margin-bottom: 1px;*/
display: block;
}
#panel a{
display: block;
width: 150px;
height: 30px;
color: black;
font-size: 120%;
font-weight: bold;
text-decoration: none;
padding: 6px 185px 6px 4px;
margin: 5px 0px 0px 0px;
background: rgb(153,153,153);
}
#panel a:hover{ /*redrawing*/
color: white;
text-decoration: none;
background: rgb(0,0,0);
padding: 4px 0px 4px 2px;
min-width: 100%;
}
#panel li.spodni{
height: 1500px;
}
img {
width: 200px;
height: 200px;
padding: 0px 0px 0px 20px;
}
</style>
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>
First heads up is that I'm in my first year at University and I could be making a dumb as balls mistake. However, when I try to get my a:selected to be the same length as my li:hover, the a:selected seems to be off by a few amount of pixels. I've been messing with the padding and still have no luck. Is there a specific reason with my CSS used or a technical problem/browser interpreting it differently?
Here's my CSS:
a {
font-family: Armata;
}
body {
background-image: url(http://i.imgur.com/26DXP2k.png);
background-repeat: repeat;
background-position: fixed;
}
#siteNavigation {
width: 100%;
margin: 55px 0px;
padding: 0px 0px 0px;
text-align: center;
}
#siteNavigation li:hover {
padding: 0px 0px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
#siteNavigation a:hover {
color: #BDBFBE;
padding: 10px 45px;
}
#siteNavigation ul {
margin-top: 0px;
color: inherit;
}
#siteNavigation li {
margin: 0px;
padding: 0px 0px;
display: inline;
list-style: none;
color: #E03A00;
background-color: #BDBFBE;
border-bottom: 3px solid #E03A00;
border-top: 6px solid #BDBFBE;
border-left: 1px solid black;
border-right: 1px solid black;
}
#siteNavigation a {
margin: 0px;
padding: 0px 45px;
display: inline;
text-decoration: none;
color: #E03A00;
}
#siteNavigation #selected a {
margin: 0px;
padding: 0px 45px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
Here's the HTML:
<!doctype html>
<head>
<title>First Web page</title>
<meta charset="utf-8" />
<meta name="author" content="Matthew Sharp" />
<meta name="description" content="Index page" />
<link href="http://fonts.googleapis.com/css?family=Armata%7cLobster%7cRoboto%7cPontano+Sans" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<!-- Grey Color's {Light to dark}:
FCFFFD
E3E5E4
BDBFBE
7E7F7F
3F403F
ORANGE: E03A00 //Comment used for personal use due to non saved kuler -->
</head>
<body>
<nav id="siteNavigation">
<ul>
<li>
Home
</li>
<li id="selected">
Structure
</li>
<li>
Common Elements
</li>
<li>
CSS Selectors
</li>
<li>
Common CSS
</li>
</ul>
</nav>
<section id="bodyLayer">
</body>
And the results can be seen here:
Cheers.
Solution in JSFiddle
Basically, the problem is that you're applying the selected CSS to the a tag, when you wanted to apply it to the li tag.
The a tag captures the text and a small area around it based on the margin and padding, but the actual "cell" is represented by the li tag, so that's where you want to apply the selected CSS.
#siteNavigation #selected a { /*should be #siteNavigation li#selected*/
margin: 0px;
padding: 0px 45px;
background-color: #E03A00;
border-top: 10px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
text-transform: uppercase;
color: #BDBFBE;
}
I also tidied up some of the CSS, like removing the unnecessary padding, the too-thick border-top for selected, and added this :
#siteNavigation #selected a{
color: #BDBFBE;
}
So the text color would be correct.
Check the JSFiddle for the detailed answer.
Here's a cleaned up version of your navigation:
Demo: http://jsfiddle.net/rxh17e3h/
Use float:left instead of display:inline-block
Use class="selected" istead of id
Control everything from the li. Don't assign hover to the a tag
a {
font-family: Armata;
}
body {
background-image: url(http://i.imgur.com/26DXP2k.png);
background-repeat: repeat;
background-position: fixed;
}
#siteNavigation {
width: 100%;
margin: 55px 0px;
padding: 0px 0px 0px;
text-align: center;
}
#siteNavigation ul {
margin-top: 0px;
color: inherit;
}
#siteNavigation li {
float:left;
margin: 0px;
padding: 0px 0px;
list-style: none;
border-bottom: 3px solid #E03A00;
border-top: 6px solid transparent;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: #BDBFBE;
color: #E03A00;
}
#siteNavigation li a{
padding: 10px 45px;
color:inherit;
text-decoration: none;
}
#siteNavigation li:hover, #siteNavigation li.selected{
color: #BDBFBE;
background-color: #E03A00;
border-top: 6px solid #E03A00;
border-bottom: 3px solid #BDBFBE;
}
The problem is that quite simply you are putting an action on the tag and expecting it to behave in the same way as the same action on an tag. Quite simply the two tags hold a different space on your page. The contains your tag.
So apply the behaviour to one or the other.
Some just target the a tag with a:hover a:selected etc others will target li. Whenever I get problems like this I just comment out the dimension code and un comment until the error appears or just use firebug.
This is my website. The nav bar is causing me horrendous problems. Last night my friend told me it was dropping down and I just don't know how to fix it:
http://i60.tinypic.com/23iigpi.png
So I removed the width and reduced the text on some buttons which is depressing for me.
Anyway, now I want my smaller nav bar to centre in the middle of my white block. Does anyone know the best way?
http://www.simplypsychics.com/null/index-test.html
I have tried:
and modifying various positioning in the CSS but nothing seems to work.
This is my CSS for the nav:
#nav {
position: absolute;
top: 98px;
left:15px;
float: left;
list-style: none;
background-image:url(../images/menubanner.png);
background-color: #f5c3fd;
border-radius:7px;
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 1px 3px 1px rgba(0, 0, 0, 0.05);
}
#nav li {
float: left;
}
#nav li a {
display: block;
padding: 8px 13px;
text-decoration: none;
font-weight: bold;
color: #494949;
border-right: 1px solid #fceaff;
}
#nav li a:hover {
color: #822e8e;
}
#nav .home-icon1 {
background: url(../images/icon-home.png) no-repeat center;
width: 39px;
height: 34px;
background-color: #494949;
color: #f5c3fd;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
position: relative;
border-right: 1px solid #fceaff;
float: left;
padding: 0;
list-style: none;
}
#nav .home-icon1 a:hover {
background: url(../images/icon-home.png) no-repeat center;
width: 39px;
height: 34px;
background-color: #494949;
color: #f5c3fd;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
position: relative;
border-right: 1px solid #fceaff;
float: left;
padding: 0;
list-style: none;
}
#nav .home-icon2 {
background: url(../images/icon-findapsychic.png) no-repeat left;
padding: 0px 0px 0px 15px;
}
#nav .home-icon3 {
background: url(../images/icon-psychicreadings.png) no-repeat left;
padding: 0px 0px 0px 25px;
}
#nav .home-icon4 {
background: url(../images/icon-bookareading.png) no-repeat left;
padding: 0px 0px 0px 22px;
}
#nav .home-icon5 {
background: url(../images/icon-aboutus.png) no-repeat left;
padding: 0px 0px 0px 30px;
}
#nav .home-icon6 {
background: url(../images/icon-help.png) no-repeat left;
padding: 0px 0px 0px 14px;
}
and this is my HTML:
<div id="nav" style="margin:0 auto !important;">
<li class="home-icon1" onclick="window.location.href='http://www.simplypsychics.com/'"></li>
<li class="home-icon2">FIND A PSYCHIC READER</li>
<li class="home-icon3">PSYCHIC READINGS</li>
<li class="home-icon4">BOOK A READING</li>
<li class="home-icon5">FIND OUT MORE</li>
<li class="home-icon6">HELP/FAQ</li>
</div>
Also if the nav bar looks awful for you like it did my friend please let me know! :(
On parent (#headerwhiteback) set:
text-align: center;
Then on #nav, remove:
position: absolute;
float: left;
And add this CSS:
#nav {
display: inline-block;
}
#nav::before {
content: "";
clear: both;
}
Also, to your liking: add margin-top: on #nav (25px seems ok) and make padding-top: on next element, #headertextbottom, much smaller (20px seems ok).
This is just a quick fix for your header. Please remember: CSS looks horrific here and looks set to be rewritten from scratch or only cause you more and more trouble. Good luck!
If the nav bar is more-or-less a set width (#nav looks to stay at 840px) then you can set left:50% and margin-left:-420px (-420 px because it's half the width of the navbar, and we want to move it towards the left). This should work because you've already set the navbar to be positioned absolutely.
You'll have to remove this from the #nav div though: style="margin:0 auto !important;"
Inline style and !important is doubly bad!
Within an html file I have a menu set up as:
<div id="informheader" class="topmenu">
<ul id="navigationMenu">
<li>Home</li>
<li>Reporting</li>
<li>Dashboard</li>
<li>My Profile</li>
<li>Management Console</li>
</ul>
</div>
Within the CSS
.topmenu ul a
{
line-height:36px;
text-decoration: none;
color: #ffffff;
display:inline-block;
padding: 0px 5px 0px 5px;
background-position: 100%;
}
.topmenu li a:hover
{
background-image: url('../images/gradientheaderdark.png');
height: 36px;
display: inline-block;
text-decoration: none;
background-repeat: repeat-x;
margin-top:-5px;
line-height:36px;
}
.topmenu
{
position: relative;
display: block;
width: 80%;
height: 36px;
margin: 5px auto;
text-align: left;
z-index: 9998;
-khtml-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-khtml-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-ms-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-o-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
box-shadow: rgba(0,0,0,0.3) 0 1px 2px;
background-image: url('../images/gradientheader.png');
background-repeat: repeat-x;
}
.topmenu ul
{
display:inline-block;
list-style-type: none;
padding: 0;
margin: auto 0;
}
.topmenu li
{
display: inline-block;
list-style:none;
padding: 0px 5px 0px 5px;
}
The result renders the bullet-ed list horizontally in IE fine. However in Firefox the list stays vertical. Can anyone point me in the correct direction as to what tag I am missing to get Firefox to also render this UL list horizontally in Firefox (as well as safari)?
Switching the display to block vs inline-block flips the issue for IE.
Add float: left; to .topmenu li