I have the following site here that is using CSS for the Nav element. I have defined the class as the following but it is making the menu text flush left even though I specified !important?
#nav {
-moz-box-shadow: 0 1px 1px #000;
-webkit-box-shadow: 0 1px 1px #000;
box-shadow: 0 1px 1px #000;
clear: both;
color: #fff;
font-size: 13px;
margin: 0 auto;
overflow: hidden;
font-family: 'Droid Serif', arial, serif!important;
height: 30px;
width: 100%;
text-align:center;
padding-top: 3px;
border-bottom: 1px solid white;
position: relative;
background-color: #BD8D2B;
}
You don't need to float your UL element to the left, only the LI's. Floating the UL to the left is pushing that block of content to the left. Removing the float and applying a margin: auto to the left and right of your element will center it in modern browsers.
#nav ul {
padding: 0 0 0 10px;
width: 950px;
margin-left: auto;
margin-right: auto;
}
As j08691 suggested you should remove the float:left; from the ul element and adding margin:0 auto; to center the menu.
#nav ul {
float:none;
margin: 0 auto;
}
Related
If i write a very long article, bottom of the text goes behind the footer and cant be read, while the header (navbar) at the top shifts downwards. The footer is fixed. The header should stay where it is. However I can see that the text that i provide in the section basically wraps around the logo on the top left, while the navbar connected to the logo which is floated left shifts downwards, below the logo. stays above the navbar while the rest of the text () is below the navbar. I have been trying to fix it for hours but couldn't. Thanks for reading. If insufficient for answer, which parts of the HTML code do i have to provide? Thanks!
This is the CSS code.
*{
margin: 0;
padding: 0;
font-family: arial;
}
.container {
}
header,section,footer{
display: block;
}
.logo {
float: left;
width: 200px;
height: 100px;
}
.top_nav {
float: left;
width: 1400px;
height: 100px;
background-color: #0080ff;
}
.top_nav ul li {
float: left;
padding: 40px 20px;
list-style-type: none;
}
a:link {
color: white;
text-decoration: none;
}
a:hover {
background-color: #198cff;
}
a:visited{
color: white;
}
input.gobutton{
width:69%;
cursor:pointer;
padding:5px 25px;
background:#A87300;
border:1px solid #A87300;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
color:#f3f3f3;
font-size:1.1em;
}
input.gobutton:hover, input.gobutton:focus{
background-color :#825A03;
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
.page_footer {
float: left;
width: 1600px;
background-color: #0080ff;
color: white;
font-family: arial;
text-align: center;
line-height:100px;
vertical-align: middle;
height:100px;
position:fixed;
bottom:0;
left:0;
list-style-type: none;
}
section a:link {
color: blue;
}
section a:visited {
color: blue;
}
.keybotimg {
padding-left:30%;
}
table {
border-collapse: collapse;
}
section div{
margin-left: 50px;
margin-right: auto;
width: 900px
}
section div p{
text-align: left;
}
section div p h2,h4{
text-align: left;
}
In your question you say your footer is fixed. This means it will stay where it is no matter what. Try setting it to float.
I want to make a menu to the left and to the right of a list. The menu's have to be fixed, and I want them to always be 10 px of the list, even when I am resizing.
I made the list 'position: relative' and I would like the menu's to be placed relative to the list.
As you can see, I would like it so the orange buttons are the same distance from the list as the blue buttons, even when I resize it.
I tried to use margins, left, right, padding... but nothing seems to work.
Here is some css I used:
With this css, it looks like this:
.navblue {
float: left;
position: fixed;
}
.navorange {
float: right;
position: fixed;
}
.navblue ul {
list-style: none;
padding-left: 0;
}
.navorange ul {
list-style: none;
padding-left: 0;
}
#biglist {
background-color: #e3e3e3;
width: 80%;
padding: 20px;
border-radius: 5px;
color: #000;
border-color: transparent;
margin-left: auto;
margin-right: auto;
}
Thank you very much if you can help.
Maybe this is what you're looking for?
http://jsfiddle.net/myjruLvr/9/
I added an extra parent <div> outside the icons and the main content, and then gave it padding equal to the width of the icons + 10px margin. And instead of position: fixed;, I've used position: absolute;.
Alternatively, you can also use the float property for the icons.
http://jsfiddle.net/myjruLvr/11/
That's a rough example. The icons are floated on their respective sides and the centered <div> will have margins on either sides equal to the width of the icons + 10px.
EDIT:
It seems you're asking for something like a sticky menu, but made purely out of CSS. Sadly position:fixed positions an element relative to the browser viewport, regardless of how it's parent is positioned, and I guess that's pretty much the reason why we have several jquery alternatives for this.
You have to add the fixed position units. Update your CSS like below.
.navblue {
position: fixed;
left:0;
top:0;
}
.navorange {
position: fixed;
top:0;
right:0;
}
EDIT
Based on your comments below, Here is updated CSS.
#container {
width: 100%;
padding-left:70px;
padding-right:70px;
box-sizing:border-box;
}
.navblue {
position: fixed;
left:0px;
top:0;
}
.navorange {
position: fixed;
top:0;
right:0px;
}
.navblue ul {
list-style: none;
padding-left: 0;
}
.navblue a {
display: block;
font-family: Pictoss;
font-size: 20px;
padding: 2px 20px 38px 20px;
background:#017da1;
width: 20px;
text-decoration: none;
overflow: hidden;
text-shadow: 0 -1px 1px black;
border-radius: 50px;
color: white;
height: 20px;
margin-bottom: 10px;
border: 5px solid #017da1;
-webkit-transition: all ease-in-out .3s;
-webkit-background-clip: padding-box;
}
.navorange a {
display: block;
font-family: Pictoss;
font-size: 20px;
padding: 2px 20px 38px 20px;
background: #e9500c;
width: 20px;
text-decoration: none;
overflow: hidden;
text-shadow: 0 -1px 1px black;
border-radius:50px;
color: white;
height: 20px;
margin-bottom: 10px;
border: 5px solid #e9500c;
}
.navorange ul {
list-style: none;
padding-left: 0;
}
#biglist {
height: 500px;
background-color: #e3e3e3;
width:100%;
border-radius: 5px;
color: #000;
border-color: transparent;
box-sizing:border-box;
}
DEMO
I am trying to keep my ul and li elements that are inside of a div to respect the div's width with margin-left: auto. I am also not wanting ul/li to extend out of the div. I want the ul and li elements to stay inside the div container. From what I have read, this code is correct because I have the child elements contain a width which should be according to div's width.
#phonequeue {
display: block;
width: 400px;
height: 800px;
border-width: 5px;
border-color: white;
border-style: solid;
float: right;
margin-top: -650px;
}
li {
display: block;
padding: 15px;
text-align: left;
height: 1.2 em
padding-left: 15px;
padding-right: 15px;
margin: 0px 0px 4px 0px;
background-color #555
-webkit-border-radius: 15px;
border-radius: 40px;
background: -webkit-gradient(linear, 0% 0%, 0% 30%, from(#444), to(#111));
font-family: verdana, arial, helvetica, sans-serif;
font-size: 22px;
width: 100%;
margin: auto;
}
ul {
list-style-type: none;
width: 100%;
margin: auto;
}
index.html:
<div id="phonequeue">
<ul>
<li class="avail">
<span class="pname">John Doe</span>
<span class="ptime">03:00</span>
</li>
</ul>
</div>
UPDATE: Here is a working example. The element width is 430px; when the parent div is 400px;. I would the child elements to center themselves in div and have their width respecting the parents width. http://jsfiddle.net/FBvQJ/4/
I believe the problem was with the use of width: 100%
Check this jsFiddle and let me know if this answers your question.
This is the updated CSS to solve the overlapping width:
phonequeue {
display: block;
width: 200px;
border: 1pt solid green;
}
ul{
border: 1pt solid red;
list-style-type: none;
margin: auto;
padding: 0;
}
li {
display: block;
padding: 15px;
text-align: left;
height: 1.2em;
margin: 0px 0px 4px 0px;
-webkit-border-radius: 15px;
font-size: 22px;
margin: auto;
border: 1pt solid #ccc;
}
I don't think you need to define the full width for each element.
If you'd like the text centered in the DIV, remove the width on the LI tag and make the margin:
margin: 0px auto 4px auto;
That will center the text within the div.
If I'm understanding your question correctly (which is dubious) I believe you can achieve the centering you require by removing the 100% widths and using text-align:center:
li {
display: block;
padding: 15px;
text-align: left;
height: 1.2 em;
padding-left: 15px;
padding-right: 15px;
margin: 0px auto 4px auto;
background-color #555;
-webkit-border-radius: 15px;
border-radius: 40px;
background: -webkit-gradient(linear, 0% 0%, 0% 30%, from(#444), to(#111));
font-family: verdana, arial, helvetica, sans-serif;
font-size: 22px;
text-align:center; /* < this (or not, if you don't actually want it centred after all) */
}
ul {
list-style-type: none;
padding:0; /* < and this */
margin: 0;
}
Demo fiddle
And later, when you decide that you want the time on the right use
.ptime {float:right;}
example
I have a vertical menu having an item "Click here to get the scientific name".
on hover it is showing like
I need to get the overflow part after the black background image to be in the next line(i cannot increase the image width at all.). How can I write the style for that.
css:
on hover
{
display: block;
background: url('/../.png') no-repeat 0px 2px #2F2F31;
text-decoration: none;
color:..;
}
This is coming under
<td>
<div id="first">
<ul id="second">
<li>Click here to get the scientific name
And css:
#first {
display: block;
width: 180px;
min-height: 50px;
float: left;
}
ul#second {
display: block;
clear: both;
margin: 50px 0px 12px 0px;
border-bottom: 1px solid
#C8C8C8;
}
ul#second li {
border-top: 1px solid
#C8C8C8;
padding: 0px;
display: block;
}
ul#second li a {
color:
#004C8E;
margin: 4px 0px 4px 0px;
padding: 4px 0px 4px 12px;
display: block;
text-decoration: none;
font-size: 12px;
background: url('/../.png') no-repeat 0px 2px;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background:
transparent;
}
On hover, you should explicitly set the width of the element to equal the width of the image.
FOr this you can use word-wrap:break-word;. Write like this:
p{
word-wrap:break-word;
}
I made a menu bar with sub children and I'm trying to place the sub children below the menubar like layers not for positioning. I think the problem is that my menu bar has a background image and I cant put its children below that. Is there a workaround for this? Thanks I've added some code below
ul#mainNav {
padding: 0;
margin: 0;
position: relative;
width: 980px;
background: transparent url(images/mainNavbar.png) no-repeat top center;
margin: 0 auto;
float: left;
z-index: 100;
}
ul#mainNav li {
list-style: none;
margin: 0 25px;
display: inline;
height: 40px;
line-height: 40px;
position: relative;
}
ul#mainNav ul {
display: block;
list-style: none;
font-size: 100%;
cursor: default;
position: absolute;
width: 160px;
z-index: -1;
background-color: #c32c19;
-moz-box-shadow: #000 1px 1px .4em;
-webkit-box-shadow: #000 1px 1px .3em;
-o-box-shadow: #000 1px 1px .4em;
}
link below:
http://jsfiddle.net/s96Eh/1/
Thanks for your clarification.. here's an updated JSfiddle
It doesn't work in IE7, but that's a hasLayout issue with stacking order and I'm not sure that it's even "fixable" however it just means it still appears above
ooops.. forgot, hover over the word "families" I put in a CSS hover toggle