I am just looking to space these news releases out nicely so there is a gap in between each posting. I have included an image below to explain. I tried to increase the padding on the following but that did not work. Thanks for the help
.headline {
position: absolute;
padding-top: 15px;
}
http://www.petrowestcorp.com/home/
Made your press releases look like the following:
.feedburnerFeedBlock ul li {
list-style-type: none;
text-align: left;
font-size: 12px;
line-height: 1.5em;
overflow: auto;
padding-top: 10px;
}
Here is what I made it look like with the above css code:
As suggested elsewhere in the answers, your span cannot be given padding-top/bottom unless you explicitly set its display property to behave like block/inline-block level elements. Hence, instead of setting that property on span, we set it to the li tag. However, i added overflow:auto as well because your css did not contain its elements as you had set position:absolute to your spans. This could should set that bit right as well.
Hi you can simply do this in css.
.feedburnerFeedBlock > ul > li {
padding-top: 15px;
}
A span element is not a block element and u can only apply dimensions if u set the span to e.g. display: block
This JSfiddle should work well for you.
HTML
<div class='feedburnerFeedBlock'>
<ul>
<li>
<h6>August 13, 2013</h6>
<p><a href='#'>Petrowest Corporation Announces Second Quarter 2013 Financial Results and New Contract Award for Civil Division</a>
</p>
</li>
<li>
<h6>May 13, 2013</h6>
<p><a href='#'>Petrowest Corporation Announces First Quarter 2013 Financial Results</a>
</p>
</li>
</ul>
</div>
CSS
a {
color: #000;
text-decoration: none;
}
h6, p {
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: normal;
line-height: 1.5;
}
h6, p, .feedburnerFeedBlock ul, .feedburnerFeedBlock ul li {
margin: 0;
padding: 0;
}
h6 {
color: #777;
}
.feedburnerFeedBlock ul {
list-style-type: none;
margin: 10px 0;
width: 320px;
}
.feedburnerFeedBlock ul li {
margin-bottom: 15px;
}
Related
Here's my code:
ul.top-ten li:before {
list-style-type: none;
font-family: 'fontello';
content: '\f08e';
margin:0 5px 0 -15px;
color: #ff9900;
}
I thought this line would strip the bullets away:
list-style-type: none;
However, no joy.
Here's the HTML:
<ul class="top-ten">
<li>Apples</li>
<li>Pears</li>
<li>Lemons</li>
<li>Peaches</li>
</ul>
So all good right? Apparently not...the bullets are still there...any idea why?
"list-style-type" property is applicable on the ul item type. I guess you are trying to add some content for each list item using the before pseudo selector. What you need to do move list-style-type: none; property to ul.top-ten selector.
ul.top-ten {
list-style-type: none;
}
ul.top-ten li:before {
font-family: 'fontello';
content: '\f08e';
margin:0 5px 0 -15px;
color: #ff9900;
}
This should work fine.
Try this, list-style-type needs adding to ul not li (css-tricks)
ul.top-ten {
list-style-type: none;
font-family: 'fontello';
content: '\f08e';
margin:0 5px 0 -15px;
color: #ff9900;
}
add to your li tag list-style: none;
ul li{
list-style: none;
}
On my website the menu looks fine when you just visit the homepage. As soon as you open one of the menus the selected menu turns to bold and the last menu item jumps to the line below.
I want the menu to be displayed on one line and not jump to the row below, but I can't seem to find the part that's scr*wing me over. Anyone have any suggestions or know what's wrong?
You can reserve space for bolded font through adding not visible after content. Here is JSFiddle http://jsfiddle.net/2r4xby06/1 (demo is on hover)
CSS:
ul {
font:normal 16px Arial;
}
li, a {
display: inline - block;
text - align: center;
}
a {
padding: 4px 8px;
text - decoration: none;
color: #333;
text-transform: uppercase;
}
a:hover {
font-weight:bold;
}
a::after {
display:block;
content:attr(title);
font-weight:bold;
height:1px;
color:transparent;
overflow:hidden;
visibility:hidden;
text-transform: uppercase;
}
HTML:
<ul>
<li>Home</li>
<li>Ploegen</li>
<li>VOOR DE JONGSTEN</li>
<li>KALENDER/STAND</li>
</ul>
Change this
#access .current_page_item > a, #access .current_page_ancestor > a
{
font-weight: bold;
}
To
#access .current_page_item > a, #access .current_page_ancestor > a
{
font-weight: normal;
}
or
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 3em; /*set this to 3em or 3.6em*/
padding-left: 0;
border: 1px solid red;
}
or
#access a {
color: #eee;
display: block;
line-height: 3.333em;
padding: 0 1em; /*set this to 1.2125em to 1em*/
text-decoration: none;
}
#access div {
margin: 0px 8%;
}
This will solve the problem.
When one of the <li> is bold it overflows ( the width becomes bigger ) cause the margins parameters can't be met. So either remove bold or adjust the margins.
I have a menu with four items and each one of them has a different colors.
My challenge is to darken each item on hover and I know I can use opacity to achieve this but before that, every time I hover on one of items it only highlights part of it and skips the padding. I know it is a stupid question to ask but this is my first front end job since 1999 :)
Could you please help me with understanding what is wrong here? thank you all.
this is the menu structure
<div class="menu-bar-inner">
<ul class="menu-bar-menu">
<li class="color1">Item 1</li>
<li class="color2">Item 2</li>
<li class="color3">Item 3</li>
<li class="color4">Item 4</li>
</ul>
and this is my CSS
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
padding: 6px 20px 7px 20px;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
background-color: #ce5043
}
.menu-bar-menu li a:hover {
background-color: black;
}
.color1 {background-color: #ce5043}
.color2 {background-color: #fb8521}
.color3 {background-color: #444444}
.color4 {background-color: #b3c833}
You can use this for hovering:
.menu-bar-menu li:hover, .menu-bar-menu li:hover a {
background-color: black;
}
it take care of both li element and its child anchor when li is hovered
Demo :http://jsfiddle.net/DajQ9/1/
I'd take the padding off the li elements and put it on the a elements instead. Also, set a to display: block;, so it occupies the entire height and width of its parent li. Like so:
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
background-color: #ce5043
}
.menu-bar-menu li a {
display: block;
padding: 10px 20px;
}
Here's a fiddle: http://jsfiddle.net/82uyt/
Also, you were missing the closing </div> tag.
While there are many ways to fix this, the root of your issue is the fact that you're padding both the container AND the link inside it when you style the li and the li a in one shot. What you're left with is an a tag that has padding inside an li that has padding, and the padding of the li tag is the unchanging color. By adding:
.menu-bar-menu li{
padding:0;
margin:0;
}
AFTER the declaration you have, you can fix this, or simply separate out your declarations to make it a bit more obvious. Also, when in doubt, a tool like the Firebug extension for Firefox will be your best friend. You can launch it, then click an item in your page to see the styles that are affecting that exact piece... sometimes just the highlighting/border while you move around is enough to make you see what's happening.
Yoy need to apply padding to the element on which you are applying the hover action. Here is your code updated. Visit this link: http://jsfiddle.net/dnPmE/1/
css:
.menu-bar-menu li, .menu-bar-menu li a {
list-style: none;
float: left;
text-align: center;
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 400;
}
.menu-bar-menu li a{
padding: 12px 40px 14px 40px;
}
.menu-bar-menu li a:hover {
background-color: black;
}
.color1 {
background: #ce5043;
}
.color2 {
background: #fb8521;
}
.color3 {
background: #444444;
}
.color4 {
background: #b3c833;
}
I use the following menu:
<ul id="menu">
<li class="subMenu">
<h2><span>menu item</span></h2>
<div>
<p><span>submenu item</span></p>
</div>
</li></ul>
I have the following css:
ul#menu {
float:right;
height:80px;
color: #FFF;
margin: 0;
padding: 0.8em 0em;
}
ul#menu li {
display: inline;
margin: 0.1em 1em;
position: relative;
}
ul#menu h2,ul#menu h3 {
font-size: 1em;
font-weight: bold;
display: inline;
}
ul#menu li a {
text-decoration: none;
}
ul#menu li a:hover {
text-decoration: underline;
}
ul#menu li.subMenu a {
padding: 0 1.2em;
}
ul#menu li.subMenu a:hover {
text-decoration: underline;
}
ul#menu div {
display: none;
}
ul#menu li.subMenu div {
border: 1px solid #fff;
width: 125px;
position: absolute;
top: 2.5em;
left: 30px;
background: #fff;
color: #000;
}
ul#menu li.hovered div {
display: block;
}
ul#menu li.subMenu div a {
text-decoration: none!important;
}
can anybody advise how i can keep menu item hovered when i hover over the submenu item
thank you in advance.
Quick solution in jsFiddle. (See the comments in the CSS to find out what I've changed.)
You are most of the way there already. Replacing the ul#menu li.hovered div selector in your CSS with ul#menu li:hover div is most of the battle; the rest is adjusting the submenu position so that you can actually hover over it without it disappearing. (In the jsFiddle above I've simply used padding instead of offsetting with absolute positioning.)
However, please pay attention to the commenters above! Their observations are entirely correct and germane:
The markup being used is rather heavy and unorthodox. For example, your submenu "items" are paragraphs in a div, but normally I would expect to see just a nested list; also, the spans seem unnecessary, and you don't need the submenu class on the list items when you already have an ID on the parent ul.
Second, they are also correct that there are plenty of great tutorials and examples for this out there, so while rolling your own worthwhile exercise you don't need to do it alone—nor should you! My first introduction was this old A List Apart article, and you can even ignore the whole section about JavaScript/Suckerfix since it's 2011 and most of us are perfectly happy to forget about IE6.
http://www.devinrolsen.com/pure-css-horizontal-menu/
You could use li:hover to keep the contents of the li tag displayed. You could also follow this simple tutorial on creating a pure CSS hover menu.
I'm getting stumped here...
I'm trying to vertically align text in a top nav that has two different lines on each li.
Normally, I would take the position:relative + position:absolute route, however, that only works if you set the width of the element.
In my navigation, we don't have a standard width, but need all items aligned by the bottom text.
Here's my code
<div id="menu">
<ul>
<li>first line</li>
<li>Second<br />Line</li>
<li>third Line</li>
</ul>
</div>
Here's the CSS I'm using:
#menu {
margin: 40px auto 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: normal;
color: #666666;
float: right;
width:600px;
}
#menu ul {
list-style:none;
list-style-type:none;
height:30px;
}
#menu ul li {
float:left;
margin:0 11px;
padding:5px 0;
}
#menu ul li a {
color:#666666;
text-align:center;
font-size:11px;
display:block;
line-height:1em;
height:30px;
}
As you can see in the second li, there is a linebreak.
What I need is all the items to line up on the bottom, however, I can't use the width element.
Any help would be appreciated... javascript, jquery, are acceptable alternatives as well.
See http://jsfiddle.net/HKAn2/1/ for the updated CSS and sample.
Updated fiddle sample with proper IE7 support: http://jsfiddle.net/HKAn2/3/.
I do not recommend using the CSS hacks in this fiddle example. Instead use an IE7 specific stylesheet to add the asterisked properties. This is just a sample.
Note the changes to
#menu ul li {
display:inline-block; /* this */
margin:0 11px;
padding:5px 0;
*display:inline; /* this - IE7 */
*zoom:1; /* this - IE7 */
}
and
#menu ul li a {
color:#666666;
text-align:center;
font-size:11px;
line-height:1em;
vertical-align:bottom; /* this */
}
Hope this helps.
Edit:
I should further explain that the height property on your a element is no longer a requirement. The a will align to the bottom of the li element based on the li with the largest height.
as you appear to know the height (or optimal height) you could use the length value of vertical-align from vertical-align specs:
<length>
Raise (positive value) or lower
(negative value) the box by this
distance. The value '0cm' means the
same as 'baseline'
and if you make your <a> elements into inline blocks you then lower them by half the height, e.g. as below I took your height value of 30px, and made the links have a line height of 15px for each line then lowered it by 15px, which is 15px from the default middle point.
#menu {
margin: 40px auto 0px;
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
font-weight: bold;
font-variant: normal;
color: #666666;
float: right;
width:600px;
background: #eee;
}
#menu ul {
list-style:none;
margin: 0;
padding: 0;
}
#menu ul li {
float: left;
margin: 0 11px;
height: 30px;
background: #dad;
}
#menu ul li a {
color:#666666;
text-align:center;
display: inline-block;
vertical-align: -15px;
line-height: 15px;
}
Working Example : HERE
downside is that I don't think you can get the whole 30px height hoverable, ike if the link was display:block, but maybe someone can expand on this if that's required, maybe it could be achieved by adding a span into the mix?