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;}
Related
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.
On a anchor-tag with a url to a external site we have a little icon that indicates that this is a link to a external site. Now this Icon is included via a additional span-element around the link-text and displayed via CSS background-image with position 100% 50% to always be at the end of the text and a padding-right for the text-gap between link and the following text
now this works fine in every browser — as long as the link-text is not longer than 1 line … if it is on multiple lines, the whole thing works still fine everywhere, except IE7 (IE6 is not supported by the project)… IE7 displays the Icon at the end of the first line and a few pixels to the bottom, instead of at the end of the link-/span-text on the second or third line…
Sometimes a picture says more than 1000 words: http://img859.imageshack.us/i/spdexternalerror.jpg/
HTML-Code: <span class="external">Link-Text to multiple lines</span>
CSS to the span-element: {background: url(/#/icon-new-window.png) no-repeat center right; padding-right: 14px;}
adding zoom:1 CSS property resolves this problem at most situations
Multi-line background is a problem for IE7. The correct way to do what you want, without adding extra markup, is to use CSS :after however :after is not supported natively in IE6 or 7 (support was added in IE8). If you don't mind using JavaScript to add :after support to IE7 then you could use the ie7-js library (also see this question :after and :before css pseudo elements hack for IE 7)
Using that library, the following is working for me in IE7.
<!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">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
p {
width:100px;
border:1px dashed blue;
}
a.external:after {
content:url(http://www.knowledgewand.com/images/icon_new_window.gif);
}
</style>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<p>
Link-Text to multiple lines
</p>
</body>
</html>
Safari 4 seems to be ignoring element margins unless I add a border.
The following example renders left and right margins but no top or bottom.
Upon adding a border, it renders as expected. Am I doing something wrong or am I going to have to add borders (albeit transparent ones) to every element with margins just for Safari?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>testing</title>
<style>
body {background-color:#666;}
div {display:block; position:relative; margin:0; padding:0;}
.background {background-color:#990000;}
.foreground {background-color:#fff; margin:10px; padding:10px;}
</style>
</head>
<body>
<div class='background'>
<div class='foreground'>
foreground
</div>
</div>
</body>
</html>
It's a normal weird behaviour calling margin (edited, sorry i'm french) collapse.
To simply avoid it add overflow:auto; on the container.
.background {background-color:#990000; overflow:auto;}
It is called margin collapse. When a top and bottom margin are touching each other, the margins will combine into the greater of the two.
The reason it works "correctly" when you add the border is because you created a 1px separator for the margins so they no longer collapse. Interestingly, if you instead added a empty div with no height/borders, the margins would still collapse because the div takes up 0px space.
I'm having a hard time finding the resources to solve my particular dilemma.
I'd like to make a simple horizontal type scroll bar site. This site would contain nothing but images stacked up side by side and each image would have a 100% browser screen height. No text, menu buttons, etc.
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>Untitled Document</title>
</head>
<body style="margin:0; padding:0; overflow:scroll; height:100%;">
<div>
<img style="height:100%; float:left; " src="file:///C|/Documents and Settings/0000ff/My Documents/tuesday/1.jpg" />
<img style="height:100%; float:left; " src="file:///C|/Documents and Settings/0000ff/My Documents/tuesday/2.jpg" />
</div>
</body>
</html>
Floating works when the combined image widths don't overlap the width of the browser window, but when I set the image style heights to 100% they don't float left, they stack up over each other.
Is there a way I can make the images continue to overflow to the right of each other?
Seems crazy that I'm having so much trouble with something that seems like it should be easy to implement.
Thanks very much for looking, I really hope this is possible.
E.
height: 100% is not really possible with CSS, since the height attribute doesn't refer to the browsers viewport, but the height of the parent element (which is the div or body in your case). The body again will not expand to the browsers viewport, its height will autoshrink to your content.
I would heavily suggest to use JavaScript for this task. It will save you a lot of PITA.
Using jQuery for instance, you could do something like
$(document).height() - $('body').offset().top
$(window).height()
Or with "native" JavaScript:
http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/ (which is not so much fun... cross browser issues, as always...).
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