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
Related
I'm trying to turn my header at http://ukgraffiti.tumblr.com/ into a link back to the main page.
CSS:
#header {
position: fixed;
padding: 50px 500px 90px 80px;
background-image: url(http://s32.postimg.org/nqrhk4r9h/graffiti_header3.jpg);
background-repeat: no-repeat;
}
HTML:
<div id="header">
<h1>{Title}</h1>
</div>
The problem seems to be that the id and h1 actually control the default text header, which I've hidden with CSS, rather than the image I've put in its place.
I tried giving creating a simple link with a different id, and then changed the id in the CSS, but this didn't work and messed up my layout anyway.
Thanks in advance.
You can just apply the header id to the <a> tag:
<a id="header" href="http://ukgraffiti.tumblr.com/">{Title}</a>
I just looked at your site now. The issue is that div is what you wanna make clickable because it has a background image. So do this
Edited: So I made some changes to get what you may want
<div>
<img src="http://s32.postimg.org/nqrhk4r9h/graffiti_header3.jpg">
<div id="topsearch">
<form action="http://ukgraffiti.tumblr.com/search" method="get" id="searchform">
<p><input onfocus="this.value=''" type="text" value="Search" name="q" results="5"></p>
</form>
</div>
Also to remove white gap, remove margin-top: 200px; from #content.
Replace your html:
<div id="header">
<h1>UK GRAFFITI</h1>
<p id="description"><br></p>
<div id="topsearch">
<form action="/search" method="get" id="searchform">
<p>
<input onfocus="this.value=''" type="text" value="Search" name="q" results="5">
</p>
</form>
</div>
</div>
With this one:
<a id="header" href="href="http://ukgraffiti.tumblr.com/">
<h1 class="header-text">UK GRAFFITI</h1>
</a>
<form action="/search" method="get" id="searchform">
<input onfocus="this.value=''" type="text" value="Search" name="q" results="5">
</form>
And add this to your css:
#searchform {
width: 80px;
position: absolute;
top: 128px;
left: 738px;
z-index: 1000;
}
Here you can set the position of your search box.
And set the text-indent for the headline. Think you have it as text just for search engines.
.header-text {
text-indent: -9999em;
}
#Jud This work. I make a full copy of your page html and change like described. Here you can test it.
CODEPEN
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'm styling an input group <div> wrapper as display:table; with all contents display:table-cell; When I want to have a fixed width on the table, if the cell I want to widen/shorten to take up the remainder width is a <span> element or a <ul> element, for example, then setting width:100%; works. However, if the element is an <input> or <button> then this does not work in firefox or chrome (but does in IE) and the result is the element takes up the entire space of the input group, pushing the next element down to a new row. I can get around this by putting the <input> or <button> inside a <span> element and setting width:100%; on both, but I'd rather have a css solution.
<div class="input-group wide">
<input type="text" style="width:100%;"></input>
<button>S</button>
</div>
css:
.input-group {
display:inline-table;
padding:0px;
background-color: grey;
}
.input-group > input, .input-group > button, .input-group > span, .input-group > ul {
display: table-cell;
margin:0px;
}
.wide {
width: 260px;
}
http://jsfiddle.net/5v3Lg50d/3/
Floats are good idea, you can follow Epik's solution.
I checked one thing with Firebug for Firefox and I learned that <button> works fine with its parent div having style="display: inline-flex".
You might want to check this against other browsers and use it conditionally, or go with floats instead.
I have a JS fiddle here with the changes made.
http://jsfiddle.net/5v3Lg50d/4/
Basically i changed a few small things and tidied up your fiddle. The elements you wanted full width i added in a class and floated left;
.fullWidth {
width:100%;
display:inline-block;
float:left;
}
The following is the code i amended:
<div class="input-group wide" style="">
<span class="fullWidth">space</span>
<button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
<ul class="fullWidth"><li>o1</li><li>o2</li></ul>
<button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
<input type="text" class="fullWidth"></input>
<button>S</button>
</div>
<br />
<br />
<div class="input-group wide">
<span><input class="fullWidth"></input></span>
<button class="fullWidth">S</button>
</div>
<br />
<br />
<div class="input-group wide">
<button class="fullWidth">A button</button>
<button>S</button>
</div>
<br />
<br />
<div class="input-group wide" style="">
<span><button class="fullWidth">A button</button></span>
<button>S</button>
</div>
Hope this helps.
-Epik
I have a textarea and add button.when i'm loading the page i want to place image in the textarea.And when click on the add button the same image will be added in the textarea.but i can't get.here is my code.
<div class="container" style="width:500px">
<div class="control-group" align="left" style="float: left" onselect="selectText()">
<textarea id="myTextarea" contenteditable="true" style="height: 200px; width: 300px" onclick="storeCaret(this);"
onselect="storeCaret(this);" onkeyup="storeCaret(this);"> </textarea>
</div>
<div style="float: left;margin-left: 5px">
<input type="button" value="Add Gap" onclick="insertText();">
</div>
Please help me
You can't insert images to textareas, because they are just capable of plain text. You could take a look at https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
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.