I am working on a CSS/HTML submit form that I am going to make look like the image below.
I am not sure how to make the Submit button appear like it is inside of the Text input though?
Put a container div that has the exact background color as your text-box. By doing this you can obtain the effect of the button being inside the textbox.
Easy, put it inside a div and style the div to look like an input text. Then you just make the input field have the same background than the div.
I did something similar with my blog for submitting comments using relative positioning. You won't need any extra HTML markup with this method.
Start by placing your submit button directly underneath and on the right side of the text input, then move it upwards with relative positioning into the text input. Something like this should work.
input[type="text"] { <-- Your text input (height comes out to 35px with padding)
height: 25px;
padding: 5px;
margin-bottom: 0;
}
input[type="submit"] { <-- Your submit button (10px shorter for padding)
height: 25px;
position: relative;
bottom: 35px;
right: 5px;
margin-top: 0px;
margin-bottom: -30px; <-- To get rid of the empty leftover space.
}
Related
I am having a problem with my website, the problem is the fact that the logo is displayed at the top of the page. How can I display it next to the #sfield?
You want the "OTS" logo on the left of the search field or something like that right?
The easiest way to accomplish this is to set the logo's position to absolute which allows it be literally in any position you set it to, if you're still having trouble then try setting the search box's div to absolute.
Adjust other properties like left, top, etc... accordingly afterwards.
Wow, what is that page.
Heres how you do it:
#topbar h1 {
background: url(http://www.onetechsearch.com/wp-content/themes/mamatoti/images/logo.png) no-repeat center center;
text-indent: -9999px;
height: 45px;
width: 195px;
position: absolute;
right: 1px;
add position and right
I have followed the instructions at floating-div-over-an-image, and while things are working ok, I am trying to better control the behavior of the search box and the button. You can see the page I am working on here
There is a search box on the header image towards the upper right. The CSS for the search box div as follows
.search-box{
z-index: 500;
width: 50%;
border: 0px none;
top: 0px;
float: right;
left: 40%;
position: absolute !important;
}
You'll see that there is a search button to the right of the search box. When the browser window is made narrower, that search button jumps below, even when there is space to the right. I am trying to force that button to stay to the right.
Any tips on how you would achieve the behavior I described? I have tried variations of the float property in the CSS above, but that is not getting me what I need. Maybe I am not applying the correct CSS selector?
Regards
Just change your .search-box css for property width:100%
It is WORKING
.search-box {
width:100%;
}
let me know if it is helpful
In class (.search-box) the width was 40% so it was not getting enough room for the search box and button to display in line.
You Just need to replace the below css and it will work in all resolution.
.search-box{
border: 0 none;
position: absolute !important;
text-align: right;
width: 100%;
z-index: 500;
}
The #k2ModuleBox125 div has a 40% width which is causing the search button to wrap to the next line when the search bar increases in size.
You can easily fix this by looking into the style rules of the #k2ModuleBox125 div.
this is happening because .search-box has its width in % give it minimal width, and position it to the right instead of left, and you should be just fine.
.search-box {
min-width:XXpx;
right: 0;
left: auto;
}
I have an image with text aligned to the left of it. Both the image and text is sitting inside a div that I have styled to look like a red bubble in the background of the post. The bubble only goes as far as the text and not the image (the image goes down much farther than the text), causing the image to break into other posts. How do I make this div the correct size that can fit anything i put into it (in this case the image)?
jsfiddle: http://jsfiddle.net/Sederu/CzNr6/
Add overflow:auto to your .post-bubble rule.
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
overflow:auto;
}
jsFiddle example
If you want the content to allow anything inside of it, give it overflow:auto.
If you want the bubble to extend so that it also covers the img tag, however, give .post-bubble a height:
div.post-bubble {
padding: 10px;
background-color: #e17474;
border-radius: 10px;
height:600px;
overflow:auto;
}
The reason why the image extends farther than the div is because the img is taken out of the flow of the page, i.e. no longer being a block element, when you declare align:right.
either add overflow:auto; to your post-bubble div or define a height to the post-bubble div eg.. height: 600px; covers it nicely..
On div tag do a display:block in css
I think the best solution is to force element to self-clear its children.
div.post-bubble:after {
clear: both;
content: '';
display: table;
}
You can also create a specific class for other elements in your project/projects like:
.clear-children:after {
clear: both;
content: '';
display: table;
}
And add this class (.clear-children, without :after) to every element with floated children.
http://jsfiddle.net/CzNr6/4/
I want to nest a div inside another div so that the outer div grows with the inner div as the inner div has text placed inside it. Would appreciate any help. Here is a link so you get the idea. You will need to open your browser up to full screen to see the bottom of it correctly.
Hello Slalvenko, Have posted up both your code (thank you kindly) and my code which I know is not perfect but I'm learning. Yes I am aware of css reset styles that set browser default values to 0 and I did download one once. But I'm hoping that in a years time I will be aware of all of this and just write it into my code. I suppose a reset saves time and trouble but I'm enjoying pottering around what with all of this being new to me. Here is your code and my code. Mine is slightly different because I was wanting to add two more divs to it later which I will show you when I get there. Mike http://www.hnw7.com
.outer {
background-color: #CCF;
margin-top: 0px;
right: 0px;
margin-right: 0px;
bottom: 0px;
margin-bottom: 0px;
}
.inner {
width: 535px;
background-color: #E6E6FF;
color: black;
padding: 20px 50px 20px 50px;
overflow: hidden;
margin: 0 auto;
}
I'm not sure if this was your question but try this. The floats in your .inner div are making the parent's height 0, since the floats take those elements from the document flow. You need to clear those floats if you want your parent to have actual height. I find that easiest way to do so is to add overflow:hidden; to the parent element.
You can read about clearing floats here
I am using the AJAX autocomplete add-on to the <asp:textbox> control. I have everything working with a <div> around the <ajaxToolkit:AutoCompleteExtender>.
I set the following CSS class:
.autocomplete_CompletionListElement
{
margin: 0px;
background-color: White;
cursor: default;
overflow-y: auto;
overflow-x: hidden;
height:180px;
text-align: left;
border: 1px solid #777;
z-index:10000;
}
Right now, when the list contains a reasonable amount of items, a vertical scrollbar appears (which is correct) and I can scroll through the drop down which is set to a height of 180px in the CSS (as seen above).
However, when there are only 1 or 2 items in the drop down, the height remains fixed at 180px with the 2 items and blank white space below. What I would ideally want is that the AJAX drop down would shrink to fit the height of its contents. If the contents are more than 180px, then the scrollbar should appear (as it is doing now).
Remove height:180px and change the CSS to use something like:
max-height:180px;
That should work (but I think only from IE7+) the other browsers should support it ok.