I'm trying to line up these div's, but it seems to not be working correctly.
the web address is - http://www.minvera.com/hosting-price-sheet
I need all the div's to line up because it's supposed to be similar to a table, but I hate tables.
Any suggestions?
A table is a table and if you want to make a table yous should actually make a table :-) Tables are not bad per se. Ommiting a table just because you dont like tables is wrong. On the other side you are using <br> which should be avoided.
Whatever: If you open up your code between your rows you have some <p> and inside those you have <br> between some links without text.
Remove those <br> and your table looks correct. Those <p> are actually over the full width of your container and therefore are pushing down subsequently the following divs. Maybe they are from some html editor? If you need the links in separated lines make them display:block
It's hard for me to see why you need it that way, because I would have placed my divs differently.
Your div are seperated by a paragraph and in contain a wich make the line break. Also there always a line break after the paragraph so you have to play with the padding and the margin to remove it.
Hope this help.
You can also use display:inline-block; on each div to make them side by side (work without float).
Related
I'm trying to make a blogpost into a forum-format, which i thought would be quite simple with html-tables and some css. I can't attach an image because this is my first question/answer here, but everyone knows the forum/disqus format: two-column with a narrow one on the left for the avatar and a wider one for the text.
Fact is that using just hmtml-css tables, the text floats to the left as soon as it (vertically) passes the image. That is solved by using "position:absolute", but then the whole image&text overlap each other AND most or everything that is beneath it, depending on how one resize the window.
Anyway, it's just the old forum-format, what am I doing wrong. Can't link to a page, not a live site yet. I'm using WP with the (modified) Blaskan theme.
It is isn't clear if you're trying to add a forum or just a table that looks like a forum-format table.
If you want to a forum in WP, then you might want to follow
http://wordpress.org/support/topic/add-forum-to-wordpress
http://wpmatter.com/top-5-wordpress-forum-plugins/
If you are trying to add a two column table, you'll need to post the html and css using.
For example, you can post like this http://jsfiddle.net/minerva/UJjup/. You must've added a "position: absolute" in the <td> tag and that is why your text is overlapping
Remove the position:absolute from the tag.
table td
{
position:absolute
}
Then add your css style specifically on the first column and or second column.
Please take a look at this fiddle: http://jsfiddle.net/d3uc9/4/
I have a problem with this, as the two divs, in a table, next to each other, are not on the same margin line, even thought they share the same css class etc.
What have I done wrong in the example, and must I change to make them on the same margin-top line?
Thanks, I have tried to be as clear as possible.
What I mean is that they should share the same margin-top line, but they don't, and what must I do to fix this?
You just need something like:
td { vertical-align: top;}
Example fiddle
This says that the content of a table cell is aligned to the top of the cell rather than to the middle. This is needed because your left hand div is not as big as the one on the right.
Also I notice that you are duplicating ids several times in your HTML (eg <div id="stylized" class="myform">). This is not valid HTML and can potentially cause unexpected behaviour in browsers. IDs must be unique and if you want to identify multiple elements in the same way for style purposes then you should use classes.
eg.
<div class="stylized myform">
Just add to your css:
td {vertical-align:top;}
Adding valign="top" will make the column on the left align to the top of the row.
The problem is the vertical alignment of the table. The easiest way to fix it is to add valign="top" to either the <tbody> or <tr>. You could also do it through css by specifying vertical-align:top for the <tr>.
When I try to create a navigation with inline-block, I get 4px to the right of each list item.
When I do it by floating each list item, it works fine.
Is there a reason the first option is applying that 4px? I have set EVERYTHING to have a margin of 0px and padding of 0px, I don't understand it. Even Firebug reports it as having 0, yet the gap is still there.
Thanks
Yes, space is by design and should be
Is there a reason for that? Yes it is. What got added is actually a word space. The same as if you'd have two lines of text. Browsers put a space between texts in separate lines so last words don't touch first words of the next line:
<p>
This is my text that's in two lines
inside my HTML source.
</p>
There would be a usual word space between lines and inside so text gets correctly displayed in browser:
This is my text that's in two lines inside my HTML source.
The same happens in your case, because your elements are inline. Your navigation elements are listed one per line in HTML source hence a word break gets added between them.
How to avoid excessive spaces between elements?
There are basically 3 approaches to mitigate this problem. All of them work on the premise to put all elements in the same line as seen by the HTML renderer:
Put all elements unspaced in a single line:
<ul>
<li>First</li><li>Second</li>...<li>Last</li>
</ul>
This one actually puts all elements in one line which may make it harder for people to manipulate these elements. If every LI would have an anchor tag inside (with a long link), this line gets too long to handle.
Comment-out line breaks:
<ul><!--
--><li>First</li><!--
--><li>Second</li><!--
...
--><li>Last</li><!--
--></ul>
Make tags break the line:
<ul
><li>First</li
><li>Second</li
...
><li>Last</li
></ul>
This one is least obtrusive to the eye but may seem confusing to beginners hence other team members (if you work in such environment) may feel tempted to put tag ends back to where they were originally (and usually are). They may feel these were broken by error.
The result of all three of them can be seen in this JSFiddle example.
Pick the one that suits you best. I usually use commenting because it's least distracting in my development editor because comments are very subtle.
I understand how negative indent works with CSS, but my question is, is there a way to have a kind of 'tab' in between the beginning of the negative indent and the rest of the text?
What I am trying to accomplish is the same look as in http://copyrighter.ru/canada/test.htm - please have a look at paragraphs starting from [6].
Notice that [6] is moved to the left of the line, while the rest of it looks like a neat square paragraph.
I am currently doing it with two divs.
It looks exactly the way I want it to look, but when I copy the text into MS Word, the copied text is all messed up.
I am trying to figure out if there is an easier way to accomplish the same task.
Try to put numbers into SPANs having "absolute" positions. Something like this:
http://jsfiddle.net/WvU7X/
However, I guess it won't look exactly the same after pasting the text into Word.
Instead of using DIVs, separate the elements with tags, then give them the attribute "display: inline-block;". This will allow them to have padding / margin applied to them while still appearing inline.
Note that for IE7 and thereabouts, inline-block does not work properly. Instead you have to use a combination: "display: inline; zoom: 1;". Then go about your padding and margin business.
The use of span tags will allow you to copy / paste into Word with less damage than divs.
Yes, so I got the problem that if you type a long sentence with no space e.g eeeeeeeeeeeeeeeeeeeeeeee, it will break itself, but then now I would need to start typing some ugly non-breaking coding.
Example:
http://jsfiddle.net/r3CFJ/
I need to have everything in one sentence in order not to make it break itself. Check here to see the result of not having everything in one sentence:
http://jsfiddle.net/r3CFJ/1/
How can I fix this please any solutions?? as my further coding will get very ugly and not readable?
You are getting this spacing because of the CSS, I am not sure why you add the pre type formatting and then wonder why it shows 'exactly' what you do (multiple lines, etc).
If you remove the CSS it looks just fine on 1 line.
Look: http://jsfiddle.net/r3CFJ/10/
Here's the problem, the white-space property in CSS forces new lines to break for all values except "normal" and "nobreak". There is no value for this property that will allow you to wrap lines while no breaking on new lines in the code. Don't like it? Get the W3C to add another value and get the major browsers to adopt the rule.
You don't want your entire div to be subject to a property set to such a value since you don't want new lines to break within the div. You do want elements inside your div to be subject to such a property. Wrap all the text in anchor element tags and apply the CSS to the elements that will require wrapping.
Here's a modification of your example working as expected. (Assuming no forced breaking due to line breaks in code but wrapping of long lines)
If you want the image and text will be inline set a or fancybox_vid to be position:absolute;
Example http://jsfiddle.net/huhu/r3CFJ/30/