I have a textarea and a button. I wanted them to be placed in a same horizontal line from the bottom.But when I place them inline with no style applied It is displayed like this:
I am just unable to understand what is causing them to happen so?
Where is the extra margin coming from at the bottom of the text area?
And When I am doing the same thing with the form input they are okay as in the image 2:
So what is causing textarea to behave like this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
textarea,button
{
margin:0;
}
</style>
</head>
<body>
<div>
<textarea>textarea</textarea>
<button>Button</button>
</div>
</body>
</html>
Add vertical-align: bottom; to your style:
<style type="text/css">
textarea,button
{
vertical-align: bottom;
}
</style>
The issue is that setting them to inline elements messes with their vertical-alignment. The style will fix this issue.
Related
I have made a simple web page. I can see no blank space when I open the website on safari, but on firefox, there is a gap that is probably 30px tall.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div style="background-color: blue;">
<h1>hello</h1>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
You need to remove the margin on the heading as well. For example:
body, h1 {
margin: 0;
}
body, h1 {
margin: 0;
}
<div style="background-color: blue;">
<h1>hello</h1>
</div>
You could make it easy for yourself and reset all margins/paddings in your CSS (won't affect elements);
* {
margin:0;
padding:0;
}
Certain browsers will put margin around header tags. It's always a good idea to include a reset.css file on your site so that things appear how you want them to cross browsers.
Here's a simple reset.css file for you to include.
html code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- div for box-->
<div id="panel"></div>
</body>
</html>
CSS used :
#panel
{
height:90px;
background-color:#CCC;
margin:0px;
padding:0px;
}
Output generateed: is a box with space left around it of 4-5pxs, and it does not cover full width.:
Expected output: with no spaces around it what i really want to do:
you need to clear the default margin that gets applied to the body. add:
body{
margin: 0;
}
I have an img inside the a tag. When hovering on a, I want to change the image url. Is it possible with CSS?
<img src="img/takipet.png" alt="">
To directly answer your question, here’s one CSS-only approach:
HTML:
<div id="the-image-wrapper">
<img id="image-main" src="some/src">
<img id="image-alternate" src="some/other/src">
</div>
CSS:
#image-alternate {display: none;}
#the-image-wrapper:hover #image-main {display: none;}
#the-image-wrapper:hover #image-alternate {display: inline;}
You’re probably better off trying an alternate approach however, such as using a background image instead. Of course, it really depends on the application.
If you’re going the background-image route, you should take a look at using sprites.
You have few ways to do this.
If you prefer to use css you should replace with background-image property
a.some_class{
background-image:url(your_image_url);
background-repeat: no-repeat;
display: block;
height:image_height;
width:image_width;
}
a.some_class:hover{
background-image:url(your_image_url2);
}
Also you can use two images wrapped with Div. And show/hide needed on div hover.
With jQuery
$('a img.your_img_class').mouseover(function () {
$(this).attr("src", "hover_1_src");
})
.mouseout(function () {
$(this).attr("src", "old_src");
});
If it's a background image, you can do this:
.element:hover{
background-image:url(bg.jpg);
}
or even
.element:hover a{
background-image:url(bg.jpg);
}
If the a tag is within something else.
Change src="" attribute is can't change by Using CSS . Just Change with Javascript Or Jquery.
you can Just Control Styles By css .
Create Div Element And set background-image for it.
HTML Css:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#MyDiv{
width:100%;
height:100%;
background-image: url('Image.jpg');
}
#MyDiv:hover{
background-image: url('NewImage.jpg');
}
</style>
</head>
<body>
<div id="MyDiv" > </div>
</body>
</html>
Html Javascript:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="http://codeorigin.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" onmouseover="this.src='http://www.google.com/images/srpr/logo11w.png';" >
</body>
</html>
I dont know, either I am not that good in the art of 'search' or this topic is so so simple that nobody generally asks this but I have been searching this ever since i started my website.
I have only four block elements on my webpage.
The first Block element displays on the top alone
The second, third and fourth block elements, I want arranged in a single horizontal line from next line
At present I am using the table to do this, but its bad styling, isn't it?!
Please tell me a way in which I can bring all those 3 block elements in the same line
At present, if I remove the table property, my block elements move to next line.
This is how it looks if i remove the table property:
^^^^^^^^^Block element: top^^^^^^^^^^^^
^^^^Block2^^^^^
^^^^Block3^^^^^
^^^^Block4^^^^^
I want block elements 2,3,4 in same line like this:
^^^^Block2^^^^^ ^^^^Block3^^^^^ ^^^^Block4^^^^^
You can try display:inline-block or float:left.
<html>
<head>
<style type="text/css">
div {
border: 1px black solid;
}
</style>
</head>
<body>
<div>aaa</div>
<div>bbbbbb</div>
<div>cccc</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div {
border: 1px black solid;
display: inline-block;
}
</style>
</head>
<body>
<div>aaa</div>
<div>bbbbbb</div>
<div>cccc</div>
</body>
</html>
<html>
<head>
<style type="text/css">
div {
border: 1px black solid;
float: left;
}
</style>
</head>
<body>
<div>aaa</div>
<div>bbbbbb</div>
<div>cccc</div>
</body>
</html>
These are the effects on Chrome.
I made a web page with the following code and viewed it in Google Chrome.
<html>
<head>
<style type="text/css">
html {padding:30px; background-color:blue;}
body {margin:0px; background-color:red;}
</style>
</head>
<body>
hello world
</body>
</html>
The result is what I expected, a red box with a 30 pixel blue border that fills the entire web browser window. However, when I view it in Firefox, the red box is only the height of one line-height. In IE8, there is no blue border.
How do I make Firefox and IE8 display the same thing as what I see in Google Chrome?
Additional notes I tried adding different doctype tags to the page, but that only made it appear like Firefox, that is, the 1 line-height of red.
For this I think you have to resort to absolute or relative positioning; otherwise, your height/margin combo will push the bottom blue line off the screen. This works cross browser for this simple case. Hopefully it works for your more complicated use case.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background:blue; }
.first{
position:absolute; /* fixed also works */
background:red;
top:30px;
left:30px;
right:30px;
bottom:30px;
}
</style>
</head>
<body>
<div class="first">hello world</div>
</body>
</html>
if i understand you correctly, set your html & body width to 100% , height 100%
http://jsfiddle.net/Diezel23/Lv6Vw/#base
You could add an additional div:
<html>
<head>
<style>
body {
padding: 30px;
margin: 0px;
}
div {
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div>
ABC
</div>
</body>
</html>