I am beginning a webpage, but I'm having a problem. I added a form with some information to start a login form. I tried adding a margin and padding to the form, but it is still completely messed up. Here is the code for the area that gets messed up, and the form.
<div id="body" style="width:100%;height:1000px;margin-left:5%;margin-right:5%;margin-top: 5px;">
<div style="width:20%;display:inline-block;text-align:left;border: 2px green solid;"></div>
<div id="paddingLeft" style="width:4%;display:inline-block"></div>
<div style="display:inline-block; width: 50%;"></div>
<div id="paddingRight" style="width:4%;display:inline-block"></div>
<div id="loginTitle" style="display:inline-block; width: 20%;border:2px green solid;text-align:center;" class="style1">Login</div>
<div style="width:20%;display:inline-block;text-align:left;height:100px;border: 2px green solid;"></div>
<div id="paddingLeft2" style="width:4%;display:inline-block;height:100px;"></div>
<div style="display:inline-block; width: 50%;height:100px;"></div>
<div id="paddingRight2" style="width:4%;display:inline-block;height:100px;"></div>
<div id="loginFormArea" style="display:inline-block; width: 20%;height:100px;border:2px green solid;text-align:center;">
<form method="get" id="loginForm" style="height: 100%;padding:2px">
<span class="style1" id="Username" style="display:inline-block; width:40%;">Username:</span>
<input id="usernameInput" name="Text1" type="text" style="width:40%;display:inline-block;margin-top: 5px;height:15px" />
</form>
</div>
</div>
Try this:
<div id="bodywrapper" style="width:100%;height:1000px;margin-top: 5px;">
instead of:
<div id="body" style="width:100%;height:1000px;margin-left:5%;margin-right:5%;margin-top: 5px;">
My suggestion is:
don't call the id of the div "body". body is a structural element in html.
remove margin left and right. You already say it should be width:100%, so it's unpredictable to add margin on that. You can add padding instead, if you want. That might have the effect you are looking for.
Related
I am going to make a website like this http://watcherboost.com/
SO i want to create middle menu for my website.so i need to create a div tag which is always top on following background:
This is the code i tried
<form id="form1" runat="server">
<div>
<div id="top" style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
</div>
</form>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 650px; background-color: #C2C2C2; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div style="height: 300px;background-color: #0E5D7B; margin-top: 0px;">
</div>
<div style="background-color:#072530; height: 30px;margin-top: -10px;margin-left:auto;margin-right:initial">
</div>
<div id="middle" style="margin-left: 150px;margin-right:150px;margin-top:-250px;background-color:black"></div>
I want to get this last div (id =middle) to always top mode like upper website.
But unfortunately my div (id=middle) is not showed the page..
Please advice how to edit this code
Thanks
Your div is not showing up, because it doesn't contain any content. Add height property to its inline CSS.
If you want a div stay on top you should set:
position:fixed;
top:0px;
try this:
https://jsfiddle.net/TiG3R/ug4vvo48/
I have a table in my HTML that uses display: table. In the row I have two cells with some top/bottom padding and inside those I have <div>s which can be a different height:
<div style="display: table-row;">
<div style="display: table-cell; padding-top:1rem; padding-bottom: 1rem;">
<div style="background-color: red;">
<input ng-model="row.abc">
</div>
</div>
<div style="display: table-cell; padding-top:1rem; padding-bottom: 1rem;">
<div style="background-color: blue;">
<input ng-model="row.def">
<input ng-model="row.ghi">
</div>
</div>
</div>
Is there some way that I can make the height of the red and the blue be equal? As it is now the red is just half the height of the blue. Note that I am not looking for something that would make the two inputs go inline. I'm looking for a way to make the red area expand in height to match whatever height the blue is and vice versa.
I would like this to work using modern browsers. Thanks
Why don't you drop the div inside the cell? Because this would work.
<div class="table">
<div class="table-row">
<div class="table-cell" style="background-color: red;">
<input type="text" value="test" />
</div>
<div class="table-cell" style="background-color: blue;">
<input type="text" value="test" />
<input type="text" value="test" />
</div>
</div>
</div>
http://jsfiddle.net/e6vx7j8d/
Is there a compelling reason to be using nested <div> elements rather than normal table elements?
In any case, you should be able to set height: 100% as a style for each table cell, to force each one to fill its container's vertical dimension.
I have the following page and I want the textarea width to take up the rest of the width of the page but the width style isn't changing the size at all and I'm not sure why. If I change the txtChatMsg textarea width style to anything nothing changes visually.
<div class="container-fluid">
<div class="row" style="margin-top: 10px; background-color: aqua;">
<div id="divPortrait" class="col-md-3 text-center">
<img src="~/Content/good_guy.png" />
</div>
<div id="divChat" class="col-md-9" style="background-color: gray;">
<div class="row">
<div id="divMessages">
<!--DYNAMICALLY ADD DIVS FOR EACH CHAT MSG INSIDE HERE-->
<div>
Test Message here
</div>
</div>
</div>
<div class="row" style="background-color: red;">
<textarea id="txtChatMsg" class="form-control" style="width: 100%;" rows="2" placeholder="Write a reply..."></textarea>
</div>
<div class="row text-right" style="margin-top: 5px;">
<button type="button" class="btn btn-default">Send</button>
</div>
</div>
</div>
As dm4web stated, there's something external to the code that you you posted that is causing this behavior. To prove it, here's a JSFiddle where the style on the txtChatMsg element has been changed to width: 50%.
You could try inspecting the txtChatMsg element in your browser to see if there's any styles overriding the CSS width rule. I'd also check to see if there's any Javascript that is potentially targeting this div and overriding the width.
Can anyone please help me in aligning this divs vertically i want secondDiv to come below firstDiv. i saw many posts but not able to resolve it can anyone change my code to work it.
<div>
<div style="position:relative;width:800px;margin:0;padding:0">
<div id="firstDiv" style="text-align:center;position:absolute;margin-top:0">
<div>
<span>
<input type="submit" title="" value="Select Photos From Your Computer"
name="sendBtn">
</span>
</div>
<div style="width:492px;height:20px;position:absolute;top:8px;overflow:hidden;z-index:100">
<form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data">
<input type="file" style="opacity:0;font-size:20px;" accept="image/*"
name="d" id="d">
</form>
</div>
</div>
<div id="secondDiv" style="text-align:center;margin:3px 0 12px;">
<span>You can add upto</span>
<span style="font-weight:bold">3 Photos</span>
</div>
</div>
</div>
Remove the "position:absolute" from firstDiv's style attribute, and it seems to answer your question.
This also results in things moving around. So you need to describe exactly what you want.
You should avoid using position:absolute and position:fixed unless you are doing something fancy (eg. a menu bar, or a window popup within a window). So remove all "position:..." stuff as well as "top:...".
And why do you have that opacity 0 file input in the middle? If you want it to hide and also remove the empty space, change that to "display: none" (and to unhide: "display: block" (like a div) or "display: inline" (like a span))
Here it is with the opacity changed to display, and all positioning stuff (top:, position:, etc.) removed.
<html>
<head>
<style>
</style>
</head>
<body>
<div>
<div style="width: 800px; margin: 0px; padding: 0px">
<div id="firstDiv" style="text-align: center; margin-top: 0">
<div>
<span>
<input type="submit" title="" value="Select Photos From Your Computer" name="sendBtn" />
</span>
</div>
<div style="width:492px; height:20px; overflow:hidden; z-index:100">
<form target="msa_frame" name="picForm" id="picForm" method="post" enctype="multipart/form-data">
<input type="file" style="display: none; font-size:20px;" accept="image/*" name="d" id="d" />
</form>
</div>
</div>
<div id="secondDiv" style="text-align: center; margin: 3px 0 12px;">
You can add up to
<span style="font-weight:bold">3 Photos</span>
</div>
</div>
</div>
</body>
</html>
After reading your comments on other's answers, try this: http://www.quirksmode.org/dom/inputfile.html http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file
If you remove position: absolute; from the firstDiv it will work ... see here for an example
remove position:absolute; for firstdiv
changed in div like
> <div id="firstDiv" style="text-align:center;margin-top:0;">
and you will get like this output
I have the following HTML:
<fieldset>
<legend>Details</legend>
<div class="form-section first">
<div class="abc">
<div class="editor-label">
<label for .../>
</div>
<div class="editor-field">
<input type="text" ... />
</div>
</div>
<div class="def">
...
</div>
<div class="ghi">
...
</div>
</div>
<div class="form-section">
</div>
<div class="form-section last">
</div>
</fieldset>
I have a fieldset that is wrapping all of my form elements. The fieldset contains multiple form sections, which basically hold one "row" of content. The divs in the form sections I want to float to the left:
||||||| ||||||| ||||||| <-- first form section, 3 floated elements
||||||| ||||||||||| <-- second form section, 2 floated elements
What is the proper way to float these elements so that:
1) The second form section occurs on its own line.
2) The second form section can apply a top margin.
I can't seem to get it right. I need the solution to work in IE7. I tried putting a clear: both on the form-section element but it didn't seem to work right. All 5 elements occurred on the same line instead of 2 separate lines.
** EDIT **
I can somewhat get this to work. My issue is the following:
When I float the elements within a container, they essentially have 0 height. This messes up any containers that come after it if they want to apply a top margin.
for the row of three try:
<div style="clear:both; width:100%;">
<div style="float: left;"></div>
<div style="float: left;"></div>
<div style="float: right;"></div>
</div>
<div style="clear:both; width:100%; height:10px;"></div>
<div style="clear:both; width:100%;">
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>
That should get you the desired output.
<fieldset>
<legend>Details</legend>
<div id="section 1">
<span style="height: 500px;">1</span>
<span style="height: 500px;">2</span>
<span style="height: 500px;">3</span>
</div>
<div id="section 2" style="margin-top: 50px;">
<span>4</span>
<span>5</span>
</div>
</fieldset>