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;
}
Related
I was trying to create my portfolio page. I have 4 subheadings (About, Resume, Blog and Portfolio).
So I wanted to put these headings on top center of my div. So what I did was created an unordered list gave it property to display inline. Now all headings come to the same list.
Now I want to give spacing between the headings. Of course margin and padding options are there but is there any way in which I can avoid margin/paddings and do this directly by flex?(I wanted to reduce load on media queries for small screen)
The ul can be the flex container, and you can spread the elements evenly using justify-content: space-between:
.header {
display: flex;
width: 50%;
margin: 0 auto;
padding: 0;
justify-content: space-between;
list-style: none;
}
<ul class="header">
<li class="header__item">About</li>
<li class="header__item">Resume</li>
<li class="header__item">Blog</li>
<li class="header__item">Portfolio</li>
</ul>
you may use justify-content and eventually pseudo elements to squeeze elements to middle
nav {
display:flex;
justify-content:space-around;
}
/*increase space from side at first and last child */
nav:before,
nav:after {
content:'';
width:25vw;/* or % . tune this or remove pseudo if unneeded */
}
a {
margin:0 1em;
}
<nav>
About
Resume
Blog
Folio
</nav>
I have a HTML list that is using background images in oppose to text as links. My container is 200px tall and I want the links to lie inline in the center of the container, if this were text I could use a line-height:200px; to achieve this however it seems a little different when using background images, any body have any idea how to achieve this method.
Here is a jsfiddle to explain what I mean http://jsfiddle.net/M4XN4/1/
Thanks guys
<div id="container">
<ul class="container">
<li class="linkedin"><li>
<li class="twitter"><li>
<li class="facebook"><li>
</ul>
</div>
Cleaned a bit up, is this the look you were going for?
Most of your a tag code can stay separate from each .facebook .linkedin class as well
#footer-right ul li a{
display:inline-block;
height:200px;
background-size:14px 14px;
background-repeat:no-repeat;
background-position:center;
line-height:200px;
}
http://jsfiddle.net/Ush4n/13/
You can use display:inline and some margins to vertical align.
margin-top:80px;
In the CSS, changing the ul to position: relative; and positioning it to top: 72px did it.
The value of top was calculated by subtracting 14px (height of the ul) + 14px (the empty space over the ul) from 100px (vertical center of the containing div).
You can see the updated code here: http://jsfiddle.net/M4XN4/2/
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 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.
I have a single header bar that is at the top of my website. Within the <header> tag I have an unordered list with a couple list items floating to the left, and another floating to the right. I want to be able to stick an element dead center of the header. What is the best way to do this? So far I have the page essentially set up like this:
<header>
<ul>
<li class="left">Item 1</li>
<li class="right">Item 2</li>
<ul>
<h1>Title of site</h1>
</header>
And then the <h1> tag has text-align: center and margin-top: -45px, to put it on the same level as the list items. The issue is, the h1 isn't exactly centered. What is the best way to set up a header to accomplish this behavior?
Here is an example jfiddle, where you can see that the title isn't really centered.
A good trick for getting something to align perfectly in the center when text-align:center; isn't an option is to do the following:
1) Get the exact width of the element you're wanting to center (div, hx tag etc)
2) Position the element absolute so that the item's position isn't affected by other elements
2) Set position to left:50% (the start of the element is exactly half way) then give a margin-left: negative half of the item's width.
Example
In your JS fiddle Your h1 is 106px wide. So for it's css you would put
header h1 {
position:absolute;
width:106px;
left:50%;
margin-left:-53px;
top:6px;
font-size: x-large;
color: white;
}
UPDATED JS FIDDLE
you could try
h1 { position: absolute; top: 45px; left: 45%; }
or you could possibly try adding a new div above the header like this
<div id="h1wrapper">Your h1 goes here</div>
in your css
#h1wrapper { display: block; height: 0px; width: 100%; text-align: center; overflow: visible }
h1 { margin-top: 45px; font-size: 16px; }