Ok so I am trying to make a layout to be used with Contact Form 7. This is what I have come up with, I just feel like I could probably clean it up. Also I cant seem to remove my Submit class without breaking everything.
I want to get rid of:
.Submit {
float:right;
}
I also would like to get the columns to line up properly. I have them lined up if the screen is the right size but I would like to make this responsive if possible.
JSFiddle
Any advice would be much appreciated.
Thanks,
jFlatz
Your problem is in
.table width: 70%;
}
you left out a {, i.e.
.table {
width: 70%;
}
DEMO
You can get rid of that .Submit rule safely if you open/close the .table rule above it appropriately:
THIS...
}
.table width: 70%;
}
.Submit {
float:right;
}
Should Be...
}
.table {
width: 70%;
}
.Submit {
float:right;
}
Related
I have a problem with the fact that, when I try to print a page, every link gets the URL between () behind it. I have found multiple questions here, and the solutions work. I have one other problem, on top of that, though: My styles in print.css seem to be ignored after adding a solution.
My CSS
.header-breadcrumb {
margin-top: 0 !important;
}
.nonPrint, hr, .shows-more, #videoGallery{
display: none;
}
.single-event .container .col-md-9 {
width: 70%;
float: left;
}
.single-event .container .col-md-3 {
width: 30%;
float: left;
}
.single-calendar .table-responsive table tbody tr td {
padding: 2px 5px;
}
.single-description {
font-size: 10pt !important;
}
h1 {
font-size: 12pt !important;
}
.printLogo {
display: block !important;
width: 200px;
padding-left: 10px;
}
But when I add
a:after {
display: none;
content: "";
}
the font-sizes get ignored and jumps back to their original values (or so it seems). How do I fix this?
On the left you see the file as it should look like (including a link in the sidebar on the right, which has to be removed), and on the right you see the file with the href removed, but where the all new styles in print.css seem to be ignored.
Disregard what I said before. The difference in styling came from the following:
Because of this CSS, the sidebar has to fill 30%:
.single-event .container .col-md-3 {
width: 30%;
float: left;
}
But since it output a URL which could not be broken until the first -, being 30% wide meant resizing the font (which Chrome did automatically). Hiding the URL made it possible to actually apply the font-size I tried to apply through the CSS, making everything bigger than in the original file, where it actually DIDN'T listen to the CSS.
Facepalm
This might be useful in the future for 2 other people, so I'll leave the question here.
I know this is a very simple question, but I somehow don't get it to work. I looked at many other questions here, but couldn't find the right answer.
How can I remove white space between two tables without setting a negative margin? I've tried the following things on the table and body without any luck:
margin:0;
padding:0;
display:block;
Here's a fiddle to test it out: http://jsfiddle.net/sznurkqo/
Thanks
DEMO
In your case, .table is having margin-bottom:20px that's why there is a space.
.table {
width: 100%;
margin-bottom: 20px;
}
remove that space and it will work.
.table {
width: 100%;
margin-bottom: 0px;
}
This is more complicated than it should be, but I'm having trouble displaying an input width of literally 100% of within its div.
Example here:
http://jsfiddle.net/aml90/mfdtk/
I'm using Twitter Bootstrap. I want the inputs to be 100% of the width of the span6 classes, like the blue highlights:
Despite the lack of CSS, I have tried many things -- just didn't put the non-working CSS on there.
You will need to resize the windows, like this:
well it have to be something like this LINK
.input-prepend{
width:100%;
}
.input-prepend input{
width:95%;
}
.span6 .input-prepend {
padding-left:28px;
display:block;
}
.span6 .input-prepend .add-on {
float:left;
margin-left:-28px;
}
.span6 .input-prepend input {
width:100% !important;
}
this will put the add-on to the left side, and let the input take up remaining space
JSFiddle
Patching Bootstrap in such a way is a bit tricky, since there can be different "side effects". Maybe something along those lines will do the trick for you:
.span6 { width: 100% !important; margin-left: 0 !important }
.span6 input { width: 92%; }
.input-prepend { display: block; }
Play around with overriding these CSS directives and test you layout with it. Good luck!
http://jsfiddle.net/Yuv3H/
I'm styling the mail I send to my clients and I want the image to float but the text shouldn't be wrapping underneath it. I've tried
#left-image {
float:left;
}
#right-text {
display:table-cell;
}
and
#left-image {
left: 0;
position: absolute;
}
#right-text {
padding: 0 0 0 100px;
position: relative;
}
the first code still wraps the text around the image and the second set of codes puts the image on top of the texts. I've been using the second code for my confirmation page before sending and it works as how I want it to but how come my mail comes out differently?
Today I used the align (html) attribute I just wrote
<table align="left"></table>
this solved my float problems.
Why are you mixing methods? Stick to one, either float or use the display table-cell on both elements .
#left-image {
float:left;
}
#right-text {
float: left;
}
#left-image {
display: table-cell;
}
#right-text {
display: table-cell;
}
I presume that you are creating the email with ordinary div tags which is not recommended to achieve cross-platform compatibility. Use HTML email structure with no floats as well as margins and then you can see a browser as well as platform independednt mail. Instead of float:left, you can go for text-align:left if you are using html tables.
I created a spanned line with dots to fill in between text of links and phone number, but i cant get it so that if i have to many dots that the text does not go underneath. The problem is on some different brwosers and computers the .... will look fine or it will push it out of the way. How wouldi go about making it so the dots.... would span and the text would not go below the width its supposed to.
<style type="text/css">
#contactInfo {
margin:auto;
width: 480px;
height: auto;
}
</style>
<div id="contactInfo">
<p>Email: .........................................................................info#hereistheemail.com</p>
<p>Phone: ..................................................................................<span class="redBold">888-888-8888</span></p>
</div>
I tried putting less dots buton some browsers it just doesnt look right.
A better way to do what you want is with a definition list. This will semantically present the information you want and not require you to type out a bunch of dots:
HTML
<dl>
<dt>Phone</dt>
<dd>123-4567</dd>
<dt>Email</dt>
<dd>info#email.com</dd>
</dl>
CSS
dl {
/* Adjust as needed. Note that dl width + dt width must not be greater */
width: 300px;
}
dt {
/* The definition term with a dotted background image */
float: left;
clear: right;
width: 100px;
background: url(1-pixel-dot.gif) repeat-x bottom left;
}
dd {
/* The definition description */
float: right;
width: 200px;
}
You can see an example of it here.
You will have to try and create a workaround for this, instead of just using characters.
Some solutions could be using a background image that repeats itself inside some div/span: http://www.htmlforums.com/html-xhtml/t-toc-style-dotted-line-tab-fill-in-html-103639.html
Or you could think of creating a span between the word e-mail and the e-mail address and try to create a border-bottom: dotted 1px black or something equivalent. Or maybe put the information in a table and create one td with that border-bottom.
Another solution would be to check the number of dots needed with some javascript, but this is most certain not robust at all and will not justify-align your content.
So, be creative with a solution. Filling the line with characters is probably not the way to go.
Try this:
#contactInfo {
[ your other styles ]
white-space: nowrap;
}
Another method is with position:absolute
Demo
#contactInfo p
{
position:relative;
}
#contactInfo span,#contactInfo a
{
position:absolute;
right:0px;
}
Edit (cleaned up version)