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.
Related
The element I'm referring to is the offset box that is positioned above, to the left and below the main box.
Now creating this with regular HTML and CSS is super easy using absolute positioning and z-index.
However, in email HTML, where you're basically restricted to tables, I can't figure it out. Absolute positioning doesn't appear to be allowed. Most email clients strip it out. I'm not even sure if negative positioning is allowed.
How would you create this? Is it possible/worth even trying?
For email, you wouldn't use two 'cards' and overlay them like you would in web development. You can create this with tables and table cell really easily. See my pen here - codepen.io/Digital_Frankenstein/pen/GRJYOqd – Digital_Frankenstein
#digital_Frankenstein came up with a great solution.
I am trying to create an email template with HTML + CSS for GMAIL. It will be responsive!
But I know that "media queries" are not supported by gmail. So I am trying to create a "fluid layout" using old-fashioned HTML tags (table, td etc) and percentage instead of using CSS tags. I've already created a template (like here: http://webdesign.tutsplus.com/articles/creating-a-simple-responsive-html-email--webdesign-12978) but still have a problem;
When I resize the browser I want -left column- to move at the bottom but now -right column- moves there.
How can I code so that left column will be at the bottom and the right one will be on the top of it. Is it possible to do it without using the "media queries" ?
Thanks,
This is can be caused by your tables being in the wrong order. Make sure the table with -left col- inside is placed underneath the -right col-. So long as the table wrapper is aligned to the left, it will still appear that way when viewed.
If that answer doesn't help, can you please provide a snippet of your HTML and I can take a look at what is causing the issue?
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).
I'm trying to figure out how to develop a page that we can use to organize a magazine. There will be multiple sections to the magazine that will contain multiple pages, each page may have multiple articles on them. To accomplish this, I want to have a DIV for each page or section that will intent to show that it's subordinate to the group above it. Here's a picture of what I want it to look like:
http://chromaticinc.com/help/final.png
I'd like to only use CSS to accomplish this. So far, I've come up with this:
http://chromaticinc.com/help/
But it is using Javascript to set the width on the 1st column, because each of the other columns has to line up too and with the variable width on the 1st column, it throws off the layout. I'm sure I could use Javascript to set the width of the "Comments" column, but I feel like there has to be a better solution using CSS.
I'm open to using tables, if it would make sense, but each item will have to be draggable so that they can be rearranged and also they will have to be able to be moved into other sections, so I've set them in DIVs to make that easier.
Any help or suggestions would be greatly appreciated.
You should be able to do this using relative positioning.
You will want to give the element an id and then use some CSS like this:
#divid {
position:relative;
left:20px;
}
This will force the div to move over however much you specify from its default position.
Screenshot 1: https://skitch.com/android86/fm4r7/dreamweaver ( HTML design view)
Screenshot 2: https://skitch.com/android86/fm4fd/dreamweaver ( CSS)
In the screenshot 1, I tried to have the links for website Contact and Login as a part of the Nav tag provided by html 5, however I wanted these to be horizontally next to the hgroup.
I assigned a width to hgroup and now I have a lot of space to the right of hgroup however the nav is starting to line up horizontally, is this something I should handle with position or float property in CSS?
I tried both in various combinations, I assigned a width to nav in order to fit in the area however it doesn't seems to be working. Any clue?
The CSS code is in screenshot 2. After looking at a previous discussion here I thought using class might not be required instead rather parent child relation might be most relevant. I personally thought and read that one should use id's in CSS when it is a very unique scenario and class when we expect to use a certain thing very commonly, is this parent child relation a way of declaring a class? Thanks everyone.
It can be handled by floating both elements left and removing all fixed widths. Here is the amended jsFiddle: http://jsfiddle.net/joshnh/jdUWt/