How to use "radius" if I have no img tag?

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|

How to use "radius" if I have no img tag?

Michelle Konzack
Hello *,

in one of my websites I have on the top left and right two images like

    <img src="michelle.png" border="0" class="img_head">

which I make round using

    .img_head { border-radius: 50%; }

which works fine, BUT, if I use something like

    #pageHeadLeft { background-image: url(/michelle.png); }

then I can not make it round like in the previous  version.   Now  I  am
searching allready for hours without finding a solution.

Any suggestions?

Thanks

--
Michelle Konzack        Miila ITSystems @ TDnet
GNU/Linux Developer     00372-54541400

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

signature.asc (853 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: How to use "radius" if I have no img tag?

Tom Livingston
A link to a page is always helpful. Hard to answer without knowing what
else might be a factor.



On Tue, Mar 21, 2017 at 10:01 AM, Michelle Konzack <[hidden email]
> wrote:

> Hello *,
>
> in one of my websites I have on the top left and right two images like
>
>     <img src="michelle.png" border="0" class="img_head">
>
> which I make round using
>
>     .img_head { border-radius: 50%; }
>
> which works fine, BUT, if I use something like
>
>     #pageHeadLeft { background-image: url(/michelle.png); }
>
> then I can not make it round like in the previous  version.   Now  I  am
> searching allready for hours without finding a solution.
>
> Any suggestions?
>


--

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: How to use "radius" if I have no img tag?

Dave Chiu
In reply to this post by Michelle Konzack
can you provide a more complete example? what you are doing should work...

http://codepen.io/davechiu/pen/66633f126033332bea1a49ac99936e49

could it be the difference of an absolute reference to the image in your
CSS but a relative in your HTML?

On Tue, Mar 21, 2017 at 10:01 AM, Michelle Konzack <[hidden email]
> wrote:

> Hello *,
>
> in one of my websites I have on the top left and right two images like
>
>     <img src="michelle.png" border="0" class="img_head">
>
> which I make round using
>
>     .img_head { border-radius: 50%; }
>
> which works fine, BUT, if I use something like
>
>     #pageHeadLeft { background-image: url(/michelle.png); }
>
> then I can not make it round like in the previous  version.   Now  I  am
> searching allready for hours without finding a solution.
>
> Any suggestions?
>
> Thanks
>
> --
> Michelle Konzack        Miila ITSystems @ TDnet
> GNU/Linux Developer     00372-54541400
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: How to use "radius" if I have no img tag?

Karl DeSaulniers
In reply to this post by Michelle Konzack
Put your image inside a div and round the corners on the div, not the image with overflow:hidden on the div.

Best,
Karl

Sent from losPhone

> On Mar 21, 2017, at 9:01 AM, Michelle Konzack <[hidden email]> wrote:
>
> Hello *,
>
> in one of my websites I have on the top left and right two images like
>
>    <img src="michelle.png" border="0" class="img_head">
>
> which I make round using
>
>    .img_head { border-radius: 50%; }
>
> which works fine, BUT, if I use something like
>
>    #pageHeadLeft { background-image: url(/michelle.png); }
>
> then I can not make it round like in the previous  version.   Now  I  am
> searching allready for hours without finding a solution.
>
> Any suggestions?
>
> Thanks
>
> --
> Michelle Konzack        Miila ITSystems @ TDnet
> GNU/Linux Developer     00372-54541400
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: How to use "radius" if I have no img tag?

Crest Christopher
What I was thinking. 😄

> Karl DeSaulniers <mailto:[hidden email]>
> Tuesday, March 21, 2017 4:53 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> Put your image inside a div and round the corners on the div, not the
> image with overflow:hidden on the div.
>
> Best,
> Karl
>
> Sent from losPhone
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> Michelle Konzack <mailto:[hidden email]>
> Tuesday, March 21, 2017 10:01 AMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> Hello *,
>
> in one of my websites I have on the top left and right two images like
>
> <img src="michelle.png" border="0" class="img_head">
>
> which I make round using
>
> .img_head { border-radius: 50%; }
>
> which works fine, BUT, if I use something like
>
> #pageHeadLeft { background-image: url(/michelle.png); }
>
> then I can not make it round like in the previous version. Now I am
> searching allready for hours without finding a solution.
>
> Any suggestions?
>
> Thanks
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: How to use "radius" if I have no img tag?

Michelle Konzack
In reply to this post by Michelle Konzack
Hello to all,

On 2017-03-21 15:01:31 Michelle Konzack hacked into the keyboard:
>     <img src="michelle.png" border="0" class="img_head">

>     .img_head { border-radius: 50%; }

This is what I have and is working.

>     #pageHeadLeft { background-image: url(/michelle.png); }

So if I understand it right, I can not modify the shape of an image,  if
it is shown trough the CSS, mean embedded with the url() construct.


I have tried to get a text/plain view, if I disable the  Stylesheets  in
the webbrowser, to get a pur HTML page from top to bottom. Easy readable
with a screenreader or other tools.

However, I do not want to have the images shown if I disable  CSS,  this
why I have tried to use the background-image: url(); construct.

Note:   Most CSS pages are not readable with a "simple" screenreader.
        (I use a self developed very fast and simple text2voice system)

Thanks

--
Michelle Konzack        Miila ITSystems @ TDnet
GNU/Linux Developer     00372-54541400

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

signature.asc (853 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: How to use "radius" if I have no img tag?

Karl DeSaulniers
This is what I was suggesting to do.

<style type="text/css">
        .img_head { border-radius: 50%; }
</style>

<div class="img_head"><img src="michelle.png" style="width:100%;height:auto;margin:0;padding:0;border:none;" /></div>

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Mar 22, 2017, at 3:51 AM, Michelle Konzack <[hidden email]> wrote:
>
>>    <img src="michelle.png" border="0" class="img_head">
>
>>    .img_head { border-radius: 50%; }

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: How to use "radius" if I have no img tag?

Philip Taylor (Webmaster, Ret'd)
In reply to this post by Michelle Konzack


Michelle Konzack wrote:
> This is what I have and is working.
>
>>     #pageHeadLeft { background-image: url(/michelle.png); }
> So if I understand it right, I can not modify the shape of an image,  if
> it is shown trough the CSS, mean embedded with the url() construct.
But can you not, as others have suggested, round the corners of #pageHeadLeft (i.e., the container) and set "overflow: none" so that the portion(s) of the background image that protrude beyond the rounded corners of the container are invisible ?

Philip Taylor
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: How to use "radius" if I have no img tag?

Michelle Konzack
Hello Philip,

On 2017-03-22 09:03:02 Philip Taylor hacked into the keyboard:
> But can you not, as others have suggested, round the corners of
> #pageHeadLeft (i.e., the container) and set "overflow: none" so that
> the portion(s) of the background image that protrude beyond the
> rounded corners of the container are invisible ?

This is waht I have tried and did not work, but I think, the problem is
the "padding" arround the image inside the "pageHead"

<style>
#pageHeadLeft {
  background-image:  url('michelle.jpg');
  padding-left:      30px;
}
#imageHeadRight {
  border-radius:     25%;
  padding-left:      30px;
}
</style>

<div id="pageBody">
<div id="pageHeadLeft">
     
</div>
<div id="pageHeadCenter">
     text area
</div>
<div id="pageHeadRight">
     <img src="michelle.jpg" class="imageHeadRight">
</div>
</div>

where the Head left/right have a fixed width of 180px and the HeadCenter
is dynamic.  Both pictures are placed correctly.  However,  I  get  only
the HeadRight one round.  Do you suggest, I should add another <div> for
the background-image?

> Philip Taylor

Thanks
Michelle

--
Michelle Konzack        Miila ITSystems @ TDnet
GNU/Linux Developer     00372-54541400

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

signature.asc (853 bytes) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: How to use "radius" if I have no img tag?

Karl DeSaulniers
Hi Michelle,
If this is indeed your code then #pageHeadLeft will never be round without a border-radius declaration in the css or inside a style tag.
You would also be better served to use just the img instead of background-image because the container can resize to the image height IMO.
Otherwise, you have to set a height on #pageHeadLeft.

Here is a sample of how I would suggest structuring your css and html.

<style type="text/css">
.wrapper, . pageHeader, . pageBody, .pageFooter {
        width:100%;
        height:auto;
        clear:both;
}
.pageHeadLeft {
        width:25%;
        border-radius:  25%;
        display:inline-block;
        overflow:hidden;
        clear:left;
}
. pageHeadCenter {
        width:50%;
        display:inline-block;
        clear:left;
}
.pageHeadRight {
        width:25%;
  border-radius: 25%;
        display:inline-block;
        overflow:hidden;
        clear:left;
}
</style>

<div class="wrapper">
        <div class="pageHeader">
                <div class="pageHeadLeft">
            <img src="michelle.jpg" style="width:100%;height:auto;margin:0;padding:0;border:none;" />
                </div>
                <div class="pageHeadCenter">
                    text area
                </div>
                <div class="pageHeadRight">
            <img src="michelle2.jpg" style="width:100%;height:auto;margin:0;padding:0;border:none;" />
                </div>
        </div>
        <div class="pageBody">
                body content
        </div>
        <div class="pageFooter">
                footer content
        </div>
</div>

Without really seeing what your doing of course.
As for screen readers, you could take advantage of the alt and title tags on
images to include a description that can be read aloud.

HTH,
Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Mar 22, 2017, at 4:39 AM, Michelle Konzack <[hidden email]> wrote:
>
> Hello Philip,
>
> On 2017-03-22 09:03:02 Philip Taylor hacked into the keyboard:
>> But can you not, as others have suggested, round the corners of
>> #pageHeadLeft (i.e., the container) and set "overflow: none" so that
>> the portion(s) of the background image that protrude beyond the
>> rounded corners of the container are invisible ?
>
> This is waht I have tried and did not work, but I think, the problem is
> the "padding" arround the image inside the "pageHead"
>
> <style>
> #pageHeadLeft {
>  background-image:  url('michelle.jpg');
>  padding-left:      30px;
> }
> #imageHeadRight {
>  border-radius:     25%;
>  padding-left:      30px;
> }
> </style>
>
> <div id="pageBody">
> <div id="pageHeadLeft">
>
> </div>
> <div id="pageHeadCenter">
>     text area
> </div>
> <div id="pageHeadRight">
>     <img src="michelle.jpg" class="imageHeadRight">
> </div>
> </div>
>
> where the Head left/right have a fixed width of 180px and the HeadCenter
> is dynamic.  Both pictures are placed correctly.  However,  I  get  only
> the HeadRight one round.  Do you suggest, I should add another <div> for
> the background-image?
>
>> Philip Taylor
>
> Thanks
> Michelle
>
> --
> Michelle Konzack        Miila ITSystems @ TDnet
> GNU/Linux Developer     00372-54541400
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: How to use "radius" if I have no img tag?

Philip Taylor (Webmaster, Ret'd)


Karl DeSaulniers wrote:

> As for screen readers, you could take advantage of the alt and title tags on
> images to include a description that can be read aloud.

And a longdesc [1] link, of course.
Philip Taylor
--------
https://www.w3.org/TR/html-longdesc/
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Reply | Threaded
Open this post in threaded view
|

Re: How to use "radius" if I have no img tag?

Karl DeSaulniers
Ah yes. Forgot the long description. Even better!

Best,
Karl

Sent from losPhone

> On Mar 22, 2017, at 5:43 AM, Philip Taylor <[hidden email]> wrote:
>
>
>
> Karl DeSaulniers wrote:
>
>> As for screen readers, you could take advantage of the alt and title tags on
>> images to include a description that can be read aloud.
>
> And a longdesc [1] link, of course.
> Philip Taylor
> --------
> https://www.w3.org/TR/html-longdesc/
> ______________________________________________________________________
> css-discuss [[hidden email]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [[hidden email]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/