So I am trying to get this to working somthing like a List Bullet, but at the END of the Navigation Button.
I am having PROBLEMS WITH the Black Triangle positioning itself too far up. It raises higher than the text I have (w/ black BG).
Below is an example of my issue.
http://dabblet.com/gist/3483670
I have tried alot of different things, but I am completely stumped.
Probably something silly I am overlooking, but it might need a serious of work arounds I am not aware of.
Thanks for all the help.
Incase the Link does not work for you. See Below.
CSS
a {font: 19px/26px 'Exo',Arial,sans-serif;
list-style: none outside none;
margin: 0 0 0 -10px;
padding: 0 0 58px;
font-weight:100;
text-transform: uppercase;
width: 100%;
text-decoration:none;}
a[rel="catagory"] { background:#000000; padding:0 5px 0 5px; color:#BAFF32;}
.triangle { width: 0;
height: 0;
background:no-repeat right center;
border-top: 0px solid transparent;
border-bottom: 25px solid transparent;
border-left: 15px solid black;
display:inline-block;}
HTML
<span class="plus">+</span> <span>HOME</span><span class="triangle"></span>
You can add
a[rel="catagory"] {
vertical-align:middle;
display:inline-block;
width:auto;
line-height:25px;
}
.triangle {
vertical-align:middle
}
Explanation:
The part which aligns them is
a[rel="catagory"] {vertical-align:middle;}
.triangle {vertical-align:middle}
But anchor's height is 22px, so we need
a[rel="catagory"] {
display:inline-block;
line-height:25px;
}
in order to make the height 25px.
But you have another rule (I wonder why):
a{width:100%}
Before setting display:inline-block the anchor has display:inline, so that rule does nothing.
But now it works and we want to disable it, so we need
a[rel="catagory"] {
width:auto;
}
Related
Have a rather simple spoiler code for my website. It has sort of large border radii, which is fine when the element is expanded, but not so much when shrunk. Is there some way I can make the bottom border radii just go to 0px when its shrunk, or is that just not a thing with CSS?
And I would, yes, like it to be a CSS solution. It's no real problem for me to have to shrink the border radius, but y'know, might as well try to not if its possible.
I am not sure how to make the javascript my code uses work on stackoverflow (it just gives me errors), so here is a screenshot of what it looks like expanded.
.panel {
background-color: #F9F9F9;
border: 1px solid gray;
border-radius: 22px 22px 10px 10px;
font-family:arial;
}
.panel>h3 {
font-size:14px;
background-color:#820D1A;
color:#ededed;
border-bottom:1px solid #000;
text-align:left;
padding:4px;
padding-left:20px;
margin:0px;
border-radius: 21px 21px 0px 0px;
}
.panel>div {
padding:4px;
}
.panel>div:after {
display: block;
clear: both;
}
<div class="panel">
<h3>(PARAM1)<span style="font-size:10px;margin-left:6px;">(Click to toggle)</span></h3>
<div style="display:none">(PARAM2)</div>
</div>
.panel {
background-color: #820D1A;
border: 1px solid gray;
border-radius: 22px 22px 10px 10px;
font-family: arial;
}
.panel>h3 {
font-size:14px;
color:#ededed;
text-align:left;
padding-left:20px;
margin:5px;
}
.panel>div {
padding:4px;
background-color: #FFF;
}
.panel>div:after {
display: block;
clear: both;
}
<div class="panel">
<h3>(PARAM1)<span style="font-size:10px;margin-left:6px;">(Click to toggle)</span></h3>
<div style="display: none">(PARAM2)</div>
</div>
Does this look closer to what you are trying to achieve? There were two padding rules on the h3 and I was wondering why you have a background on there as well? Would this not work with your Javascript?
Eh, after messing around I came to the answer that no, it isn't possible. I just resolved to decrease the top border radii by 5 pixels (making them 17px) so that it'd look normal open or closed.
Thank you to everyone who put forth some help, though~
I'm using Wordpress and their twentythirteen theme. With this theme I would like to position and align the site title and tagline text to the upper right of the header. When I try to do so it's always positioned under my logo for some reason. I played with the position CSS property with no luck, it's still positioned under the logo.
Sample of the CSS file
.site-title {
font-size: 30px;
line-height: 0.5;
padding: 5px 0 10px;
text-align:right;
position: relative;
}
.site-description {
font: 300 italic 18px "Source Sans Pro", Helvetica, sans-serif;
text-align:right;
}
.site-header {
margin:10px auto 0 auto;
max-width:980px;
padding:0;
background-color:#ffffff;
background-size: 980px auto;
border-top:2px solid #efefef;
border-bottom:1px solid #cdcdcd;
box-shadow: 0 3px 3px #dedede;
-moz-box-shadow: 0 3px 3px #dedede;
-webkit-box-shadow: 0 3px 3px #dedede;
-o-box-shadow: 0 3px 3px #dedede;
}
.site-header .site-title:hover {
text-decoration: none;
}
.site-header .home-link {
min-height: 50px;
}
.header-logo {
max-width:60%;
display:block;
padding-top:3px;
position:relative;
}
Here's my testing website so you can see exactly what I'm talking about:
mywptestsite.is-great.org
What am I missing here?
Thanks in advance,
Kim
The problem is that you are encapsulating your site title in an h1 tag, so it is positioning it in a new line.
You could fix the issue by putting both your logo and your site title in the same <div> element, and add float: left; to your header-logo class, and float: right; to your site-title class.
You can try this - add these few lines to title and tagline css classes:
.site-title {
position:absolute;
top:20px;
right:20px;
}
.site-description {
position:absolute;
top:50px;
right:110px;
}
You can change top and right values to get desired positions of course...
You can use float on the image, title, and description to get those two elements onto the right. You will also need to use a clearfix technique on .home-link to get the element to wrap around all floated elements.
CSS
.header-logo { float: left; }
.site-title{ float: right; clear: none; }
.site-description { clear: right; }
Is it possible to create a border like the flowing image with css? Any hints will be appreciated
#sidebar h4, #sidebar-alt h4 {
background:url('images/widget-title-bg.png');
color: #333333;
font-size: 22px;
font-family: Arial, sans-serif;
font-weight: normal;
margin: 0 0 10px 0;
padding: 7px 0px 11px 0px;
}
EDIT: Made some changes according to your comments. Try:
<h1 id="progress">
<i></i>Recent Posts
</h1>
#progress {
display: block;
max-width: 200px;
min-width: 150px;
position: relative;
margin: 50px auto 0;
padding: 0 3px;
border-bottom: 10px solid #ECECEC;
font: bold 26px 'Dancing Script', cursive;
}
#progress i {
display: block;
position: absolute;
width: .8em;
height: 10px;
left: 0;
bottom: -10px;
background-color: #4287F4;
}
http://jsfiddle.net/userdude/z45QJ/4/
I'm not a big fan of the position manipulation, but all browsers should support and display this nearly identically, the only possible problem being the font's displa may be slightly differently in different browsers. However, IE7-9 should interpret everything else just fine.
Too bad the whole wuuurld isn't on WebKit:
<div id="progress"></div>
#progress {
width: 300px;
height: 10px;
border: none;
background-color: #ECECEC;
border-left: solid #4287F4;
box-shadow:inset 2px 0 white;
-webkit-animation: slide 10s linear infinite;
}
#-webkit-keyframes slide {
from {
border-left-width: 0;
width: 300px;
} to {
border-left-width: 300px;
width: 0;
}
}
http://jsfiddle.net/userdude/z45QJ/1
It could be adjusted to go both ways. However, it only works on WebKit browsers (Chrome, Safari [?]). If that's ok, let me know and I'll add the return trip.
There are four ways to do it. I demonstrate four ways in this JSFiddle, and here are some explanations.
If you're not sure, just use Method B.
Method A
Method A has the advantage that it's the most compatible but the disadvantage that it requires extra HTML. Basically, you're giving an outer div the blue border and an inner div the white border. Your HTML will look something like this:
<div class="methodA">
<div class="container">
Method A
</div>
</div>
Your CSS will look like this:
.methodA {
border-left: 10px solid blue;
}
.methodA .container {
height: 100%;
border-left: 10px solid white;
}
Method B
Method B has the advantage that there's no extra HTML, but the disadvantage is that it won't work in IE before version 9.
.methodB {
border-left: 10px solid blue;
-webkit-box-shadow: inset 10px 0 white;
-moz-box-shadow: inset 10px 0 white;
box-shadow: inset 10px 0 white;
}
You can mitigate IE's compatibility issues using CSS3 PIE, which makes box shadows behave in Internet Explorer (along with other CSS3 features).
Methods C and D
This JSFiddle shows two other methods, which I won't describe in as much detail, but...
Method C makes the blue border a shadow. As a result, it can "cover" other elements and it also changes the size of the element. I don't love this solution, but it might work for you. It also suffers the compatibility issues of Method B.
Method D puts two divs inside of the element: one for the blue border and one for the right border.
it is not really complicate and no extra HTML is needed.
h4:after {
display:block;
content: '';
height:4px;
width: 1px;
border:0px solid #ececec;
border-left-width: 10px;
border-left-color:#4287F4;
border-right-width: 90px;
}
http://jsfiddle.net/N27CH/
Check this link Visit
(http://jsfiddle.net/qD4zd/1/).
See if it helps. This tells you about the application of gradient. See how it is done.
Also why not use directly the images that you want as the border.
Check out for "Gradient" in Css. This might answer your question.
I studied some usage of "canvas" tag in HTML5. That is preety much informative about gradient specification and is also more readable than the traditionl HTML4. So for this question i also want to request the questioner to look at the "canvas" tag in HTML5. check the link below.
Link: http://html5center.sourceforge.net/Using-Unprefixed-CSS3-Gradients-in-Modern-Browsers
Link: http://www.sendesignz.com/index.php/web-development/111-how-to-create-gradient-and-shadow-effect-in-html5-canvas
Second link is more awesome. Cheers.:)
I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is absolute?
div a:visited, #homeheader a{
text-decoration:none;
color:black;
margin-right:5px;
}
div a:hover{
background-color:#D0DDF2;
border-radius:5px;
border:1px solid #102447;
}
div li{
padding:0;
margin:0px 10px;
display:inline;
font-size:1em;
}
<div>
<ul>
<li>this</li>
<li>that</li>
<li>this again</li>
<li>that again</li>
</ul>
</div>
I made a JS Fiddle demo here.
You can add a transparent border to the non-hover state to avoid the "jumpiness" when the border appears:
http://jsfiddle.net/TEUhM/3/
#homeheader a:visited, #homeheader a{
border:1px solid transparent;
}
You can also use outline, which won't affect the width i.e. so no "jump" effect. However,support for a rounded outline may be limited.
You could use a box shadow, rather than a border for this sort of functionality.
This works because your shadow doesn't 'take size in the DOM', and so won't affect the positioning, unlike that of a border.
Try using a declaration like
box-shadow:0 0 1px 1px #102447;
instead of your
border:1px solid #102447;
on your hover state.
Below is a quick demo of this in action:
DEMO
#homeheader a:visited,
#homeheader a {
text-decoration: none;
color: black;
margin-right: 5px;
}
#homeheader a:hover {
background-color: #D0DDF2;
border-radius: 5px;
box-shadow: 0 0 1px #102447;
}
#homeheader li {
padding: 0;
margin: 0px 10px;
display: inline;
font-size: 1em;
}
<div id="homecontainer">
<div id="homeheader">
<ul>
<li>this
</li>
<li>that
</li>
<li>this again
</li>
<li>that again
</li>
</ul>
</div>
</div>
Add a margin of 1px and remove that margin on hover, so it is replaced by the border.
http://jsfiddle.net/TEUhM/4/
After taking a long time pressure i found a cool solution.
Hope that it will help others.
on the add the folloing code :
HTML
<div class="border-test">
<h2> title </h2>
<p> Technology founders churn rate niche market </p>
</div>
CSS
.border-test {
outline: 1px solid red;
border: 5px solid transparent;
}
.border-test:hover {
outline: 0px solid transparent;
border: 5px solid red;
}
Check live : Live Demo
Hope it will help.
No one has mentioned it here, but the best and simplest solution to this in my opinion is to use "box shadow" instead of borders. The magic is on the "inset" value which allows it be like a boarder.
box-shadow: inset 0 -3px 0 0 red;
You can offset the X or Y to change top/bottom and use -negative value for opposite sides.
.button {
width: 200px;
height: 50px;
padding: auto;
background-color: grey;
text-align: center;
}
.button:hover {
box-shadow: inset 0 -3px 0 0 red;
background-color: lightgrey;
}
<div class="button"> Button </div>
You can use box-shadow which does not change your box-size, unlike border.
Here is a little tutorial.
Just add the following code into your css file
#homeheader a {
border:1px solid transparent;
}
The CSS "box-sizing" attribute fixed this problem for me. If you give your element
.class-name {
box-sizing: border-box;
}
Then the width of the border is added to the inside of the box when the browser calculates its width. This way when you turn the border style on and off, the size of the element doesn't change (which is what causes the jittering you observed).
This is a new technology, but the support for border-box is pretty consistent. Here is a demo!
The easiest method I found was using 'outline' instead of 'border'.
#home:hover{
outline:1px solid white;
}
instead of
#home:hover{
border:1px solid white;
}
Works the best!
https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm
Add a negative margin on hover to compensate:
#homeheader a:hover{
border: 1px solid #102447;
margin: -1px;
}
updated fiddle
In the fiddle the margin: -1px; is a little more complex because there was a margin-right getting overridden, but it's still just a matter of subtracting the newly-occupied space.
I too was facing the same problem. The fix mentioned by Wesley Murch works! i.e. adding a transparent border around the element to be hovered.
I had a ul on which :hover was added to every li. Every time, I hovered on each list item, the elements contained inside li too moved.
Here is the relevant code:
html
<ul>
<li class="connectionsListItem" id="connectionsListItem-0">
<div class="listItemContentDiv" id="listItemContentDiv-0">
<span class="connectionIconSpan"></span>
<div class="connectListAnchorDiv">
Test1
</div>
</div>
</li>
</ul>
css
.listItemContentDiv
{
display: inline-block;
padding: 8px;
right: 0;
text-align: left;
text-decoration: none;
text-indent: 0;
}
.connectionIconSpan
{
background-image: url("../images/connection4.png");
background-position: 100% 50%;
background-repeat: no-repeat;
cursor: pointer;
padding-right: 0;
background-color: transparent;
border: medium none;
clear: both;
float: left;
height: 32px;
width: 32px;
}
.connectListAnchorDiv
{
float: right;
margin-top: 4px;
}
The hover defn on each list item:
.connectionsListItem:hover
{
background-color: #F0F0F0;
background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7);
box-shadow: none;
text-shadow: none;
border-radius: 10px 10px 10px 10px;
border-color: #AAAAAA;
border-style: solid;
}
The above code used to make the containing elements shift, whenever I hovered over connectionsListItem. The fix was this added to the css as:
.connectionsListItem
{
border:1px solid transparent;
}
Use :before to create the border, that way it won't modify the actual content and gives you more freedom. Check it out here:
http://codepen.io/jorgenrique/pen/JGqOMb
<div class='border'>Border</div>
<div class='before'>Before</div>
div{
width:300px;
height:100px;
text-align:center;
margin:1rem;
position:relative;
display:flex;
justify-content:center;
align-items: center;
background-color:#eee;
}
.border{
border-left:10px solid deepPink;
}
.before{
&:before{
content:"";
position:absolute;
background-color:deepPink;
width:10px;
height:100%;
left:0;
top:0;
}
&:hover{
background-color:#ccc;
&:before{
width:0px;
transition:0.2s;
}
}
}
Be careful if you also use padding.
In my case, I had a 5px padding inside the hover defn. It should be moved inside the actual class of the element you want to hover over.
Code snippet
First i will show you the problem, wich only happens on IE6/IE7
As you can see, when the length of the innerHtml it's not long, no problem; but when it's 'longer' the sprite set as bg image gets repeated and the text jumps to the next line...
now, the CSS
.contButton {
list-style: none;
float: right;
}
.contButton p {
float: left;
display: inline; /*For ignore double margin in IE6*/
margin: 0 0 0 10px !important;
}
.contButton a {
text-decoration: none !important;
float: left;
color: #FFF;
cursor: pointer;
font-size: 14px !important;
line-height: 21px;
font-weight: bold !important;
}
.contButton span {
margin: 0px 10px 0 -10px;
padding: 3px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
}
/*ESTADO NORMAL AZUL*/
.contButton p a {
background: url(../nImg/spriteBotones.png) no-repeat right -214px;
_background: url(../nImg/spriteBotones.gif) no-repeat right -214px;
color: #FFF;
}
.contButton p a span {
background: url(../nImg/spriteBotones.png) no-repeat left -214px;
_background: url(../nImg/spriteBotones.gif) no-repeat left -214px;
}
And the Html:
<div class="">
....
<div class="contButton mt10">
<p><a tabindex="" title="acceder" href="#"><span>ver disponibilidad</span></a></p>
</div>
...
</div>
This is the bg Image.
![the sprite][2]
Tried with:
<!--[if IE lte 7]>
<style type="text/css">
/*
.contNombrePrecioHtl .contButton p a{ height:20px; }
.contNombrePrecioHtl .contButton p a span{ height:20px; width:auto; } */
</style>
<![endif]-->
But that didn't solve the problem...
PS: class="mt10" it's only a margin-top:10px;
Any idea how to solve this for the glorious IE6/7?
Try adding white-space: nowrap to .contButton.
change this:
.contButton span {
margin: 0px 10px 0 -10px;
padding: 3px 8px 5px 18px;
position: relative; /*To fix IE6 problem (not displaying)*/
float:left;
white-space: nowrap;
}
I don't think it is a problem with either IE versions, it's probably just the newer browsers being less strict about this particular thing. I haven't tested anything, but "display:inline-block" has helped me sometimes. Still it doesn't seem like the most effective solution. The width seems to be limiting here, you shouldn't give the thing a fixed width if you don't want the text to "jump" into a second line...
can you try to add overflow: hidden to each parent of element with float: left? in this case you will have to add it to each div, p and a. I am not sure whether your actual code is optimal.
Moreover, float: left; and display: inline together make no sense. This might be the reason of the strange behaviour. Delete display: inline (remember about adding overflow: hidden to its parent) and it should work.
Haven't tested though.
UPDATE:
apparently as the author of the question mentions float:left + display: inline fixes IE6 double margin bug for floating elements.
defining dimensions for elements like p oder span is always somewhere between tricky and impossible, because they are inline elements. I'd recommend modifying the surrounding block element div.contButton.
In addition to height you should set overflow to hidden:
.contButton {
height:20px;
width:219px;
overflow: hidden;
}