Re: [css-d] How to make the background wrap around the image?
Hi,
I copied the code into my editor and redered it. It's abit hard to see
what you're trying to do. Can you explain a bit more.. is it for a
header? Could you replace the dummy content with somethig a bit more
meaningful because the text over the image, and text next to it is
that same so it's just a bit of a mess. It also seems like you have a
lot of wrappers happening which might not be needed.
Cheers, CB
On 30/09/2010, at 10:17 AM, Anthony wrote:
Hi all
I have been trying to figure out how to wrap the background around the
image on the left, so that the image doesn’t stick out outside the
background. But I haven’t had any luck. Any help would be greatly
appreciated.
html
head
style
#block-12 .blockinner {
background-color: #F2F2F0;
margin:0 auto;
}
#block-12 .blockinner .top {
height:50px;
width:100%;
}
#block-12 .blockinner .border {
margin:-44px 0 0;
padding:1px 6px;
position:relative;
}
#block-12 .blockinner .bottom {
height:7px;
width:100%;
}
/style
/head
body
div id=block-12
div class=blockinner
div class=top /div
div class=border
h2 class=titleslkdfj aldskfjsd lakfjlsdkfj sldkfj sldkfj /
h2
div class=content
pa href=http://www.google.com;img hspace=5
height=121 align=left width=256 vspace=5
title=slkdfjsdlkfjdlskfjdlkfj alt=dslfk ldsfj dlskfj dlkfj
src=sdfsdfdf.jpg/alsdf alsdkf jsldkfj lsdkfj slkdfj sdlkfj sldkfj
lsdkjf lsdkjf lsdk fjldks fjldkf jdlkfj dlkfj dlkfj dlk f/p
/div
/div
div class=bottom /div
/div
/div
/body
/html
A
__
css-discuss [cs...@lists.css-discuss.org]
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 [cs...@lists.css-discuss.org]
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/
Re: [css-d] How to make the background wrap around the image?
Sorry about that. Hope it makes more sense now:
html
head
style
#block-12 .blockinner {
background-color: #F2F2F0;
margin:0 auto;
border: 1px solid red;
}
#block-12 .blockinner .top {
height:50px;
width:100%;
}
#block-12 .blockinner .border {
margin:-44px 0 0;
padding:1px 6px;
position:relative;
}
#block-12 .blockinner .bottom {
height:7px;
width:100%;
}
/style
/head
body
div id=block-12
div class=blockinner
div class=top /div
div class=border
h2 class=titleThis is a title which I dont really care about
/h2
div class=content
pa
href=http://www.google.com;imghttp://www.google.com%22%3e%3cimg/hspace=5
height=121 align=left width=256 vspace=5
title=slkdfjsdlkfjdlskfjdlkfj alt=dslfk ldsfj dlskfj dlkfj
src=sdfsdfdf.jpg/aI dont really care about this text either I just
wish that the red border would include the image on the left, and be wrapped
around it nicelly, as opposed to half way down the image.../p
/div
/div
div class=bottom /div
/div
/div
/body
/html
On Thu, Sep 30, 2010 at 3:40 PM, Chris Blake ch...@3pointdesign.com wrote:
Hi,
I copied the code into my editor and redered it. It's abit hard to see what
you're trying to do. Can you explain a bit more.. is it for a header? Could
you replace the dummy content with somethig a bit more meaningful because
the text over the image, and text next to it is that same so it's just a bit
of a mess. It also seems like you have a lot of wrappers happening which
might not be needed.
Cheers, CB
On 30/09/2010, at 10:17 AM, Anthony wrote:
Hi all
I have been trying to figure out how to wrap the background around the
image on the left, so that the image doesn’t stick out outside the
background. But I haven’t had any luck. Any help would be greatly
appreciated.
html
head
style
#block-12 .blockinner {
background-color: #F2F2F0;
margin:0 auto;
}
#block-12 .blockinner .top {
height:50px;
width:100%;
}
#block-12 .blockinner .border {
margin:-44px 0 0;
padding:1px 6px;
position:relative;
}
#block-12 .blockinner .bottom {
height:7px;
width:100%;
}
/style
/head
body
div id=block-12
div class=blockinner
div class=top /div
div class=border
h2 class=titleslkdfj aldskfjsd lakfjlsdkfj sldkfj sldkfj /h2
div class=content
pa href=http://www.google.com;img hspace=5
height=121 align=left width=256 vspace=5
title=slkdfjsdlkfjdlskfjdlkfj alt=dslfk ldsfj dlskfj dlkfj
src=sdfsdfdf.jpg/alsdf alsdkf jsldkfj lsdkfj slkdfj sdlkfj sldkfj
lsdkjf lsdkjf lsdk fjldks fjldkf jdlkfj dlkfj dlkfj dlk f/p
/div
/div
div class=bottom /div
/div
/div
/body
/html
A
__
css-discuss [cs...@lists.css-discuss.org]
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 [cs...@lists.css-discuss.org]
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/
Re: [css-d] How to make the background wrap around the image?
Thanks so much for your help Chris
Unfortunately I can't set a fixed height to the border wrapper as both the
image and the text will be variable :(
I've replaced my align: left with float: right, but for the life of my can't
work out what container to clear. I think I've tried all of them and still
not seeing the result that I was after :(
A
On Thu, Sep 30, 2010 at 4:12 PM, Chris Blake ch...@3pointdesign.com wrote:
Hi,
I don't really know about hspace and vspace so i took them out. Your
align=left is what's causing the border to come half way up your image.
If you remove it you will see. However the text does not fit, wrap around
the image as you may want so you'll need to img style=float: left; and
you'll get the desired effect. However it'll go back to the same problem
that you had at the start - this is where 'clearing floats' comes in and is
very fundamental in creating browser friendly CSS websites.
Usually a class is made, with the desired attributes and whenever you need
to clear a float like in this instance you ca add the class e.g. image,
text, clear - or text, image, clear.
If you are in a hurry then just assign a height to the border wrapper i.e.
height: 200px; But you should try to understand floats and clearing floats.
hope it helps, CB
On 30/09/2010, at 2:22 PM, Anthony wrote:
Sorry about that. Hope it makes more sense now:
html
head
style
#block-12 .blockinner {
background-color: #F2F2F0;
margin:0 auto;
border: 1px solid red;
}
#block-12 .blockinner .top {
height:50px;
width:100%;
}
#block-12 .blockinner .border {
margin:-44px 0 0;
padding:1px 6px;
position:relative;
}
#block-12 .blockinner .bottom {
height:7px;
width:100%;
}
/style
/head
body
div id=block-12
div class=blockinner
div class=top /div
div class=border
h2 class=titleThis is a title which I dont really care about
/h2
div class=content
pa
href=http://www.google.com;imghttp://www.google.com%22%3e%3cimg/hspace=5
height=121 align=left width=256 vspace=5
title=slkdfjsdlkfjdlskfjdlkfj alt=dslfk ldsfj dlskfj dlkfj
src=sdfsdfdf.jpg/aI dont really care about this text either I
just
wish that the red border would include the image on the left, and be
wrapped
around it nicelly, as opposed to half way down the image.../p
/div
/div
div class=bottom /div
/div
/div
/body
/html
On Thu, Sep 30, 2010 at 3:40 PM, Chris Blake ch...@3pointdesign.com
wrote:
Hi,
I copied the code into my editor and redered it. It's abit hard to see
what
you're trying to do. Can you explain a bit more.. is it for a header?
Could
you replace the dummy content with somethig a bit more meaningful because
the text over the image, and text next to it is that same so it's just a
bit
of a mess. It also seems like you have a lot of wrappers happening which
might not be needed.
Cheers, CB
On 30/09/2010, at 10:17 AM, Anthony wrote:
Hi all
I have been trying to figure out how to wrap the background around the
image on the left, so that the image doesn’t stick out outside the
background. But I haven’t had any luck. Any help would be greatly
appreciated.
html
head
style
#block-12 .blockinner {
background-color: #F2F2F0;
margin:0 auto;
}
#block-12 .blockinner .top {
height:50px;
width:100%;
}
#block-12 .blockinner .border {
margin:-44px 0 0;
padding:1px 6px;
position:relative;
}
#block-12 .blockinner .bottom {
height:7px;
width:100%;
}
/style
/head
body
div id=block-12
div class=blockinner
div class=top /div
div class=border
h2 class=titleslkdfj aldskfjsd lakfjlsdkfj sldkfj sldkfj /h2
div class=content
pa href=http://www.google.com;img hspace=5
height=121 align=left width=256 vspace=5
title=slkdfjsdlkfjdlskfjdlkfj alt=dslfk ldsfj dlskfj dlkfj
src=sdfsdfdf.jpg/alsdf alsdkf jsldkfj lsdkfj slkdfj sdlkfj sldkfj
lsdkjf lsdkjf lsdk fjldks fjldkf jdlkfj dlkfj dlkfj dlk f/p
/div
/div
div class=bottom /div
/div
/div
/body
/html
A
__
css-discuss [cs...@lists.css-discuss.org]
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 [cs...@lists.css-discuss.org]
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 [cs...@lists.css-discuss.org]
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
Re: [css-d] How to make the background wrap around the image?
On Thu, 30 Sep 2010 07:22:44 +0100, Anthony agav...@gmail.com wrote:
Sorry about that. Hope it makes more sense now:
savagely snipped
Apply overflow: hidden; to your #block-12 .blockinner rules and the div
will contain the image.
The revised code that you provided is broken, and the fix above 'may' not
fix the other (future?) problems to your satisfaction.
I've added background colours to the other divs so you can see more
clearly what is going on with your positioning etc.
html
head
style
#block-12 .blockinner {
background-color: #F2F2F0;
margin:0 auto;
border: 1px solid red;
overflow: hidden;
}
#block-12 .blockinner .top {
height:50px;
width:100%;
background-color: #FF00FF;
}
#block-12 .blockinner .border {
margin:-44px 0 0;
padding:1px 6px;
position:relative;
background-color: #008000;
}
#block-12 .blockinner .bottom {
height:7px;
width:100%;
background-color: #00;
}
/style
/head
body
div id=block-12
div class=blockinner
div class=top /div
div class=border
h2 class=titleThis is a title which I dont really care about
/h2
div class=content
pa href=http://www.google.com%22%3e%3cimg;img hspace=5
height=121 align=left width=256 vspace=5
title=slkdfjsdlkfjdlskfjdlkfj alt=dslfk ldsfj dlskfj dlkfj
src=sdfsdfdf.jpg/aI dont really care about this text either I just
wish that the red border would include the image on the left, and be
wrapped
around it nicelly, as opposed to half way down the image.../p
/div
/div
div class=bottom /div
/div
/div
/body
/html
Duncan
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] How to make the background wrap around the image?
Thanks so much for that Duncan
The overflow: hidden fix works in Firefox but not IE8 :(
A
On Thu, Sep 30, 2010 at 4:46 PM, Duncan Hill dun...@gmail.com wrote:
On Thu, 30 Sep 2010 07:22:44 +0100, Anthony agav...@gmail.com wrote:
Sorry about that. Hope it makes more sense now:
savagely snipped
Apply overflow: hidden; to your #block-12 .blockinner rules and the div
will contain the image.
The revised code that you provided is broken, and the fix above 'may' not
fix the other (future?) problems to your satisfaction.
I've added background colours to the other divs so you can see more clearly
what is going on with your positioning etc.
html
head
style
#block-12 .blockinner {
background-color: #F2F2F0;
margin:0 auto;
border: 1px solid red;
overflow: hidden;
}
#block-12 .blockinner .top {
height:50px;
width:100%;
background-color: #FF00FF;
}
#block-12 .blockinner .border {
margin:-44px 0 0;
padding:1px 6px;
position:relative;
background-color: #008000;
}
#block-12 .blockinner .bottom {
height:7px;
width:100%;
background-color: #00;
}
/style
/head
body
div id=block-12
div class=blockinner
div class=top /div
div class=border
h2 class=titleThis is a title which I dont really care about
/h2
div class=content
pa href=http://www.google.com%22%3e%3cimg;img hspace=5
height=121 align=left width=256 vspace=5
title=slkdfjsdlkfjdlskfjdlkfj alt=dslfk ldsfj dlskfj dlkfj
src=sdfsdfdf.jpg/aI dont really care about this text either I just
wish that the red border would include the image on the left, and be
wrapped
around it nicelly, as opposed to half way down the image.../p
/div
/div
div class=bottom /div
/div
/div
/body
/html
Duncan
__
css-discuss [cs...@lists.css-discuss.org]
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 [cs...@lists.css-discuss.org]
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-d] How to make the background wrap around the image?
Hi all
I have been trying to figure out how to wrap the background around the
image on the left, so that the image doesn’t stick out outside the
background. But I haven’t had any luck. Any help would be greatly
appreciated.
html
head
style
#block-12 .blockinner {
background-color: #F2F2F0;
margin:0 auto;
}
#block-12 .blockinner .top {
height:50px;
width:100%;
}
#block-12 .blockinner .border {
margin:-44px 0 0;
padding:1px 6px;
position:relative;
}
#block-12 .blockinner .bottom {
height:7px;
width:100%;
}
/style
/head
body
div id=block-12
div class=blockinner
div class=top /div
div class=border
h2 class=titleslkdfj aldskfjsd lakfjlsdkfj sldkfj sldkfj /h2
div class=content
pa href=http://www.google.com;img hspace=5
height=121 align=left width=256 vspace=5
title=slkdfjsdlkfjdlskfjdlkfj alt=dslfk ldsfj dlskfj dlkfj
src=sdfsdfdf.jpg/alsdf alsdkf jsldkfj lsdkfj slkdfj sdlkfj sldkfj
lsdkjf lsdkjf lsdk fjldks fjldkf jdlkfj dlkfj dlkfj dlk f/p
/div
/div
div class=bottom /div
/div
/div
/body
/html
A
__
css-discuss [cs...@lists.css-discuss.org]
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/
