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.
Related
In CSS, what is the difference between static (default) positioning and relative positioning?
Static positioning is the default positioning model for elements. They are displayed in the page where they rendered as part of normal HTML flow. Statically positioned elements don't obey left, top, right and bottom rules:
Relative positioning allows you to specify a specific offset (left, top etc) which is relative to the element's normal position in HTML flow. So if I have a textbox inside a div I could apply relative positioning on the textbox to have it display at specific place relative to where it would normally be placed within the div:
There is also absolute positioning - whereby you specify the exact location of the element relative to the entire document, or the next relatively positioned element further up the element tree:
And when a position: relative is applied to a parent element in the hierarchy:
Note how our absolutely-position element is bound by the relatively-positioned element.
And lastly there is fixed. Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll:
You may also observe the behaviour that fixed-positioned elements do not cause scroll because they are not considered to be bound by the viewport:
Whereas absolutely-positioned elements are still bound by the viewport and will cause scrolling:
..unless of course your parent element uses overflow: ? to determine the behaviour of the scroll (if any).
With absolute positioning and fixed positioning, the elements are taken out of HTML flow.
In answer to "why CSS would still implement position: static;" in one scenerio, using position:relative for a parent and position:absolute for the child limits the scaling width of the child. In a horizontal menu system, where you could have 'columns' of links, using 'width:auto' does not work with relative parents. In this case, changing it to 'static' will allow the width to be variable dependent on the content within.
I spent a good few hours wondering why I couldn't get my container to adjust based on the amount of content within it. Hope this helps!
You can see a simple overview here: W3School
Also, if I recall correctly, when declaring an element relative, it will by default stay in the same place as it otherwise should, but you gain the ability to absolutely position elements inside it relatively to this element, which I've found very useful in the past.
Position relative lets you use top/bottom/left/right for positioning. Static won't let you do this unless you use margin parameters. There's a difference between Top and margin-top.
You won't need to use static much as it's default
Relative position is relative to the normal flow. The relative position of that element (with offsets) is relative to the position where that element would have been normally if not moved.
Matthew Abbott has a really good answer.
Absolute and relative positioned items obey top, left, right and bottom commands (offsets) where static positioned items do not.
Relatively positioned items move offsets from where they would normally be in the html.
Absolute positioned items move offsets from the document or the next relatively positioned element up the DOM tree.
Static: By default the position of elements is static. If you add property such as top, bottom, right, or left nothing will be implemented.
div{
width:200px;
height:200px;
background-color:yellow;
display:inline-block;
}
#middle{
background-color:pink;
}
#static #middle{
position:static;
top:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="static">
<h2>Static</h2>
<div></div>
<div id="middle"></div>
<div></div>
</section>
</body>
</html>
Relative: The change in position will be relevant to that div's original place.
div{
width:200px;
height:200px;
background-color:yellow;
display:inline-block;
}
#middle{
background-color:pink;
}
#relative #middle{
position:relative;
top:100px;
left:100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="relative">
<h2>Relative</h2>
<div></div>
<div id="middle"></div>
<div></div>
</section>
</body>
</html>
Absolute: It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Source:MDN
div{
width:200px;
height:200px;
background-color:yellow;
display:inline-block;
}
#middle{
background-color:pink;
}
#absolute{
position:relative;
}
#absolute #middle{
position:absolute;
top:10px;
left:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="absolute">
<h2>Absolute</h2>
<div></div>
<div id="middle"></div>
<div></div>
</section>
</body>
</html>
Fixed: The fixed property would stay at the same place even after we scroll the page. The position is relative to the containing block always.
div{
width:200px;
height:200px;
background-color:yellow;
display:inline-block;
}
#middle{
background-color:pink;
}
#fixed #middle{
position:fixed;
top:10px;
left:10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>Position Property</h1>
<section id="fixed">
<h2>Fixed</h2>
<div></div>
<div id="middle"></div>
<div></div>
</section>
</body>
</html>
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;}
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...).