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.
Related
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;
On this page, why is .section not sitting at the top of #content?
I asked some friends, and they don't know either.
Because you've set #content to display: inline; float: left; on line 56 of layout.css.
Quite the disaster
(.tabs { display:none; } or .tabs { float: left; }) and
#node-7 .field-item.even p { float:right; }
A friend figured out that there were 2 elements nested inside .content that were being put there by Drupal, that was causing the extra space at the top of #content. The wierd thing is, they have to be removed together, in order for the space to go away.
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)
input field are not getting aligned and they flow out of the container. What causes that? Here is the code and page. I need the labels aligned left and input field all aligned too. Is it ok to give -ve margins??
the .para#info div is flowing out of the page. It is supposed to sit parallel with .para#news
You have overdone your CSS and have many unneeded properties.
Start by giving your label the following CSS properties, then style the inputs as you wish.
label {
width: 100px;
display: inline-block;
margin: 2px 6px 6px 4px;
text-align: right;
font-weight: bold;
color: #555;
}
Check working example at http://jsfiddle.net/6Eyef/1/
Its ok if you use..
margin-left: -220px;
margin-top: -150px;
for info Div.
thank you.
I'm not sure if I understand your question correctly. But to align <input> elements with their labels, the <label> tags need to have to following CSS:
display: block;
float: left;
width: (a value)px;
And you need to add clear: left to the <input> elements
Edit: Hussein's answer is better
I'm currently developing a small photo cms for a friends, she uses Flickr, so that what i use to get the images, or i use a gem called Flickraw. I have to somehow know when the image is a third in a row out of three, and the second out of three, and so on. Here's an screenshot which illustrates what it does.
(sorry about it is danish)
So basicly i want the middle image to be in the middle, the left to the left, and the right to the right. i have lik 8 rows .. and it is dynamicly.
Thank you!
PS. i wan't as much as possible to not use tables.
Here is my suggestion.
HTML
<div class="photo-row">
<div class="photo">Left</div><div class="photo">Center</div><div class="photo">Right</div>
</div>
CSS
.photo-row .photo {
background-color: rgb(230,230,230);
display: inline-block;
vertical-align: middle;
width: 33.33%
}
.photo-row .photo:nth-child(1) { text-align: left; }
.photo-row .photo:nth-child(2) { text-align: center; }
.photo-row .photo:nth-child(3) { text-align: right; }
Example: http://jsfiddle.net/xYZjL/
That's if you don't have control over the images and adding class names. If you DO have control you'd be safer to use class names in place of nth-child.
You are dynamically creating the page, so you can have the HTML element for each first image have class="first", each second class="second" and each third class="third".
Then you can use CSS to define float and clear layout rules for each.