Below is an exceedingly simple HTML page.
1) I would like to add a menu across the top, which means that the position of that edit box may have to change(?) or must it? Is the text box positioned relative to its enclosing div (which will follw the menu's div)?
2) I want to add more form elements, and position them precisely, with coords relative to the start of the form, just after the menu (I am generating the HTML programatically, if it helps to know that; for instance, I can add a fudge factor).
3) and after the last of those I want a submit button, which is always guaranteed to be at the bottom of the page, no matter how many input elements I add in the middle (so, perhaps wrap the form's controls in a div?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<form action="HTTP://localhost/b/submitted.php" method="post">
<div class="TEdit" id="TextEditBox1" style="position: absolute; top:56px; left: 72px; width: 121px; height: 21px;">
<input type="text" name="TextEditBox1">
</div>
<div class"submit_button" style="position:absolute; top:102px; left:132px;"><input type="submit" name="submitButton" value="Submit"></div>
</form>
</body>
</html>
For the most part, if you just put the page elements in the code in the order you wish to see them, flow of the page will lay them out as you've described.
For pixel perfect positioning, you can use absolute positioning as you have in there, but that's not that "best" way to do it.
I think the best thing for you to do would be to read up on CSS positioning over at w3schools if you want a good understanding of how to layout page elements.
Related
Until now I got a webpage with a navigation bar, which is responsible to screensize, all is fine until this point.
But now it becomes a bit strange for me, I want to add a search icon (loupe) in the bottom left hand corner. My idea was to use the "aside" element (or "aside" section?) which is supported in html5, but if I put my icon in this aside element it is not visible. I hope you can help me. here some html code:
HERE IS SOME OTHER CODE WHICH WORKS PERFECT
.
.
.
<!-- Search Icon beginn -->
<aside>
<div class="searchicon">
<img src="img/Searchicon.png" alt="Search" height="30px" width="30px">
</div>
</aside>
<!-- Search Icon end -->
</body>
My plan is that the search icon is always on the left of the webpage (kind of a sidebar), I don't want to cover up the text which is at the site later on.
Thanks to you!
Try changing the z-index in css which will basically move an HTML element forward/backward :
.searchicon {
z-index: 2;
}
/*
Set the value to negative if you want the element to move backwards.
*/
The positioning of HTML elements is controlled in your CSS. In your case this is the searchicon class. You haven't provided the CSS but it might look something like this:
.searchicon {
position: fixed;
left: 150px;
bottom: 150px;
z-index: 2;
}
As a note, the aside element may not be the "most semantic" option based on what you've described. The HTML5 aside is intended to contain content that doesn't directly relate to the pages primary content. For example a sidebar containing related articles.
I've got an image that floats in the bottom right corner (to put in the button, the position has to be fixed). However, part of the text on my page disappears behind the image. Is it possible to make this text wrap around my image?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<img src='http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png'
style='float:right;
position: fixed;
right:50px;
bottom:50px;
width:20%'>
Text is placed here
</body>
</html>
You can see the problem in action on this example page.
No, not in CSS alone.
The fact that the image is floated doesn't help here, because it is also fixed. Therefor it is not part of the flow anymore and the text doesn't respond to it.
This cannot be fixed by CSS alone. You could fix it using Javascript by moving the image around as you scroll, but it will be hard to get right and it will seriously slow down scrolling through your page, since the text will have to be re-aligned after each movement.
I think you'd better look out for a different solution.
when you use a position fixed or absolute (float here is irrelevant for your style, you could remove it) you're removing an element from its natural flow. Thus, given this position, the text is not able to detect the image and to re-arrange itself around it.
Using Z-index property you can do this..
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<img src='http://upload.wikimedia.org/wikipedia/commons/e/ec/Happy_smiley_face.png'
style='float:right;
position: fixed;
z-index:-100;
right:50px;
bottom:50px;
width:20%'>
<p style="z-index:12000">
Text is placed here</p>
</body>
</html>
Please help to correctly layout two forms. I use position approach but it fails when the browser Zoom level is changed. The second button is moved slightly up or down. Here is my code:
<div id="container">
<form id="form1">
<p>Some text here</p>
<p><input name="submitName1" class="button" id="input1_id" value="Submit1" type="submit" /></p>
</form>
<form id="form2"><input id="input2_id" value="Submit2" disabled="disabled" type="submit" /></form>
</div>
#form1
{
bottom: 15px;
position: relative;
}
#form2
{
bottom: 50px;
left: 73px;
position: relative;
}
Again, all is OK when user's browser has the same zoom level as mine, but if not user get wrong arranged button for the second form.
UPDATE: See this example. Even in JSFiddle rendering environment buttons positions are changed while Zoom level is changed at Firefox.
The actual problem is with the button, which is a browser/OS dependent element. And you do not supply a certain height/width to it in pixels.
Since your problem is specifically concerning the vertical placement, you will need to specify a height to your input elements: height: 24px;.
Thus my conclusion is that the more properties (border-width, height/width etc) you specify in specific amounts, thus percentages or pixels, the more consistent your layout will be for different zoom-levels in browsers.
You can specify a default height for all your inputs in CSS by using (as matter of an example):
input
{
height: 24px;
}
Of course you should add more properties here.
When doing forms try using Monospace fonts, otherwise zooming may do some elements go crazy.
I'm trying to be a good developer and not use tables, but I've been unsuccessful. Here's my attempt...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Because some people complain if I don't specify all the obvious tags</title>
</head>
<body>
<div style="width:100%">
<div style="background-color:Purple;width:25px;float:right"><input type="button" style="width:15px" /></div>
<div style="background-color:Aqua"><input style="width:100%" /></div>
</div>
</body>
</html>
This is the output that I get. I was hoping the input box would be on the left side of the button, but unfortunately it's underneath.
To demonstrate what I want, this is how I would do it if I were to use a table:
<table style="width:100%">
<tr>
<td style="background-color:Aqua"><input style="width:100%;box-sizing: border-box" /></td>
<td style="background-color:Purple;width:25px"><input type="button" style="width:15px" /></td>
</tr>
</table>
Please note:
I can't change the doctype tag
The solution must not use tables
This should work regardless of the size specified in the containing div, which is currently set to 100%.
Thank you :)
If I had a working table layout as you do, I'd do something like this:
.layout-table
{
display: table;
}
.layout-table > div
{
display: table-row;
}
.layout-table > div > div
{
display: table-cell;
}
And then:
<div class="layout-table" style="width:100%">
<div>
<div style="background-color:Aqua">
<input style="width:100%;box-sizing: border-box">
</div>
<div style="background-color:Purple;width:25px">
<input type="button" style="width:15px">
</div>
</div>
</div>
Fiddle
Of course, all that styling would be done externally too, but you get the point. This is identical to your table layout, but it's done with divs styled to act like tables, separating layout from content.
Actually, I would probably be lazy and just use <table role="presentation"> but that's bad (not to mention invalid with your obsolete doctype).
When you float an element using CSS you take it out of what is called the "document flow". So basically what is happening here, is the aqua colored box is actually extending behind the yellow box. See: http://jsfiddle.net/hegvz/ . The result is that the width of the aqua box is actually more than what is visible, so the input extends to fill the entire width of the rendered box.
You have a couple of options to fix this:
1) Add a padding to the side of the non-floated box equal to the width of the floated box, plus whatever white space you would like. Example: http://jsfiddle.net/QVpnw/ . You will see the aqua box still extends behind the yellow box, but the input of the aqua box is now shortened properly.
2) Add a margin to the side of the non-floated box equal to the width of the floated box. This will result in the aqua box rendering white space, instead of color. You will also want to adjust the padding in this case. http://jsfiddle.net/SVKr6/
I expect following code to put my span to the top-left corner of the button, but it doesn't. Why is that?
<!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>
<style type='text/css'>
</style>
</head>
<body>
<button style='height:100px;width:100px;position:relative;'>
<span style='position:absolute;top:0;left:0;'>text</span>
</button>
</body>
</html>
<span> is placed relative to the vertical-middle line (with 3px padding I can't explain).
Replacing <button> with <div> does places <span> at the top-left corner.
Question: why does absolute positioning within button (with position:relative) behaves differently from layout using <div>? And how do I fix it?
Background: I use two absolutely positioned div's within button to create a floating-width button with rounded corners.
EDIT: IMPORTANT IE 8.0 works exactly as I expect it (span in the top-left corner), the problem I see is in Firefox (3.6.6).
I advice against using a <button> this way. It is really difficult to style and you'll end up having to write specific styles for different browsers.
I needed to achieve something very similar and after dealing with a large amount of exceptions and fiddly positioning to accommodate different browser rendering, I went for this structure instead:
<div class="button">
<span>
<button>Text</button>
</span>
</div>
With the button tag reset this way:
button {
background:none repeat scroll 0 0 transparent;
border:0 none;
font-family:inherit;
font-size:inherit;
font-weight:inherit;
margin:0;
overflow:visible;
padding:0;
position:relative;
}
You can even use js to wrap the <button> on page load. This system has turned out to be much more solid and reliable. Requiring less css and almost no browser specific styling.
Update:
As I commented below, the wrapping element should not be an <a> tag. Remember that we need the <button> to keeps its functionality, we just need it to be text only (form will still submit on enter).
You can still re-use any css that you may be using to turn standard links into expandable button widgets only in this case it;s a <div> instead of an <a>.
Your problem is only with Firefox?? (3.6.6) - Can't fix it with standard CSS. Try:
button::-moz-focus-inner {
border: 0;
padding: 0;
}
That will do it for Firefox hopefully. Good luck!