This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Dreamweaver > October 2005 > Argh!: Padding redux
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
| Author |
Argh!: Padding redux
|
|
|
| Why the hell won't this work?!! Here is a link:
http://www.geocities.com/geek_wannabee/test.htm
All I want is to be able to insert photos anywhere in that paragraph and
have them ride up against the right side of the container and have the text
flow around it WITH PADDING so that the text isn't right up against the
picture.
Because the background of the page has a gradient fade, I cannot take the
easy way out and yank the photo into an editor and make a border around the
photo itself.
Beyond that, I'd really like to know how to make this work. I've struggled
with this for several hours now, and I seem to get no closer. Is it only MY
screen that does NOT show padding, maybe?? Is everybody else seeing padding
around the picture??
Argh, argh!!!
Jenna
| |
| Travis 2005-10-31, 6:29 pm |
| Are trying to do something like this?
http://www.webblobber.com/tutorials/css/textwrap.php
Also you may have problems using the geocities site because it places
code before your doctype which will throw it into quirks mode. Which,
depending on what browser you use, can significantly alter your page.
Travis
***************************************
Free Templates, Javascript, Fonts & More. - http://www.webblobber.com
Premium Templates - http://www.webblobber.com/templates/premium/
Tutorials - http://www.webblobber.com/tutorials/
***************************************
Jenna wrote:
> Why the hell won't this work?!! Here is a link:
> http://www.geocities.com/geek_wannabee/test.htm
>
> All I want is to be able to insert photos anywhere in that paragraph and
> have them ride up against the right side of the container and have the text
> flow around it WITH PADDING so that the text isn't right up against the
> picture.
>
> Because the background of the page has a gradient fade, I cannot take the
> easy way out and yank the photo into an editor and make a border around the
> photo itself.
>
> Beyond that, I'd really like to know how to make this work. I've struggled
> with this for several hours now, and I seem to get no closer. Is it only MY
> screen that does NOT show padding, maybe?? Is everybody else seeing padding
> around the picture??
>
> Argh, argh!!!
>
> Jenna
>
>
| |
| Murray *TMM* 2005-10-31, 6:29 pm |
| Change this -
..imgright {
padding:16px 10px 6px 0;
}
to this -
..imgright {
float:right;
padding:16px 10px 6px 0;
}
The "0" is the padding on the LEFT of the image. Adjust it as you want.
The image MUST be floated for text to flow around it. Make sure you CLEAR
the float before adding another floated image.
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Jenna" <geekwannabee@hotmail.com> wrote in message
news:dk5r89$li6$1@forums.macromedia.com...
> Why the hell won't this work?!! Here is a link:
> http://www.geocities.com/geek_wannabee/test.htm
>
> All I want is to be able to insert photos anywhere in that paragraph and
> have them ride up against the right side of the container and have the
> text flow around it WITH PADDING so that the text isn't right up against
> the picture.
>
> Because the background of the page has a gradient fade, I cannot take the
> easy way out and yank the photo into an editor and make a border around
> the photo itself.
>
> Beyond that, I'd really like to know how to make this work. I've
> struggled with this for several hours now, and I seem to get no closer.
> Is it only MY screen that does NOT show padding, maybe?? Is everybody
> else seeing padding around the picture??
>
> Argh, argh!!!
>
> Jenna
>
| |
|
| I'm using IE, and it doesn't preview correctly on my local machine, even, so
I doubt if geocities is causing it to behave this way. I have a serious
headache from this baby, but will look at the link you sent and see if maybe
using a separate div will work, although I hate doing it as there are
already too many of them, IHMO.
Murray, I changed the left margin/padding to 100px, and there is NO margin
around that photo. What in the world can I be doing wrong? Other padding
settings I've dealt with always work, but not when there is an image
involved. What the heck??
"Travis" <ha-ha@nospam.com> wrote in message
news:dk5s2n$mjq$1@forums.macromedia.com...[color=darkred]
> Are trying to do something like this?
>
> http://www.webblobber.com/tutorials/css/textwrap.php
>
> Also you may have problems using the geocities site because it places code
> before your doctype which will throw it into quirks mode. Which,
> depending on what browser you use, can significantly alter your page.
>
> Travis
> ***************************************
> Free Templates, Javascript, Fonts & More. - http://www.webblobber.com
> Premium Templates - http://www.webblobber.com/templates/premium/
> Tutorials - http://www.webblobber.com/tutorials/
> ***************************************
>
> Jenna wrote:
| |
| Travis 2005-10-31, 6:29 pm |
| Jenna,
It is working now you may just need to clear your browser cache. To be
honest I'm surprised it works with padding since you can pad an image.
You should use margin instead of padding.
Travis
***************************************
Free Templates, Javascript, Fonts & More. - http://www.webblobber.com
Premium Templates - http://www.webblobber.com/templates/premium/
Tutorials - http://www.webblobber.com/tutorials/
***************************************
Jenna wrote:
> I'm using IE, and it doesn't preview correctly on my local machine, even, so
> I doubt if geocities is causing it to behave this way. I have a serious
> headache from this baby, but will look at the link you sent and see if maybe
> using a separate div will work, although I hate doing it as there are
> already too many of them, IHMO.
>
> Murray, I changed the left margin/padding to 100px, and there is NO margin
> around that photo. What in the world can I be doing wrong? Other padding
> settings I've dealt with always work, but not when there is an image
> involved. What the heck??
>
>
> "Travis" <ha-ha@nospam.com> wrote in message
> news:dk5s2n$mjq$1@forums.macromedia.com...
>
>
>
>
| |
|
| I cleared the cache, so I take it everyone can see left padding around the
image EXCEPT me?
No wonder I can't learn how to do anything: it doesn't show up on my end?!!
J
"Travis" <ha-ha@nospam.com> wrote in message
news:dk5t71$o12$1@forums.macromedia.com...[color=darkred]
> Jenna,
>
> It is working now you may just need to clear your browser cache. To be
> honest I'm surprised it works with padding since you can pad an image. You
> should use margin instead of padding.
>
> Travis
> ***************************************
> Free Templates, Javascript, Fonts & More. - http://www.webblobber.com
> Premium Templates - http://www.webblobber.com/templates/premium/
> Tutorials - http://www.webblobber.com/tutorials/
> ***************************************
>
> Jenna wrote:
| |
| Travis 2005-10-31, 6:29 pm |
| Change it from padding to margin.
Travis
***************************************
Free Templates, Javascript, Fonts & More. - http://www.webblobber.com
Premium Templates - http://www.webblobber.com/templates/premium/
Tutorials - http://www.webblobber.com/tutorials/
***************************************
Jenna wrote:
> I cleared the cache, so I take it everyone can see left padding around the
> image EXCEPT me?
>
> No wonder I can't learn how to do anything: it doesn't show up on my end?!!
>
> J
>
>
> "Travis" <ha-ha@nospam.com> wrote in message
> news:dk5t71$o12$1@forums.macromedia.com...
>
>
| |
| Murray *TMM* 2005-10-31, 6:29 pm |
| Show me how you did this please. Are you floating the image?
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Jenna" <geekwannabee@hotmail.com> wrote in message
news:dk5stg$o0v$1@forums.macromedia.com...
> I'm using IE, and it doesn't preview correctly on my local machine, even,
> so I doubt if geocities is causing it to behave this way. I have a
> serious headache from this baby, but will look at the link you sent and
> see if maybe using a separate div will work, although I hate doing it as
> there are already too many of them, IHMO.
>
> Murray, I changed the left margin/padding to 100px, and there is NO margin
> around that photo. What in the world can I be doing wrong? Other padding
> settings I've dealt with always work, but not when there is an image
> involved. What the heck??
>
>
> "Travis" <ha-ha@nospam.com> wrote in message
> news:dk5s2n$mjq$1@forums.macromedia.com...
>
>
| |
|
|
|
|
|
|
|
| Here's the html:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link href="maintest.css" rel="stylesheet" type="text/css" />
</head>
<div id="content">
<div class="contentText">
<h1> Title page here </h1>
<p> </p>
<p> </p>
<p><strong><img src="images/flower.jpg" width="300" height="275"
class="imgright" />Title</strong><br />
</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat
volutpat. Sed lobortis. Maecenas venenatis neque pulvinar dui. Cras
vestibulum ante ac lorem. Proin nisl. Donec adipiscing dapibus magna. Etiam
tincidunt. Ut egestas neque a eros. Integer eget tellus. Phasellus a dolor.
Aenean posuere. </p>
<p>Quisque sed orci. Nulla facilisi. Sed rhoncus. Curabitur laoreet.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia Curae; Pellentesque interdum bibendum arcu. Quisque dapibus pulvinar
metus. Ut lobortis. Ut massa pede, tincidunt a, bibendum eu, iaculis nec,
lorem. Suspendisse eros massa, porta vitae, dictum sit amet, ultricies nec,
urna. In varius mi id tortor. Nam at ante. Aliquam orci sem, suscipit non,
vestibulum quis, varius vel, neque. Sed ultrices dolor sit amet ipsum.
Pellentesque condimentum. Aliquam velit tellus, pharetra at, vestibulum at,
suscipit sit amet, eros. Aliquam erat volutpat. Maecenas cursus faucibus
lectus. Phasellus blandit placerat tortor. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</body>
</html>
Here's the CSS:
#content
{
height: auto;
}
body
{
margin: 0px;
font: Tahoma, Arial, sans-serif; color: #000000;
background-color: #ffffff;
background-image:url(images/bg.jpg);
background-repeat: repeat;
}
#content
{
position: absolute;
top: 3px;
left: 0px;
}
..contentText
{
font-family: Tahoma, Arial, sans-serif; color:#000000;
margin-top: -3em;
margin-bottom: 3em;
margin-right:9em;
margin-left:10em;
height: auto;
padding:2.5em;
}
..imgright {
float:right;
padding:0px 0px 0px 100px;
}
"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:dk600e$se0$1@forums.macromedia.com...
> Show me how you did this please. Are you floating the image?
>
> --
> Murray --- ICQ 71997575
> Team Macromedia Volunteer for Dreamweaver
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
> http://www.dreamweavermx-templates.com - Template Triage!
> http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
> http://www.dwfaq.com - DW FAQs, Tutorials & Resources
> http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
> ==================
>
>
> "Jenna" <geekwannabee@hotmail.com> wrote in message
> news:dk5stg$o0v$1@forums.macromedia.com...
>
>
| |
| Murray *TMM* 2005-10-31, 6:29 pm |
| Displays perfectly for me in DW8. And you're saying that changing it to
this -
..imgright {
float:right;
margin:0px 0px 0px 100px;
}
makes no difference?
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================
"Jenna" <geekwannabee@hotmail.com> wrote in message
news:dk60ts$gb$1@forums.macromedia.com...
> Here's the html:
>
> <?xml version="1.0" encoding="iso-8859-1"?>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
> <title></title>
> <link href="maintest.css" rel="stylesheet" type="text/css" />
> </head>
> <div id="content">
> <div class="contentText">
> <h1> Title page here </h1>
> <p> </p>
> <p> </p>
> <p><strong><img src="images/flower.jpg" width="300" height="275"
> class="imgright" />Title</strong><br />
> </p>
> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat
> volutpat. Sed lobortis. Maecenas venenatis neque pulvinar dui. Cras
> vestibulum ante ac lorem. Proin nisl. Donec adipiscing dapibus magna.
> Etiam tincidunt. Ut egestas neque a eros. Integer eget tellus. Phasellus a
> dolor. Aenean posuere. </p>
> <p>Quisque sed orci. Nulla facilisi. Sed rhoncus. Curabitur laoreet.
> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
> cubilia Curae; Pellentesque interdum bibendum arcu. Quisque dapibus
> pulvinar metus. Ut lobortis. Ut massa pede, tincidunt a, bibendum eu,
> iaculis nec, lorem. Suspendisse eros massa, porta vitae, dictum sit amet,
> ultricies nec, urna. In varius mi id tortor. Nam at ante. Aliquam orci
> sem, suscipit non, vestibulum quis, varius vel, neque. Sed ultrices dolor
> sit amet ipsum. Pellentesque condimentum. Aliquam velit tellus, pharetra
> at, vestibulum at, suscipit sit amet, eros. Aliquam erat volutpat.
> Maecenas cursus faucibus lectus. Phasellus blandit placerat tortor.
> Aliquam erat volutpat.</p>
> </div>
>
> </div>
>
>
> </div>
> </body>
> </html>
>
> Here's the CSS:
>
> #content
> {
> height: auto;
> }
>
> body
> {
> margin: 0px;
> font: Tahoma, Arial, sans-serif; color: #000000;
> background-color: #ffffff;
> background-image:url(images/bg.jpg);
> background-repeat: repeat;
>
> }
>
> #content
> {
> position: absolute;
> top: 3px;
> left: 0px;
> }
>
> .contentText
> {
> font-family: Tahoma, Arial, sans-serif; color:#000000;
> margin-top: -3em;
> margin-bottom: 3em;
> margin-right:9em;
> margin-left:10em;
> height: auto;
> padding:2.5em;
> }
>
> .imgright {
> float:right;
> padding:0px 0px 0px 100px;
> }
>
>
> "Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
> news:dk600e$se0$1@forums.macromedia.com...
>
>
| |
|
| This is what I see no matter how I change any of the padding:
http://www.geocities.com/geek_wannabee/test2.htm
"Murray *TMM*" <forums@HAHAgreat-web-sights.com> wrote in message
news:dk62db$2gv$1@forums.macromedia.com...
> Displays perfectly for me in DW8. And you're saying that changing it to
> this -
>
> .imgright {
> float:right;
> margin:0px 0px 0px 100px;
> }
>
> makes no difference?
>
>
> --
> Murray --- ICQ 71997575
> Team Macromedia Volunteer for Dreamweaver
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
> http://www.dreamweavermx-templates.com - Template Triage!
> http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
> http://www.dwfaq.com - DW FAQs, Tutorials & Resources
> http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
> ==================
>
>
> "Jenna" <geekwannabee@hotmail.com> wrote in message
> news:dk60ts$gb$1@forums.macromedia.com...
>
>
| |
|
|
|
|
|
| Did that; didn't work.
ARGH!!!!!!!!!!!!!!!!!!!!!!!!!!
"Travis" <ha-ha@nospam.com> wrote in message
news:dk63ei$41r$1@forums.macromedia.com...[color=darkred]
> Its not working now because you are missing the opening <body> tag. Add
> it before your <div id="content"> and see if that does it.
>
> Travis
> ***************************************
> Free Templates, Javascript, Fonts & More. - http://www.webblobber.com
> Premium Templates - http://www.webblobber.com/templates/premium/
> Tutorials - http://www.webblobber.com/tutorials/
> ***************************************
>
> Jenna wrote:
| |
| Travis 2005-10-31, 6:29 pm |
| Are you viewing this on geocities with the ads open? Close them and see
what happens.
Travis
***************************************
Free Templates, Javascript, Fonts & More. - http://www.webblobber.com
Premium Templates - http://www.webblobber.com/templates/premium/
Tutorials - http://www.webblobber.com/tutorials/
***************************************
Jenna wrote:
> Did that; didn't work.
>
> ARGH!!!!!!!!!!!!!!!!!!!!!!!!!!
>
>
>
> "Travis" <ha-ha@nospam.com> wrote in message
> news:dk63ei$41r$1@forums.macromedia.com...
>
>
| |
| Travis 2005-10-31, 6:29 pm |
| Also try viewing it in something like FF. Like I said earlier the code
placed by geocities will throw browsers into quirks mode and IE is
notorius for improper rendering of HTML and CSS when in quirks mode.
Travis
***************************************
Free Templates, Javascript, Fonts & More. - http://www.webblobber.com
Premium Templates - http://www.webblobber.com/templates/premium/
Tutorials - http://www.webblobber.com/tutorials/
***************************************
Jenna wrote:
> Did that; didn't work.
>
> ARGH!!!!!!!!!!!!!!!!!!!!!!!!!!
>
>
>
> "Travis" <ha-ha@nospam.com> wrote in message
> news:dk63ei$41r$1@forums.macromedia.com...
>
>
| |
|
| Yes, I had the ads closed. I don't have a whole bunch of browsers since I
really only use IE, and I am able to see padding around things in other
instances, just not in this one.
I guess I'm gonna have to give up and put some kind of margins around the
pictures. If everybody else sees the padding, then it's on my end,
obviously. I posted a link to what I actually see; I take it you all see it
differently?
"Travis" <ha-ha@nospam.com> wrote in message
news:dk64a7$4rd$2@forums.macromedia.com...[color=darkred]
> Also try viewing it in something like FF. Like I said earlier the code
> placed by geocities will throw browsers into quirks mode and IE is
> notorius for improper rendering of HTML and CSS when in quirks mode.
>
> Travis
> ***************************************
> Free Templates, Javascript, Fonts & More. - http://www.webblobber.com
> Premium Templates - http://www.webblobber.com/templates/premium/
> Tutorials - http://www.webblobber.com/tutorials/
> ***************************************
>
> Jenna wrote:
| |
| Travis 2005-10-31, 6:29 pm |
| In FF it views fine in IE it doesn't.
Travis
***************************************
Free Templates, Javascript, Fonts & More. - http://www.webblobber.com
Premium Templates - http://www.webblobber.com/templates/premium/
Tutorials - http://www.webblobber.com/tutorials/
***************************************
Jenna wrote:
> Yes, I had the ads closed. I don't have a whole bunch of browsers since I
> really only use IE, and I am able to see padding around things in other
> instances, just not in this one.
>
> I guess I'm gonna have to give up and put some kind of margins around the
> pictures. If everybody else sees the padding, then it's on my end,
> obviously. I posted a link to what I actually see; I take it you all see it
> differently?
>
>
> "Travis" <ha-ha@nospam.com> wrote in message
> news:dk64a7$4rd$2@forums.macromedia.com...
>
>
>
| |
| Gary White 2005-10-31, 10:24 pm |
| On Mon, 31 Oct 2005 15:58:27 -0500, Travis <ha-ha@nospam.com> wrote:
>How? Padding equals inside the element. Margin equals outside. If the
> element is an image how can you add space to the inside it would need
>to be margin instead.
Padding is not inside the element. Padding is that space between the
content and the border. Margin is space reserved outside the border. If
there is no border on an image, margin and padding should give the same
result.
Gary
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|