I'm trying to embed some CSS3 for my website buttons using custom CSS3 button generator (http://www.cssportal.com/css3-button-generator/). However, it creates some annoying issues. The whole div is pushed downwards! The CSS of the div that includes it is:
.login {
position: absolute;
right: 10px;
top: 10px;
color: #DDD;
font-size: 14px;
}
And the CSS of the button:
.button {
font-family: Arial;
color: #ffffff;
font-size: inherit;
padding: 7px;
text-decoration: none;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
border: solid #003366 2px;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#42aaff), to(#001a33));
background: -moz-linear-gradient(top, #42aaff, #001a33);
}
If you want to check the html of the website itself, it's the #navbar of http://www.nosfistis.com/
The CSS rule padding: 7px is causing it to be pushed down. Currently you have all these elements pushed down 10px using absolute positioning. You'll either need to pull that one button up with negative margins (bad idea usually) or push all the others down. Generally try to keep your elements the same height in situations like this (ie: add padding to smaller elements).
Related
Apparently the text is positioned to the right and I do not know why. Earlier the header was working but now it does not.
.news-box {
background: black;
width: 500px;
height: 450px;
top: 50%;
left: 20%;
transform: translate(20%, 50%);
border-radius: 20px;
box-shadow: 2px 5px 8px 10px rgb(0,0,0,0.5);
}
.news-box > h2 {
color: white;
text-align: center;
padding-top: 10px;
text-transform: uppercase;
-webkit-text-stroke: 0.5px rgb(0,0,0,1);
text-shadow: 2px 2px 4px rgb(0,0,0,0.8);
}
Since i don't have the full code (including html), i can only suggest to put the text inside a <span>text</span> and use styling of float:left (for example).
Another option would be to put it inside a <span> or a <div> and set "text-align:left/right" (whatever works for you)
i have searched over an hour right now after this. Im trying to find how to style a div's apperance.
http://i.gyazo.com/b3e39c4d80c74e559e832c4d22bb87c2.png
The picture show a black div with a "arrow" side on the left. How do you make those things?
here is a quick way to accomplish this.
jsfiddle demo
css
#frame{
width:90%;
border: 20px solid lightblue;
background:black;
}
.title{
font-size:3em;
position:absolute;
color:white;
top: 60px;
margin-left:80px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid lightblue;
}
html
<div id="frame">
<div class="arrow-right"></div>
<div class="title">Some text here!</div>
</div>
I would use an inverted arrow (border hacks using top and bottom border) to achieve this. You can also make it part of a pseudo-element so that your markup remains clean.
#import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200);
body {
background: #BCDEB1;
}
h1 {
font-family: 'Yanone Kaffeesatz';
float:right;
background: black;
position: relative;
color: white;
padding: 0.5em 0.5em;
line-height: 1em;
margin-right: 0.1em;
box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2);
}
h1:after {
content: '';
position: absolute;
right: 100%;
top: 0;
border: 0 solid black;
border-left: 0.5em solid transparent;
border-top-width: 1em;
border-bottom-width: 1em; /* 1 + 1 = 2. The parent is 1em line height + 0.5em top padding + 0.5em bottom padding */
box-shadow: 0.1em 0.1em 0em 0 rgba(0, 0, 0, 0.2);
}
<h1>Administration and etc?</h1>
Because the triangle is angled, it may be worth looking into SVG as the content of a :before pseudo element.
Here is a codepen that I almost completed for you using only CSS. http://codepen.io/anon/pen/dPVERJ
You may have to tweak it a bit to get it looking exactly like the image.
I used cssarrowplease to generate the basic arrow and tweaked it from there.
Also see http://css-tricks.com/snippets/css/css-triangle/
I would google something like this before asking here, this is a problem that has been figured out many times over.
I'm trying to get some elements to move slightly when the user mouses over them (they form buttons on a navbar). However, my code doesn't seem to work. The text in the boxes should also be clickable but that doesn't seem to work either. Here's the code:
#navbar {
position: relative;
width: max-width;
height: auto;
margin-left: 2%;
}
.nav_tab{
background-image: url('dark_exa.png');
border: 2px dashed grey;
/* rounded borders of 5px in firefox */
-moz-border-radius:10px;
/* rounded borders of 5px in chrome and other browsers */
-webkit-border-radius:10px;
/* rounded borders of 5px in browsers that support css3 */
border-radius:10px;
/* shadows for different browsers */
-moz-box-shadow: 0 0 0 3px black, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 3px black 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 3px black, 2px 1px 6px 4px rgba(10,10,0,.5);
position: relative;
height: auto;
width:20%;
z-index: -1;
margin-left: 2%;
margin-right: 2%;
top: -30px;
display: inline-block;
}
.nav_tab:hover{
position: relative;
top: +5px;
}
h1 {
font-size:40px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 20px;
margin-top: 130px;
}
h2 {
font-size:30px;
text-align: center;
color: white;
font-family: "Gabriela";
margin: 10px;
margin-top: 40px;
}
And the HTML:
<div id="navbar">
<div class="nav_tab"><h2>Zues</h2></div>
<div class="nav_tab"><h2>Jack</h2></div>
<div class="nav_tab"><h2>Denise</h2></div>
<div class="nav_tab"><h2>Joel</h2></div></div>
I'm not entirely sure what's going on here, though I presume it's some kind of parent-child issue.
Thanks.
The link is not clickable because you gave the .nav_tab class a negative z-index value just adjust it to a value => 0 and it'll work.
The z-index: -1; of the .nav_tab css it's your problem, it makes the container behind the page so any mouse event won't work (hover, pointer, etc) remove it and your ready to go:
see the jsfiddle demo:
http://jsfiddle.net/QmVFR/64/
The new twitter-bootstrap docs have a nice interface for delimiting examples.
How do I get this same effect, but within the well?
My attempt: http://jsfiddle.net/YdusM/
How about that: jsFiddle
Apply .well:before {...} instead .corner_text:before {...}
UPDATE:
Apply 'example element' for specific well-block: jsFiddle
Instead of applying :before to outer div. I made it to .well and adjusted the padding top and left to -20px..
ie
.well:before {
position: relative;
content: "Example";
top: -20px;
left: -20px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
Check the fiddle http://jsfiddle.net/YdusM/7/
You can just inspect the code in the docs, and you wil find this css, applied to the exmaple wrapper:
.bs-docs-example::after {
content: "Example";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: whiteSmoke;
border: 1px solid #DDD;
color: #9DA0A4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
Add something similar as a custom class to your css, or you could even do it in less to use the bootstrap variables and mixins. If you want the text to be addaptable, it would perhaps be better to forget about the :after and adapt this styling a bit to apply it to a specific element holding the text you want and place it inside the wrapper.
edit:
For the positioning to work, you should set the wrapper to position: relative; as well. Not sure what you are after, but i updated your fiddle to demonstrate: http://jsfiddle.net/YdusM/9/
I have submit buttons or normal buttons of varying width depending upon their values wrapped inside fixed divs. Now the buttons won't center inside the div even after having margin: 0 auto; and display:block; because of the missing width property. How to have them centered without explicitly setting the width for each button ?
input[type="submit"], .button {
border: none;
outline: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: white;
display: block;
cursor: pointer;
margin: 0 auto !important;
clear: both;
padding: 5px 7px;
text-shadow: 0 1px 1px #777;
font-weight: bold;
font-family: "Century Gothic", Helvetica, sans-serif;
font-size: 14px;
-moz-box-shadow: 0px 0px 3px #aaa;
-webkit-box-shadow: 0px 0px 3px #aaa;
box-shadow: 0px 0px 3px #aaa;
background: #4797ED;
}
Set the input[type="submit"], .button {}
to display: inline-block;. Then set the parent div to text-align: center;.
Buttons are inline elements. Is the display:block necessary for other reasons or does anything speak against generally centering all text/inline-elements within the div?
If not, you could assign text-align:center to the div instead and remove display:block from the button.
As a side note, your current style centers the button in FF12. What browser are you using? Edit: Also works in IE9 (jsfiddle).
http://jsfiddle.net/gSaBj/1/
check out this url....