I can’t seem to figure out how to reduce the width of the purple to the right of this cta box ( one that says subscribe )
change the width makes the grey part go underneath it
The span and strong have fixed widths, which nearly add up to the total available width, so you don’t have a lot of room to play with. You might have to adjust widths of all the elements a bit.
Hantaah,
The code you are looking to manipulate is this,
#callout > span {
width: 220px;
height: 100px;
display: inline-block;
padding: 28px 0;
text-align: center;
position: relative;
background: linear-gradient(to bottom, #333333 0%,#232323 100%);
}
You then have a couple of options. In order to reduce the amount of purple to the right of the black, you can either increase the width of the span tag to something that will eclipse the purple or you can add float: right; to the list of attributes. I would use float because then it doesn’t increase the width of your span tag.
Hope that helps,
Shawn
hantaah,
options.css, Line 285
#callout {display:inline-block;} /* change from display:block */
Will curtail the purple area to the right of “Subscribe”.
Afterwards, you may want to increase the width of #callout > strong a little, or reconsider your layout strategy to be more fluid.
Thanks very much, I tried both and both worked, the float right and display inline block. what is the difference between display: block and display:inline-blobk and why did it make that difference?
Also I didn’t need to increase the width, should I still do so and why and what do you mean about a fluid strategy?
Much appreciation
hantaah,
The float:right recommendation given by smanaher does not work because the text to its left loses its vertical position and is no longer on the same baseline as the text in the floated box.
My display:inline-block recommendation keeps the baseline intact but the combined width of the two containers needs to match the page width, otherwise the #callout line will be narrower than the page width.
Below is a “fluid” approach. “fluid” in this case means that the #callout box spans the defined width of the page and accommodates to a narrowing of the viewport until the sum of the width of the two elements is reached (note that <strong> has no width assigned). The width of #callout is not fixed. (FYI: “responsive” pages have to be fluid between media query break points.)
This method changes the way the height of the objects is set from “height” to “line-height” which also keeps the text in the middle of the line without using padding.
options.css (line 285)
#callout {
display: block;
margin-top: 65px;
[color=red][s]height: 100px;[/s][/color]
font-size: 30px;
[color=blue]line-height: 100px;[/color] /* change from "height" to "line-height" */
[color=blue]text-align:center;[/color] /* add me */
background: #BD4DAF;
color: #fff;
-moz-box-shadow: inset 0 0 30px #BD4DAF;
-webkit-box-shadow: inset 0 0 30px #BD4DAF;
box-shadow: inset 0 0 30px #BD4DAF;
[color=red][s]position: relative;[/s][/color]
}
options.css (line 299)
#callout > span {
width: 220px;
[color=red][s]height: 100px;[/s][/color]
[color=red][s]display: inline-block;[/s][/color]
[color=red][s]padding: 28px 0;[/s][/color]
[color=blue]float: right;[/color] /* add me */
text-align: center;
position: relative;
background: linear-gradient(to bottom, #333333 0%,#232323 100%);
}
options.css (line 312)
#callout > strong {
[color=red][s]display: inline-block;[/s][/color]
[color=red][s]width: 850px;[/s][/color]
[color=red][s]text-align: center;[/s][/color]
font-weight: 300;
color: #fff;
}
You asked what the difference is between block and inline-block [and inline]. That is such an ultra fundamental concept in css, please allow me to encourage you to read:
http://reference.sitepoint.com/css/display
and
http://www.w3schools.com/cssref/pr_class_display.asp
The second resource includes a “play space” where you can experiment with the property.
If you wonder why some of these changes were made, look up the description of the property on the web AND most important, don’t hesitate to experiment using your code! Test to see what happens when properties or values are changed. You can learn a lot that way.
Hope this helps.
hantaah,
The code in my last post (#6) was pretty crummy. I have rewritten that #callout bar entirely using css table and table-cell behaviors. It is fluid down to about 300px (depends on text content). The text wraps smoothly and stays to the left of the “Subscribe” box. Users can zoom text-only to their heart’s content.
The css has been entirely rewritten and is very simple. The gradient background was virtually indiscernable, so I omitted it for even more simplicity. Attached are 4 new wedge-like background images without the gradient. Pick your favorite.
The How-To-Do-It instructions are very simple… delete all of the old, add the new.
It tested successfully in Firefox, Chrome, Opera, IE9 and IE8.
Hopefully, the third time is the charm (:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?1047780-changing-width
Thread: changing width
Apr 28, 2013 11:43
hantaah
-->
<head>
<title>hmw2-subscribe1e</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
body {
font-size:normal;
font-weight:normal;
font-family:Tahoma,Arial,Segoe,sans-serif;
padding:0;
margin:20px;
}
#callout {
display:table;
width:100%; /* if a fixed or less-than 100% width is desired, consider auto horiz margins */
background:#bd4daf;
box-shadow:0 0 30px #823579 inset;
color:#fff;
font-size:30px;
line-height:1.2;
text-decoration:none;
margin:65px 0 0; /* apply fixed or percent width or auto horiz margins here */
}
/* Don't Miss Out */
#callout strong {
display:table-cell;
background:url(wedge4.png) no-repeat scroll 100% 50% transparent;
vertical-align:middle;
text-align:center;
font-weight:normal;
padding:4px 45px 4px 10px;
}
/* Subscribe! */
#callout span {
display:table-cell;
height:92px; /* height = 92px + 4px + 4px = 100px */
background-color:#2b2b2b;
vertical-align:middle;
text-align:center;
padding:4px 18px;
}
</style>
</head>
<body>
<div>
<a id="callout" href="http://healthmeanswealth.co.uk/">
<strong>Don't Miss Out On The Best Of News From HMW</strong>
<span>Subscribe!</span>
</a>
</div>
</body>
</html>
It’s perfect and I like wedge one the best because it’s nice and chunky. It looks better full width of the content as opposed to how I had it. I don’t know why but it just looks cleaner!
I’ve not come across css tables before, why did you choose to use this method, and I’m still not sure I fully understand your description of fluid and what fluid in relation to code means.
I hope to be as good a coder one day. It’s a slow process for me but I have good teachers on sitepoint!
I very much appreciate it
Thank you
Here it is:
Thanks for the feedback, hantaah.
The thumbs of the images in the message are scaled down to fit a certain space. Their appearance does not reveal the actual size of the image. All 4 images will look exactly the same when your browser window is wide. The difference becomes apparent when the window is narrowed. Try them and see for yourself. Don’t judge the size of the image by the appearance of the thumb. 
Fluid simply means that the contents of a page will adjust to changes in the width of a browser window… just like the items in the bottom of your test page. As far as code is concerned, it means that there are few fixed widths that would limit the minimum width (or maximum width) of a page. A “fluid” page adapts to changes in the width of the viewport.
If media queries are used, the design is known as “responsive”. Most commonly, the layout is changed at specified widths in response to the media queries.
I get fluid now! I’m not a smart phone user myself and I’ve always dodged this issue. Lessons tell me I can’t !
Thanks for the great help