I have a problem with the rendering of the navigation in Firefox. It is fine in Chrome and Opera, but in Firefox the whole navigation div floats right at the top right corner.
HTML:
<nav class="table">
<ul id="menu">
<li>Business</li>
<li>Specialities</li>
<li>Contact us</li>
</ul>
</nav>
And the CSS is:
.table {
display: table;
margin: 0 auto;
background: #ffe;
}
ul#menu {
min-width: 100%;
list-style: none;
margin: 1em 0 1em 0;
}
ul#menu li {
display: inline;
margin: 3em;
padding: 0;
}
ul#menu li a {
font-weight: bold;
font-size: 1em;
text-decoration: none;
text-transform: uppercase;
}
The attribute margin you are setting it to "0 auto". With the information given I see the navigation in the left top corner in chrome also. And it is correct to see it there.
The attribute margin has the structure: top right bottom left //Thank you PeeHaa
It is the same if you use the following attributes: margin-right, margin-left, margin-top and margin-bottom. Those are to specify a particular margin.
If this doesn't answer your question, then you have to see if you have some
position:fixed;
or
position:absolute;
or
float:left/right;
for any tag into your html.
Related
I feel like an idiot because I know this a simple thing. I can't figure why the logo and tagline images aren't in the grey container together.
I also can't under why my h2 and ul are on top of my image. All help is appreciated. This what it's supposed to look like https://imgur.com/a/3Qx3ihp
and this is how it renders now https://imgur.com/a/WGyYzPr
<div id="topbar">
<img src="hw8_images/logo.png" alt="Blaine and Associates logo"><img src="hw8_images/blaine-tagline.png" alt="Blaine and Associates Inc. tagline"><img src="hw8_images/architectural-tagline.png" alt="Architectural Design and Consulting">
<ul class="nav">
<li>Contact</li>
<li>Employment</li>
<li>Projects</li>
<li>Services</li>
<li>Company</li>
</ul>
</div>
<div class="buildingimage"></div>
<div id="container">
<h2>Quick Links</h2>
<ul id="QL">
<li>Free Consultation
</li>
<li>Client List</li>
<li>Testimonials</li>
<li>Open Positions</li>
<li>Latest News</li>
</ul>
</div>
body {
font: normal normal normal 75%/1.3em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none; background-color: #fff;
}
.topbar{
background-color: #4d4d4d;
font-color: #fff;
height: 15px;
min-width: 500px;
max-width: 950px;
}
.nav li{
font: normal normal normal 100%/2em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none;
display: inline-block;
list-style: none;
text-decoration: none;
text-align: center;
float: right;
}
h1 {
font: normal normal normal 140%/1.3em verdana,geneva,lucida,arial,sans-
serif; text-decoration: none;
}
h2 {
font: normal normal normal 120%/1.3em verdana,geneva,lucida,arial,sans-
serif;
text-decoration: none;
float: left;
position: relative;
}
footer li {
display: inline-block;
list-style-type: none;
font: normal normal normal 90%/2em verdana,geneva,lucida,arial,sans-serif;
text-decoration: none;
text-align: center;
background-color: #4d4d4d;
font-color: #fff;
}
#container {
position: relative;
height: 300px;
width: 400px;
}
.buildingimage {
background-image: url(hw8_images/building.jpg);
float: left;
background-repeat: no-repeat;
position: absolute;
margin: .5em;
background-size:cover;
height: 7em;
min-width: 200px;
max-width: 250px
}
#QL {
list-style: circle;
float: left;
position: relative;
}
"I can't figure why the logo and tagline images aren't in the grey container together."
They are inside, but the container is not styled, as you can't find it with .topbar, because it is an id not a class.
So #topbar will do it. If you make it bigger than 15px, all elements will be displayed inside.
The H2 and ul are on top of the background-img, because it is positioned abolute. If you change it to relative, the image will float left and the H2 and ul align on the right to it.
The problem is that you added float:left to your h2 and #QL selectors. Floating elements can be dangerous if you don't understand how it works. It removes the element from standard flow and then pushes it all the way to the top and to the left or right as assigned. It only stops for other elements that are floating, or for elements that have clear set to either the same side (left or right) or both.
Check out this CSS-Tricks article for more details.
I would also recommend you do some reading about fundamental CSS concepts. CSS-Tricks has a good collection of beginner concepts. I think you may find some of them helpful.
Your .buildingimage is in position absolute, he shouldn't ! Something put into absolute allows the element to overlap to others. Put it to "relative" or delete it if you don't really need it. there is also your h2 which got a float.
This question already has answers here:
How do I justify a horizontal list?
(10 answers)
Closed 7 years ago.
I have used the code from this question to create a horizontal menu where each item is evenly spaced.
Here is my version:
<div id="navigation">
<ul>
<li class="first">
Home
</li>
<li>
About us
</li>
<li>
What we cover
</li>
<li>
Monitoring agencies
</li>
<li>
Publishers
</li>
<li>
News
</li>
<li>
Contact us
</li>
<span></span>
</ul>
</div>
And the CSS:
#navigation {
text-align: justify;
}
#navigation ul span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
#navigation ul {
display: inline;
list-style: none;
}
#navigation ul li {
display: inline
}
#navigation ul li a {
display: inline;
border-right: solid 1px #ccc;
}
#navigation ul li.last a {
border-right: none;
}
Is there a way to make the vertical lines move to the right such that they are halfway between the end of the a tags and the end of the li tags?
Here is a fiddle.
I've added an answer here.
Hack Using Extra Elements for the Spacer Motif
Fiddle reference: http://jsfiddle.net/audetwebdesign/bF6ey/
Consider the following HTML:
<div id="navigation">
<ul class="navigation">
<li class="first">
Home
</li>
<li class="spacer-motif">|</li>
<li>
About us
</li>
<li class="spacer-motif">|</li>
...
<li class="spacer-motif">|</li>
<li>
Contact us
</li>
</ul>
</div>
I added an extra list item between the links: <li class="spacer-motif">|</li> (yes, I cringe also...).
The CSS is as follows:
#navigation {
padding: 0 20px; /* add spacing at left/right edges of list */
}
#navigation ul {
display: table;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
}
#navigation ul li {
display: table-cell;
text-align: center;
width: 1%; /* force cell to shrink-to-fit text */
outline: 1px dashed blue;
}
#navigation ul li.spacer-motif {
width: 10%; /* force spacers to take up a lot of space */
outline: none;
}
#navigation ul li a {
white-space: pre;
}
The layout is based on using table display types.
For ul, use display: table and set the width to 100%. Remember to zero out margin and padding values.
For li, use display: table-cell and text-align: center.
The trick is to force the table cells to shrink-to-fit the text labels by
setting width: 1%, and then, for the li.spacer-motif, set width: 10% to force
the spacers to expand (evenly) to fill up the line.
To keep the text links from wrapping into 2 or 3 lines, set white-space: pre in the <a> elements (the links).
Cleaning Up The Semantics
The problem here is that the link texts vary in width and this makes it impossible to simply use table-cell's with a right or left border and centered text. The extra spacing will vary among the links and the left/right border will not be evenly spaced between the link texts.
The way around this is to add extra elements. I used a pipe (|) but I suppose you could add a pseudo-element with a 1px border and center it and so on.
However, if the elements are a problem, they could be inserted using jQuery or JavaScript.
IE 7 Support - Hack for CSS
If you need IE7 support, you need to adjust the CSS according to the following:
CSS: table and table-cell replacement for IE7
here take a look at this fiddle HERE
I made some small adjustments. I changed display:inline; to float:left; and centerd the text.
The space is coming from the 5px padding i gave to the
ul li a
I would use display: table on ul and display: table-cell on li for this.
and even padding on both sides for the a tag
Depending on the spacing your after, something like this should work:
#navigation ul li a {
padding-right: 10px;
}
Change the 'px' value to your needs.
You can try something like this:
#navigation ul li a {
display: inline;
margin-right: -14px;
padding-right: 14px;
border-right: solid 1px #ccc;
}
But it might not be cross-browser.
http://jsfiddle.net/gjFYf/2/
I found that padding-right: 30px; in #navigation ul li a worked nicely.
I've got this working by inserting extra list elements into the list and then setting the width of these elements to a single pixel. I've also set their background color and removed the border on the hyperlinks.
New styles...
#navigation ul li.line {
display: inline-block;
*display: inline;
zoom: 1;
width: 1px;
background-color: #ccc;
height: 24px;
position: relative;
top: 5px;
}
#navigation ul li a {
display: inline;
line-height: 36px;
height: 36px;
text-decoration: none;
font-size: 18px;
color: #14328C;
font-weight: bold;
}
New Html snippet...
<li>
Publishers
<li class="line" />
</li>
It doesn't work in IE7 though. The text align seems to ignore the extra li unless it contains content.
Its also now semantically incorrect.
Fiddle.
I have an CSS issue with a menu.
Through CSS I´ve added padding to li's.
The li's have display: inline.
It works when I set to inline-block, but I want to know why it doesn't work with inline. In my understanding padding should work with inline elements.
HTML
<header>
<nav>
<ul id="mainmenu">
<li>Home</li>
<li>Users</li>
<li>Rankings</li>
<li>In the press</li>
<li>Blog</li>
</ul>
</nav>
</header>
CSS
body { font-family: Arial; font-size: 11px; margin: 0; padding: 0; }
header nav { height: 25px; background: #eeeeee; }
header nav ul { list-style-type: none; margin: 0 auto; padding: 0; width: 960px; }
header nav li { display: inline; padding: 10px 5px; }
Working demo
http://jsfiddle.net/4QLmp/
PS browser is Chrome Canary
The padding is there, but since the <li>s are defined as inline, they're aligned to the same text baseline. That cuts off the top padding beyond the top of the page border. If you do change the css to:
header nav li { display: inline; padding: 20px 5px; border: 1px solid red; position: relative; top: 50px;}
so that the <ul>s get pushed down, you'll see the padding present. inline-block doesn't follow the same text-alignment rules, so everything gets pushed down so the whole block is visible.
header nav li { display: inline; padding: 10px 5px; }
UPD:
The W3C’s CSS2 spec states that for Inline, non-replaced elements, "the ‘height’ property doesn’t apply, but the height of the box is given by the ‘line-height’ property".
I am making one simple horizontal menu with CSS and simple unordered list. The HTML of the menu is following:
<div id="navigation">
<div id="nav-holder">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
And CSS is as follows:
#navigation
{
display: table;
height: 35px;
width: 100%;
#position: relative;
overflow: hidden;
background: Black;
}
#nav-holder
{
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
}
#navigation ul
{
#position: relative;
#top: -50%;
}
#navigation ul li
{
float: left;
}
#navigation ul li a
{
padding: 5px 10px;
margin-left: 2px;
background-color: Red;
text-decoration: none;
font-family: Verdana;
color: White;
}
I want the menu to have a 2px margin around all of the link elements.
The problem I am facing is that while it renders itself fine in IE with all of the rights margins but both Chrome and Firefox (both are latest) are having the following issues:
The problem does not seem to be related to only this particular implementation but Ive seen it rise up from veertically centering the links with line heights and so on too.
I would like to find a way to have all of the margins to look the same or some way to avoid this problem all-together.
Basically, I got this thing sorted out. I set the same line-height and height attribute to all of the following: ul, li, nav holder. I did it because when it was not done, all of these were rendered differently from browser to browser.
In addition, I removed the positionings, vertical alignings, hav-holder div entirely and then some.
try
display: inline-block;
for your #nav-holder
Like many people, I am having trouble with floating elements in IE7 (and 6, but I don't care about that!)
http://www.storybox.co.nz/wordpress/
Looks fine in every other browser, but in IE7 the navigation links sit under each other:
HTML (inline styles are from js dropdown script):
<div id="primary-menu">
<div class="menu">
<ul>
<li>Work.
<ul class="sub-menu" style="float: none; width: 1em; visibility: hidden; display: none;">
<li style="white-space: normal; float: left; width: 100%;">Spatial /</li>
<li style="white-space: normal; float: left; width: 100%;">Web /</li>
<li style="white-space: normal; float: left; width: 100%;">Graphic</li>
</ul>
</li>
<li>Lab.</li>
<li>About.</li>
</ul>
</div>
</div>
CSS:
#primary-menu {
margin:-30px auto 30px;
}
#primary-menu ul {
float:right;
}
#primary-menu li {
float: left;
list-style: none;
margin-left: 10px;
display:inline;
}
#primary-menu ul li a {
float: right;
}
I have tried display:inline on the li items as well as on the a items, but that doesn't work.
Any other tips? Thanks!
the problem is probably width: 100% for li. If ul is 100px, then each of li will also have 100px = they will be displayed as shown. Try to set fixed width for them, but 3x width ( + padding, margins ) should be less than width for ul. You can also try 33%. BT
float: right puts display: block on item and it makes no sense to add display: inline together with float: right. My guess is that IE ignores display: inline. It makes also no sense to put width for inline element. Your CSS simple does not make sense :)
I tested on IE 7 and below is the updated CSS.
#primary-menu {
/* margin:-30px auto 30px;*/ /*Avoid negative margins*/
}
#primary-menu ul {
float:right;
}
#primary-menu li {
float: left;
list-style: none;
margin-left: 10px;
display:inline;
}
#primary-menu ul li a {
/* float: right;*/ /*This caused the issue*/
}
Hope this helps