I am trying to align the menu to center. I have tried putting in text-align: center !important; in various spots but it didn't do anything.
Anyone have any ideas?
Thanks in advance for your help!
.menu_wrapper
width: 88%;
margin: 0 auto;
#main_menu nav ul
position: relative;
padding-left: 2%;
border-top: 1px solid #fff;
border-bottom: 1px solid #FFF;
#main_menu nav ul:after
content: "\0020";
display: block;
height: 0;
clear: both;
visibility: hidden;
#main_menu nav ul#nav_menu li
cursor: pointer;
display: block;
float: left;
margin-right: 19px;
#main_menu nav ul#nav_menu li a
display: block;
padding: 20px 10px 15px;
font: 11px/1.27em "Helvetica Neue", Helvetica, Arial, sans-serif;
letter-spacing: 0.25em;
color: #fff;
z-index: 2;
#main_menu nav ul#nav_menu li.blob
border-bottom: 1px solid #F00;
bottom: -1px;
height: 1px;
padding-bottom: 0;
position: absolute;
z-index: 1;
The best way to centerize your navigation is to put a display: "table" to your main container. This way you will be sure that everything will be centerized.
.menu_wrapper {
display: table;
margin: 0 auto;
}
change this section
.menu_wrapper
{
width: 88%;
margin: 0 auto;
}
After change
.menu_wrapper
{
width: 88%;
margin: 0 auto;
max-width:88%;
}
Add this style to your CSS:
#main_menu {
margin: 0 auto;
}
Or (if you have a top- or bottom-margin to preserve):
#main_menu {
margin-right: auto;
margin-left: auto;
}
The first example is shorthand for setting vertical margins to zero and horizontal (left and right) margins to automatic. The vertical doesn't matter so much, but the auto setting for your horizontal margins will push the element equally away from the left and right sides of its containing element (or your document, depending on your HTML), thereby centering it.
Note that this horizontal-centering method works only with non-floated, block-displayed, statically or relatively positioned elements—which I'm guessing is fine for your app, but we can't know without seeing your HTML.
In html,
try this
<center><div class='menu_wrapper'> your content </div></center>
Related
I'm trying to write a simple step form script and I would like the ability to use custom titles for tooltips. I created an attribute called data-title to accomplish this and using the pseudo-element ::after I created a tooltip. The problem I'm having is that the tooltip appears behind the next siblings in the list instead of over top. Here's a link to my JS-Fiddle, and here's the code:
Foo
Bar
Stuff
foo 2.0
More
li{
list-style:none;
}
.step-form{
width:90%;
}
.step-form li{
float: left;
margin:0 5px;
text-align: center;
position: relative;
z-index:10;
}
.step-name{
display: table-cell;
vertical-align: bottom;
text-align:center;
margin:0 5px;
z-index:20;
}
.step-num{
border: 2px solid #B8B5B5;
border-radius: 50%;
width: 15px;
height: 15px;
display: inline-block;
margin:10px 5px;
}
.step-num[data-title]:hover:after {
background: #366F9E;
border-radius: .5em;
bottom: 2em;
color: #fff;
left: -2.5em;
content: attr(data-title);
display: block;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
white-space: nowrap;
opacity:1;
z-index: 30;
}
Please keep in mind I'm trying to make this as simple and light weight as possible. Thanks!
You need to avoid the li elements creating a stacking context. Avoid setting a numeric z-index on them, and set it instead to auto
.step-form li{
float: left;
margin:0 5px;
text-align: center;
position: relative;
z-index: auto; // change this
}
fiddle
I am following this tutorial link but do not know how to put the footer on the bottom of the page so when the user open the page the footer is on the very bottom of page regardless of size of the monitor.
So that when they change the size of window or use a bigger monitor footer should be at the end of page.
The important part is that I do not have much text in my content section so the scroll bar is expected to be invisible in any size of monitor.(those that are not very tiny)
*Please also note that I have looked at the previous question but could not find a correct answer.
* If you know of any other tutorial I would appreciate your suggestion. (I need float layout)
Layout
container
{
header
content
{
leftnav | rightnav
}
footer
}
Css
#container
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#top
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#content
{
margin-left: 200px;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#footer
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#leftnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }
In the tutorial the footer is in a container div.
If you remove from the container width:90% the example will be rendered across the whole width of the screen.
Use the sticky wrapper jQuery plugin, or use position: fixed with bottom: 5% and left: 0 and margin-left values in -ve.
<footer style="background-color: crimson; color:springgreen; font-family: serif; text-align: center; font-size: 15px; position:absolute; width: 99.82%;margin-left: -6px; margin-right: -6px;"><h1>THIS IS MY FOOTER</h1></footer>
Browser: Google Chrome
System Screem: 15.6"
I have experienced that the appearance of our divs, headers, footers & navs varies from screen to screen and may be browser to browser.
try this :
#footer{
position: absolute;
bottom: 0px;
height: 50px;
width: 100%;
}
The div class circle renders on the right had page but even adding margin:0 auto; nothing works it just stays there what gives.
Here is my html/php
<?php
/*
Template Name: Home Page
*/
?>
<?php get_header(); ?>
<div id="content">
<header>
<h1><span class="tech">TECH</span><span class="basics">BASICS</span></h1>
<h2>Personal Tech Specialists</h2>
</header>
<div class="circle"></div>
</div> <!-- end #content -->
<?php get_footer(); ?>
Here is my css
html {
font-size: 16px;
}
body {
background: #BAE4FF;
font-family: "Open Sans", sans-serif;
}
nav {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
font-weight: 400;
}
nav .menu {
list-style-type: none;
padding: 0;
margin: 0;
}
nav .menu li {
padding: 3px 0 3px 0;
display: none;
}
nav .menu li a {
text-decoration: none;
color: #fff;
font-size: 2.1em;
}
nav .menu .blog {
background: #1669B5;
}
nav .menu .contact {
background: #3892E3;
}
nav #touchNav {
background: #48B4EF;
width: 100%;
display: block;
color: #fff;
font-size: 2.1em;
padding: 3px 0 3px 0;
text-decoration: none;
}
header {
margin: 50px 0 0 0;
margin-top: 50px;
text-align: center;
width: 100%;
}
header h1 {
margin: 0 auto;
width: 100%;
}
header h1 .tech {
color: #fff;
font-weight: 500;
margin-right: 3.5px;
font-size: 1.1em;
}
header h1 .basics {
color: #48B5EF;
margin-left: 3.5px;
font-size: 1.3em;
}
header h2 {
font-size: 2.1em;
font-weight: 100;
width: 100%;
margin: 0 auto;
color: #fff;
line-height: 1.2em;
}
.circle {
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto;
}
try to add position tag.. u can use fixed as position or relative whatever suits your needs.. to the .circle class.
Your circle class margins are funny.
Try this instead:
.circle {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/1/
One should think that this will work too but trust the first one more:
.circle {
margin: 0 auto;
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/2/
CSS means Cascading style sheets. Cascading means that if one property is defined two or more times for the same element then the property read last is applied. So if you define margin on circle, then again latter in the same style sheet, then again later in a second style sheet with its rel link after the first in the head section, then in the head section itself after the rel links in a style tag, then again inline on the element itself, then the inline value is used. In fact that is the order they are used.
it would be beeter to have an example of page when you ask about css,
but here is the real problem for you
in css margin top does not work as you expect.
its not making a space on the top of your elements unless all the elements be in the same parent z-index (or simpler i mean they all have one parent) i.e all li's within a ul.
the top margin affects space between li's not between li and ul.
for making that you should give the ul a padding-top.
Hope it helps
I'm trying to remove the top spacing of my layout I am working on, which you can view here: 50.116.81.173/~speedcit/wordpress/. However, I don't seem to be having much luck with it. I essentially would like to remove the white spacing at the top of the page.
Below is the CSS code I am currently using:
body, html {
font-family: Arial;
font-size: 11.5pt;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
table, tr, td, div {
font-family: Arial;
font-size: 11.5pt;
}
#outer {
text-align: center;
margin: 0px;
}
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 2px;
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
#header {
background-image: url(http://50.116.81.173/~speedcit/images/header.jpg);
width: 1024px;
height: 280px;
}
#menu {
width: 1024px;
height: 61px;
}
#content {
background-image: url(http://50.116.81.173/~speedcit/images/content-bg.jpg);
background-repeat: no-repeat;
width: 804px;
height: 357px;
padding-top: 80px;
padding-bottom: 10px;
padding-left: 110px;
padding-right: 110px;
line-height: 24pt;
}
#footer {
margin: 0px;
padding: 0px;
}
.txt {
color: #BF2736;
font-weight: bold;
}
Add padding 0 to your wrapper. CSS reset should fix your problem but might create new ones.
http://meyerweb.com/eric/tools/css/reset/
#wrapper {padding:0;}
The root cause to the problem is that you did not reset the way in which the browser renders CSS back to zero.
Change the Padding of the #wrapper to Zero
#wrapper {
border-left: 1px #000000 dotted;
border-right: 1px #000000 dotted;
padding-top: 0px; -- Change This to zero!!!
padding-left: 2px;
text-align: left;
width: 1024px;
display: block;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
You might want to read about css reset tool
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings,
and so on
Replace padding-top:2px with padding:0 in the #wrapper rule. If you add padding:0 before the padding-top property, you will still have the problem.
problem of your bottom padding is image it-self. There is a white space in image. Edit it and remove it:
50.116.81.173/~speedcit/images/footer.jpg
And problem of your top white space is what others said before.
I have a problem with css popup. I am hidden some content in span tags and show it when I hover over a text. But there is a overlap and the text in the second line is overlapping the popup. And the border for the popup is messed up. The content is on this link. And I am using following css:
.rest-cat
{
clear: both;
padding: 3px 40px 0 0!important;
width: 600px;
}
.rest-menuitem
{
position: static;
float: left;
width: 254px;
padding: 3px 5px 0 0!important;
border-top: 1px dotted #DDD;
}
.dishname{
position: absolute;
z-index: 0;
float: left;
width: 229px;
}
.dishprice{
position: relative;
float: right;
width: 25px;
}
.product
{
width: 600px;
padding: 0px 0px 20px 20px!important;
}
.dishname span
{
display: none;
text-decoration: none;
}
.dishname:hover
{
overflow: hidden;
text-decoration: none;
}
.dishname:hover span
{
display: block;
position: static;
top: 0px;
left: 170px;
width: 320px;
margin: 0px;
padding: 10px;
color: #335500;
font-weight: normal;
background: #e5e5e5;
text-align: left;
border: 1px solid #666;
z-index: 200;
}
Is there a easy fix for this? I already tried using position: relative; and added z-index to all the CSS tags. They didn't work and I am stuck on it for a day.
The reason your popups are being clipped is because of this CSS:
.dishname:hover {
overflow: hidden;
}
Removing that would be a good place to start.
Next, z-index only affects elements with a position property other than static. Use relative and they will render the same but the z-index will have an effect.
After that there are a lot of different things that could be affecting the layering I would start like #Michael Rader said by cleaning up your HTML, you have a lot of unnecessary wrappers.