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/
Related
I want my logo div down further, not exactly center, but about there. When I add a margin to the top it pushed my menu-bar div down too. I tried adding a padding instead by that didn't move the div. I'm guessing because there isn't actually anything in it right? Is there a way to move that div down and over a little without affecting the menu-bar div?
<div id="Container">
<div id="logo"></div>
<div id="menu-bar">
<ul>
<li><a>start</a></li>
<li><a>end</a></li>
<li><a>info</a></li>
<li><a>score</a></li>
<li><a>reload</a></li>
</ul>
</div>
</div>
</div>
-
#charset "utf-8";
/* CSS Document */
*{
padding:0;
margin:0;
}
html{
background:url(../images/water-316625_1280.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
#menu-bar{
height:30px;
float:right;
text-align:right;
background-color:rgba(173,172,172,.9);
border-radius:10px;
border:solid rgba(109,186,235,1.00)
margin-top:0;
}
#menu-bar li{
float:right;
padding: 0 10px;
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
font-size:110%;
cursor:pointer
}
#logo{
height:100px;
background-image:url(../images/logo.png);
background-repeat:no-repeat;
}
All CSS properties have a default of "position: static;". This means that all elements are rendered in order that they appear in your html file.
So when you add a "margin-top" to a div (i.e. logo) it will add height to that div while all other divs that follow will have to re-position to accommodate that change.
So margins adds to the height or width of your element. Your logo is "height:100px;" when you add a "margin-top: 15px;" your element has a total height 115px. That is why #menu-bar has moved.
A solution to this would be to set the #logo div to "position: relative;" Then you can use the properties top, left, right, down. To move that element based on it's current position but will not affect other divs in the document. So for example:
#logo {
position: relative;
top: 20px;}
Will move #logo down 20px from its current location.
Hope that helps.
why you are included the menu items inside the logo container?. It would be a good practice that to allow the logo element to independent. Please see the updated code.
Give the float property left for the #logo id
put ; after the border property for #menu-bar id (missing in your code)- border:solid rgba(109,186,235,1.00); and cursor:pointer in #menu-bar li
Please give a margin-top:0 for the <ul> elements as well.
Here are the JSfilddle
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 am trying to center a navigation bar on my webpage. I have the min width to be 945px and then 50% of the screen if it's past that width. I now want it centered so I shift it left 50% but then I need to adjust the margin. How do I code width/2?
#navBarImg {
position:absolute;
left:50%;
width:50%;
margin-left:-(width/2);
top:50px;
z-index:2;
min-width:945px;
}
<body>
<div id="container">
<div id="navBar">
<img id="navBarImg" src="../Navigation/navBarBGImg.png" />
<img id="navBarLogo" src="../Navigation/navBarLogo.png" />
<div id='navMenuPart1' class="navMenu">
<ul>
<li><a href='#'><span>Research</span></a></li>
<li><a href='#'><span>Team</span></a></li>
<li><a href='#'><span>News</span></a></li>
<li><a href='#'><span>Courses</span></a></li>
<li><a href='#'><span>Outreach</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
set your margin-left and margin-right to auto and it will center the div (also take of the left: 50%). If that doesn't work, post your code on jsfiddle.net
#navBarImg {
position:relative;
width:50%;
margin: 1em auto;
z-index:2;
min-width:945px;
}
Address your buffer requirements via margin values not top. Relative positioning + auto margins will do it.
EDIT for structure:
#navMenuPart1 {
position:relative;
margin: 1em auto; // adjust top / bottom to suit
top:50px;
z-index:2;
min-width:945px;
background : url("../Navigation/navBarBGImg.png") no-repeat;
}
#navBarLogo {
position:relative;
display:block;
float: left // your choice
margin: auto // top right bottom left - use this to position it
clear:both;
}
<body>
<div id="container">
<div id="navBar">
<div id='navMenuPart1' class="navMenu">
<ul>
<li><a href='#'><span>Research</span></a></li>
<li><a href='#'><span>Team</span></a></li>
<li><a href='#'><span>News</span></a></li>
<li><a href='#'><span>Courses</span></a></li>
<li><a href='#'><span>Outreach</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
<img id="navBarLogo" src="../Navigation/navBarLogo.png" />
</div>
</div>
</div>
</body>
</html>
So the intention here is to use the background image property for your navbar image. Position the interface UL over that as well as the logo. The logo "floats" in that space. Now depending on your UL css - this above might have some layout conflict with your UL but I think this illustrates a better approach
With a relatively positioned element, the browser can auto-center the horizontal axis. You do this simply with margin:auto;. Keep in mind, this will auto-center the element in relation to its container element. So, the thing that screws up a lot of people here is that the container element does not have a defined width, and therefore the margin:auto; doesn't know how to render because it is relative to the parent element.
EDIT
Also, an <img> is an inline-block element. You will need to make it a block-level element for margin:auto; to work correctly. You can do so like this display:block;.
A working example.
#navBarImg {
position:relative;
display:block;
min-width:50px;
width:50%;
margin:auto;
border:1px solid black;
}
This does work,
width:50%;
min-width:945px;
margin:auto;
position:relative;
top:50px;
but using relative positioning essentially "uses" the visible position, as well as the original position. To get around this, you need to contain it somehow. I'm assuming this navigation bar is horizontal (since it's so wide). You also mentioned a logo, which needs to be visible.
Wrap the logo and nav bar in a "header" div or something (if you're already doing this, it requires another layer of wrapping for everything in the header except the nav bar), and set that div to position:relative;width:100%, and give it the height of your nav bar plus whatever else needs to go in it. Then give the nav bar
position:absolute; /* Absolutely positioned, relative to its container */
bottom:0;
right:50%
margin-right:-25%; /* OR -472.5px */
You cannot have both an "auto"-looking margin and scalable width. So using -25% (half of scalable width) works for displays greater than double the item's width, while -472.5px (half of the min-width) works for displays less than double.
Update: in response to your new link in the comments: You give #page a width of 100% - but 100% of what? To give it a width relative to that of its parent, the parent width must be defined.
I suggest adding a rule such as html, body{width:100%} (I also tend to set margins to zero, because I don't like the automatic margin created at the top of every page). This will set those elements' width to that of the window, so the percent width you give these elements has a reference point.
I have 3 divs in my page header.First div is faculty logo, second div is website title and third div is university logo.
Entire header has CSS:
height: 55px;
width:auto;
and background color.
First div has:
#header .logoUt {
width:285px;
height:55px;
float:left;
background:url(images/Drawing1.png) no-repeat 0 0;
background-position:left center; }
Same for second div: fixed width and float left and a text.
Third div:
#header .logoEtti {
width:285px;
height:55px;
float:right;
background:url(images/Drawing1.png) no-repeat 0 0;
background-position:left center; }
Question is: How can I do when I minimize browser windows those div to not jump below each other. Sorry for my bad english.
P.S. I can't set a fixed width for entire header because I want the header background to be streched from left to right in entire page with height 55px.
You could set a min-width for the entire header:
#header {min-width: 855px;}
One option is to not use floats but positioning.
Try this:
Give the header position:relative
Give all the 3 divs inside position: absolute
Use top:0;left:0 for the first div
Use top:0;right:0 for the last one
And for the middle one give the correct px value for left:
I have two divs, inline. One displays a measurement, the other displays a unit value. The text in each is currently aligned correctly.
I would like to display a bar stretching across the top of the measurement value, but no further. Note: for various reasons, I can't use text-decoration: overline. Instead I am trying to display a background image behind the text, clipping to the width of the text (not the div).
I have tried using display:table; on the measurement div, and this works, but it has the affect of screwing up my div layout (the text is not aligned between the divs).
Here's some example html:
<div class="measurement">1234</div><div class="unit">mm</div>
Here's some example css:
.unit {
display:inline-block;
}
.measurement {
display:inline-block;
background-image:url(overline.png)
width:200px;
text-align: right;
}
Does anyone know of a way I can clip the background image to the width of the displayed text?
Just use a border instead of an image:
.measurement {
display:inline-block;
border-top:1px solid #000000
}
How about changing the divs to spans and wrapping the measurement span in a div to space it to the desired width?
HTML:
<div class="spacer"><span class="measurement">1234</span></div><span>mm</span>
CSS:
.spacer{
width:200px;
display: inline-block;
text-align: right;
}
.measurement {
background-image:url(overline.png);
}
See this jsFiddle for a working example.
(background-color should work the same as an image).