Some CSS on my screen seems to be automatically giving itself a margin from the top but not showing it correctly.
Example:
The green box is inside the image.
I have a feeling this is breaking the format I want which is to have the logo too the left and the contact and search bar too the right:
Here is my CSS:
.span6 img {
float: left;
}
img.logo {
float: left;
max-width: 350px;
height: auto;
}
#contact
{
float: left;
font-size: 2em;
color: black;
}
and my HTML:
<div class="row top-header">
<div class="span12" data-motopress-type="dynamic-sidebar" data-motopress-sidebar-id="header-sidebar">
<?php dynamic_sidebar("header-sidebar"); ?>
</div>
</div>
<div class="row">
<div style="" class="span6" data-motopress-type="static" data-motopress-static-file="static/static-logo.php">
<img src="http://bradlyspicer.net/autokentcare/wp-content/uploads/2014/01/logo2.png" class="logo">
<div id="contact"><span style="margin-left:50px; float: left;">01843 123456<br><div style="margin-top:15px; display:inline-block;"><form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
<div><input type="text" size="12px" name="s" id="s" value="Write your search and hit Enter" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="submit" id="searchsubmit" value="Search" class="btn""/></span></div>
</div>
</form></span>
</div>
URL: http://www.bradlyspicer.net/autokentcare/
After doing suggested changes this happens when I shrink the window:
You have your logo and search bar inside of a div that has a width set on it to 560 (span6 class) If you remove that class it should work a bit better for you.
Related
I have been trying to style my "contact us" slider window but for my lack of knowledge (started website designing only a month back for my own project) I am kinda stuck.
The functionality is working great, but there are a few issues:
"contact us" text and a image that I am trying to get in a line is
not working.
in collapse mode, div containing text "contact us" is getting
reduced width wise.
Please excuse my not-so-technical language, since I am new to the concept.. Please refer my website koncreteplanet.com.. also, I have created a jsfiddle to give a glimpse of the code I am using (https://jsfiddle.net/jjff2o2x/). Thanks in advance!!
Javascript code:
jQuery("#ContactUs_header").click(function () {
jQuery('#slideContactUsbox').slideToggle('slow');
});
HTML / PHP code:
<div class="row">
<div class="col-md-8">
</div>
<div class="col-md-4" id="contactus-panel">
<div class="contactus-panel">
<div id="ContactUs_header" class="contactus_footer" >
<p>Contact Us</p>
<img align="right" width=auto height="40px" src= "<?php echo bloginfo('template_directory') . "/image/handshake.png" ; ?>">
</div>
<div id="slideContactUsbox" class="contactus-extended">
<div class="container" style="width:300px;align:left;" id="MailUs-Panel">
<form name="Form-MailUs" id="Form-MailUs" method="post" action=<?php echo (get_template_directory_uri() . "/contactus/html_form_send.php"); ?> >
<div class="">
<input type="text" class="form-control mailflds" name="first_name" id="first_name" maxlength="50" size="30" placeholder="Name">
</div>
<br>
<div>
<input type="text" class="form-control mailflds" name="email" id="email" maxlength="80" size="30" placeholder="E-Mail">
</div>
<br>
<div>
<input type="text" class="form-control mailflds" name="telephone" id="telephone" maxlength="30" size="30" placeholder="Mobile / Landline Number">
</div>
<br>
<div>
<textarea name="comments" id="comments" class="form-control mailflds" maxlength="1000" cols="25" rows="6" placeholder="Enter your comments"></textarea>
</div>
<br>
<div>
<Button class="btn btn-primary btn-block btn-custom" id="Submit_MailUs" name="Submit_MailUs">Submit</Button>
</div>
<div id="ack-mailus-err" style="color:red;font-family:garamond;font-size:18px;text-align:center;">
</div>
</form>
</div>
<div id="ack-mailus" style="color:green;font-family:garamond;font-size:18px;text-align:center;">
</div>
</div>
</div> <!-- end of contactus panel -->
</div>
</div>
CSS code
.contactus-panel{
position:fixed;
bottom:0;
z-index:9999;
}
.contactus_footer{
position:relative;
/*z-index: 10; */
/*float:right; */
text-align: left;
line-height: 1.5;
cursor: pointer;
padding: 5px 2px 4px 15px;
font-family:'Raleway', garamond, sans-serif;
font-size:20px;
background-color: #084000;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
position: relative;
width: 100%;
vertical-align:center;
float:left;
}
.contactus_footer a {
color: #fff;
}
.contactus-extended{
background-color:#fff;
padding-top:20px;
padding-bottom:20px;
}
slideToggle() is jQuery method. Please using jQuery.
https://jsfiddle.net/pgqnjdvp/
I was able to resolve both parts of the issue.. can't believe it was that simple.. for part 2: I just added width exclusively to the container and it ceased to exist... also resolved part 1 of the issue.. added float and vertical-align:middle to both the text and img element styling too in addition to the div class and got the desired result.
My form on this page http://fashiondevelopmentgroup.com/
In the sidebar ENJOY OUR FREE NEWSLETTER is not looking right in Firefox. Everywhere else it is fine. Is there a way to code CSS specific to Firefox to fix this?
I have used the -moz-margin-start to set the horizontal css, but is there a specific vertical code for Firefox?
Thanks,
Brian
here is my code:
input, textarea, select {
vertical-align: middle;
color: #889291;
margin-left: 20px;
margin-top: 50px;
}
.button {
display: inline-block;
margin-left: 200px;
margin-top: -55px;
color: #fff;
background-color: #889291;
-moz-margin-start:67%;
-webkit-margin-start:70%;
}
HTML:
<div id="optin">
<form action="http://fashiondevelopmentgroup.us2.list-manage1.com/subscribe/post? u=1eed93a2e1bb3dc00d80e42af&id=25ea8ae595"; method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="background- image:url('HERE IS WHERE YOU WILL PUT THE LINK TO YOUR IMAGE THAT YOU UPLOADED');background-repeat: no-repeat; width:300px; height:151px;" novalidate>
<input type="email" size="30" value="Email Address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="clear">
<input type="submit" value="SIGN UP" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
in your my_style.css line 8 you have a 50px margin-top for all input, textarea, and select elements. get rid of that so you can style individually for your situation.
then add position:relative you the parent div of the submit button. then add position:absolute; top:0;right:0; to your .button class.. this will align the button properly in firefox as well.
You will no longer need those margins in the .button class either. use the value in top: and right: to move the button exactly where you want it
I've created a scrollable pop-up that uses a jQuery plugin to hold the buttons in place at the top of the window as a user scrolls. This works except for one small problem...the white background that I have placed on the div containing the buttons (in order to prevent seeing the content scrolling beneath the buttons) is extending beyond the right edge of the pop-up. I've tried this in both Chrome and Firefox and they both do the same thing. Is there a CSS solution to this problem?
Here's my fiddle - http://jsfiddle.net/donnapep/NhmvH/2/
HTML
<div class="overlay"></div>
<div class="wrapper container modal-content">
<div>
<h1>Weather Settings</h1>
<div class="sticky-wrapper">
<div class="btn-toolbar sticky-buttons">
<button id="save" class="btn btn-primary" type="button">Save</button>
<button id="cancel" class="btn btn-primary" type="button">Cancel</button>
<button id="help" class="btn btn-primary" type="button">Help</button>
</div>
</div>
</div>
<form role="form">
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label for="layout">Layout</label>
<div class="radio">
<input type="radio" name="layout" value="current" data-url="http://s3.amazonaws.com/Widget-Weather-Test/current.html" checked="checked">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-vertical.png" class="img-thumbnail">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-horizontal.png" class="img-thumbnail">
</div>
<div class="radio">
<input type="radio" name="layout" value="three-day" data-url="http://s3.amazonaws.com/Widget-Weather-Test/three-day.html">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/three-day-vertical.png" class="img-thumbnail">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/three-day-horizontal.png" class="img-thumbnail">
</div>
<div class="radio">
<input type="radio" name="layout" value="current-and-three-day" data-url="http://s3.amazonaws.com/Widget-Weather-Test/current-and-three-day.html" checked="checked">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-and-three-day-vertical.png" class="img-thumbnail">
<img src="http://s3.amazonaws.com/Widget-Weather-Test/images/thumbs/current-and-three-day-horizontal.png" class="img-thumbnail">
</div>
</div>
</div>
</div>
</form>
CSS
.overlay {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
.wrapper {
z-index: 2;
width: 90%;
height: 500px;
margin: 20px auto 0;
overflow: auto;
}
.sticky-buttons {
z-index: 10;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #fff;
}
Javascript
$(document).ready(function () {
$(".sticky-buttons").sticky({
container: $(".wrapper"),
topSpacing: 21
});
});
Thx.
http://jsfiddle.net/4eAeA/
Looking at the docs for that plugin you can use getWidthFrom as an option argument.
$(document).ready(function () {
$(".sticky-buttons").sticky({
container: $(".wrapper"),
topSpacing: 21,
getWidthFrom : $(".wrapper")
});
});
#donnapep, a downside I saw from that plugin is that it does not keep the width in check on resize.
You will also need something like this :
var _stickybuttons = $(".sticky-buttons");
$(window).resize(function () {
_stickybuttons.sticky('update');
});
I changed your jquery to:
$(document).ready(function () {
$(".sticky-wrapper").sticky({
container: $(".wrapper"),
topSpacing: 21
});
});
Some position:absolute; to
.wrapper.container.modal-content
so that it does not extend to the right
and
width:100%;
z-index:20;
in .sticky-wrapper
Fiddle:
http://jsfiddle.net/NhmvH/9/
It moves to left now but you get the idea.
Dont know if by changing your plugin its easier but anyway I hope it helps a bit.
I'm using jQuery Mobile (JQM) layout grids for a form validation project. The problem is that when I add an error above one of the fields, the other field in the same grid looks misaligned vertically:
I would like to keep the fields inline regardless of errors above them, preferably using css/HTML/JQM only. The error messages have to remain within the ui-block-a or b divs.
Here is the HTML. There is no css styling outside of what JQM provides by default:
<div class="ui-grid-a">
<div class="ui-block-a">
<label>
City:
<input type="text"/>
</label>
</div>
<div class="ui-block-b">
<div class="field-validation-error">The State field is required</div>
<label>
State:
<select>
<option selected="selected">Select a state...</option>
</select>
</label>
</div>
</div>
I have tried the following css override, but it ends up hiding the error message.
.ui-grid-a {
position: relative;
}
.ui-block-a {
padding-right: 7px;
}
.ui-block-b {
padding-left: 7px;
position: absolute;
right: 0;
bottom: 0;
}
I am assuming that you are hiding and showing the respective error divs on submit.
http://jsfiddle.net/B95jE/1/
<div class="error-div">
<div class="state-validation-error">The State field is required</div>
<div class="city-validation-error">The city field is required</div>
</div>
<br/>
<div class="ui-grid-a">
<div class="ui-block-a">
<label>
City:
<input type="text"/>
</label>
</div>
<div class="ui-block-b">
<label>
State:
<select>
<option selected="selected">Select a state...</option>
</select>
</label>
</div>
</div>
CSS:
.error-div{
position:relative;
}
.ui-grid-a {
position: relative;
}
.ui-block-a {
float: left;
}
.ui-block-b {
float: right;
}
.state-validation-error{
float:right;
}
.city-validation-error{
float:left;
display:none;
}
I am trying to align a form's text fields to the right side of the div in which they are contained. I have this for css:
application.css
#loginform {
width: 400px;
height: 300px;
background: rgba(237,191,92, 1);
margin-left: 0px;
padding: 10px;
}
#usertext, #passtext {
text-align: left;
}
#loginuser, #loginpass {
text-align: right;
}
#submitbutton {
text-align: center;
}
Here is my html:
indexform.php
<div id="loginform">
<form id="login" method="post" action="checklogin.php">
<h1>Member Login</h1>
<div id="usertext">
<p>Username:</p>
</div>
<div id="passtext">
<p>Password:</p>
</div>
<div id="loginuser">
<input name="myusername" type="text" id="myusername">
</div>
<div id="loginpass">
<input name="mypassword" type="password" id="mypassword">
</div>
<div id="submitbutton">
<input type="submit" name="Submit" value="Login">
</div>
</form>
</div>
What happens now:
Username:
Password:
|--username textfield--|
|--password textfield--|
|-login button-|
The text fields should be lined up to the right of the "Username:" and "Password:" labels.
I did this
DEMO
<div id="loginuser">
<input name="myusername" type="text" id="myusername">
</div>
<div id="usertext">
<p>Username:</p>
</div>
<div id="loginpass">
<input name="mypassword" type="password" id="mypassword">
</div>
<div id="passtext">
<p>Password:</p>
</div>
and
#loginuser, #loginpass {
float: right;
}