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.
Related
I am trying to create an opt-in area that stretches to hold its contents when the browser is resized (less width). I am trying to duplicate the orange picture area of this theme: http://anpsthemes.com/demo/?theme=constructo (Classic demo) where it says "FAST AND RELIABLE SERVICE FOR YOUR PROJECT..." Note that the background image doesn't stretch, but when you resize the browser it shows more of the image. This is what I would like.
I had no luck with the image, so tried background color, and the same thing happened, the background image or color doesn't "stretch" behind the content. Here is my code so far:
.oi {
/*background:url(opt-bg.jpg);*/
background-color:#f46a68;
width:100%;
min-height: 100px;
}
.oi-container{
max-width: 1310px;
margin: 0 auto 0 auto;
padding-top:22px;
}
.left{
max-width:670px;
float:left;
}
.right{
max-width:570px;
margin-left:30px;
float:left;
}
<div class="oi">
<div class="oi-container">
<div class="left">
<div class="txt-top">GET FREE TIPS TO CREATE THE LIFE YOU LOVE</div>
<div class="txt-bot">+ BONUS Why most health businesses fail and how to avoid it</div>
</div>
<div class="right">
<form action="#" method="post" id="oi">
<input type="text" class="input" value="first name" />
<input type="text" class="input" value="email address" />
<input type="button" onclick="document.getElementById('oi').submit();" value"get it" class="btn-get-it" />
</form>
</div>
</div>
</div>
I did inspect the theme's code, but can't really duplicate it, I'm not good with position divs within each other. You can see the code live here: http://itlive.ca/oi
Any help or a point in the right direction would be greatly appreciated.
.left and .right are floated, and therefore the containing elements, .oi for example, won't contain them, which is why they spill over when the window is resized.
Clearing those floats somehow (adding another element below and applying the clear CSS property, or using the clearfix method) might be a solution.
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.
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>
Im currently trying to fix a form that i have built to work on a responsive layout
Ive attached a jpeg of what the form should look like a on full version of the site with the comments field aligned to the right of the rest of fields but when viewed on a mobile i want the comments field to drop below the rest of the fields.
Because i was advised to wrap the comments field in a DIV and place it before the rest of the form fields then float it right, when i view the mobile version the comments field sits at the top of the form instead of the bottom
any suggestions to how i can fix this issue?
see the CSS & HTML below
<style type="text/css">
body {
background-color: #FFF;
}
#form {
width:960px;
background-color:#edf8ff;
height:650px;
}
.gezza-form {
width:894px;
margin:0 auto;
margin-top:20px;
}
.gezza-field {
width:437px;
height:75px;
margin-bottom:10px;
border: 1px solid #d9e7f1;
}
.gezza-comments{
width:437px;
height:300px;
}
-->
</style></head>
<body>
<div id="form">
<form action="" class="gezza-form" method="post" >
<div style="float:right;">Comments<br /><textarea name="comments" cols="" rows="" class="gezza-comments" ></textarea></div>
First Name<br />
<input name="firstname" type="text" class="gezza-field" /><br/>
Last Name<br />
<input name="lastname" type="text" class="gezza-field" /><br/>
Email Address<br />
<input name="email" type="text" class="gezza-field" />
</form>
Should all fields have a fixed width? Wrap each column in a div, then float both divs left and give them an explicit width.
Put the div with the text area below the other fields in the HTML.
That should get you a lot closer.
Then, you will need to wrap each field / label pair in a div too.
On the mobile view it should all go into place more or less (bit of padding / margin needed maybe).
Then, on the wider view float the div for the text area right and the other fields' divs left. You'll need to set width for them .. say 49% each.
You'll need to use a clear fix on the element after this lot to clear the floats.
I have two <fieldset>s inside a single div (nothing else), that are positioned next to eachother (positon: absolute, div is set to relative).
Is there any way to make these fieldsets both the same height without setting a fixed height?
I have some idea that maybe I can make both have a max height of the parent, and a min height of auto?
Also, would it then be possible to make the content of the fieldsets position centred vertically?
I'm not concerned if it works with IE, but needs to work on Firefox and Webkit, and if possible Opera.
Thanks
Edit: You can see the page here: https://dl.dropbox.com/u/2318402/SO/login.html
You can put them in a parent container like a table or div, and have the two children be at height=100%.
The only other two options are the ones you didn't want, at a fixed height like height=59px, or you can do it via javascript.
For the vertical positioning, you can stick them in a parent container like a table or div and then slap on there a vertical-align:center
I'm a bit late but you can always use tables (don't like those either but well.. table works in this situation).
<table>
<tr>
<td style="vertical-align:top">
<fieldset></fieldset>
</td>
<td style="vertical-align:top">
<fieldset></fieldset>
</td>
</tr>
</table>
The following works, without using js/jQuery, but does rely on -in this example- using a css3 psuedo-element :nth-of-type(odd), though this could be replaced by applying a css class to the odd-numbered fieldsets.
It also relies on using height: 100% for the fieldsets, which itself is dependant upon the parent element (in this case the form) having a specified height. If that's a problem then, for the purpose of demonstration, I've used overflow-y: auto; on the fieldsets to restrict their dimensions to that of their parent, but with a scroll behaviour to reveal the overflow.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="http://davidrhysthomas.co.uk/mindez/css/stylesheet.css" />
<style type="text/css" media="all">
form {
width: 50%;
height: 200px;
}
fieldset {
width: 30%;
height: 100%;
margin: 0 1em 0 0;
padding: 0.5em 1em;
overflow-y: auto;
}
fieldset:nth-of-type(odd)
{
float: left;
}
label {
display: inline-block;
width: 30%;
}
input[type=text]
{
display: inline-block;
width: 50%;
}
</style>
</head>
<body>
<div id="wrap">
<form enctype="form/multipart" method="post" action="">
<fieldset>
<label for="one">Label 1</label><input id="one" name="one" type="text" />
<label for="two">Label 2</label><input id="two" name="two" type="text" />
</fieldset>
<fieldset>
<label for="three">Label 3</label><input id="three" name="three" type="text" />
<label for="four">Label 4</label><input id="four" name="four" type="text" />
<label for="five">Label 5</label><input id="five" name="five" type="text" />
<label for="six">Label 6</label><input id="six" name="six" type="text" />
</fieldset>
</form>
</div>
</body>
</html>
Demo online at: http://www.davidrhysthomas.co.uk/so/fieldsets.html.
Obviously, if there's any questions or problems feel free to raise them in the comments and I'll try my best to help you out. =)