I have a div inside a field set that looks like this:
<fieldset>
<legend>Device</legend>
<label id="select-6-container">
<select id="select-6" name="device_select" style="display:none"></select>
</label>
</fieldset>
<div id="ctrl">
<button type="button" id="restart1" name="button1" onclick="window.location.reload()" value="Restart Wizard">Restart Wizard</button>
<button type="button" id="gotostep2" class="gotostep2" name="button1" value="Next Step">Next Step</button>
</div>
My select box is populated with YUI and then shown (notice that its hidden on load). My CSS for the box looks like this:
#ctrl {
margin-top: 102px;
margin-left: -200px;
position: absolute;
width:100px;
}
But when My select box is generated, the ctrl box moves down everytime! Do I have my CSS wrong? Or is it because the select box is generated by Javascript after the page has loaded?
I should mention that when YUI renders the select box as a menu button it changes it's markup to be a button, I didn't think this should matter because the positioning of ctrl is what I'm trying to change.
Any advice would help!
Thanks!
Your div doesn't seem to be inside the fieldset, as you had mentioned.
Try to assign a position to the div using top, right, bottom and/or left. The div's position will be then depending on the next positioned parent element, so have an eye on that as well.
If all of this doesn't work — please post as well the surrounding mark–up and CSS.
Related
I like to make a layout with multiple elements that share 100% width of the parent element.
Found already a solution: how-can-multiple-dynamically-sized-divs-share-100-width.
The problem is here i always need some wrapper elements like divs. Like to realize this
only with input, button elements and so on.
<form>
<button style="width: 20px;"></button>
<input style="width: 100%;" type="text"/>
</form>
input and button elements are inline elements.
Just add the display: block rule on them to make the width: 100% rule implicit.
block-level elements will inherit their parent's width by default and will be rendered one below the other.
For a form, you can use this kind of code:
HTML
<form>
<input />
<button />
</form>
CSS
form input,
form button{
display: block;
}
If you always want them to have a 100% width, then you can use
min-width: 100%;
I'm modifying the header portion of a WordPress theme and I'm trying to nest a couple divs within another div. I'm not very experienced with HTML/CSS, but what I'm observing seems weird to me.
My code looks like this:
<div class="extras">
<div id="search">
<form role="search" method="get" id="searchform" action="http://mentatescholars.com/" >
<input type="search" placeholder="Search" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
</div><!-- end #search -->
<div class="phone-number">
<div class="phone-number-main">1-885-MENTATE</div>
<div class="phone-number-sub">1-885-636-8283</div>
</div>
</div>
And in the picture I have the phone-number div selected with Firefox's inspector (selecting extras looks the same). What strikes me as odd is why it's starting at the top of the extras div and not after the search div. search even has a set height of 40px.
If I select the third div, then the it shows the div starting right after the previous div.
What also strikes me as odd is how, while the top of the phone-number-main div is flush with extras, the text shifts down perfectly without me doing anything.
My question is this: How can I make it so that the phone-number div starts right after the search div?
Here's the site, if you want to look at it: http://mentatescholars.com/.
#search is floated and the .phone-number isn't.
If you add clear:both to the .phone-number <div /> you will see the correct layout.
float removes elements from the flow of the document. Check uot this link for more info: http://www.alistapart.com/articles/css-floats-101/
that is because you have floated element. your "search" div is floated and has no clear. Use clear:both in the CSS of the phone-number element and it will work fine
And if you want the number to be right after search make the height of search 30px and get rid of the submit button's margin bottom.
make #search block smaller by reducing height, lets say to 30px.
I only have this problem in chrome. How remove the border around the image? please see the fiddle in chrome.
<form>
<input type="image" class="searchbox_submit search_btn" value="">
</form>
form input[type=text]:focus, form input[type=password]:focus, textarea:focus {
outline: none;
}
.search_btn {
background: url("http://static.ak.fbcdn.net/rsrc.php/v1/yu/r/yo348KDuskF.png") no-repeat scroll 0px -200px transparent;
height: 25px;
width: 30px;
outline: none;
border: none;
outline-width: 0;
-webkit-appearance: none;
}
Demo: http://jsfiddle.net/TXYg6/
You're using <input type="image" />, so a src attribute is expected. You haven't specified one, so Chrome shows a grey border, in the same way it does for an img with no src attribute.
If you want to stick to using <input type="image" /> and using a CSS sprite, you're going to have to specify something as the src, such as a 1x1 transparent "blank.gif".
http://jsfiddle.net/thirtydot/TXYg6/14/
However, that just seems horrible. Instead, I recommend switching to <input type="submit" />, which solves the problem.
replace it like that with submit type
<input type="submit" class="searchbox_submit search_btn" value="">
correct your css height and width
Give it a blank image as a src using a data: URI. Since you're only concerned with Chrome, there's no problem:
<input type="image" class="searchbox_submit search_btn" value="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=">
http://jsfiddle.net/TXYg6/23/
Chrome gives a border/outline thingo to any image without a src, you could set the input type to 'submit' and this will go away.
Alternatively, use an with a src and trigger the submit from this, but you may as well just use a type="submit"
unwanted chrome borders
Do you really need that att type="image"? Because that's the thing causing the problem...
Semantically I'd say use a button since you don't actually have an associated input value, and as such it's not an input:
<button type="submit" class="searchbox_submit search_btn"></button>
From the docs:
Buttons created with the BUTTON element function just like buttons
created with the INPUT element, but they offer richer rendering
possibilities: the BUTTON element may have content. For example, a
BUTTON element that contains an image functions like and may resemble
an INPUT element whose type is set to "image", but the BUTTON element
type allows content.
Cheers
I'm working on a mobile template for my site and I want a textbox inside a div to be width:100% with an html submit button beside it, however the button always seems to wrap to the second line. Can someone help me out with some CSS for this?
<style type="text/css">
.form_input {}
.form_submit{}
</style>
<div>
<input type="text" name="s" value="" class="form_input" />
<input type="submit" value="Search" class="form_submit" />
</div>
The wrapping happens because of the workings of the css box model. 100% means 100% of the context box. So the input field will fill the line completely -> the submit button has to wrap to the next line. You can give the input box a width of e.g. 80% and the submit button a width of 20%.
I guess what you really want to do is something like input{ width: 100% - 200px }, submit {width: 200px}. That is not possible with css2.
Set the div to position:relative; and then set both the textbox and submit button to absolute position:
div.box{ position:relative; }
input[type="text"]{position:absolute;left:0;top:0;}
input[type="submit"]{positon:absolute;right:0;top:0;}
If you set the textbox to width: 100%;, then it will take up all the space available, and always push the submit button down.
This code specifies a width for both input elements:
.form_input {
width: 70%;
}
.form_submit{
width: 20%;
}
and they will be on the same line. (70% + 20% = 90% because I've left a little room for margins.)
I'd like to center a submit button. How do I accomplish this? I dont know the width of the button, it may be flexible based on the text inside it. I'm trying not to use float and set the margin auto on it because that will require a width.
<input type="submit" value="may vary" />
If the width is variable, your best bet is to use the text-align property of the container. If that would effect other sibling elements in an undesirable way, consider wrapping the input in a div.
<div style="text-align: center">
<input type="submit" value="may vary" />
</div>
NOTE: The inline CSS above is just an example, feel free to create a css rule for the div.