I have the simple form and attached the css file for that. As you can see there are 2 fields and one checkbox - I would like to make the checkbox directly under the textarea, with around 1-2px space, not as it is now - how can I modify that? I thought the problem is somewhere here:
.textox, .textoxarea {
width: 340px;
border: solid 1px #999999;
padding: 2px;
border-radius: 4px;
font-size: 14px;
box-shadow: 0px 1px 2px 0px #9C9C9C;
background-color: #FFFFFF;
outline: none;
color: #474747;
text-align: center;
font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 100;
}
but I can't find the proper way of doing that.
Here's my fiddle.
Thanks!
Remove the empty paragraphs between textarea and checkbox.
In your fiddle it's on lines 11 and 13.
http://jsfiddle.net/7hq0x6u4/3/
.center p:nth-of-type(2),.center p:nth-of-type(3){
margin:0;
}
This will reduce the space of margin in both the P tags which are covering the input elements
DEMO
Normally use of p tags to align input tags are not recommended.
Hi to your <input type="checkbox"> add these styles.
.foo {
bottom: 1px;
margin-left: 0;
margin-right: 5px;
position: relative;
}
.foo as an example class on checkbox.
Related
I'm a beginner and I need help.
I want to put a Word between two borders
My Code
#hw {
font-family: Nazanin;
font-size: 200%;
font-weight: normal;
direction: rtl;
text-align: center;
color: #6dbaee;
}
.h1{
border-top: 1px solid #00bdf2;
border-bottom: 1px solid #00bdf2;
padding: 10px 0;
line-height: 150%;
position: relative;
}
<p id="hw">beauty</p>
What should I do to put my word between two borders(like the one in my CSS)?
In your example you use .h1 but there is no class called h1 in your html.
In CSS these things are called selectors.
With your HTML we can directly use the p selector to bind the CSS to it.
Note: that this will be set on every p element in your document, so it's important to think to what CSS you bind to what element.
#hw {
font-family: Nazanin;
font-size: 200%;
font-weight: normal;
direction: rtl;
text-align: center;
color: #6dbaee;
}
p {
border-top: 1px solid #00bdf2;
border-bottom: 1px solid #00bdf2;
padding: 10px 0;
line-height: 150%;
position: relative;
}
<p id="hw">beauty</p>
You already have all you need. Just add the class h1 to the paragraph element, like so:
<p id="hw" class="h1">beauty</p>
Perfecto! 🤌
You could do everything more simple. Put word into h1 tag and give him an id. For tag h1 you should make not .h1, but h1 selector.
#hw {
font-family: Nazanin;
font-size: 200%;
font-weight: normal;
direction: rtl;
text-align: center;
color: #6dbaee;
}
h1 {
border-top: 1px solid #00bdf2;
border-bottom: 1px solid #00bdf2;
padding: 10px 0;
line-height: 150%;
position: relative;
}
<h1 id="hw">beauty</h1>
I created a button class named "primary". I noticed that it looks different on a button and on a tag, they have other sizes for example.
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-size: 1.5rem;
vertical-align: middle;
border: none;
}
<button class="primary">This is a test</button>
<a class="primary">This is a test</a>
How can I make the class look the same on both?
JSFIDDLE
With HTML tags, browsers add their own default styles to the tags (yes, it could differ from browser to browser). In your case, there are 2 properties you need to add in the .primary class: 'display: inline-block and font` properties.
As per the JSFiddle you shared. Here is the updated code and screenshot of the both elements height after the primary class code is updated:
.primary{
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
/*font-size: 1.5rem;*/
vertical-align: middle;
border: none;
/* these 2 lines to be added */
display: inline-block;
font: 400 1.5rem Arial;
}
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-family: "Goudy Bookletter 1911", sans-serif;
font-size: 1.5rem;
vertical-align: middle;
border: none;
}
<button class="primary">This is a test</button>
<a class="primary">This is a test</a>
This is because a browser already gives HTML elements their own style. You will overwrite this style with your own CSS. But a button will have a different style than an a element by default.
For example the line-height and font-family may be different.
And in your case it seems that display: inline-block will do the trick.
This is because elements inherit default styles, if you want the anchor to look the same simply declare the font family and font-size in your class;
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-size: 1.5rem;
vertical-align: middle;
border: none;
font-family: sans-serif;
font-size: 26px;
}
`Hi, I'd like to make a button with two lines of text and have them in different font sizes... Is there any way? My current way was trying it with an kind of designed button. Could that work in some way? Any help is appreciated! Beneath you see what I'm working with right now... I want to have a second line under "START" which is displayed in a much smaller font size
<a class="smallbtn">START</a>
.smallbtn {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
you could do this if you just want to add a new line of text under your "START"
<a class="smallbtn">START<br><sub>hello</sub></a>
or
p{
font-size:12px;
padding:0px;margin:0px;}
<a class="smallbtn">START<br><p>hello</p></a>
You can try insert a div inside the button, give an id to the element and add css, like this:
<a class="smallbtn">START<div id="smallbtnFont">hello</div></a>
#smalbtnFont{
font-family: "arial";
font-size: 1em;
}
good question, heres how:
button {
font-family: "Lato Light";
background-color: #58B947;
border-radius:5px;
color: white;
padding: 15px 6px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 21px;
width: 73%;
cursor: default;
margin-bottom: 5px;
}
<button>Start<br><small style="font-size:50%;">Now</small></button>
I need to center vertically the text inside a div but I am having a problem. This is the situation:
There is an hover attribute that I added in the CSS and in fact, when the mouse goes on the div, it changes the background and the text goes at the center of the div.
I would like the text to be centered also in the first case shown in the picture (when the mouse in not over the div). You can find the fiddle with the code here: Fiddle
.tab {
float: left;
margin: 0px;
height: 50px;
display: table-cell;
line-height: 50px;
}
This is the code that I have used for the div. And when the mouse goes over:
.tab:hover {
cursor: pointer;
box-shadow: inset 0 0 10px #999;
-moz-box-shadow: inset 0 0 10px #999;
-webkit-box-shadow: inset 0 0 10px #999;
background-color: #555;
line-height: 50px;
}
I have used the line-height in both cases but it works only in .tab:hover. Any idea?
That happens because you are setting after a declaration for the font:
.font_header {
font: 19px Century Gothic, sans-serif;
color: #EEEEEE;
}
This CSS is after and then the specificity goes with the declaration here. If you just change the order it will work, since the last has more precedence:
.font_header {
font: 19px Century Gothic, sans-serif;
color: #EEEEEE;
}
.tab {
float: left;
margin: 0px;
height: 50px;
display: table-cell;
line-height: 50px;
}
UpdatedFiddle
You need to set the line-height: 50px; for .font_header as well.
Example fiddle: http://jsfiddle.net/6tzwc17c/2/
At least in Chrome it works if you just split the font declaration, like:
font-family: Century Gothic, sans-serif;
font-size: 19px;
Instead of:
font: 19px Century Gothic, sans-serif;
I made a CSS menu but the individual tabs, or rather a row of tabs, seems to be overlapping each other. I used white-space: pre-wrap with a width on the tab menu itself:
html > body > div#header > div#header-bottom-left > ul.tabmenu {
position: absolute;
top: 75px;
left: 700px;
width: 620px !important;
}
#header #header-bottom-left .tabmenu li {
font-family: "Courier New", Courier, monospace !important;
text-transform: uppercase;
letter-spacing: 2px;
font-variant: small-caps;
font-size: 11px;
padding: 5px;
margin-right: 16px;
background: url(%%buttons%%) repeat-x;
border: 1px solid black;
white-space: pre-wrap;
margin-bottom: 20px;
}
In general, don't style the LI for menus, style the A tag and use display:block or inline-block
not sure if this is what you want but I think you may be missing a float: left in your li
code: http://jsfiddle.net/vT5vd/
BTW lists are fantastic for menus and are used so almost exclusively!
The tabs are treated just like a line of text. The line spacing is set to the height of the text, causing the larger tabs to overlap. To correct this just add a
line-height: 1.8;
line to the css file in the tabs list item section. Also. you can put a break or paragraph tag in the list of tabs to control where they wrap to the next line and avoid splitting a tab.
ul.tabs li a
{
font: normal 18px Verdana;
line-height: 1.8;
text-decoration: none;
position: relative;
padding: 0px 8px;
border: 1px solid #CCC;
border-bottom-color:#AAA;
color: #000;
background: #F0F0F0 url(tabbg.gif) repeat-x 0 0;
border-radius: 2px 2px 0 0;
outline:none;
}