I really hope someone could help me. I want to justify my categories menu in a Wordpress website.
You can see it here, the colourful menu on the top: http://www.postscriptum.hostingas.in/
The menu in the HTML is called "section-bar".
Here is the CSS code:
.section-bar {
box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.65);
margin-bottom: 1px;
padding: 5px 0 5px 0;
background: #252525;
}
.section-bar ul li {
padding: 1px 1px 1px 0;
}
.section-bar ul li a {
display: block;
color: #fff;
padding: 3px 5px;
font-weight: bold;
}
I tried to put this but nothing changed:
.section-bar ul {
text-align:justify;
}
How can I make it fit nicely into the screen.
You have 5 elements in one row, split your wrapper size to 5 elements (for example 1000/5=200px) and set width li to 200px (in this example).
Looking at your site the first thing that comes to mind is to change the css of the li item so that every item is the same width and that it is big enough to put the biggest title on one line. So to do that I would change the width to be 356px.
.section-bar ul li {
padding: 1px 1px 1px 0;
width: 356px;
}
Related
i'm begginer in html and css and i'm building my first site based on my psd project, i just started making it and i can't get through one problem.
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.grid {
margin: 0 auto;
width: 960px;
}
.primary-header {
position: relative;
background-color: #fff;
height: 85px;
}
.logo {
position: absolute;
top: 29px;
}
.primary-nav {
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
}
.nav {
text-align: right;
}
.nav li {
display: inline-block;
vertical-align: top;
margin: 0 30px;
padding: 11px 30px;
}
.nav li:hover {
border: 1px solid #333;
border-radius: 5px;
background-color: #333;
color: #fff;
}
.nav li:last-child {
margin-right: 0;
}
border:1px solid #333;
border-radius:5px;
background-color:#333;
padding-bottom:10px;
color:#fff;
}
.nav li:last-child {
margin-right: 0;
}
<header class="primary-header">
<div class="grid group">
<a href="index.html">
<img src="http://i58.tinypic.com/2q2prah.png" class="logo" alt="logo">
</a>
<nav class="nav primary-nav">
<ul>
<li>O firmie</li>
<!--
-->
<li>Oferta</li>
<!--
-->
<li>Realizacje</li>
<!--
-->
<li>Kontakt</li>
</ul>
</nav>
</div>
</header>
and here's the effect i'm gonna reach:
So the problems are:
After pointing with cursor on menu element, padding-top and padding-bottom is too big, it should be 11px and right now it's propably 19px
According to margin-top in ".nav li" my nav should be vertically aligned, but it's a little bit too much into bottom, if i set margin-top: 0px;, there is still some white space above my nav, why?
After i point any menu element with cursor, all the menu elements move 1px to bottom, why?
Thanks for your answers, i was searching for answers for about 2 hours and i still didn't find it... please, help me..
Here's my best reply to your questions:
1) The padding is in addition to your text. For example, with Firebug I can see that OFERTA is measured as 15px tall. Add 11px to top and bottom and you get 37px. To get it to 11px, you're going to have to reduce the font-size and add minimal padding. If you don't care as long as the menu item isn't too big, then just lower the vertical padding in
padding: 11px 30px;
2) By default, the ul element has some margins. Set the margin to 0 for nav to remove it.
3) Previously, before hovering, the CSS rules state that the menu item has no border. On nav li:hover, the CSS adds a border, which increases the overall area and to compensate and stay in the center, the text moves slightly downward. A fix would be to add a border to the nav li.
Also,
border:1px solid #333;
border-radius:5px;
background-color:#333;
padding-bottom:10px;
color:#fff;
}
seems to be out of place. It's missing a opening brace and an identifier.
For #1, Try reducing the padding on .nav li from padding: 11px 30px to padding: 5px 30px
For #2, Add a float: left on your .logo and remove the position: absolute
For #3, Remove the border: 1px solid #333 on .nav li:hover
Number 1 renders fine on IE11 at my machine. Show 11px padding-top and -bottom. So this is working as it should. Maybe it is not desired?
Number 2 is caused by the margin on the UL, it's 12px.
.nav ul {
margin-top: 0px;
}
Number 3 is caused by the added border on hover. You need to use extra padding or set a transparent border to nav.li
.nav li {
display: inline-block;
vertical-align: top;
margin: 0 30px;
padding: 11px 30px;
border: 1px solid transparent;
}
I dont get why there is a big space in the <li>s, why the border is not warping the text.
fiddle
i want the widht of every <li> to be like the biggest <li>
Thanks for the help :D
Removing width 100% from #settingNev a will reduce the size to the length of string in span element. Or you could set a specific width if you need them to all be the same.
http://jsfiddle.net/rtT8L/
#settingNev a {
float: left;
margin: 0 3px 0 3px;
text-decoration: none;
border-radius: 6px 6px 0px 0px;
/*width: 200px;*/
}
---------------UPDATE-----------------------------
http://jsfiddle.net/NZc6K/
These above fiddle should do the trick. Basically this was because of how 100% width works with padding so I moved the large padding you had on the ul to the div it is wrapped in.
To read more about the box model see http://www.addedbytes.com/articles/for-beginners/the-box-model-for-beginners/
Use css tables, see fiddle here http://jsfiddle.net/UWLzL/22/.
Css source:
#settingNev ul {
display:table;
}
#settingNev ul li {
display:table-row;
}
#settingNev ul li a {
display: table-cell;
border-radius: 6px 6px 0px 0px;
color: #666;
padding: 5px 3px;
border: 1px solid transparent;
}
#settingNev ul li a:hover {
border: 1px solid black;
border-bottom: 1px solid transparent;
}
I am writing custom tabs using HTML and CSS only, and I have come up with this so far:
http://jsfiddle.net/ae4j8/
index.html:
...
<ul>
<li>Products</li>
<li>Loans</li>
<li>Deals</li>
</ul>
...
index.css:
ul { margin-top: 10px;}
ul li {
border-bottom: 28px solid #3f3f3f;
border-left: 28px solid transparent;
border-right: 28px solid transparent;
height: 0;
display: inline-block;
margin: 0 -35px 0 0;
padding: 0;
}
ul li:hover { border-bottom: 28px solid #7f7f7f; }
ul li a {
color: #fff;
display: block;
float: left;
margin: 0;
padding: 5px;
text-decoration: none;
}
I want the first tab to appear infront of the second one and the second one infront of the third one.
Currently its first tab behind second tab behind third tab,which looks like the top-most tab.
Any ideas on how I can get the tabs reversed?
As mentioned, you could put your links in reversed order (so your 'first' link 'Products' gets rendered last and therefore on top of the other ones.) To put them with CSS back in the original order you use float: right.
Fiddle
Try to add for li position:relative and z-index:0. And for :hover - z-index:20:
CSS:
ul li {
...
position:relative;
z-index:0;
}
ul li:hover { border-bottom: 28px solid #7f7f7f;z-index:1; }
http://jsfiddle.net/ae4j8/8/
I think it will be better
I'm attempting to program my website's navigation bar so when that page is selected the sprite index changes to highlight the background behind it like a button.
The sprite is tiled vertically so the first button is highlighted in the first tile and the second in the next etc.
However I'm also using weebly and am trying to program more and more of it myself to learn, so the navigation code was automatically done thus I'm not sure how to implement it so when a page is selected the button behind is highlighted.
In theory I understand how to do it, I'm just unsure of what functions to use as I'm completely new to CSS. How I would do it is:
1. Work out which code returns the current webpage as a variable
2. Calculate the new position for the tiled background by using: (webpage position) * sprite height, or typing out: if webpage = menu sprite_position = 1 * sprite_height
The current code regarding to the navigation is:
#navigation {
font-family: Ethnocentric, arial, sans-serif;
position: relative;
width: 1082px; /*For adjusting the navigation's usable width*/
height: 29px;
z-index: 2;
padding: 11px 0px 0px 45px; /*Fourth argument changes the starting navigation postion*/
background: url(Ngbck.png) no-repeat;
_bbbackground: none;
_fffilter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='files/theme/navigationbg.png', sizingMethod='crop');
}
#navigation ul li {
float: left;
font-size: 16px;
text-transform: uppercase;
padding: 0px;
margin: 4px 0px 0px 40px;
}
#navigation ul li a {
color: #0bf;
}
#navigation ul li a:hover, #navigation ul li#active a {
color: #f00;
}
#weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 13px 0px 0px 0px; }
#weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
#weebly-menus .weebly-menu li { float: left; clear: left; width: 168px; text-align: left; }
#weebly-menus .weebly-menu li a { position: relative; display: block; width: 148px; background: #001020; border-top: none; border-bottom: 1px solid #404a51; border-right: 1px solid #404a51; border-left: 1px solid #404a51; text-decoration: none; font-size: 12px; font-weight: normal; line-height:1; padding: 8px 6px 8px 12px; color: #0bf; }
#weebly-menus .weebly-menu li a:hover { background: #131f28; color: #c00; }
Weebly's engine adds
#active
identifier to LI element of currently selected menu. This identifier is applied to list element in menu and this changes depending on what page you are at the moment.
So I think in order to modify look of such menu you will need to add selector like #navigation ul li#active or #navigation ul li#active a (depending on effect) at the end of CSS file in template editor - so your custom style is picked.
One has not much access to code that renders Weebly's page yet - but there are some specific rules - so people design customer template for Weebly's already (Penguins' templates?)
Peter
Please help me cut the following navigation bar using CSS2.1, with shadow, rounded borders and without spoiling the layout if you zoom-in/zoom-out:
Already two days I have been working on it, and could not find any way which will look the same look while zooming...
EDIT:
need to be done with CSS2.1
right and left borders are rounded + have shadow (right left correspondingly)
there is a shadow on bottom as well
Should be simple enough.
<div id="navbar">
NewsBusiness......Deals
</div>
CSS:
#navbar > a {
padding: 10px;
box-shadow: 4px 4px 16px black;
color: white;
}
#navbar > a:first-child { border-radius: 8px 0px 0px 8px; }
#navbar > a:last-child { border-radius: 0px 8px 8px 0px; }
It's a pretty simple solution. You can use just css. I used jQuery to assing the colors but it's a straightforward process...
http://jsfiddle.net/elclanrs/QtLv5/2/
html
<ul>
<li>Option1</li>
<li>Option2</li>
<li>Option3</li>
<li>Option4</li>
<li>Option5</li>
</ul>
css
li { float: left; }
a {
display: block;
padding: .5em 1em;
text-decoration: none;
color: black;
font: bold 15px Arial;
}
/* If you assign unique ids to your menu items you can do */
#item { background: red; }