How to change the textbox size in html. Like the one in twitter.
Use CSS property font-size?
Twitter's default twitting box is using <textarea>. From Firebug, it's something like
textarea.twitterBox {
border:1px solid #AAAAAA;
padding:4px 2px;
-x-system-font:none;
font-family:'Lucida Grande',sans-serif;
font-size:1.15em;
height:2.5em;
line-height:1.1;
overflow:auto;
width:515px;
}
PS: Not sure if the theme affects the above though
Related
Fist of all, pls see this Question and the Demo
You can see even set the margin:0px; to the element, there's still a space between the text and the element border. It's a problem when I put Chinese and English text in one line, because the space for English and Chinese is not the same. Anybody know how to solve this?
I know it's not a big issue, but want to make it perfect to look, also want to learn more about css and html. Thank you for your attention.
You can reduce the height's lines of paragraphs with the line-height property:
* {
margin:0px !important;
padding:0px !important;
}
.di_header{
display:table;
width:100%;
}
.di_h_en{
width:30%;
height:100px;
display:table-cell;
vertical-align:bottom;
text-align:left;
border:solid 1px red;
}
.di_h_cn{
width:70%;
display:table-cell;
vertical-align: bottom;
text-align:right;
border:solid 1px red;
}
.di_h_en p{
font-size:32px;
line-height:30px;
border:dashed 1px black;
}
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
}
<div class="di_header">
<div class="di_h_en"><p>I'm left</p></div>
<div class="di_h_cn"><p>I'm chinese 我是中文</p></div>
</div>
Here, I put a line-height a little smaller, so it reduces the margin with border. Play with the 30px value to see the change.
this is happening becuase both <p> contains different font-size.. you can fixed them by using line-height property.
Add the line-height in the CSS. you use 32px font-size on another p element.
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
line-height:38px; /* Add this line*/
}
Here is a DEmo. http://jsfiddle.net/kheema/TkfSx/13/
Can you try using margin-bottom:0 for <p>.
Just keep font-size same for both or like mentioned above use line-height and play with it until you are satisfied.
demo:
Jsfiddle
or
Jsfiddle2
I think you want to remove the margin at the top of text inside the cell. If this is what you want then remove the height:100px from the .di_h_en{your-styles-here}
I added a search box to my wordpress website but since there are a lot of default styles in wordpress I can't seem to manage to get bot the box and the submit button aligned.
Currently the submit button is starting a little higher than my search box, though I haven't specified any margin or padding for my button..
The website is online here; http://sennheiser-apart.com
And these are the css lines I currently have for the search things in my child theme's css file.
button {
border:none;
padding:6px;
}
input {
height:28px;
border:none;
}
input[type="submit"]{
border:none;
background-color:#00AFDD;
height:28px;
color:#fff;
font-size:18px;
margin:0px;
}
input[type="submit"]:hover{
background-color:#ADAFB2;
}
Even searching on my page and looking for a line of styling in other files that wordpress uses doesn't help, I just can't find what's causing this. Does anyone have a clue? How can I fix this?
Without looking too much into detail, you can add this to the <form>-element:
padding: 5px 0 0 0;
and to both <input>-elements add:
vertical-align: top;
This should do the trick.
So I can't seem to identify what I'm doing wrong. I created a menu with 4 buttons, namely: Update, Register, Records and Sign out. I placed them together in a class and styled them with CSS. They turned out to be of different lengths, I've tried everything I currently know and understand about CSS and I'm stuck.
Here's the CSS code:
.button2 {
padding:15px 150px;
margin:0px auto;
border-radius:5px;
color:#221e1f;
font-family:corbel;
font-size:20px;
text-decoration: none;
border: 1px solid #d13129;
background: #d13129;
width:300px; /* set a width, can be fixed or percentage */
display:block; /* by default <a> tags arn't block elements and need to be for setting a width */
}
picture with the new edit:
http://gyazo.com/7c7203de14e01873b59e60392fa76207
You should define Height and Width in the css as well. Something like:
height:5px;
width:15px;
Set a width in the CSS (e.g. 'width: 50px;'). Unless you do this the size will match however large the text within the button is (plus the padding/borders).
I'm having this weird problem with this website I just started building. I want to get the header to align completely flush with the top of the page. But for some reason, there's a small space, about 20px high, that won't go away no matter what I try. I'm assuming there's just something about CSS and html that I'm not getting so can you guys help me out?
CSS:
#header {
background-color:#3429C9;
/*-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;*/
display:block;
position:relative;
z-index:2;
margin-top:-20px;
border-bottom:2px solid white;
margin-bottom:20px;
height:60px;
}
body {
text-align:center;
font-family: Georgia, Serif;
background: #000000;
margin:0;
height:100px;
display:block;
border:2px solid red;
}
Every browser (firefox,chrome,IE) have a default CSS it comes with which give default styling to elements. It also gives some default margin/padding, so usually when starting a web site design you should use a css reset file to reset all default styling.
That way you get the same basic behaviour for all browsers.
For a quick solution to yuor problem, just set the header padding/margin to 0.
I'm trying to create a "cancel" link that looks like an x with a solid red circle behind it.
Here is the CSS:
.circle {
display:inline;
padding-left:4px;
padding-right:4px;
background:rgb(196,15,24);
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
}
This is the HTML code:
<div class='circle'>
x
</div>
It ends up looking like this: alt text http://www.freeimagehosting.net/uploads/472563dfe4.png.
How do I move the x so that it is centered within the circle? Changing the margin-top or bottom doesn't seem to work...
If you relatively position your a tag you can fix it:
.circle a {
font-size:10px;
text-decoration:none;
color:#fff;
position:relative; top:-2px;
}
Adjust the top value to your liking.
Your font must accomodate characters like É, q, X and x, etc and still be displayed over background whatever the height of the character is.
I found that using an X (or text-transform: uppercase; obviously) and font-family: monospace; was an improvement with your code, though not perfect. Solution provided by mhr is useful even with a monospace font.
I am doing something similar, and using the following to center my text:
text-align: center;
margin: auto;
position: relative;