I have had the same login form and create_profile form for a long time. Yesterday some style changes were made on the site and today to my amazement, these two forms have fields reversed.
Here is the example of what I am talking about:
http://www.hikingsanfrancisco.com/create_profile.php
I am not very knowledgeable in CSS issues, and I have never seen something like this. Any idea what may be causing this?
Thanks,
Alex
label span has been floated right in your CSS:
label span {
float: right;
width: 15em;
}
Change it to:
label span {
float: left;
width: 15em;
}
Related
I am really bad with css and html, can somebody help with this simply problem?
On the bottom of the [site][1] i have text and sharing icons. How can i make them in one row? Like on right from text. It looks horrible now.
Thank you!
here:
this css should work:
.text-muted {
display: inline-block;
}
div.ya-share2 {
display: inline-block;
float: right;
margin-top: 20px;
}
explain: it makes both elements able to coexist in the same line, plus the margin-top is just for aligning it.
add that to your CSS file and youre good to go
I was wondering if anyone here would be as so kind as to help me out a bit. I am looking to make expandable paragraphs for my client's website. They would like to keep all of the content from their site, which is pretty massive, and they want a total overhaul of the design. They mainly wan tot keep it for SEO purposes. Anyhow, I thought it would be helpful for the both of use if there is some way to use expandable paragraphs, you know, with a "read more..." link after a certain line of text.
I know that there are some JQuery and Java solutions for this, but we really would like to stay away from those options, if at all possible. When would like HTML and CSS, if we can.
Here is kind of an example:
HEADING HERE
Paragraph with a bunch of text. I would like this to appear in a pre-determined line. For example, maybe the start of the paragraph goes on for, let's say, three lines and then we have the [read more...]
When the visitor clicks "read more", we would like the rest of the content to just expand to reveal the article in its entirety. I would like for the content to already be on the page, so it just expands. I don't want it to be called in from another file or anything, if that makes sense.
Thank you in advance for any and all help. It will be greatly appreciated!
Testudo
an easy solution would be this
you will just need 2 toggle events in css with display: none; and display: block;
http://jsfiddle.net/6W7XD/1/
of course you would need to pre-program where you want to start the hide by including a div of it with the close button span inside the div to do the toggles
and if u do decide to javascript it
here is what you can look at
http://jedfoster.com/Readmore.js/
I think you need to use Jquery or Javascript
$('a').click(function() {
var p = $('a').prev('p')
var lineheight = parseInt(p.css('line-height'))
if (parseInt(p.css('height')) == lineheight*2) {
p.css('height','auto');
$(this).text('Less')
} else {
p.css('height',lineheight*2+'px');
$(this).text('More')
}
});
DEMO
This can be achieved using the :target selector for a jQuery/Javascript-less option.
To do this, you need to set each of the expanding texts as targets (give them an id). Then, set the "Show more" tab as a target to said id/target.
Something like:
.article {
position: relative;
border: 1px solid grey;
overflow: hidden;
width: 300px;
}
.article:target {
height: auto;
}
.article:not(target) {
height: 50px;
}
.toggle {
padding: 2px;
position: absolute;
right: 0px;
bottom: 0px;
background: white;
border: 1px solid red;
}
You can view a testable fiddle here.
Note I use :not(:target) to make sure it's the right size when not selected.
I have spent a while encouraging an input form and the submit button to display exactly inline (i.e. same height and vertical position) in both Firefox and Safari. But I'm not having much luck; can anyone help?
The current CSS for the 'Keep in touch' widget on this page: www.landedhouses.co.uk is:
form.mc4wp-form p{margin-left:0px !important; display:inline; }
form.mc4wp-form input {width:135px; padding:7px;}
form.mc4wp-form input[type=submit] {width:54px; margin-left:5px;}
But the submit button is still a pixel out. I think the CSS elsewhere is overriding something... any ideas?
Thank you!
I have done some changes in your css try it if it works for you.
#right input[type="submit"] {
clear: both;
cursor: pointer;
display: block;
height: 30px;
}
form.mc4wp-form input[type="submit"] {
margin-left: 19px;
width: 54px;
}
My website has a contact form where I want the input fields be lined up to the left, currently they are to the right. I am not good at css, I can't even find out what element I should change attribute, although I know it's an easy job using FireBug. Can someone tell me how? Thank you so much.
In neon.css remove the entry float: right; from the respective style definitions. Of course you will then have to position them to lign up beneath eachother.
.foxform input, .foxform textarea {
...
float: right; <-- remove this
}
.fox-dropdown-container {
...
float: right; <-- and remove this
}
text-align: left; or float: left;
I want to build a list of itens. Each item should be in one line, like several paragraphs.
Why my div.empresa elements are on same line? I think they should be on different lines because the display property of them is block.
Take a look at code:
http://jsfiddle.net/Yz8Cq/
You need to remove float: left;
#ListaDeEmpresas .arrow {
height: 50px;
width: 20px;
background: url("/Content/SetaBrancoh40.png") no-repeat center center;
background-color: #A9462F;
}
http://jsfiddle.net/spacebeers/Yz8Cq/5/
Floats can be a bit tricky to get your head around at first. This article is excellent - http://css-tricks.com/all-about-floats/
Actually, removing float: left from the label will make the arrow span appear to the left of the label. Assuming you want the arrow spans to continue to show up on the right of the labels, then you want to add:
#ListaDeEmpresas div.empresa {
clear: left;
}
This will make sure each label/span set appears below the previous one.
Get rid of the float: left; in #ListaDeEmpresas .arrow
The float: left; is making them do that.