Here is two spans(in real life a lot of spans) situated at the web page. I would like to set the distance betwwen them. I want to use margin-bottom attribute for this, but I can't see any affect of using it. The spans are still on the previous position. That is wrong.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title></title>
<style type="text/css">
.position, .name{
overflow: hidden;
}
.position{
margin-bottom: 40px;
}
</style>
</head>
<body>
<span class="position">Designer</span><br/>
<span class="name">John Smith</span>
</body>
</html>
span is an inline element, not a block element, and they don't respect (vertical) margin. You can use padding or make the span display:inline-block; and then use margins. The latter is now supported in most somewhat newer browsers.
I would say line-height is what you are looking for.
Related
I have a html file :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css"/>
</head>
<div class="maindiv"><div class="subdiv"><input type="submit" class="button" value="button"/></div></div>
<body>
</body>
</html>
And the test.css file :
#charset "utf-8";
/* CSS Document */
.maindiv {
position:relative;
}
.subdiv {
position:relative;
}
.button:hover {
background-color:#333;
}
Everything was working fine till now. Bg of the button changes color if mouse is over the button.
I added z-index=-1 for the subdiv.
.subdiv {
position:relative;
z-index:-1;
}
After which hover was not working. So i used Firefox Inspector tool to capture the element when mouse is over the button and it was capturing 'div.maindiv'.
So i thought of adding z-index=-2 for the maindiv after which it was capturing 'body'
Can some one tell me why it is happening?
Is there any specific reason you are adding z-index: -1 to the subdiv element? Because, adding that to the subdiv is going to place it 'below' the maindiv and body and you wont be able to click on it as a result. The maindiv will cover it so the hover and click event will be not captured by subdiv.
Similarly, making maindiv have z-index: -2 will cause the body element to cover it in the stacking order and therefore again the button will not be clicked.
If you give the body element a position: relative; z-index: -3;, then the button can be clicked by the above logic.
From w3 schools z-index
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Check out this link as well for more on z-index.
I'm currently trying to make a div that is 100% as wide as the whole screen. And I did it by writing the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>100% width</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html,body {
padding:0px;
margin:0px;
width:100%;
}
</style>
</head>
<body>
<div style="background-color:yellow;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
It works fine in normal zoom settings but when I do max zoom in (FireFox 6.0.2) the letters inside the div outgrows the yellow box. Is there a way for the yellow box to extend to the end of the window as well?
Thanks.
You can force the really long word to wrap with:
word-wrap: break-word;
in your div style.
Does it really matter what happens at maximum zoom though?
Option 1
If you want to keep the text within the yellow box try adding this CSS styling.
div {word-wrap: break-word;}
It will cause the text to go to the next line rather than continue.
Option 2
OR you could try hiding the content that goes past the div border using CSS styling
div {overflow:hidden;}
I have a problem positioning some text in google chrome, I am trying to position
"Get Directions" and "Contact" side by side. This works fine in IE,Firefox and Opera but not Chrome. I know I should probably use floats but does anyone have any idea why isn't this working correctly?
(CSS)
#main_container2{
background-color: white;
position:relative;
left: 0%;
top:0%;
width:950px;
height:985px;
font-family:arial;
font-size:36pt;
}
(HTML)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href='green_machine.css'>
<title> test</title>
</head>
<body bgcolor="black">
<div id="main_container2">
<p></p>
<font style="position:absolute;top:5%;left:6%;">Get Directions</font><p></p>
<font style="position:relative;top:5%;left:56%;">Contact</font><br>
</div>
</body>
</html>
You use:
<font style="position:absolute;top:5%;left:6%;">Get Directions</font><p></p>
<font style="position:relative;top:5%;left:56%;">Contact</font><br>
First element position: absolute and second element position: relative
Just set the both to absolute or relative
PS
I would have made it into a ul and li's
And either use float or display inline
First off, you don't need the left and top arguments on the main-container div, by default a positioned element is anchored top left.
To fix your problem though, you should try switching the second font tags position to absolute. Since the parent has a position (defined or not) the children's position will be within the parents container. Since you are trying to put them side by side, you should use position absolute on both elements.
Can we give width and border to <body> and use in place of Container div? see this example
see source code of this file and code of file is also perfectly W3C valid. and looking same in IE 7 and firefox 3.5.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" dir="ltr">
<head>
<title> Width in body</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
html { background-color: #00f; }
body{background: #cd5c5c;width:800px;height:400px;border:1px solid;color: #fff;margin:0 auto;}
</style>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Your example answers your question! Body is a block element like any other. It has width, height, padding, margin and border properties.
Note that it is essential that the page is rendered in strict, rather than quirks, mode to be able to treat the body element as a block-level element; otherwise it is treated as the documentElement and all bets are off. – NickFitz
Then can we use body in place of #container div? – Jitendra
Nice theory. Shame about Microsoft. – David Dorward
#Jitendra: you can, but be thorough with your cross-browser testing, particularly when it comes to scrolling :-) – NickFitz
What is the difference between viewport and body? – Jitendra
the viewport is the visible area of the browser window which displays the document. The body is an element in the document. In quirks mode, the body will also be treated as the documentElement: that is, the root node of the document, which will fill the window, and if necessary will be able to be scrolled. In strict mode, the html element will be treated as the documentElement, and the body will be a child of that. As an experiment, change your test page by adding the style rule html { background-color: #00f; } - you will see that the html element contains the `body' – NickFitz
I am building new site FF and IE compliant...what is best way to have sentences wrap to fill container in firefox?
This works in IE without any problem.
Currently I am using the following doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
thanks
Tried a test case:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.articleContent { width:200px;
}
</style>
</head>
<body>
<table><tr><td> <div class="articleContent" > this is a sentence that goes on and on. this is a sentence that goes on and on. this is a sentence that goes on and on. this is a sentence that goes on and on. this is a sentence that goes on and on. </div> </td></tr></table>
</body>
</html>
Renders fine in FF/konq. Sounds like your CSS is getting overridden somewhere.
Try adding the following to your CSS
#container {overflow: auto;}
Or
#container {overflow: hidden;}
You may mean something along the lines
div.mydiv {
width: 400px;
height: auto;
text-align: justify;
overflow: hidden;
}
I don't think there is anything controlling breaks between words: they always occur as necessary.