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; }
Related
I have seen many questions and answer how to centre a text vertical and horizontal. My question is how do I change the vertical position of text when its centre horizontal? I don't want to centre it vertical, maybe just few pixels below. I tried top: xx%; doesn't work. what else am I missing?
CSS
p{
color: #7C7C7C;
text-align: center;
}
you can use for example margin-top: ??px;
Use div to wrap your text.
<div style="background: green; width 150px; height: 60px; text-align:center">
<p>Abcd
</div>
Align in center using translateY property as shown in the below snippets
<head>
<style>
p{
text-align:center;
transform:translateY(50vh);
}
</style>
</head>
<body>
<p>Center</p>
</body>
CSS top property will move the element if you use position relative. Alternatively, you can use padding-top or margin-top.
p {
position:relative;
top: 10px;
}
or
p {
padding-top:10px;
}
box model reference for padding and margin and
position reference
I've been trying to create a navigation bar that meets the following criteria:
Spans 15% height.
Spans 100% width.
Navigation bar is aligned to the top of the site.
Elements within the navigation bar are vertically centered within it.
The last menu option is aligned to the far right of the navigation bar.
I've been playing with <div> and <ul> to implement the elements. I've spent a lot of time on it and researched it. I can't seem to find a way to vertically center the elements, which are images, if I use a percentage height. I assume this issue is because the <header> and <nav> elements are block elements, as is the div element, being that "vertical-align" only works on inline elements.
Questions, for those wise enough to provide what are probably easy answers:
Can I use "vertical-align" on block elements if I override the "display" element to the "inline" value? It seems like the answer is negative.
Can I right-align one <li> within a <ul> while the other <li> are left-aligned?
The only way I can get it to work is to use fixed height values on the navigation bar as well as padding around the elements. Is that my only option or does anyone know of a way I can make it work with a percentage height?
Basic code to express what I'd like to do (assuming all the <html> and other foundational tags are there, too; and I am aware the code below doesn't work but it shows the basic idea):
<style>
html, body {
height: 100%;
width: 100%;
}
.menu_bar {
display: inline; /* This element seems to mess things up pretty bad so I assume I can't do it
that way. I was only using it so my <ul> would be within an inline element which would allow me
to use vertical-align. */
height: 15%;
width: 100%;
background-color: #000000;
}
.menu_items {
height: 100%;
width: 100%;
}
.menu_logo {
vertical-align: middle;
text-align: left;
}
.menu_option1 {
vertical-align: middle;
text-align: left;
}
.menu_option2 {
vertical-align: middle;
text-align: left;
}
.menu_option3 {
vertical-align: middle;
text-align: right;
}
</style>
<body>
<header>
<nav>
<div class="menu_bar">
<ul class="menu_items">
<li class="menu_logo"><img src="images/logo.gif"></li>
<li class="menu_option1"><img src="images/option1.gif"></li>
<li class="menu_option2"><img src="images/option2.gif"></li>
<li class="menu_option3"><img src="images/option3.gif"></li>
</ul>
</div>
</nav>
</header>
</body>
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 have a list of names which is rendered inside <ul>. I am applied some CSS code but facing some browser specific issues.
Chrome : List element is getting displaced by 1 row.
Firefox : All list items collapsing to one item.
Code snippet (JS bin editor)
HTML
<div id='container'>
<ul class='list'>
<li> <div class='rel'>
<div class='abs'> item 1 </div>
</div> </li>
... More items similar to above one
Css
#container {
height: 100px;
overflow-y:scroll;
width: 200px
}
.list {
background-color: skyblue;
}
.rel {
position: relative;
}
div.abs {
position: absolute;
left: 20px;
}
I want to know the reason of this misbehavior in both the browsers. Have I written wrong CSS ?
Update: With in <div class='abs'> I have a lot of code which I have not added here as it is not necessary and the content of abs div is positioned with respect to its parent i.e. <div class='rel'>
The problem is indeed the
div.abs {
position: absolute;
left: 20px;
}
This positions every element with class "abs" 20px to the left (and 0px from top) of the ul element.
What would you like to achieve? Your menu horizontally or vertically?
Horizontally: Use float:left or display:inline with a margin-left:20px;
Vertically: for a 20px margin-left:
http://jsbin.com/ediloh/17/edit
I first added margin:0px to delete the top and bottom margin of the ul element. Next I added a left margin of 20px to move it to the right.
alternative: put margin-left on the li-element instead. This will not move the circles
The divs with position:absolute are taken out of the page flow, basically causing their parent divs to have no content at all (no content amounting to any width or height that is). So they will collapse.
What outcome do you actually want. You are fixing the div.abs to be indented by 20px inside its containing div.rel.
Could you give some idea of what you are trying to achieve.
Wing