I am building a navigation bar using <nav> and I am aligning the text to the right but I want to get the logo in the navbar to be on the left I have tried many ways to move it like giving it a id and using !important but it still wont move
Here is my relevant HTML
<div id="navDiv">
<nav>
Name
Home
About
Contact
</nav>
</div>
And here is my CSS
#logo
{
text-align:left !important;
}
nav
{
text-align:right;
}
Why is the logo element still on the right when !important is telling it to go to the left and how can I fix this?
add float:left;
#logo
{
float:left;
}
nav
{
text-align:right;
}
Live demo: JSFiddle
If I understand you correctly, you want to the "Name" to appear to the left while everything else is to the right? So, like this: http://jsbin.com/gejefiji/1/edit
The only thing I did there is add a float: left; to the #logo selector.
The reason the nav rule overrides the #logo rule even with the !important is due to nesting. The nav itself is a block element, meaning it expands to fill its container. The a tags are not block elements, they are inline, meaning they follow the alignment rules for the containing element, which means they get text-aligned right. If you inspect the elements in the layout section of your browser's development tools, you can see that the width of the a elements shrinks-to-fit the content, like so:
The text inside the a#logo is left-aligned, but the elements themselves are right-aligned, so it appears to not follow what you want.
If you do use the float: left, I strongly recommend you look into adding where and when to use a clear: left element after your nav, just to prevent any float properties form interfering with the rest of the page's layout. Emre's nav:after trick is handy, but is not supported on all browsers, so you might need a separate element with a specific class assigned to it, like this:
// CSS
.clear {
clear: left;
}
// HTML
</nav> <!-- after the nav -->
</div> <!-- or after the div -->
<div class="clear"></div>
Basically, you want to put the clear before anything else that you don't want floated.
The text-align property can only be applied to box-level item that contains items to be aliged either left or right -- not on the items themselves. So you can't have some items inside nav text-aligned left and some text-aligned right this way.
You can, however, float the logo left:
#logo{float:left;}
here it is :) that should work well [tested]
<style>
nav
{
text-align:right;
}
#logo
{
float:left;
}
nav:after { /* fix float */
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
</style>
<div id="navDiv">
<nav>
Name
Home
About
Contact
</nav>
</div>
Why you do not use float?
#logo {
float:left;
}
Related
friends,
I decided to ask this because I've seen many answers on the internet, but no one seems to be a definitive answer.
In out HTML documents we have many elements one inside another. Eventually we'll want to add paddings and margins to these elements.
So, what if we want to have all content horizontally aligned to the center of the page? If the content has 1000px of width and the screen resolution will change from device to device, the most common solution is something like (will work on netscape based browsers):
body{
width: 100%;
}
#content{
width: 1000px;
margin: 0 auto;
}
But if we have lots of other elements inside the #content element, like a table made of DIV elements, we start to face some problems. The parent's height will not adjust to its children's height and padding and margin will not work properly (if we inspect the element we will see that the width and height is not behaving as expected) unless we add some new rules.
I use float: left but then the headache starts! When I add float: left only those elements will work fine, but the parents will not. If I add float: left to an element that already has margin: 0 auto set, it will no longer be aligned to the center of the page...
I've seen some solutions using text-align: center to the parent and display: inline-block; float: none; to the element we want to be aligned to the center. But it also has many problems (for example, we can't set the float rule)
How do you deal with this problem guys?
You need to use clear after you use float on elements in order to 'clear the floats' and make the height propagate up to its parents. You can use clear:left (or right) to just clear float:left elements but typically it's fine to just use clear:both.
In the below example there are two versions of clearfixes, one that uses a pseudo-element on the container and another that is just another element.
Demo
HTML
<div id="content">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
<div class="float-me">Test1</div>
<div class="float-me">Test2</div>
<div class="clear"></div>
</div>
CSS
#content {
width: 500px;
margin: 0 auto;
}
li {
float:left;
}
/* our pseudo-element clearfix */
ul:after {
display: block;
content: "";
clear: both;
}
.float-me {
float:left;
}
.clear {
clear:both;
}
So, i'm super new to HTML/CSS. For my class I have to make a portfolio webiste.
I want to be very simple. So, I'm starting off with my name centered in the middle of the page, and then underneath I want it to look like this:
About Graphic Design Studio Art (but, spaced out a little obviously)
Here is my html:
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
</div>
<div id="indexheader"><a rel="title">THIS IS MY NAME</a>
</div>
<div id="links">
<a rel="#about">About</a>
</div>
<div id="links">
<a rel="#design">Graphic Design</a>
</div>
<div id="links">
<a rel="#art">Studio Art</a>
</div>
</div>
</div>
<!-- END: Sticky Header -->
Here is my CSS:
/* Make Header Sticky */
#header_container {
background:transparent;
height:60px;
left:0;
position:fixed;
width:100%;
top: 40px;
text-align: center;
}
#header {
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 160px;
z-index: 999;
float: right;
}
body.top-navigation-position-below-banner #navigation-bottom {
position: fixed;
top: 0;
border-bottom: none;
z-index: 999;
}
#page-header-wrapper {
margin-top: 180px;
}
#links {
height: auto;
width: 100%;
margin-top:30px;
background-color:transparent;
text-align: center;
margin-top: 10px;
margin-left:0%;
padding: 0px;
}
http://jsfiddle.net/r7K26/
I also tried to make it a sticky-header. Not sure if that's right either. IM A HUGE NOOB. Forgive me.
You are closing your div with id #header immediately, so the elements beneath is are not receiving any styling. That might be what you want, but then you have an extra at the end of your html.
You can center your div a lot of ways, but the following should work fine:
#indexheader {display:block;width:100%;text-align:center;}
Good luck!
Well, you don't need that many divs first of all. Look at this, for example:
Html:
<div class="myInfo">
<h1>Your Name</h1>
<ul class="myLinks">
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
And actually, you don't even need a div in this case but regardless, having the class on one div you can style with selectors such as:
.myInfo H1 {....}
.myInfo UL {..}
etc
or just
.myLinks {} for the url and then:
.myLinks li {} for the list items.
I know this is a fast answer but as you are learning, I think it might be better to 'sort of' give you some pointers instead of just doing it all, right?
:)
You're very close, and here's one solution using your code as a base. Try this styled JSFiddle and see if its what you need. Please feel free to play around with the code, and hit the Run button when you are ready to see the results. http://jsfiddle.net/TalkingRock/MAuzN/
The structure:
The html code is simplified by using "header_container" to wrap the entire header (title and menu). The "indexheader" is placed in its own div. A new menu div now contains/wraps only the menu items.
<div id="header_container">
<div id="indexheader">THIS IS MY NAME</div>
<div id="menu">
<div class="links">About</div>
<div class="links">Graphic Design</div>
<div class="links">Studio Art</div>
</div> <!-- end menu -->
</div> <!-- end header_container -->
The CSS
Inline-block is used to shrink wrap, center, and display the menu items in a single line. Inline-block has a natural 4px margin around each item, and that can be removed by removing the white space in-between each inline-block item in the html code. You'll also need to add "vertical-align:top". Inline-block is a good style to learn, has good browser support, and comes in handy.
#header_container {
margin:0px;
padding:0px;
border:0px;
min-height:80px; /* use min-height so the div will expand around the contents, regardless of height. */
width:100%;
background-color:transparent;
position:fixed;
top:40px;
}
#indexheader {
text-align:center;
padding:10px;
}
#menu {
text-align:center; /* text-align center works because of the inline-block */
}
.links {
display:inline-block;
vertical-align: top
}
Good article on lnline-block: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Inline-block support: http://caniuse.com/#feat=inline-block
Here are a few other articles you'll find useful. CSS Fixed Menus:http://www.w3.org/Style/Examples/007/menus.en.html
The Z Index: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Note: The div that holds your contents needs a top padding or margin tall enough to make sure it isn't covered up by the fixed menu. Position fixed will be buggy in touch devices, especially handheld phones. In your original code there is an extra div in your html, id's can only be used once per page, use href for your links, and "backgound-color:transparent" (transparent is the default style).
I'm trying to place a padding: 16px 0; to 3 divs floated left of each other but I'm having difficulty on how to do it.
Example:
http://codepen.io/anon/pen/ifpAs
The border-bottom: medium double red; should be 16px below the section-one-widgets.
Why isn't this working and is there a way to do this without targeting specific div ID's such as #search, #logo, #social etc. as more widgets may be placed in later on?
Thank you.
#section-one:after {
content: "";
clear: both;
display: block;
}
http://codepen.io/anon/pen/eqJBg
Since all three inner divs are floated, they are removed from the layout and your container div just gets the 16 pixel height. Adding a clear in there makes it so it works as you would expect. Similar to a clearfix implemented by a lot of reset style sheets.
[EDIT since we don't like link-only answers]
HTML
<div id="section-one">
...
<div class="clr"></div>
</div> <!--end #section-one-->
CSS
.clr {
clear:both;
}
I am working with someone else's styling, and can't get things as they managed to. I am trying to make things look like this page:
http://www.comehike.com/outdoors/parks/add_trailhead.php
See how the image is nicely on the right, and the form elements are on the left.
I have this page that I am messing with and trying to make similar:
http://www.comehike.com/account/member_home.php
Is there an easy way for me to make the image go to the far left, and the stuff asking the person to log in, to be on the right?
Thanks!
Start with changing the width on the first div within .basic. Change the width to 100% instead of 450px
You should be able to continue from there.
I would also move the image into it's own container and float that right, and put the form actions in another container. Also, make use of classes and ids for styling to clean things up.
Here is how you can make food use of floating elements:
HTML:
<div class="container">
<div class="form">
<form>....</form>
</div>
<div class="leftImage">
<img src="img.jpg" />
</div>
<div class="clear"></div>
</div>
CSS:
.container {
width: 800px;
}
.container .form {
width: 500px;
float:left;
}
.container .leftImage {
width: 250px;
float:left;
}
.clear {
clear:both;
}
Replace the div with width: 450px to width: 100% then the child H3 float: left
increase the width to 845px for the div.
Float image to the left.
for the h3 tag do the styling
h3 {
float: right;
display: inline;
}
This will do the task for you.
Remove the empty tags from the HTML.
I have a div called NAV and inside of NAV I have an UL with 5 li which I float to the left, the li's that is but when I do that the NAV collapses. I know this because I put a border around NAV to see if it collapses and it does. Here is the example.
collapsed http://img401.imageshack.us/img401/8867/collapsedze4.png
no collapsed http://img71.imageshack.us/img71/879/nocollapsedkx7.png
as you can see in the first image, the links in the NAV div are floated left and that
black border ontop is the actual div called NAV.
in this image you can see how it has top and bottom border and it not collapsed.
here is some of the html and css I used.
alt text http://img301.imageshack.us/img301/5514/codejc8.png
#nav #ulListNavi a {
float: left;
}
Add any overflow value other than visible to your container:
div#nav { overflow:auto; }
Then add width to restore the width
div#nav { width: 100%; overflow:auto; }
One solution is to add a "clear:both" style to an element after the last floated anchor, for instance:
<div id="nav">
<ul id="ulListNavi">
<li>Home</li>
<li>Search</li>
<li>Flowers</li>
<li>My Account</li>
<li>Contact Us</li>
</ul>
<div style="clear:both;"></div>
</div>
This causes the containing element to clear all floating elements before closing the containing box.
A few other options for clearing floats here:
http://www.quirksmode.org/css/clearing.html
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
As to the best way of doing it, that's almost a holy war, the purists would freak about the extra div, if you are not fussed by a little extra markup, the addition of the cleared div as suggested by Joshua and AJ will work fine, and is a reliable technique, but there are at least 17 other ways of doing it...
add this code after your ul:
<div style="clear: both"></div>
Try floating the containing element to the left too.
Don't bother with clearing elements or overflow. Add this:
#nav {
float: left;
}
When you float the LI's, the #nav no longer "contains" anything so it collapses. But if the #nav is floated also, it contains anything floated inside it, so it expands again.
(Also consider removing the #nav div and just applying the same styles to the UL.)
Your problem is because you are floating the <A> elements, but each of them is inside an <LI> element. LIs display as blocks by default, so each <LI> is forcing it's child <A> to begin on a new line.
If you float the <LI>s, I think you'll solve your problem.
#nav #ulListNavi li {
float: left;
}
The quickest solution would be to add overflow:hidden to clear the float on the parent element:
#nav{overflow:hidden;}
Without changing your HTML:
#nav
{
width: 100%;
overflow: auto;
border: solid 1px red;
}
#ulListNavi
{
margin: 0;
padding: 0;
list-style: none;
}
#nav #ulListNavi li
{
float: left;
}
#nav #ulListNavi li a
{
margin-left: 5px;
}
Works in IE8 and FF 3.5