I'm trying to make a nav bar out of a un-ordered list. This list needs to be vertical and pulled to the left side. What I have now makes a vertical list all the way to the left, but it is on top of my content instead of to the left of it.
<ul id='help_links'>
<li>Announcements</li>
<li>Approvals</li>
#...
</ul>
<div id='content' style='margin:20px auto;'>
<a name="annoucements"><h2>Announcements</h2></a>
<h3>Creating Annoucements</h3>
<ul style="list-style-type:circle;">
<li>...</li>
#...
</div>
#help_links ul
{
margin:0;
padding:0;
}
#help_links li{
display:block;
}
What do I need to change to get the content in the middle and have the help_links be listed to the left side.
Put the list in a div, let's call its class a divlink and add this to your css:
div.divlink
{
float: left;
height: 100%;
}
div.content
{
float: left;
height: 100%;
}
Oh and also after doing this, you should use padding instead of margin in your content div. From my experience, margins work weird with float.
Related
<nav>
<div class="row">
<img src="resources/img/logo-white.png" alt="logo" class="logo">
<ul class="main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
</div>
</nav>
I have the code above for a navigation bar in an Udemy tutorial I am following.
The CSS Source Code for the navbar is the following:
.row {
max-width: 1140px;
margin: 0 auto;
}
.logo {
height: 100px;
width: auto;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 60px;
}
The part I am confused on is for the img in the div with the class="row" why is it that the image is put off to the top left even though I didn't set the float property of the img to float: left;.
As you can see in the image below, that white logo is positioned to the top left even though I never set the float property to left. But for the ul with the class="main-nav" I had to set the float property to right.
img is a inline element & ul is a block level element. that means that ul would take the 100% width and be on a new line whereas img would take its specific width. and by default the direction is ltr so we have all inline elements floating to the left.
The logo displays on the left side as the default direction for every HTML element has the "rule" LTR, so that means even if you haven't made a float: left line it will, though display at the left side.
Have a look at this, it should help you with something, happy programming!
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;
}
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 a novice, trying to create my own website. I have a menubar on top of the page, and I'd like the menu items to be centered instead of left-justified. Please note: I'm trying to center 2 things. First is the text within the menu item, and the second is the entire group of menu items.
The link is located here:
http://www.martyversusaig.com
My menu-bar code is here:
<ul id="nav">
<li id="nav-home">Home</li>
<li id="nav-about">Your Story</li>
<li id="nav-archive">Florida Law</li>
<li id="nav-lab">Lab</li>
<li id="nav-reviews">Reviews</li>
<li id="nav-contact">Contact</li>
</ul>
I've tried entering 'center' html tags, but it doesn't center anything and really fouls up the menu.
Any help is greatly apprecaited!
Thanks,
Marty
I've made a fiddle of your nav bar so you can see how it would work. You can access it here: http://jsfiddle.net/BQj3P/
To center the #nav element, the easiest thing to do is to wrap it in a div. Creat a #nav-wrapper element and style it in the same way as you had previously styled #nav:
#nav-wrapper {
margin:0;
padding:0;
background:#808259 url(nav_bg.jpg) 0 0 repeat-x;
width:100%;
float:left;
border:1px solid #42432d;
text-align: center;
}
You'll notice one important difference: text-align: center. This will help you center the #nav ul.
The #nav itself is now styled like this:
#nav {
margin: 0;
padding: 0;
display: inline-block;
}
The display: inline-block was the final piece you needed to center the entire set of navigation buttons.
To center the text inside the buttons themselves, your original code had this line to style the #nav list items: padding:20px 40px 4px 10px;
In other words, the right padding was set to 40px and the left was set to 10px. Simply changing the line to padding:20px 20px 4px 20px; will center your text.
Check out the fiddle for more details.
It helps to use css. I have a separate style sheet.
You will want to nest so that the outside one centers all elements inside of it and then internal menu items have a specific width, so they don't end up all together.
<div class="centre">
<div class="block">
<li id="nav-home">Home</li>
</div>
<div class="block">
<li id="nav-about">Your Story</li>
</div>
MY CSS:
.centre
{
text-align: center;
margin: 0 auto;
}
.block {
width: 100px;
display:inline-block;
}
I used to have tables before to display the content and people here advised me to remove tables and use CSS floating for better styling.
I am new to everything. My Problem is I have content and side bar. I want it to be displayed like
content | Sidebar
But Now with the current styling I have It is displaying like
content
|
Sidebar
Can you please correct me.
<style type="text/css">
.csscontent
{
margin-right: 500px;
}
.csssidebar
{
float: right;
width: 500px;
background: darkgreen;
/* height:500px; */
}
</style>
If I add
<div class="Content">
all the content
<div class="sidebar">
<Image>
</div>
If I add sidebar inside the content the image is getting displayed below the content leaving right-margin of 500px.
If I add sidebar outside of the content the image is getting displayed below the content.
<div class="Content">
all the content
</div>
<div class="sidebar">
<Image>
</div>
I want both content and side bar to be displayed side by side
In the HTML file you first need to set the floating elements, followed by the none floating ones. Because the floating element is going to block the entire "level" of the website and the floating elements are placed below.
So your html should look like this:
<div class="sidebar">
<Image>
</div>
<div class="Content">
all the content
</div>
Other then that it looks good.
Float both to the left so they stack up against each other.
.Content
{
margin-right: 500px;
float: left;
}
.sidebar
{
float: left;
width: 500px;
background: darkgreen;
}
Add float to .csscontent class like
.csscontent
{
margin-right: 500px;
Float:left;
}
.content, .sidebar {
float: left;
}
Floating both divs left like the above will display both inline.
You can then apply specific styling to each class. Assigning a width to .content will then determine where .sidebar appears...
Or if all you want is to float the sidebar to the right, without floating the content, you should put the sidebar above the content in the HTML.
Of course, you still need to correct the class names...
you can add a wrapper for both elements.
<div id="wrapper">
<div id="content">
all the content
</div>
<div id="sidebar">
<img/>
</div>
</div>
div#wrapper {
position:relative;
overflow:hidden;
width:800px;
}
div#content {
float:left;
width:600px;
}
div#sidebar {
float:right;
width:200px;
}
see fiddle for code and demo
fiddle: http://jsfiddle.net/g42x2/1/
demo: http://jsfiddle.net/g42x2/1/embedded/result/
SS: