I cannot work out why the browser is not allowing me to set a margin-top or padding-top on a DIV to allow me to center the text.
HTML -
<div id="header">
<div id="Nav">
<div id="navright">
Home
About Us
Contact Us
Find Us
</div>
</div>
</div>
CSS -
#nav {
width: auto;
position: relative;
}
#nav a {
margin-left: 5px;
margin-right: 5px;
text-decoration: none;
font-family: "Arial";
font-size: 14pt;
color: #ffffff;
position: relative;
margin-top: 10px;
}
Result -
Any ideas where I am going wrong? Thanks
You are writing Nav nog nav
Html code should be:
<div id="nav"> not <div id="Nav">
Thats why your css doesn't work on the div
And use line-height for your a
#nav a {
line-height: (pixel height of the li or nav);
}
Working JsFiddle here
try to add display:inline-block; in you links
#nav a {
...
display:inline-block;
}
and rename <div id="Nav"> to <div id="nav">
add display: inline-block; to your a tag
demo
and obviously correct your typo Nav to nav.
#nav a {
text-decoration: none;
font-family: "Arial";
font-size: 14pt;
color: #ffffff;
position: relative;
height:25px;
line-height:25px;
margin:5px;
display:inline-block;
}
If you want the margin-top to appear you'll have to declare display: inline-block for the <a> elements, as someone already pointed out. If you want the text to be vertically centered, though, you could also work with something like line-height: 50px;.
Here's a fiddle to play with.
And you should of course correct the misspelling of your CSS selector or the HTML id attribute as mentioned by several users.
Add
display:inline-block
in #nav a
just add line-height as same as the height of your nav <div>
And do correct the typo error.
eg:
#nav {height:20px; float:left;}
#nav a {line-height:20px;}
Related
so I was beginning work on an html/css document and can't find out exactly why the text isn't positioned correctly in my menu bar. I've tried to put the text align: left; and margin: 0 auto and padding: 0 and none of these seem to work. I've also looked through a good amount of the questions and run my html/css through validator.w3.org. If anyone is able to help me out that would be great!
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>
<title>title!</title>
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site_title">
<h2><span>the problem</span></h2>
</div>
<div id="menu">
<ul>
<li>is </li>|
<li>that </li>|
<li>my </li>|
<li>text </li>|
<li>isn't centered</li>
</ul>
</div>
</body>
</html>
css:
body
{
font-family: "Arial", "Helvetica", "Avant-Garde";
font-size: 14px;
color:black;
text-align: left;
background-image: white;
margin: 50px 40px 20px 100px ;
}
div#site_title
{
font-size: 21px;
letter-spacing: 1.5px;
}
div#menu ul a
{
color:gray;
font-size: 16px;
text-decoration: none;
}
div#menu ul a:hover
{
color:black;
}
div#menu li
{
display: inline;
}
j fiddle so you can see!
EDIT: I should explain that the menu with the smaller text is the one I want to move a few spaces to the left so it doesn't look tabbed. I also fixed the title so it shows what the actual problem is.
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.
* {
margin: 0;
padding: 0;
}
or
import
http://meyerweb.com/eric/tools/css/reset/
http://necolas.github.io/normalize.css/
You haven't set fixed width to your containers, so they are 100% width, you have set for display: inline for <li>, so you can simply center it using text-align:center to <ul>.
btw. as #putvande said in comment, you can't directly inside <ul> you can put only <li>. To avoid putting |, use this css:
div#menu li:after {
content:'|';
}
Have you tried add this?
div#menu ul {
text-align: center;
}
http://jsfiddle.net/XaQbr/6/
remove the margin on the body and padding on the ul to see it better centered http://jsfiddle.net/XaQbr/8/
Also the pipes outside of the li's, those are invalid
try this:
div#menu ul{padding:0;}
right-click the element in your browser and click "inspect element". there you can see dimension, margins and paddings in color. (for chrome at least...)
Your markup is invalid. You cannot have the | or any other tags or content in between the li. The separator should be done using border-left or right. You can control height of the separator using line height on the li and spacing using left/right padding on the a not using space.
<div id="menu">
<ul>
<li>is</li>
<li>that</li>
<li>my</li>
<li>text</li>
<li>now centered</li>
</ul>
</div>
CSS:
div#menu ul a
{
color:gray;
font-size: 16px;
text-decoration: none;
padding:0 10px;
}
div#menu ul a:hover
{
color:black;
}
div#menu li
{
display: inline;
line-height:14px;
border-left:1px solid gray;
}
div#menu li:first-child{
border-left:none;
}
http://jsfiddle.net/XaQbr/10/
I have some html as below
<div class="wrapper">
<div class="LItms">
<div class="clr">
</div>
<span>text con</span>
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
</div>
I have some css for them
with out position relative
.clr {
color: red;
display: list-item;
list-style-type: square;
font-size: 40px;
height: 16px;
width:16px;
margin-bottom: 17px;
margin-left: 23px;
}
with position relative
.clr {
color: red;
display: list-item;
list-style-type: square;
font-size: 40px;
height: 16px;
width:16px;
margin-bottom: 17px;
margin-left: 23px;
}
I tried both of them css, the issue is it work's fine in fire fox, but in chrome and ie, the size of bullet for div is smaller compared to firefox and even the space between
bullet and span next to div with class .clr is more when compared to firefox, i want them to be aligned same accross the browsers ... any work around plz...........
As I said in the comments,
different browsers might have a little difference in default styling.
Use a Normalizer it might help you.
Different browsers have different defaults. Reset everything using the following CSS at the very beginning of your CSS:
*{
margin:0px;
padding:0px;
}
I am doing a project where we are learning how to design the google homepage. My code is here: http://jsfiddle.net/HgpQW/ . I realize that my work is far from complete, but I am hoping somebody can just help me with one thing: why can't I expand the "SIGN IN" element? I have tried to do so with setting width and height in the css, but it has no effect.
<header>
<ul id="headerlist">
<li>+You</li>
<li>Gmail</li>
<li id="grid">
<li id="sign_in">
<div id="sign_in">
<span>SIGN IN</span>
</div>
</li>
</ul>
</header>
__
body {
font-family:sans-serif;
font-size: 12px;
letter-spacing: .5px;
}
header {
position: absolute;
right: 0;
top: 0;
margin-top: 11px;
}
ul {
list-style-type: none;
}
li, li div {
display:inline
}
#headerlist li {
padding-right: 6px;
}
#sign_in {
display:block;
background-color: #DA4531;
color: white;
height: 35px;
width: 80px;
}
EDIT: the solution was inline-block on the #sign_in li
<div> elements normally have display:block; applied but you must have somehow changed this to display:inline;
If you didn't do this yourself, it might have been a boilerplate CSS that you used that caused this.
To be able to adjust the width, change the display to:
display:block;
or this will also work and may be preferable if you previously found a need to remove the default block display:
display:inline-block;
Another possibility could be that your div is contained within another div and that parents divs overflow is set to hidden.
Without a link to a specific fiddle, it's hard to answer your question specifically. Just from your description, I'm guessing it might need this css:
display: block;
I want to have the phone number and email address vertically align with the little icons next to them. I'm trying to change their line-height, but that changes the line height of all the li's in that area. I think that is because they are inline. Here is the site and the css.
LINK: www.matthewtbrown.com/newsite
HTML:
<ul class="contact">
<li><img src="http://s7.postimg.org/64ux9a1if/email.png"></li>
<li class="contacttext">mbrown74#rocketmail.com</li>
<li><img src="http://s7.postimg.org/g0w08x7af/phone.png"></li>
<li class="contacttext">978-761-1205</li>
</ul>
CSS:
.contact {
color: #fff;
text-align: center;
float:none;
}
.contact > li {
display: inline;
}
.contacttext {
font-size: 19px;
padding-left: 5px;
}
That's where vertical-align comes into play which aligns inline elements to each other:
In your case the following should work:
.contacttext{
vertical-align:text-top;
}
Also note, that if you want to have your li contain the img properly, it needs a display-type other than the default inline - inline-block might be suited most.
Try something like this:
li {
display: inline;
vertical-align: top;
line-height: 25px;
}
after this i have this result:
try this
<ul class="contact">
<li class="contacttext">
<img src="http://s7.postimg.org/64ux9a1if/email.png">mbrown74#rocketmail.com
</li>
<li class="contacttext">
<img src="http://s7.postimg.org/g0w08x7af/phone.png">978-761-1205
</li>
I just kept the icons and the text in the same li's
I got it. I did:
.contacttext {
font-size: 19px;
padding-left: 5px;
display:inline-block;
vertical-align:middle;
}
You could add margin-bottom to your <img> to solve this issue.
li img {
margin-bottom: 3px;
}
I have list items that displayed inline.
I want to align them vertically inside the green div.
<div id="topMenu" class="topMenu">
<ul>
<li>Home</li>
<li>About</li>
<li>Documents</li>
<li>Articles</li>
<li>Info</li>
</ul>
</div>
.topMenu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
.topMenu a
{
color: White;
font-weight: bold;
text-decoration: none;
}
.topMenu
{
background-position: center;
background-color: Green;
height: 30px;
font-family: arial, Helvetica, sans-serif;
font-size: 0.8em;
vertical-align: middle;
text-align:center;
}
online demo
You could add line-height:30px; to your li elements, (the same as the height of the menu bar)
Demo
You can just the display of your <li> elements a bit, like this:
.topMenu li
{
display: inline-block;
list-style-type: none;
padding: 6px 10px;
}
Check out an updated demo here
Alternatively, you could add the padding to the <ul> with a new rule:
.topMenu ul {
padding-top: 6px;
}
Check out that version here
In either case you may want to remove the height from .topMenu and let the top/bottom padding determine it, so when the page scales with zoom on older browsers it still looks "right".
You have to go with the padding property if you want to be strict xhtml and delete vertical-align.
Furthermore it makes no sense to try to align something vertically, that is displayed inline.
Just consider: padding is the inner space between the element and the boxmodel border.
Internet Explorer didn't support inline-block until version 8.
You might try the work-around here.