I'm making some tabs, using a background image as the hover state background. The only one that looks fine is "Day". I presume, because it's only 3 characters and the other tabs are 4 characters. Is there a way to make it so the hover background is centered on all of them? Here is the css for the list.
li {
font: 9pt "Helvetica Neue", Helvetica, Arial, "Trebuchet MS", Trebuchet, serif;
margin-top: .192333333em;
float: right;
height: 19px;
width: 40px;
margin-left: 10px;
display: inline-block;
margin: 7px;
}
li.current {
background: url('img/red-current-bg.png') no-repeat;
line-height: 1.6em;
}
ul#tabnav {
margin: 0;
}
ul#tabnav li a {
text-shadow: 0 1px #800000;
text-decoration: none;
padding: 8px 11px;
line-height: 1.6em;
}
ul#tabnav li:hover {
background: url('img/red-current-bg.png') 0 0 no-repeat;
}
Can you just adjust the horizontal position of the background to adjust the pixels or center the image?
ul#tabnav li:hover {
background: url('img/red-current-bg.png') 3px 0 no-repeat;
}
or
ul#tabnav li:hover {
background: url('img/red-current-bg.png') center top no-repeat;
}
Related
.container {
width: 800 px;
margin: 0 auto;
}
#main {
background: url(images/header_slice.jpg) repeat-x;
}
#main.container {
background: url(images/header.jpg) no-repeat;
}
#sidebar {
float: left;
}
#sidebar h3 {
font-size: 24px;
color: #044055;
font-weight: normal;
}
#sidebar ul li a {
font-size: 14px;
color: #393838;
}
ul#subscribe li a {
font-size: 18px;
padding-left: 30px;
}
#sidebar ul {
list-style: none;
}
#sidebar {
float: left;
margin-left: 155px;
margin-top: 35px;
background: #d4d6d3;
border: 1px solid #BEBDBD;
padding: 15px 15px 30px 30px;
}
#sidebar h3 {
font-size: 24px;
color: #044055;
font-weight: normal;
padding-bottom: 20px;
padding-left: 15px;
}
#sidebar ul {
list-style: none;
padding-bottom: 25px;
}
#sidebar ul li a {
font-size: 14px;
color: #393838;
}
ul#subscribe li {
padding-bottom: 5px;
}
ul#subscribe li a {
font-size: 16px;
padding-left: 40px;
}
ul#subscribe li {
padding-bottom: 5px;
padding-left: 35px;
}
li#rss {
background: url(images/rss_icon.png) no-repeat;
background-size: 20px;
}
li#email {
background: url(images/email_icon.png) no-repeat;
background-size: 20px;
}
li#twitter {
background: url(images/twitter_icon.png) no-repeat;
background-size: 20px;
}
I was learning how to make a basic website from: https://code.tutsplus.com/tutorials/design-and-code-your-first-website-in-easy-to-understand-steps--net-6062
The header background from the container isn't loading.
Also the the sidebar icons are being overlapped by the text. I tried adding padding in the sidebar anchor but it didn't work. What am I doing wrong?
fist have some padding to the left from your icon so you text won't overlap it and then for background say that it should appear on the left side , center vertically. I shown how to do with li for twitter
li#twitter {
padding-left: 66px;
background: url(your-icon-path.png) no-repeat left center;
}
here i am assuming that your icon's size is 50 px and for left padding from that icon i added 16 px to it, so that your icon doesn't get covered by your content.
if you wish you could take a look at the answer that i gave someone previously Link
I was toying with some made code on codepen, trying to get used to html/css since I am not really comfortable on the positioning. This must be pretty silly but I can't make it work.
HTML:
<div id="hh">
<h1>Wacom Hover Effect</h1>
</div>
<div id="cl">
Read More
Learn More
Read Article
Download
</div>
CSS:
*, :before, :after{ #include box-sizing('border-box'); }
body{ padding: 1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #eee; }
#hh{
position:absolute;
left:50%
}
h1{
position:relative;
left:-50%;
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
#cl{
clear:both;
}
.button,
[class*="button-"]{
position: relative;
display: inline-block;
overflow: hidden;
float:left;
margin: 0 1em 1em 0;
padding: 0 4em;
height: 3.5em;
font: 300 1em/3.5em 'Open Sans', sans-serif;
text:{
decoration: none;
shadow: 0 1px 3px rgba(black, .35);
}
letter-spacing: .08em;
color: #fff;
background: #0090C0;
border: solid 1px #fff;
border-radius: 2px;
#include transition(.35s ease all);
}
}
There is some irrelevant code after that about hovering etc.
The result is this: http://codepen.io/roygbiv/full/FjLcA
So I wanted h1 at center and I found here the method of putting #hh absolute, left:50% and then h1 relative left:-50%. And it screwed up the positioning.
What I want is h1 on center top, then the 4 "a"s under it (not center, just not overlapping).
Putting position: absolute on an element makes all other elements ignore it. This can be solved by putting display: inline-block on the h1 and text-align: center on #hh:
Check new pen: http://codepen.io/anon/pen/kovaC
#hh {
text-align: center;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
display: inline-block;
}
inline-block makes the element's box adapt to the width of its text. I presume the desired look of the header is for the blue box to not be 100% width, which is otherwise the case with h1 and other block elements.
i have done the following modification in css and it is working as expected:
#hh{
text-align: center;
margin-left:auto;
margin-right:auto;
width:40%;
}
h1{
font: 300 3em/1em 'Open Sans', sans-serif;
border: solid 0.00019em #000;
margin-bottom: 0.2em;
padding: 0.4em 0.2em 0.4em 0.2em;
background-color:lightblue;
border-radius:0.2em;
}
I am trying to use a background image and/or color behind my menu items. Using either the image or just a background color the background will only match the height of the text. The height of the background needs to be 30px and the text needs to 16px and centered - like a normal button. I've tried every combination of css I can think of but can not get the results I'm looking for.
#menu-container {
/*float: left;*/
width: 960px;
margin:50px auto 0 auto;
height:50px;
}
#menu ul {
text-align: left;
height:50px;
}
#menu ul li {
display: inline;
background-image: url(images/menubutton.png);
background-repeat: no-repeat;
}
#menu ul li a {
text-transform: uppercase;
padding-right: 13px;
padding-left: 13px;
font-size: 16px;
/*line-height: 0.2em;*/
color: #000;
font-style: normal;
letter-spacing: 1px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
}
#menu ul li a:hover {
color: #ff0000;
text-decoration: none
}
Here is the code you need:
#menu ul li {
display: inline-block;
background-color: #a0a0a0; /* I changed this for testing */
background-repeat: no-repeat;
padding-top: 7px;
padding-bottom: 7px;
}
Basically, it used to be display: inline which prevented you from being able to adjust the height. You also can't use display: block because then they will not all be on the same line. So, display: inline-block is exactly what you need.
Then I added padding-top and padding-bottom with 7px each to keep the text in the middle.
Here is a working DEMO
Hope this helped.
Struggling with what seems to be a common problem, but none of the suggestions I've found so far is working. I'm working on a stylesheet for printing, the page contains nothing more then a table and one h1 tag.
The problem is that I'm getting empty white space at the top of the page, about 1/4 of the page in portrait and half the page in landscape - neither is obviously not acceptable for my users.
I've tried zeroing margins on every possible element I can think off, including body, html, table, tr and tr. Pasting the HTML and CSS below (some tags is for other HTML not found below, these are for other pages also using the same CSS for print), hopefully it's a simple fix or missing margin :)
/*Print CSS template */
body, #content, #container {
width: 100%;
margin: 0;
float: none;
background: #fff url(none);
}
#topnav, #navbar, #nav, #sidebar, .ad, .noprint {
display: none;
}
body {
font: 1em Georgia, "Times New Roman", Times, serif;
color: #000;
}
h1,h2,h3,h4,h5,h6 {
font-family: Helvetica, Arial, sans-serif;
color: #000;
}
h1 { font-size: 250%; }
h2 { font-size: 175%; }
a:link, a:visited {
color: #00c;
font-weight: bold;
text-decoration: underline; }
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
}
/*Print CSS template END */
.r_main
{
width: auto;
padding: 0;
margin: 0;
}
table{
margin: 0;
padding: 0;
}
.r_wrap
{
margin: 0;
width: 100%;
display: block;
min-height: 30px;
float: left;
display: block;
border-bottom: 1px solid #000;
}
.r_left
{
margin: 0;
width: 300px;
color: #000;
display: block;
float: left;
font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;
}
.r_right
{
margin: 0;
display: block;
float: left;
color: #000;
font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;
}
.r_right p
{
padding: 0;
margin: 7px 0 3px 0;
font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;
}
.r_left span, .r_right span
{
display: block;
margin: 0;
padding: 5px 0 0 0;
}
.r_right ul
{
margin: 3px 0 0 15px;
padding: 0;
}
.r_right ul li
{
margin: 0;
padding: 3px 0 0 0;
}
.r_zeb1
{
background-color: #f9f9f9;
}
.r_zeb2
{
background-color: #e9e9e9;
}
HTML
<table>
<tr class="r_wrap r_zeb2">
<td class="r_left"><span>Location</span></td>
<td class="r_right"><span>'.$frm->get_location($selectedE['e_location']).'</span></td>
</tr>
</table>
Assuming that the h1 is before the table, it could be the issue. You might want to zero the margins & padding on it. It could also help to switch to 'pt' for your font-size instead of using a %.
h1{
margin:0;
padding:0;
font-size: 36pt;
}
Agree with user401183, I think its the font size
h1 { font-size: 250%; }
h2 { font-size: 175%; }
On hover the background color seems to come outside of the "boxes" that are my navigation items. I have tried tweaking everything. Here is my CSS and HTML...
<div id="menuTop">
<ul id="menuOne" class="menuHoriz">
<li>home</li>
<li>about us</li>
<li>services</li>
<li>samples</li>
<li>contact</li>
</ul>
</div>
#menuTop {
clear: both;
padding-top: 18px;
height: 55px;
font-size: 12pt;
background-color: #000;
}
#menuTop ul, #menuTop li {
margin: 0;
padding: 4px 0 0 0;
}
#menuTop ul {
list-style-type: none;
}
#menuTop li {
display: block;
background-color: #3C87D1;
text-align: center;
width: 197px;
height: 30px;
margin: 0 0px 0 0;
padding: 4px 0 0 0;
border: 1px solid #2A5E92;
}
#menuTop a {
display: block;
margin: 0;
padding: 4px 0 0 0;
}
#menuTop a:link, #menuTop a:visited {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
#menuTop a:hover {
width: 197px;
height: 30px;
padding: 4px 0 0 0;
margin: 0;
color: #fff;
background-color: #5F9FFF;
}
ul.menuHoriz li {
float: left;
}
I removed the unneeded/double definitions from your stylesheet and fixed the bug.
* {
margin: 0;
padding: 0
}
#menuTop {
font: 12pt 'Trebuchet MS', Helvetica, sans-serif;
padding-top: 18px;
height: 55px;
background: #000
}
#menuTop ul {
padding-top: 4px;
list-style: none
}
#menuTop li {
background: #3C87D1;
border: 1px solid #2A5E92;
text-align: center
}
#menuTop a {
display: block;
width: 197px;
line-height: 30px
}
#menuTop a:link, #menuTop a:visited {
color: #fff;
text-decoration: none
}
#menuTop a:hover {
background-color: #5F9FFF
}
ul.menuHoriz li {
float: left
}
Here are some notes:
It is handy to set the margin and padding for all elements to zero by using *, before designing your layout.
Set the width and height for your menu item to the a element only (the most nested element). The surrounding li element will take the same size. Also use line-height instead of height because it automatically makes your text vertically centered.
Don't redefine styles in :link, :visited, :hover or :active (for example dimensions and font). It gives unnecessary calculations for the browser.
If your problem is only the color coming outside the boxes, add this to your #menuTop li
overflow:hidden;
Works for me. :)
Try this one: jsfiddle example
#menuTop {
clear: both;
padding-top: 18px;
height: 55px;
font-size: 12pt;
background-color: #000;
text-align: center;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
line-height: 34px;
}
#menuTop a {
float: left;
border: 1px solid #2A5E92;
background-color: #3C87D1;
width: 197px;
color: #fff;
text-decoration: none;
}
#menuTop a:hover {
background-color: #5F9FFF;
}