below is an image of what I'm talking about:
Can I make this with pure CSS?
UPDATE: I've created divs with rounded corners (using border-radius) on the upper right and left corners and placing them between the tabs. Still looking for a more elegant solution.
The best way to do this is to overlay an element over the menu items, that has a border-radius itself. This element has to have the same background color as the container of the menu.
Those overlays should be done with the pseudo classes :before and :after. Those also have a great browser support.
HTML:
<ul class="tabs">
<li>Archive</li>
<li>Forum</li>
<li>Store</li>
<li>Patv</li>
</ul>
<br style="clear:both;" /> <!-- I didn't have an other element to clear the floats with -->
CSS:
.tabs { /* generates the grey line on the very top */
width: 100%;
height: 5px;
background: grey;
}
.tabs li {
list-style-type: none;
float: left;
}
.tabs li:first-child {
margin-left: 30px; /* This is just to move the menu to the left, for demo purposes */
}
.tabs a {
text-underline: none;
color: black;
line-height: 30px;
padding: 10px 20px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: grey;
}
.tabs a:after, .tabs li:first-child a:before {
content: '';
width: 4px;
height: 25px;
background: white; /* This has to be the background color of the container. Change it to red to see the pseudo elements */
position: absolute;
margin-top: 5px;
margin-left: -3px;
border-radius: 10px;
}
.tabs a:after {
margin-left: 18px;
}
Here's a demo: http://jsfiddle.net/rGubz/
You can try it using 'negative border radius', basically radial gradients (may not be cross-browser compatible tho, may be worth it to just use graphics). Take a look at this article. Good luck!
Yes, use the border-radius property. But, border-radius is a CSS3 property.
Here you can use negative border radiuses
http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
It may not be compliant in all browsers, your safest using images for the outward radius
Updating my answer to use pure CSS without negative radius
http://jsfiddle.net/peter/QTS6N/1/
Related
I cannot figure this out. I HAVE DONE RESEARCH so please, no comments about me doing more research. Also, I am a noob, so be nice ;)
Here's my site: http://library.skybundle.com/
Hover your mouse over the two black rectangles in the main blue nav bar (header area). The a:hover should make the color change to a gray. The ISSUE is that in Chrome, this looks perfect. But, in Firefox, the padding-right isn't long enough or something, so there is always a small black rectangle at the far right side of the "Educational Courses" button (this will only be visible when hovering your cursor over the button). In other words, the gray box doesn't go all the way to the right-side end of the button area upon mouse hover. I just don't understand why this looks and works great in Chrome, but bugs out in Firefox...
Believe me when I say I have tried everything I can to fix it using Firebug in Firefox. If you play around with it using an editor in your browser, you will see that if you try to make the padding longer for Firefox, it pops the whole button down onto a new line. So to fix THAT problem, you must make the container wider, but then the original problem comes back. It's a circle of problems and I'm sure one of you geniuses out there will see a simple solution that I am missing.
Please help. Thanks!
EDIT :
Here's my JSFiddle and code. Notice how it looks great in Chrome but not in Firefox?
http://jsfiddle.net/S4st8/
HTML:
<div id="navigation">
<div id="navigation-inner">
<div id="page-nav">
<div id="primary-nav">
<ul id="top-menu">
<li id="li-left">Product Training Videos</li>
<li id="li-right">Educational Courses</li>
</ul>
</div>
</div>
</div>
</div>
CSS:
#navigation {
background: url(http://library.skybundle.com/wp-content/themes/business-services/library/styles/colour-images/mu-nav.jpg) repeat-x;
margin: 0px;
padding: 0px;
height: 40px;
width: 100%;
}
#navigation-inner {
margin: 0px auto;
padding: 0px;
height: 48px;
width: 960px;
}
#page-nav {
margin: 0px;
padding: 0px;
height: 40px;
width: 960px;
}
div#primary-nav {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
}
ul#top-menu {
margin: -5px 0.325em 0 0.325em;
position: absolute;
padding: 0;
z-index: 100;
top: 0;
left: 3em;
width: 367px;
}
ul#top-menu li {
line-height: 3em;
list-style-type: none;
height: 49px;
background-color: #2C2C2C;
float: left;
}
li#li-right {
list-style-position: inside;
border-left: 2px solid #5E5E5E;
}
ul#top-menu li a {
font-weight: bold;
font-size: 11pt;
text-decoration: none;
padding: 15px 10px 16px 10px;
color: #ffffff;
}
ul#top-menu li a:hover {
text-decoration: none;
width: auto;
color: #ffffff;
background-color: #505354;
padding: 15px 10px 17px 10px;
}
its because a tags (anchor tags) have a default display property of inline
due to CSS Box Model you would need to adjust your padding and set the anchor tags display property to display:block;
the display block allows the anchor tag to fill the whole space of the LI tag
change ul#top-menu li a to this:
ul#top-menu li a{
color: #FFFFFF;
font-size: 11pt;
font-weight: bold;
display: block; /* add this */
padding: 0 10px; /* add this */
}
the CSS Box Model adds the content + padding + border + margin
https://developer.mozilla.org/en-US/docs/Web/CSS/box_model
Take a look at this CSS rule:
li#li-right {
border-left: 2px solid #5E5E5E;
list-style-position: inside;
}
Dropping list-style-position: inside seems to fix your issue in Firefox (and still works in Chrome), but I haven't tested the implications in other browsers. The CSS rule is documented here.
The reason why : browsers apply their own css if you don't specify it. Firefox added the space for your bullet (somehow)
FF :
list-style-image none
list-style-position outside
list-style-type disc
GooChrome :
list-style-image: none;
list-style-position: inside;
list-style-type: none;
User JasonSperske gave you a fixing solution,
i invite you to RESET your css.
PS. in the meantime, you are invited to see : https://stackoverflow.com/help AND http://sscce.org/
Reading and understanding those pages will give you few reputations points
I believe it's simple, but since I'm new to this I don't have a clue of how to do it. I just want to change the background color of a li tag - just for fashioning, nothing else.
This is my HTML:
<ul id="abas">
<li>PROGRAM</li>
<li>PROC</li>
<li>DDNAME</li>
</ul>
Sorry for being a noob but, this is the css part right?
#abas li a
{
text-decoration:none;
background-color:3B31FF;
color:#FFFFFF;
float:left;
margin-right:20px;
border-top-left-radius:23px;
border-top-right-radius:0px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
I noticed that here>>> "background-color:3B31FF;" is where I change the
color of the background, but doing this, changes all the background colors of course
... I only need 1 "li" tab to change and any html tutorial would be nice too.
Css code:
#abas li {
background-color: ... ;
}
fill in color code where dots are, like this:
background-color:#000000; //color black
Single tag:
Css code:
li.selected {
background-color: ... ;
}
Html code:
<ul>
<li></li>
<li class="selected"></li>
<li></li>
</ul>
First any css color code needs to have # followed by a 6 digit value(or 3 if they are repeating i.e #FF33FF as #F3F) and to solve your second part do this
CSS
#abas li {
background-color: #xxxxxx ;
//your other style goes here
}
#abas li.current {
background-color: #xxxxxx ;
//your other style goes here
}
HTML
<ul id="abas">
<li class="current">PROGRAM</li>
<li>PROC</li>
<li>DDNAME</li>
</ul>
To change the background color simply style it:
<li style="background-color:blue;">Program</li>
You will likely also want to set some height and width parameters.
This will make the first item have a red background:
<li style="background: red">PROGRAM</li>
If you want to for example add green to a <li> tag you can do the following:
<li style="background: green;">PROGRAM</li>
But this isn't really best practice because normally you want to keep your HTML and CSS separated. So in CSS you would do it like this:
li { background: green; }
or use hex color codes:
li { background: #00ff00; }
If you only want to change one specific <li> tag you can add a class to it:
<li class="precious">
and then apply a css rule to this class:
.precious { background: #00ff00; }
and only this <li> tag with the .precious class is going to get styled.
Live Example: http://jsfiddle.net/pulleasy/WEdmt/
You can also make your life a whole lot easier with the border-radius element. for what you are doing it would be:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
This will give you the same result. Also for example sake, you will need to add a height and a width to get some sort of result. so if that were the case you would need to do this:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
height: 100px;
width: 100px;
}
This will give you the result that I think you were looking for. If you are looking to use pixels instead of percents for a fluid layout, the you will need to use this. (Note this is only for the width, height and positioning).
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
position: absolute;
height: 10%;
width: 10%; /*Replace these percentiles with your width and height*/
}
I will assume that you know how to make the
An alternative to using hex code is using RGB / RGBA:
background-color:rgb(255,0,0);
background-color:rgba(255,0,0,0.5);
This gives you even more control over your color by adding alpha and transparency support, but unfortunately, it's not supported by some browsers (IE, namely, although I don't know about IE 10).
I have an <h2> title into a fixed with <div> (238px). When this page is rendered, the browser manage line breaks into the title to make the text fit the width (238px).
But the width property of the h2 element is still 238px, no matters where the line breaks are.
I want to set a border-bottom only under the text, and not under the full width of the h2 element, and I don't know how to achieve this using CSS.
You can see what I mean here : http://jsfiddle.net/np3rJ/2/
Thanks
I think this is what you need:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
h2 span {
position: relative;
padding-bottom: 5px;
}
h2 span::after{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
border-bottom: 1px solid #000;
content: ""
}
Working demo in jsFiddle
I used the technique described in this answer: Advanced CSS challenge: underline only the final line of text with CSS
I introduced a span into the H2 in order not to change the display attribute of it, but you could just as easily use the same technique with a display: inline on your H2. This method would allow the control of the actual line though rather than setting display: inline if needed
This works on Chrome.
h2 {
width: fit-content;
}
If you are willing to use display: table-cell, and pseudo-elements, you can have a pretty good solution (with some minor limitations).
The HTML does not change:
<div class="dossier_titre">
<h2>Horizon 2020, nouvelles opportunités</h2>
</div>
and you can apply the following CSS:
.zone_33 {
width: 238px;
padding: 0px;
margin: 0px;
}
.zone_33 .dossier_titre {
margin: 0px 0px 20px 0px;
}
.zone_33 h2 {
color: #616263;
font-size: 150%;
font-weight: lighter;
padding: 0px 0px 12px 0px;
background: none;
border-bottom: 1px solid grey;
display: table-cell;
text-transform: uppercase;
}
.zone_33 .dossier_titre:after {
content: "";
display: table-cell;
width: 100%;
}
For the <h2> element, set display: table-cell, and add a pseudo-element after .dossier_titre (the containing block for the header/title element). The pseudo-element is also a table-cell and has a width of 100% (this is the key).
Also, since h2 is no longer a block element, add your margins to .dossier_titre to maintain the visual spacing in our layout.
How This Works
I am creating a two-cell table with the second cell (the pseudo-element) having a width of 100%. This triggers the browser to calculate the shrink-to-fit width for the first cell (h2) that contains the title text. The first cell's width is thus the minimal needed to display the text. The bottom border is as long as the longest text line in the text block within the table-cell.
Limitations
table-cell is not supported in IE7 without a hack, but the work-around is fairly well known and can be found if needed.
If the title had many short words, you might get the line breaking in unexpected places. You would need to insert   to keep specific words together as needed.
Fiddle: http://jsfiddle.net/audetwebdesign/h34pL/
Maybe display: inline-block; Or display: inline; is what you need?
Why not try:
text-decoration:underline
?
EDIT
Just make a span around "OPPORTUNITÉS" with the underline.
<h2>Horizon 2020, nouvelles <span class="underline">opportunités</span> </h2>
.underline {
text-decoration:underline
}
Can try "text-underline-position" property instead of table-cell and border. Make it simple!
text-decoration: underline;
text-underline-position: under;
All you can do is put your h2 element text into span like this:
<h2><span>Horizon 2020, nouvelles opportunités</span></h2>
and in css remove border-bottom from .zone_33 h2 {} and put it like this:
.zone_33 h2 span{ border-bottom: 1px solid grey;}
by this border-bottom will come under full text.
Try this, (I think it will help you)
.heading {
position: relative;
color: $gray-light;
font-weight: 700;
bottom: 5px;
padding-bottom: 5px;
display:inline-block;
}
.heading::after {
position: absolute;
display:inline-block;
border: 1px solid $brand-primary !important;
bottom: -1px;
content: "";
height: 2px;
left: 0;
width: 100%;
}
You could put a border-bottom and change the width of your h2 so that the border length matches your h2 length. Adjust the width to the width of your h2, taking into consideration it's font-size. Then add a padding-bottom to your h2 and set it to your liking.
<h2>Cats</h2>
h2{
border-bottom: 5px solid black;
font-size: 16px;
padding-bottom: 5px;
width: 64px;
}
How would I go about adding a dynamic ".........." to a restaurant menu in CSS? Like in printed ones they have the whole
"our food is made of blah blah blah.............$24.99."
How would you do that in CSS? Or is this even possible?
The best solution is this:
<ul>
<li><p class="food">Chinese Food</p><p class="price">$5.99</p></li>
</ul>
then CSS to match (untested, but tweakable to get the effect)
li {
width: 300px;
height: 20px;
border-bottom: 1px dotted black;
background-color: white;
}
.food, .price {
height: 22px; //key: just a bit taller than the LI
background-color: white;
}
.food {
float: left;
}
.price {
float: right;
}
So it basically fixes the rectangle of the LI and draws a border on the bottom, then the price and food name cover it up dynamically with their width. YMMV with browsers, but perhaps a negative margin-bottom will get the li border-bottom obscured for sure by the P elements.
It's possible but not well supported. You want the :after psuedo-selector and the content rule. See here: http://www.quirksmode.org/css/beforeafter.html Note that IE gets a big fat F for implementation.
You can do it in javascript. Or by creative use of the border-type 'dotted'. Or maybe a repeating background, as Brooks suggests, which would work by giving your price and descriptions spans that you apply a background color to to cover the repeating background.
Update What that might look like:
<ul class="menu">
<li><span class="name">Yummy stuff</span> <span class="price">$400</span></li>
</ul>
With CSS like:
.menu { list-style-type:none;margin: 0 0 0; padding: 0 10px 0; }
.menu li {
display:block;
overflow:hidden; //contain the float
background-image: url(dots.gif);
background-repeat:repeat-x;
}
.menu .name { background-color:#ffffff; }
.menu .price { float:right; clear:none; background-color:#ffffff; }
Alex's answer has one great drawback — multiline text in the .food hides bottom line.
Also there is a good old answer: http://www.search-this.com/2007/11/26/css-a-recipe-for-success/ (demo)
Here is live demo of a little modified old solution (try to resize): http://cssdesk.com/BqR96
And modified css:
.restaurant_menu__list {
min-width: 320px; /* For mobile devices */
max-width: 500px; /* Custom max width for readbility */
}
.restaurant_menu__row {
border-bottom: 2px dotted #B5ABAB; /* Our dotted line, we can use border-image instead */
position: relative;
float: left;
line-height: 1.2em;
margin: -.9em 0 0 0;
width: 100%;
text-align: left;
}
.restaurant_menu__meal span
, .restaurant_menu__price
{
background-color: #FFF; /* For .restaurant_menu__row background rewriting */
}
.restaurant_menu__meal {
padding-right: 3em; /* Custom number for space between text and right side of .restaurant_menu__row; must be greater than .restaurant_menu__price max-width to avoid overlapping */
}
.restaurant_menu__meal span {
margin:0;
position:relative;
top: 1.6em;
padding-right:5px; /* Custom number for space between text and dotted line */
}
.restaurant_menu__price {
padding:1px 0 1px 5px;
position:relative;
top:.4em;
left:1px;/* ie6 rounding error*/
float:right;
}
And modified html:
<ul class="restaurant_menu__list">
<li class="restaurant_menu__row">
<!-- Inside div we need inline element, to handle multiline meals -->
<div class="restaurant_menu__meal"><span>Crab Cakes with corn, roasted red pepper, and ginger vinaigrette</span></div>
<span class="restaurant_menu__price">€25</span>
</li>
<li class="restaurant_menu__row">
<div class="restaurant_menu__meal"><span>French Onion Soup</span></div>
<span class="restaurant_menu__price">€32</span>
</li>
</ul>
That's really graphics, not text, even if it's normally done as ASCII-art with dots. Thus, a repeating background image might do the trick appropriately?
I am trying to create some simple menu links. I tried something like this:
div.menulinkboxaround
{
height: 25px;
}
a.menulinkbox
{
font-family: Verdana, Helvetica;
padding-left: 50px;
padding-left: 50px;
padding-bottom: 5px;
padding-top: 5px;
background-color: Green;
}
a.menulinkbox:hover
{
background-color: Red;
}
a.menulinkbox:visited
{
background-color: Yellow;
}
<div class="menulinkboxaround">Link 1</div>
<div class="menulinkboxaround">Link 2</div>
<div class="menulinkboxaround">Link 3</div>
<div class="menulinkboxaround">Link 4</div>
What i am trying to accomplish is to create menu elements that has a touch of style to em, so each link should be inside a div box with a padding 50 px on each side.
When i run this, they get clumped up on top of each other. I don't want to specify a width since the text inside the menu box should determine the size of it automatically.
Ex. (50px+text size+50px)
50px space (just green area) | Sample Text | 50px space (just green area)
Maybe this will help (since divs are block displayed elements by default):
div.menulinkboxaround { height: 25px; float: left; }
Try adding this:
a.menulinkbox
{
display: block;
}
Depending on whether you want this menu vertical or horizontal you may also want to add float: left; to div.menulinkboxaround.
As the previous answers suggest, you could put float:left on the menulinkboxaround.
It is difficult to tell from your description the desired effect, I am assuming you want the menu to be horizontal with 50px either side of the links.
With the code you currently have, the hover state only stretches in one direction, also as you are only specifying :hover it is not really as keyboard friendly as it would be if you specified :focus as well.
Also because you are setting the height in px as you increase the font size the text becomes clipped at the bottom. Not specifying the pseudo selectors on the link may also cause you later problems in Internet Explorer.
You could also tidy up the code a little to reduce the unnecessary classes and improve the semantics of the menu.
For example:
<style type="text/css">
ul.menu {
/* removing the browser defaults for margin padding and bullets */
margin: 0;
padding: 0;
list-style-type: none;
/* Now you have a sensible parent it is a good idea to put the font
family here, I have also added a fallback of sans-serif in the rare
case Helvetica and Verdana are not available on the users computer,
it might be best to set this on the body if you are using this font
site-wide
*/
font-family: Verdana, Helvetica, sans-serif;
/* To create symetry I am adding 25px to the right and left of the menu,
this will stay green even if the items inside are not
*/
padding: 0 25px;
background-color: green;
/* increacing the lineheight so the background color of the links does
not overflow the green of the menu behind it, for a simple menu like
this it is fine, a more complex or longer links that need to wrap I
suggest changing the method of implementation from display inline to
floating which is a bit more complex
*/
line-height:1.95;
}
/* because all the list items are inside this parent list you can use
the descendant selector to target them rather than adding a separate
class, you are saying all list items inside the unordered list that
has a class of menu
*/
ul.menu li {
/* telling the list items to behave like inline elements so they are
naturally on one line also removint the browser default margin and
padding
*/
display: inline;
margin: 0;
padding: 0;
}
ul.menu a:link,
ul.menu a:visited,
ul.menu a:hover,
ul.menu a:focus,
ul.menu a:active {
/* you can combine all your padding rules together in the order
Top Right Bottom Left, I remember this like it kinda spells TRouBLe :)
*/
padding: 5px 25px 5px 25px;
background-color: green;
/* setting the color to white because the default link color of blue
is not that visible against green
*/
color: white;
}
/* adding the :focus selector to make this more keyboard accessible */
ul.menu a:hover,
ul.menu a:focus {
background-color: red;
color: black;
}
ul.menu a:visited {
background-color: yellow;
color: black;
}
</style>
</pre>
<ul class="menu">
<!-- Putting these all on one line because we are making
them display:inline so the spaces get counted and there will
be a gap otherwise -->
<li>Link 1</li><li>Link 2</li><li>Link 3</li>
</ul>
I have tested this in recent versions of FF, Opera and Safari, and IE6 IE7 and IE8
<style type="text/css">
ul.menu {
margin: 0;
padding: 0;
list-style-type: none;
font-family: Verdana, Helvetica, sans-serif;
padding: 0 25px;
background-color: green;
/* overflow hidden clears the internal floated links and zoom 1
kicks IE into doing the same, I suggest you move the zoom: 1
into an IE stylesheet using conditional comments
*/
overflow: hidden;
zoom: 1;
}
ul.menu li {
display: inline;
margin: 0;
padding: 0;
}
ul.menu a:link,
ul.menu a:visited,
ul.menu a:hover,
ul.menu a:focus,
ul.menu a:active {
padding: 5px 25px 5px 25px;
background-color: green;
color: white;
/* setting the links to float left and giving them display block as
well explicitly, this is so that the vertical padding of 5px gets
applied, inline elements can only have horizontal margin and padding,
and since we are floating them they now take up 0 vertical height in
the document which is why we needed to clear the float on the
surrounding menu
*/
display: block;
float: left;
}
ul.menu a:hover,
ul.menu a:focus {
background-color: red;
color: black;
}
ul.menu a:visited {
background-color: yellow;
color: black;
}
</style>
<ul class="menu">
<li>Link 1</li><li>Link 2</li><li>Link 3</li>
</ul>
This second method is much more reliable, deals with wrapping links nicer and is generally a better solution but a bit harder to explain.
If you didn't want the menu to fill the full width of the screen just as long as the text takes up, regardless of which method you are using above, I suggest you put float: left and clear: both on the ul.menu which should shrink to the width it needs to take up
I hope this helps
sample code below (credit to other answers)
div.menulinkboxaround
{
height: 25px;
float: left;
}
a.menulinkbox
{
font-family: Verdana, Helvetica;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 5px;
padding-top: 5px;
background-color: Green;
}
a.menulinkbox:hover
{
background-color: Red;
}
a.menulinkbox:visited
{
background-color: Yellow;
}
<div class="menulinkboxaround">Link 1</div>
<div class="menulinkboxaround">Link 2</div>
<div class="menulinkboxaround">Link 3</div>
<div class="menulinkboxaround">Link 4</div>