I am working on a new homepage at http://www.bkd.com/new-test-2.htm
We have a search bar that was previously built by a different developer who is no longer here.
I am trying to make the search bar further to the right of the screen but also still be responsive. I am not sure what I am doing wrong. I have tried a lot of different things and when I make the browser smaller it just jumps below the navigation. This is what I do not want to happen.
Here is the coding for the whole light grey bar:
<div class="clear"></div>
<div class="span-8">
<a class="left" style="padding: 0px 0px 0px 0px; margin-left: 80px;" href="/">
<img src="/images/common/header/logo.png" border="0"></a> </div>
<div style="margin-top:25px;" class="span-0 last">
<form action="/search/">
<input type="image" src="/images/common/search/search-icon-new.png" style="margin-left: 220px; float:left; outline:none" alt="Search">
<input type="text" name="zoom_query" value="Search" style=" background- image:url(/images/common/search/search-field-new.png); background-repeat: repeat-x; margin: 0; line-height:26px; height: 26px; width:200px; color:#666; background-color:#fff; border:none; outline:hidden; border-radius: 7px; float:right; padding: 0px 0px 0 10px; margin-left: 0px;" onFocus="this.value=this.value.replace(/^Search$/, '')">
</form>
</div>
Can anyone tell me what I am doing wrong or a better way to achieve what I am trying to do. Please let me know if I need to provide any more information.
Thank you in advance!
-Marcy-
The search bar is breaking down because the marker icon beside it has an unnecessary margin of 220px, giving the whole search div a width of 462px which causes it to break down on lower screen size.. change the following
<input type="image" src="/images/common/search/search-icon-new.png" style="margin-left: 220px; float:left; outline:none" alt="Search">
to
<input type="image" src="/images/common/search/search-icon-new.png" style=" float:left; outline:none" alt="Search">
to move the search bar to the right, apply float:right to the container div as follows:
<div style="margin-top:25px; float:right" class="span-0 last">
i suggest using external stylesheets instead of applying inline style, external stylesheets are likely to be cached, hence loading might become faster on consecutive visits. Also it makes your html more readable as well.
Related
Hello I have created two divs, one is floated to the left (button), and has 120px width, and another one is for textarea, textarea should be margin-left: 20px and take rest of the width. How much ever I try, I am not able to achieve this. Guys, do you know the solution?
<div id="button" style="float: left; width: 120px; height: 80px;">
<input type="button" id="button" value="something" />
</div>
<div id="textarea" style="margin-left: 20px;">
<textarea id="message"></textarea>
</div>
(For IE8 use #ID named DIVs instead of nth-child)
DEMO
|-------- 120 --------| 20 |------ available space ----------------------------------------------------------->
<div id="formArea">
<div>
<input type="button" value="something" />
</div>
<div>
<textarea></textarea>
</div>
</div>
#formArea{
display:table;
width:100%;
}
#formArea>div{
display:table-cell;
vertical-align: top;
}
#formArea>div:nth-child(1){
width:120px;
}
#formArea>div:nth-child(2){
padding-left:20px; /* instead of margin */
}
#formArea textarea{
border:0;
width:100%;
}
And remember, ID must be unique-per-page.
Try this:
CSS
.left{
float:left;
width:120px;
}
.right{
overflow:hidden;
margin-left:20px;
}
#message{
width:100%;
}
HTML
<div class="left">
<input type="button" id="button" value="something" />
</div>
<div class="right">
<textarea id="message"></textarea>
</div>
fiddle
Let's give this one a try... Below is the code you have given us but with a few enhancements:
<div id="container">
<div class="left">
<input type="button" id="button" value="something" />
</div>
<div class="right">
<textarea id="message"></textarea>
</div>
</div>
And the following is the CSS I have attached:
.left {
width: 120px;
float:left;
}
.right {
float:right;
}
#message{
width:400px;
}
#container {
display:inline-block;
}
Now, what I have done is set all of your current divs into one main div, which can hold everything together. I implemented a display:inline-block to help keep everything on one line along with maintaining the text area to be on the right and the button on he left with the cushion you have asked for in-between. To get a better idea of what this does, I have recreated an already done JsFiddle, which can accurately depict what I am describing.
A few things to note, remember that "textarea" can have the values of "rows" and "cols" which will determine how many rows and columns the text area will be, so you really do not need to have width in this aspect, especially if you need more rows vs columns.
Another thing, if you want to learn a bit more conceptually about some CSS tricks, the Almanac is one of the better tools out there to help you understand "why this does that".
Last, I encourage you to play with everybody's JsFiddle to get a better understanding of exactly what you want to see in your own code, every answer that has been presented has their own unique JsFiddle.
If this does not work or you have questions, comment below and we can figure something else out :)
Good luck with your future HTML/CSS coding adventures :)
I've created a few pages in Firefox and everything was looking as it should. Made a quick flip to Chrome and Safari and noticed that my opt-in form in the header of this page is not displaying as it should. I would like for the entire opt-in div to be inside the header div. From what I can tell it is in the header div in Firefox, but pretty much every other browser shows it below the main navigation.
Here is the CSS for the header and the opt-in form that should be in it:
.header{height: 302px;min-width: 100%; background-color: #265f8b;
margin: 0 auto;}
.opt-in {height: 280px; width: 800px;background-color: #c7e877;float: right;
margin-right: 200px;margin-top: 10px;border:5px solid #8db530;
border-radius: 10px;position: relative;}
Here is the HTML:
<div class='header'>
<img style='border: 1px solid black;' src='images/main-logo.jpg'></img>
<div class='opt-in'>
<p>Enter your name and email below to get
<span style='font-weight: bolder;'>Free Instant Access</span> to the most comprehensive
guide available on how to ..</p>
<p><span style='font-weight: bolder;'>Over 10,000 people</span> have enjoyed my eBook and receive
a weekly newsletter with exclusive tips!</p>
<table>
<form method='post' action='opt-in-form.php'>
<tr><td><input type='text' name='name' value='Enter Name...' /></td></tr>
<tr><td><input type='text' name='email' value='Enter Your Email...' /></td></tr>
<input class='opt-in-button' type='image' src='images/opt-in-button.png' alt='Submit Form' />
</table>
</form>
<img class='book-cover' src="images/book-cover-new.png"></img>
</div>
</div>
You'll notice that I have included it in the header div and have a float right on it.
http://fairchildwebsolutions.com/packattack/index.php
The top left logo needs a float: left. that should solve the problem.
Float the logo img left.
float:left
Also specify a width for the img element too. width:auto will do also.
I have the following fiddle:
http://jsfiddle.net/neGJF/
The HTML code is as follows:
<div class="loginbarGrad">
<div style="position:relative; float:right; padding: 11px 65px 0 0;">
<input type="text" placeholder="EMAIL" value="EMAIL" class="singleField" name="kp_email" id="kp_email">
<input type="password" placeholder="PASSWORD" value="PASSWORD" class="singleField" name="kp_password" id="kp_password">
<a class="signIn">Sign In</a>
</div>
</div>
You can see the CSS at the fiddle.
I am trying to increase the box size of the inputs, and also trying to increase the size of the "sign in". I was wondering if someone could explain why when I increase the size of the font, it's not centered vertically within the login bar, and also, why it impacts the alignment of the login/password box? I'd like to be able to have it so that the boxes and sign in are not impacting each other. This may be a basic CSS function but it's eluding me, so I am hoping someone with more experience than I can help explain it.
Thank you!
Why don't you try:
.loginbarGrad > div > * {
vertical-align: middle;
}
The elements within the div within .loginbarGrad will all align to the middle of each other.
you can also float left the inputs and space them out with a bit of margin from the sides
and than you're free to increase the font-size of the .signin text just make sure to add line-height with the same height as the inputs
.signIn { font-size: 24px; line-height: 18px; }
#kp_password , #kp_email { float:left; margin: 0 5px;}
There are a million issues with sprites and IE8 i've read about online, however, they all seem to deal with the issue of the sprites not showing up at all. Mine is showing up, its just showing the wrong piece of the sprite. It works fine in all other browsers.
Heres the CSS
div.searchForm input[type=text] {
border: 0;
padding: 0 10px;
margin: 0;
background: url(../img/sprite.png) 0 -125px no-repeat;
background-size: 115% 235px;
width: 600px;
height: 30px;
float: left;
font-size: 12px;
color: #fff;
-webkit-appearance: none;
-webkit-border-radius: 0;
}
and the html:
<section id="secondary6">
<h1 class="hidden">Search</h1>
<div class="clearfix">
<div class="grid_4">
<nav class="grid_2 secondary">
<h1 class="hidden">Search Secondary Navigation</h1>
</nav>
<div class="searchForm">
<input type="text" placeholder="search">
<input type="button">
<input type="submit" class="hidden" >
</div>
</div>
</div>
</section>
basically you click the search button, and it displays a search bar that should be hidden otherwise. Like I said it works in other browsers.
IE8 doesn't support background-size (see https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility), so that's what you'll have to work around. Depending on your needs, you might try IE7.js (which works with other versions of IE) or a conditional comment to adjust the position of the image for IE8. Or, just make sure your raw image doesn't need to be re-sized.
What happens when You assign class or ID to particular text input field?
for example..
div.searchForm input.classInput {
/* css code here */
}
Also ...
..where is element form tag wrapper, form name, form action ?
The input fields should not reside in a document on a way You presented.. without form tag..
Which software actually generated this code for You?
Is it dreamweaver?
Basic and proper example of valid HTML input form ..
<form id="formID" name="formName" method="post" action="#">
<input type="text" name="textUno" value="" />
<input type="text" name="textDue" value="" />
<button type="submit" name="do_processing"> Go! </button>
</form>
I have been trying to build a simple search page, similar to the structure of google main search page. I am having trouble with positioning the elements in a way that is forgiving to browser zoom. While zooming in/out, the input field for the search seems to expand and contract which messes up the layout of the webpage. So my question is, does anyone know how to maintain the initial layout of the elements in the markup below while zooming in and out?
More specifically, I would like the input field to have the exact same width as the banner above it, while zooming in/out.
Try pressing Ctrl + '+' and Ctrl + '-', on google's homepage and note how everything stays positioned the exact same way while zooming in and out. That is what I am trying to accomplish with my example.
My Markup:
<div style="width:1000px; border:2px solid grey;">
<div style="margin:0px auto 0px auto; width:600px;">
<img src="http://spiritsentient.com/wp-content/uploads/2009/12/foobar2000_banner1.jpg" style="width:600px; height:150px;">
</div>
<div style="width:800px; margin:0px auto 0px 200px;">
<br/><input type="text" size="94">
<select>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
</div>
<div style="width:30px; margin:0px auto 0px auto;" >
<input type="submit" value="search">
</div>
</div>
jsfiddle:
http://jsfiddle.net/QbQS7/
The main problem is using width="1000px" for the container div, try using % instead for example width="100%". Or at least center the element.
Then you have div containing search box aligned 200px to the left, try converting it to the % or simply center is by using margin: 0px auto;
Finally declare widths for text input and select input, so they don't overlap at certain zoom sizes. It is usually good idea to declare width to elements if their parent has declared width.
see below:
<div style="width:100%; border:2px solid grey;">
<div style="margin:0px auto 0px auto; width:600px;">
<img src="http://spiritsentient.com/wp-content/uploads/2009/12/foobar2000_banner1.jpg" style="width:600px; height:150px;">
</div>
<div style="width:800px; margin:0px auto;">
<input type="text" style="width: 600px" size="94">
<select style="width: 150px;">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
</div>
<div style="width:30px; margin:0px auto 0px auto;" >
<input type="submit" value="search">
</div>
</div>