Is it possible to have more space between the list items "exhibition" and "current" and less space between the list items "current" and "previous"? changing the padding-right in #mainmenu2 li changes the space of each one equally.
jsfiddle: http://jsfiddle.net/zuVu7/9/
css
#charset "UTF-8";
/* CSS Document */
.bg {
background-attachment:fixed;
background-repeat: no-repeat;
-moz-background-size: cover;
background-size: cover;
}
#mainmenu2
{
position:relative;
left: 72px;
padding-top: 60px;
}
#mainmenu2 li
{
display: inline;
list-style-type: none;
padding-right: 32px;
}
and the html is:
<body class="bg">
<div id="navcontainer">
<ul id="mainmenu2">
<li><span class="secondarytextcolour">EXHIBITION</span></li>
<li>CURRENT</li>
<li>PREVIOUS</li>
</ul>
</div>
<div>
<img src="line.jpg" align="top" width="100%" height="1" />
</div>
<br />
Try this
#mainmenu2 li
{
display: inline;
list-style-type: none;
padding-right: 15px;
}
#mainmenu2 li span
{
margin-right:15px;
}
Add this to the bottom of your CSS, and adjust padding-right as needed:
#mainmenu2 li:first-child {
padding-right: 50px;
}
Yes, give the li a class or ID and reference it. Fiddle with the margin or padding as per your requirements.
Related
I want to achieve this:
But there is unnecessary gap on top of the Social icons div. The page is live at http://goo.gl/K17Fjs
My markup:-
<header>
<img src="images/home-layout_02.jpg" alt="Salem Al Hajri Logo">
<div id="top-social">
Follow us on <img src="images/home-layout_05_01.jpg" alt=""><img src="images/home-layout_05_02.jpg" alt=""><img src="images/home-layout_05_03.jpg" alt="">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Projects</li>
<li>Photo Gallery</li>
<li>Contact</li>
</ul>
</nav>
</header>
My CSS:
body {
margin: 0 auto;
background-attachment: scroll;
/*background-image: url(images/home-layout_08.jpg);*/
background-repeat: repeat-x;
background-position: bottom;
}
header {width: 920px; margin: 0 auto;}
#top-social {float: right; text-align: right; vertical-align: middle; padding-top: 13px; width: 538px;}
nav {float: right; width: 538px; text-align: right; margin-top: 45px;}
nav li { display: inline;}
To achieve your layout, you need to float your logo image left.
See this FIDDLE
Add this CSS :
header > img {
float: left;
}
This : header > img {} means propeties will apply only to the first children images of the <header> tag in your case, the logo image and not to the social icons.
Remove "padding-top: 13px;" from your CSS.
Change your style.css line:10 to:
#top-social {
float: right;
text-align: right;
vertical-align: middle;
/*padding-top: 13px;*/
width: 538px;
}
There is a top padding of 13 pixels.
Elements with float: right will be pushed down by other elements that come before them. You can fix this by changing your markup to move the #top-social and nav before the <img>.
However, in this case I think it would be better to absolutely position the top social and the nav to the top right and bottom right of the containing header. This will allow you to easily get the nav links below the social links and keep this appearance.
header {
position: relative;
}
#top-social {
position: absolute;
top: 0px;
right: 0px;
}
This is what I want:
http://img441.imageshack.us/img441/9764/menuhn.gif
The grey area is a background image with the property background-size: cover; that is shown in HOME button. All the rest is white.
To make it responsive, so it can be browsable in mobile devices, I would like that the link buttons go behind each others has the window narrows. BTW, the order of the right link buttons are inverted.
this is what i get so far:
http://jsfiddle.net/Emaster/Wmwu4/
HTML
<body>
<div id="header_left_margin"></div>
<div id="header_title">
<h3>title</h3>
</div>
<div id="header_right_margin"></div>
<div id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>FAQ</li>
</ul>
</div>
</body>
CSS
body{
background-image: url(http://solfar.pt/wp-content/uploads/2012/01/background-1024x682.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
#header_title{
border:1px solid blue;
height: 50px;
background-color: white;
}
#header_title,
#header_title h3,
#header_title h3 a{
display: inline;
}
#menu ul li{
float:right;
width: 50px;
height: 50px;
border:1px solid red;
background-color: white;
}
#menu ul li.active {
background-color: transparent;
}
#menu ul{
display: inline;
}
#menu,
#menu ul,
#menu ul li{
display: inline;
}
#header_right_margin{
display: inline;
float:right;
width: 10%;
height: 50px;
border:1px solid green;
background-color: white;
}
#header_left_margin{
display: inline;
float:left;
width: 10%;
height: 50px;
border:1px solid green;
background-color: white;
}
I have made this menu for you (next time you'll have to pay :). I should mention that you don't need to use display: inline and float together as float will dominate anyway. Here is updated jsfiddle. Another thought - use plugins for responsive designs. They already have built-in solutions. You can try bootstrap
Should look like this:
(source: gyazo.com)
My attempt
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
</div>
</div>
I use Current class for the current page background.
Added the header
.header {
width: 100%;
height: 86px;
background-image: url("../img/gradient.png");
background-repeat: repeat-x;
border-bottom: solid 1px #a2a2a2;
}
Floated menu to right, made it display inline and centered the text
.menu {
float: right;
padding: 2.7%;
}
.menu a{
color: #1e1e1e;
}
.menu a:hover{
color: #5e5e5e;
}
.menu li {
display: inline;
float: left;
margin-left: 10px;
padding-left: 20px;
padding-top: 5px;
}
Now the part of the current background
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
width: 78px;
height: 36px;
padding-left: 20px;
padding-top: 5px;
color: white;
}
Result:
(source: gyazo.com)
Can you see theres a big space between the current and other items? How do I remove this? make it equal to others spaces.
Things I tried:
Adding position relative
result:
Menu item 'current' goes over the menu item 'forums'
I could not find any other way to do so, what am I doing wrong?
Try the following HTML:
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
</div>
</div>
With the following amends to your CSS:
.menu {
float: right;
padding: 2.7%;
}
.menu li {
float: left;
margin-left: 10px;
}
.menu a{
color: #1e1e1e;
display: block;
padding-left: 20px;
padding-top: 5px;
}
.menu a:hover{
color: #5e5e5e;
}
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
color: white;
}
Your HTML was structured incorrectly ... you shouldn't be placing the <li> elements inside the anchor elements.
You also don't need to have display: inline; on the list items, as they are floated left anyway, they should already be inline.
In future, you may want to check that your HTML is valid using the W3C validator, it should explain any errors in your HTML and how you can fix them.
Let me know if the above doesn't fix it and I'll happily have another look.
EDIT: Forgot to also state that I removed the height and width on the current css declaration, that was unnecessary, and almost definitely causing the spacing issues.
Remove the width on .current. That is what's adding the extra spacing.
If you don't want to change that, change the spacing on the the adjacent li:
.current + li {
padding-left: 0;
}
Here is a simplified demo of what you are trying to accomplish. Learn from it:
HTML
<ul>
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
CSS
ul {
float: right;
}
li {
display: inline;
padding: 10px;
}
.current {
background-image: url('http://placekitten.com/200/200');
}
Demo
Hey guys was hoping you can help me out.
been at this for like more than an hour and its driving me crazy.
basically I am a big novice when it comes to CSS but am learning. at the moment I am trying to replicated a menu that looks like this:
what I have so far looks something like this (i know the fonts different but not problem):
As you can see, ive got the background but I just CAN NOT figure out how make the start, end and the breaks (black line part) between each tab.
Also, basically the start, break, end I have as .jpg images. Not looking for html5 or css3 curves etc to do this. Just want to keep it simple :).
this is what I got so far. It would be great if you could could give me some tips on how I could make whats remaining and in case ive used a not-so-great approach, suggest an approach which would be better.
the html:
<div id="header">
<ul id="header-list">
<li class="header-list-item">
<span class= "header-list-item-span" >Home</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >About Us</span>
</li>
<li class="header-list-item">
<span class= "header-list-item-span" >Services</span>
</li>
</ul>
</div><!--END OF HEADER -->
the css:
#header-list{
display: table;
position: relative;
left: -3em;
table-layout: fixed;
margin-bottom: 0PX;
margin-top: 0;
margin-left: auto;
}
.header-list-item-span{
background-image: url("img/menubody.jpg");
color: white;
display: inline-block;
width: 5em;
font-size: large;
text-align: center;
padding: .2em;
}
.header-list-item{
display: table-cell;
height: 4.2em;
vertical-align: bottom;
}
Here's an idea:
Wrap the ul in a div. Set the first jpg as a background image for that div, and add some padding-left so that the image can be visible.
Set the last jpg as a background image for the ul and add some padding-right so that the image can be visible too.
Also, in my opinion, you should simplify your HTML by taking more advantage of CSS selectors.
The header list can be selected as div#header > ul.
The items that you are selecting with the class header-list-item can be selected with div#header > ul > li.
I don't think the span is actually necessary, you could apply the styles directly to the li elements.
Wrap the ul in another div and add padding on the inside to the left and you can place your start image as the background. Then make the right image the background of the ul and add padding on the right.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<style>
div,li,ul,span { margin: 0;padding: 0;}
body { width: 700px; margin: 0 auto; }
#header
{
background: url(http://www.lucascobb.com/wp-content/uploads/2012/02/1-plastic-navigation-bar-565x182.jpg) top center repeat;
padding-top: 50px;
position: relative;
}
#header .nav
{
background: url(http://www.ultracomwireless.com/images/button_left.png) top left no-repeat;
float: right;
width: 413px;
padding-left: 26px;
margin-right: 20px;
}
#header .nav .nav-wrapper
{
background: url(http://www.ultracomwireless.com/images/button_right.png) top right no-repeat red;
padding-right: 26px;
}
#header ul
{
position: relative;
list-style: none;
}
#header ul li
{
background: red;
width: 120px;
float: left;
text-align: center;
}
#header ul li span
{
color: white;
padding: 8px 0px;
}
.clear { clear: both;}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<div class="nav-wrapper">
<ul>
<li><span>Home</span></li>
<li><span>About Us</span></li>
<li><span>Services</span></li>
</ul>
<div class="clear"></div>
</div>
</div>
<div class="clear"></div>
</div>
</body>
I use a list-style-image for li items , and a single-line text.
But it looks bad, so I want to vertically align the text to the middle of the image.
I should use vertical-align: middle , right ? But it didn't work for me.
<html>
<head>
<title> This is an demo </title>
<style>
body {
background-color: #464443;
color: white;
}
ul {
list-style-image: url('bg.png');
}
li {
vertical-align: middle;
}
</style>
</head>
<body>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
</body>
</html>
A satisfactory way to do this (imo) is to not use list-style-image, instead using the background property to set the "bullet" (note I substituted my own placeholder image since I just copied/pasted from a fiddle). Your padding and other dimensions will vary depending on the size of the "bullet" image.
Here's the fiddle: http://jsfiddle.net/huBpa/1/
body {
background-color: #464443;
color: white;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
background: url('http://lorempixel.com/output/technics-q-c-32-32-1.jpg') no-repeat;
line-height: 32px;
vertical-align: middle;
padding-left: 40px;
}
This is what I would use. I don't use vertical align and instead use padding to move the text around to be wherever I want it to be.
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
li {
padding: 10px 10px 15px 20px;
background-image: url(images/arrow.png);
background-repeat: no-repeat;
background-position: 0px;
}
Add line-height to li. Make sure it is the same height as the image
`
li {
vertical-align: middle;
line-height: 30px;
}