I have a padded DIV (containing other/sub-DIVs and a DL) followed by some text:
<div> # the padded/main div
<div>
<div>
</div>
</div>
<div>
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus ante dui, et venenatis enim. Aliquam in massa...
How come there appears no padding at the bottom of the main DIV?
(There is no padding space between the main div's content and the following text.)
Thanks for any help with this!
Tom
You are confusing padding with margin. margin is the property that would define space between the main div and the bottom text.
In your example, it appears that you are trying to use a newline to cause spaceing within html. This will not work. As stated in previous answers, you must set the css margin-bottom property to cause spaec to appear after the bootom of a div and the start of the next HTML element
If you want to use padding and not margin then change to add some way to identify the outer div (I used an ID):
<div id="outerdiv"> # the padded/main div
<div>
<div>
</div>
</div>
<div>
<dl>
<dt></dt><dd></dd>
<dt></dt><dd></dd>
</dl>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus ante dui, et venenatis enim. Aliquam in massa...
and add CSS such as:
#outerdiv
{
padding-top: 1em;
padding-bottom: 1em;
}
EDIT: see it a work here: http://jsfiddle.net/yvaPG/
Thanks for your quick hints!
I was finally able to track the problem down:
The
<dd></dd>
element had a "float:left;". This apparently caused the following text to move "left/up".
My solution:
I inserted an empty
<div></div>
with a "clear:both;" between the dd element and the following text.
If anybody has a more elegant solution, I'd still be interested!
Tom a more reasonable approach would have been to define a seperate CSS class of;
.clearfix {clear:both; display:block;}
This would then allow you to call this div should you require it in other places throughout the page. Simply replace the with to ensure this change continues throughout and isn't reset by the removal of a CSS reset throughout the rest of the page/setup
Regards
Related
I am trying to apply absolute/relative position to an image inside an email. There's an image inside a span which needs absolute positioning to preserve line height of the paragraph.
Here's an image of what I'm trying to accomplish.
I got to know absolute and relative positioning can't be used inside email templates, is it possible to fix the image positioning without using absolute positioning.
The position CSS property has very poor support in email clients, even the ones considered to have decent CSS support.
You're best bet is to try negating the image's line-height, something like this:
<p style="margin: 0 0 10px; line-height: 130%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam dictum varius. Integer mollis, elit nec commodo elementum, justo nunc faucibus lectus. <img src="" style="display: inline; mso-line-height-rule:exactly; line-height: 0;">
Line heights vary depending on the font and email clients tends to treat line-height a little differently. This isn't perfect, but it'll get you closer to your screenshot above.
This actually has a code entity:
U+026A0 UNICODE
⚠ HEX CODE
⚠ HTML CODE
which you could then just style inline with more code:
<p>Lorem Ipsum dolor sic met <strong style="color: #fff126">⚠</strong></p>
Snippet:
<p>Lorem Ipsum dolor sic met <strong style="color: #fff126; back">⚠</strong></p>
The thing with using position: absolute in html emails is that they will 100% break on Outlook.
Trying to select a certain block of text within a div using CSS attribute.
Doesn't seem to be taking, any other options? I have tried variences of
.welcome [text~="You are logged in as"]{
display:none;
}
The HTML text is
<div id="welcome">
You are logged in as Me <b>(</b> Logout <b>)</b> </div>
You can use [ ] only for html attributes (like id, class...), not for text. You have to use javascript or something else for this.
Btw, it's #welcome, not .welcome :)
You could alter the html slightly, to target the whole text or parts of it:
<div id="welcome">
<span class="target_one">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<span class="target_two">Aenean quis augue gravida, ornare arcu quis, gravida arcu.</span>
</div>
Then the css becomes easy enough:
#welcome .target_one { color:red; }
#welcome .target_two { color:green; }
Firstly, look this fiddle: http://jsfiddle.net/Uuyp8/5/
I need to create block like block in next image in the <aside> block.
Don't pay attention to russian words. It's not the question.
I can create such block with next html structure:
<aside>
<div class='block'>
<div class='header'><h1>Lorem block 2</h1></div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper posuere pretium. Mauris vitae pharetra nisl.
</p>
</div>
</div>
<div class='block'>
<div class='header'><h1>Lorem block 1</h1></div>
<div class='content'>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper posuere pretium. Mauris vitae pharetra nisl.
</p>
</div>
</div>
</aside>
Questions:
1) is it ok to use new html5 tags like <aside> or <section> with <div> blocks like in my example?
2) how I can create such block only with html5 tags?
3) Do I need to use only html5 tags or it is normal practic to use both html5 tags and old divs?
Divs aren't "old". They still have theire place like <span> and many others.
See here
QUOTE :
“Sorry, can you say that again?”, I hear you ask. Certainly: you can still use <div>! Despite HTML5 bringing us new elements like <article>, <section>, and <aside>, the <div> element still has its place. Let the HTML5 Doctor tell you why.
So you don't have to ban them from your web pages and you should still use them like you are.
When I add the 36px "Announcement" text to the <div> below, it adds a ton of padding around just the text that is 36px and I cannot get rid of it. I did some research and tried changing the padding of the <div> and the <body> in my stylesheet, but that did not get rid of the padding. Can somebody please explain how to remove the excess padding that is around just the 36px text?
<div style="float:right; width:697px; height:90px; position:relative; top:-50px;">
<p style="text-align:center; font-size:36px;">Announcements</p>
<br/>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget.</p>
</div>
Try to explicitely set the line-height CSS attribute, also make sure you set margin to 0.
I'd like to code html+css to achieve result as shown on attached image: .
I mean the coding part with text and arrow box. Putting just position absolute is not an answer, cause I need text to float round the arrow box. Is there any way to do that?
I've alredy tried putting all kinds of floats on box and paragraf tag with text. Placing arrow box before, after and in paragraf tag. Also tried using vertical-align and position on arrow box.
Fiddle to play with:
http://jsfiddle.net/K2S5y/1/
<div class="content">
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas males elit lectus felis, malesuada ultricies. Curabitur et ligula.</p>
<div class="arrowMore">arr</div>
</div>
.content{width:170px;height:170px;border:1px solid red;}
.arrowMore{background:blue;width:70px;height:70px;}
Use clear:both ex.
<div style="float:left; width:300px">
<img/>
</div>
<div style="float:left; width:300px">
Text text text
</div>
<div style="clear:both"></div>
you can see the live example here:
http://webdesign.about.com/od/examples/l/bl-css-float-examples.htm#floating
#arrow {
float: right;
}
/* then possibly */
#arrow:after {
content: ' ';
display: block;
clear: both;
}