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.
Related
hello...(1st time here)...
I've been told never to use Absolute Positioning w/ my Child divs inside the Parent.
In my designs, I almost always create a Container w/ relative positioning; & w/ a margin: 0 auto; so it remains centered on the page (since I almost always use background images)...& then my other blocks (nested inside the container) are always positioned absolutely...the layout of which would look something like this example:
EXAMPLE
[btw...not a coder by a long shot...I design like a graphic illustrator would in laying out a magazine page]...but now...given the fact that I very much need to upgrade my skills (have been working in DW 2004 up to this point...just downloaded DW CC 2018, tho)...
HOW would I now code that page (using I'm assuming CSS thrown in w/ the HTML) so that it looks like that until the browser gets resized...& then all those elements flow correctly, stacking the way they're supposed to...WITHOUT USING THE DREADED ABSOLUTE POSITIONING...???
thanx,
dox
btw...not asking to have the code written for me, just a link to an informational on the web detailing exactly how to do it...thanx
To answer your question, these are very basic ideas that you would pick up from a beginner html / css course.
https://www.codecademy.com/ is a good site, and it's what I used to learn basic web design.
If you've already done something like this, I would recommend finding another more in depth course. You mention that you're not a coder, but if you're not asking someone to write the code for you, then you need to become one.
Essentially, the way to do this without "absolute" is with margin. For example, margin-left: 80px;
Another quite simple problem which is turning out to be rather a nuisance. If I'm doing/missing something that's idiotic feel free to lay it on me :)
Explanation:
I have a website in progress of being made (a project for school) and I'm trying to get a 'News Column' on the right-hand side of each page. I've managed to create it, however on one page it's being affected by another element's margin. Look at the following:
http://puu.sh/o5UXs.png - This is the margin on the right that's restricting the News Column from being in that position.
http://puu.sh/o5UYD.png - This is the complete News Column (currently, as data can be added to the database).
I was to have the News Column be alongside it.
My Current CSS:
http://puu.sh/o5Vb1.png
Hope someone can help,
Jake
You can use position: absolute or position: fixed.
Sometimes adding negative margin to an element may cause it to ignore another element's margin, but I don't recommend it.
Read this resource, it'll help you.
i've been trying to create pattern for my website using div elements. The problem is than my knowledge in css is very limited and i've no idea how to make the pattern like this
I tryed to use block, inline-block, but were not able to achieve the pattern i'm targeting to.
It's possible to do it with table, but than code looks like piece of thing.
It would be great if you will help me, because doing this not only to create a web site but also to learn css, so comments are really welcome.
Thank you in advance
make a parent div and add all properties to that like width of the container and height of the container. then add css property to each element individually or by grouping in class
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.
This is the first time i am properly coding in HTML,CSS. in my code i have used whole lot of div's to position and also to put the content in place. i am not sure if i am coding the right way. i have loads of contents too in a single page. here is the link to my code i have used.
http://jsfiddle.net/32ShZ/
can you please suggest. is it really bad in structure and shape?
Absolutely not. You don't want to go overboard though (it's called "div soup" when you do). If you find that a div has no purpose but to hold a background image, or to clear a float, etc that means you've done something wrong. By using wrappers (e.g. 3 levels deep of div tags for a content area that has some backgrounds, etc is OK), you can properly achieve any layout that you need without resorting to "div soup". Take a look at http://www.digitalperfections.net/ for an example of good (x)HTML with a lot of div tags.
To further expand, and answer the question about your code specifically, I noticed one thing right off the bat: <div id="divider"></div> - this is bad because you're using this div purely for non-semantic purposes (for decoration only).
The general principle is use as less HTML for layout as possible. And try to give Style to your page with the help of CSS. So if a minimum number of divs can achieve your task, you should go for it. This helps to make page lighter and maintainable. But yes how small structure (HTML) you can have in your page depends on your experience and design.