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 <[email protected]>
> 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 [[email protected]]
> 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 [[email protected]]
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/
