- This topic has 6 replies, 2 voices, and was last updated 9 years, 3 months ago by
.
-
Posts
-
Wes,
I’ve tried about every combination I can to get the three images mentioned in the title to space themselves equally – appearing as if they are just three equal home features. No avail. You made some suggestions, but my implementation doesn’t seem to have the result you expected.
I’m posting the section in the css and perhaps you can look at it and tell me what to adjust, specifically?
Thanks in advance. I’ve already spent too many hours on this minor aspect 🙁
Dave
/* Home Feature Section
———————————————————— */.home-feature-wrap {
clear:both;
overflow: hidden;
padding: 20px 0;
width: 960px;
text-shadow: 1px 1px #FFFFFF;
}.home-feature-sidebar {
font-size: 14px;
float: left;
line-height: 22px;
margin: 10;
padding-right: 0px;
width: 300px;
}.home-feature-sidebar h4 {
color: #333;
font-family: ‘Oswald’,arial,sans-serif;
font-size: 28px;
font-weight: normal;
line-height: 34px;
text-transform: none;}
.home-feature-sidebar p {
margin: 0 0 30 px;
}.home-feature-section {
background: repeat-y scroll left center transparent;
float: right;
font-size: 14px;
line-height: 22px;
padding-left: 0px;
//width: 680px;
text-shadow: 1px 1px #FFFFFF;
}.home-feature-section p {
margin: 0 0 0px;
}.home-feature-1 {
float: left;
margin: 0 0px 30 px;
width: 300px;
}.home-feature-2 {
float: right;
margin: 30;
width: 300px;
}.home-feature-1 h4,
.home-feature-2 h4 {
color: #333333;
font-family: “Helvetica Neue”, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
margin: 0 0 0px;
padding: 30;
}.home-feature-1 .widget,
.home-feature-2 .widget {
margin: 0 0 20px;
}Wes,
Let me clarify this. After fooling around with these settings, I have the images lined up ok. I do have two other things I’d like to accomplish…
1. The text area under the image should be more contained and less stretched out. Is there a setting that can confine it to a width narrower than the entire width between sections?
2. The images themselves… is it possible to center the image, as opposed to them all lined up on the left side?
Thanks!
Dave
There are errors in your code that need to be fixed. Anytime you add a margin you need to add the “px” after the number unless the number is 0.
Here is the proper way to do it –
.home-feature-sidebar {
font-size: 12px;
float: left;
line-height: 22px;
margin: 0 30px 0 0;
width: 300px;
}.home-feature-1 {
float: left;
margin: 0 30px 0 0;
width: 300px;
}.home-feature-2 {
float: right;
width: 300px;
}So just replace the home-feature-sidebar, home-feature-1, and home-feature-2 with the above and it should be even.
That’s great!
Any thoughts in the second part of my post – image centering and confining text description area?
I appreciate your help!
D
1. You can add padding to the left and right.
2. You can add text-align: center; to the image class…..or you could just increase the image size to fit within that space.
- You must be logged in to reply to this topic.