My client has provided me with a design for their site and it includes a standard menu with a downward triangle on the active item (see image). I don't know where to start...what's the best way of going about getting this effect?
Here's a tutorial on generating arrows, triangles and other shapes using CSS: http://www.howtocreate.co.uk/tutorials/css/slopes
Also have a look at how CSS Arrow Please! generates its arrows: http://cssarrowplease.com/
Here's a little example I just knocked up:
HTML:
<div class="active">
<div>Active Menu Item</div>
</div>
CSS:
.active > div {
width: 150px;
padding: 10px;
background-color: #f00;
color: #fff;
text-align: center;
}
.active::after {
display:block;
content: "";
font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #f00;
border-left: 85px solid #fff;
border-right: 85px solid #fff;
}
JS Fiddle: http://jsfiddle.net/dmf3s97m/
Related
I have button and text on the same line. They have different font size. Button has padding. In browser it seems that text is on the same line, but the padding goes below the big text. I want the bottom button padding be on the same line as the big text. In other words, shift text a bit down or button a bit up.
Here's my CSS
.bigtext {
font-size: 200%;
border-bottom: 1px solid #999;
}
.button-container {
display: inline-block;
}
.button-container button {
font-size: 40%;
padding: 5px;
border-radius: 5px;
border: 1px solid #d3d3d3;
}
Fiddle: http://jsfiddle.net/7ydtgb7x/
If you want a really simple way to do this you can just add "position: relative;" and "bottom: 5px;" to your button.
If you need any help let me know by adding a comment. There are three kind of positions:
Relative which follows the flow.
Absolute that almost follows the flow.
And Fixed which gets completely out of any flow.
.bigtext {
font-size: 200%;
border-bottom: 1px solid #999;
}
.button-container {
display: inline-block;
}
.button-container button {
font-size: 40%;
padding: 5px;
border-radius: 5px;
border: 1px solid #d3d3d3;
position: relative;
bottom: 5px;
}
<div class="bigtext">
Test
<div class="button-container">
<button>Button</button>
</div>
</div>
for a quick fix:
transform:translateY(-5px);
fiddle
Here is a possible solution for you:
wrap your Test with a div, then both child's of .bigtext are (already) displayed inline-block, just make sure they are vertical-align:top.
Align vertical as well the button like this:
.button-container button { vertical-align:top}
Finally "reset" the line-height for your container .bigtext with: line-height:1
Here is a snippet with full code:
.bigtext {
font-size: 200%;
border-bottom: 1px solid #999;
line-height: 1
}
.bigtext > div {
display: inline-block;
vertical-align: top;
}
.button-container button {
font-size: 40%;
padding: 5px;
border-radius: 5px;
border: 1px solid #d3d3d3;
vertical-align: top
}
<div class="bigtext">
<div class="text-container">Test</div>
<div class="button-container">
<button>Button</button>
</div>
</div>
Use either transform: translateY(-10px); or margin-bottom: 10px;
Trying to display a list of upcoming events, showing the date(s), an icon, and a brief description. All of these should line up side by side, like columns, but when the description wraps, it falls down to the next line. This is probably insanely simple, but I've tried various combinations of float and inline-block with no success.
<div class="events">
<ul class="list-unstyled">
<li>
<div class="event-date">Jun 16 -
<br />Jun 27</div><i class="glyphicon glyphicon-star">a</i>
<div class="event-text">Opening Day for Faculty and Staff</div>
</li>
<li>
<div class="event-date">Sep 10 -
<br />Oct 08</div><i class="glyphicon glyphicon-star">b</i> <div class="event-text">Coffee with a Cop, 7:45 a.m. # Cafeteria Courtyard</div></li>
<li>
<div class="event-date">Mar 12</div><i class="glyphicon glyphicon-ban-circle">c</i> <div class="event-text">Labor Day: Campus Closed</div></li>
</ul>
.list-unstyled {
list-style: none outside none;
padding-left: 0;
}
.events li {
border-bottom: 1px solid #4188d6;
margin-bottom:10px;
}
.event-date {
background-color: #74a2c2;
border-radius: 3px;
color: #ffffff;
display:inline-block;
font-weight: bold;
margin: 0px 10px 10px 10px;
padding: 5px;
width: 65px;
vertical-align:top
}
.event-text {
vertical-align:top;
display:inline;
border:1px solid green
}
i {
display:inline-block;
vertical-align:top;
border:1px solid red
}
http://jsfiddle.net/d4h2A/1/
Using your existing HTML (good as is), try the following CSS:
.list-unstyled {
list-style: none outside none;
padding-left: 0;
}
.events li {
border-bottom: 2px solid #4188d6;
margin-bottom:10px;
overflow: auto;
}
.event-date {
background-color: #74a2c2;
border-radius: 3px;
color: #ffffff;
font-weight: bold;
margin: 0px 10px 10px 10px;
padding: 5px;
width: 65px;
float: left;
}
.event-text {
overflow: auto;
border: 1px dotted gray;
}
i {
float: left;
vertical-align:top;
border:1px solid red;
margin-right: 10px;
}
See demo: http://jsfiddle.net/audetwebdesign/y54Zb/
To allow for a fluid width of .event-text, start by using float: left for .event-date and i (optinally, add a right margin as needed).
To contain the floated elements within the li blocks, use overflow: auto.
Finally, apply overflow: auto for .event-text to keep the text from wrapping around the floated elements.
The net result is that as you shrink the window width, the text will start wrapping at the left edge next to the icon. As you expand the window, the text will simply stay on a single line for a wide enough window (use max-width if this is an issue).
You might want to set a min-width for the text block depending on your layout design.
I want to create a navigation bar where the text is centered, but my CSS code places the hyperlink at the top corner of the li as seen in the image.
CSS:
#navigation {
clear: both;
margin: 0 auto 5px;
margin-top: 0;
height: 6%;
padding: 0 5px;
position: relative;
z-index: 1;
}
#navigation a {
height: 10%;
width: 50px;
color: red;
vertical-align: center;
text-align: center;
text-decoration: bold;
}
li {
border-top: solid;
border-right: solid;
border-left: solid;
border-bottom: none;
padding-left: 1px;
height: 51px;
width: 18%;
background-image: url('../images/tab-selected.png');
background-repeat: repeat-x-y;
border-color: #F0F0F0;
display: inline-block;
padding-left: 1px;
}
HTML:
<nav id="navigation">
<ul>
<li >overview</li>
<li >overview</li>
</ul>
</nav>
There are various ways of vertically center something.
If you KNOW the words of the links and know they will not have a line break, you can add line-height:51px; to the anchor (which is the same height of the LI).
Here's the fiddle: http://jsfiddle.net/vMLpL/
By the way, tips for you:
For the border, you can use border:1px solid #f0f0f0; then just give none to bottom, like border-bottom:none; instead of declaring all sides.
When you want a BG to repeat both X and Y, the background-repeat is repeat only, not repeat-x-y.
For the vertical-align, there is no center. It's top, middle, bottom and baseline. But it work only for inline elements regard to other inline elements besides or for display:table-cell elements (which will work like a td's valign="middle" atribute).
Try this:
Remove the following from your "li" selector:
height: 51px;
Add the following to your "li" selector:
text-align: center;
line-height: 51px;
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Formatting an <li> element within a <div>
The facebook and twitter elements are not aligned. I want them to be positioned perfectly, one above the other. Please can you help?
Here's my code:
#floating-box {
width: 65px;
height:auto;
background-color: #484848;
margin: 54px 10px 0px 623px;
position:absolute;
z-index:1;
text-align: justify;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
border-right: 1px solid #484848;
}
.social {
position : relative;
list-style-type : none;
margin-left: 2px;
}
.social li a {
float: left;
padding: 1px 5px 5px 0px;
margin: 0px 0px 3px 0px;
display: inline;
}
The HTML that uses this CSS is:-
<div id="floating-box">
<img src="likeusnow.jpg" />
<ul class="social"><!-- Facebook Like/Share Button -->
<li><a name="fb_share" type="box_count" rel="nofollow" share_url="http://www.mysite.com"></a>
</li>
<li>
Tweet
</li>
</ul>
try display: inline-block; instead
Ok I am making a lot of assumptions on this one.
Assumptions
You are using the vertical Facebook share (which has been deprecated, so I'm demonstrating with the Facebook Like Button)
Your are using the similarly styled Twitter share, also with the vertical count.
This is supposed to be a modal dialog that pops up in the middle of the screen.
The image "likeusnow.jpg" is just the text "Like Us Now"
I'd float the <li> elements rather than the <a>'s. Styling the <a>'s will not matter since their content is an <iframe>. It's the fixed width of the div that is getting you into trouble. While the buttons are supposed to be floated left, there is not enough room and the Twitter button is being bumped below the Facebook one.
CSS:
#floating-box {
position:absolute;
background-color: #484848;
margin: 54px 10px 0px 623px;
z-index:1;
text-align: justify;
border: 1px solid #000;
border-right: 1px solid #484848;
padding: 15px;
}
.social {
position: relative;
list-style: none;
margin-left: 2px;
padding: 0;
}
.social li {
float:left;
margin-left: 10px;
}
I made a demo using jsFiddle and inserted placeholder Facebook Like and Twitter Share plugins here.
I am working on a non-profit site that has a press information page. I am using thumbnail photos as links to the larger images for download.
For the thumbnail images I set the border to 4px white in the off state and then 4px gray in the hover state. I works nicely in Safari but is slightly offset in Firefox in the hover state.
Here is the html:
<div id="press-photos">
<a class="pic" href="_downloads/nativity-1-full.jpg"><img src="_images/nativity-1-thumb.jpg" alt="nativity-1-thumb"/></a>
<a class="pic" href="_downloads/nativity-2-full.jpg"><img src="_images/nativity-2-thumb.jpg" alt="nativity-2-thumb"/></a>
<a class="pic" href="_downloads/nativity-3-full.jpg"><img src="_images/nativity-3-thumb.jpg" alt="nativity-3-thumb"/></a>
<a class="pic" href="_downloads/nativity-4-full.jpg"><img src="_images/nativity-4-thumb.jpg" alt="nativity-4-thumb"/></a>
</div>
Here is the CSS:
#press-photos { clear: left; border: 1px solid #7c0924; background-color: #fff; }
#press-photos a.pic:link,
#press-photos a.pic:visited {
width: 216px;
height: 145px;
margin: 20px;
display: block;
border: 4px solid #fff;
text-decoration: none;
color: transparent;
}
#press-photos a.pic:hover,
#press-photos a.pic:active {
width: 216px;
height: 145px;
margin: 20px;
border: 4px solid #cbcbcb;
color: transparent;
}
Question is: how do I get the border to line up properly in FF?
Thanks.
img { border:0px; }
All of the thumbnails have a border, and that is what is displacing them.
This happens because the a tag has a width and height lower than img size.