3

I'm not a web developer but more of a photoshop designer, I set out to make a nice list style to add it in personal wordpress blog. I made the design inspired a lot from material design which came out really well like below picture.

enter image description here

So I decided to try my hand at creating a html and css design which would look like this eventually.

enter image description here

I tried adding some margin and padding to the text but it does not seem to move the content text towards the right. What should I do to fix this?

html code -

  <div>
  <ul>
    <li class="paper">
      <div class="papercontent">
      <img class="pimg" src="http://127.0.0.1:8080/wordpress/wp-content/uploads/2014/12/oneplus-one-top10.png" alt="oneplus-one-top10" width="452" height="300"  />
      <p class="pheader"><span class="pnumber">#1</span> OnePlus One</p>
      <p class="ptext"> Apple unveiled its new version of Mac OS X – Yosemite at this year’s WWDC 2014. And from using the beta, we think it’s beautiful. The new interface in Yosemite is simply superb. Even all the app icons get a new design. The new typography is arguably cleaner.</p>
      </div>
 </li>

My custom css other than the wordpress post css -

.paper {
  background-color: rgb(255, 255, 255);
  box-shadow: 1.5px 2.598px 8.6px 1.4px rgba(0, 0, 0, 0.09);
  font-size: 1.8em;
  padding: 30px;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
  }

.pnumber
{
  color:white;
}
.pheader
{
  font-size:35px;
}
.papercontent
{
  background-color: rgb(253, 19, 126);
}
.ptext
{
  margin-right: .1em;
  margin-left: .1em;
  font-size: 0.8em;
  padding: 30px;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
}   
 li {
  padding: 10px;
  overflow: auto;
}

 li:hover {
  background: #eee;
  cursor: pointer;
}
ul {
  list-style-type: none;
}
.pimg {
max-width: 100%;
  float: left;
height: auto;
}

If my methods are wrong, please direct me to the right way. Thank you

Ajay
  • 6,233
  • 15
  • 62
  • 122
  • 1
    wouldn't you want your text box to be the same height as the image..? – webkit Dec 30 '14 at 09:25
  • @webkit yes i would want that. What do i do? –  Dec 30 '14 at 10:50
  • If you know the height of the image before hand in pixels, just give that height to your text box, if not I'd suggest using a background-image instead of inline img, giving it the same relative (%) or fixed (px) height as your textbox, and the background image will crop to size.. or lookup background-size, if you need further help let me know.. good luck – webkit Dec 30 '14 at 12:19
  • @webkit How would setting the height of the image for the textbox work in a responsive layout? I tried giving the height but on the smaller screen sizes the text overflowed. –  Dec 31 '14 at 03:16
  • for responsive, it depends what you want to do with the text.. for example, you could put it in an inner container and give it a overflow-y:auto to have a scrollbar when the box gets too small for the text – webkit Dec 31 '14 at 07:53

4 Answers4

2
.pimg {
max-width: 100%;
float: left;
height: auto;
margin-right: 20px; /* add */
}

working demo http://jsfiddle.net/aavk7g9m/2/

Cattla
  • 3,570
  • 1
  • 13
  • 29
1

Try adding this to your CSS

.ptext{
padding-left:10px;
}
Cisum Inas
  • 6,390
  • 9
  • 30
  • 50
  • You want to add padding, not margin so your boxes don't move away from each other. More on the difference between padding and margin here: http://stackoverflow.com/questions/2189452/when-to-use-margin-vs-padding-in-css. Margin=outside the element. Padding=inside the element. – Nathaniel Flick Dec 30 '14 at 09:12
0

jsfiddle example : jsfiddle.net/aavk7g9m/ (SO wouldn't let me put the link without code and I don't have any to show ...)

I think it's working here ? I guess it's the (wordpress) context then ?

sodawillow
  • 10,435
  • 3
  • 31
  • 41
  • The margin does not apply between the image and the text on the right. How do I put some spacing ? –  Dec 30 '14 at 09:05
0

Check out my PEN I personally like to separate areas within elements for more granular control. In this case I have wrapped your photo and text in 2 separate divs so they can float next to each other.

I have added box-sizing: border-box to all elements so that you can pad the text (as padding is added inside the boundaries of the elements' border) in without affecting the width / layout of the list item - you should be using this if you like to have widths such as 60% + 40% = 100%. Without this the padding would be added to the outside thus breaking your layout as your divs would not equal 100% anymore.

HTML:

 <div id="main">
     <ul>
         <li class="paper">
             <div class="papercontent">
                 <div class="inner first">
                     <img class="pimg" src="http://placekitten.com/g/350/350" alt="oneplus-one-top10" />
                 </div>
                 <div class="inner second">
                     <p class="pheader"><span class="pnumber">#1</span> OnePlus One</p>
                     <p class="ptext"> Apple unveiled its new version of Mac OS X – Yosemite at this year’s WWDC 2014. And from using the beta, we think it’s beautiful. The new interface in Yosemite is simply superb. Even all the app icons get a new design. The new typography is arguably cleaner.</p>
                 </div>

             </div>
         </li>
     </ul>
</div>

CSS:

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#main {
    display: block;
    margin: auto;
    max-width: 830px;
}
ul {
    margin: 0;
    padding: 0;
}
.paper {
  background-color: rgb(255, 255, 255);
  box-shadow: 1.5px 2.598px 8.6px 1.4px rgba(0, 0, 0, 0.09);
  font-size: 1.8em;
  padding: 30px;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
  }

.pnumber
{
  color:white;
}
.pheader
{
  font-size:35px;
    margin: 0;
}
.papercontent
{
  background-color: rgb(253, 19, 126);
    float: left;
}
.ptext
{
  font-size: 0.8em;
  font-weight: 300;
  font-family: 'Helvetica Neue',sans-serif;
}   
 li {
  padding: 10px;
  overflow: auto;
}

 li:hover {
  background: #eee;
  cursor: pointer;
}
ul {
  list-style-type: none;
}
.pimg {
    max-width: 100%;
    float: left;
    height: auto;
}
.inner {
    float: left;
}
.inner.first {
    width: 40%;
}
.inner.second {
    width: 60%;
    padding: 16px;
}
Morgan Feeney
  • 539
  • 4
  • 10
  • Thank you for a better implementation! –  Dec 30 '14 at 13:56
  • In my previous implementation, when I reduced my screen width. I got my layout to be like this - http://i.stack.imgur.com/eHSW3.png but now the current implementation bring it like this - http://i.stack.imgur.com/LAKBJ.png How do i make the previous behavior at a smaller screen width. Is that possible ? –  Dec 31 '14 at 03:29
  • You will need a media query to do that. However, did you intentionally hide the paragraph in that implementation? – Morgan Feeney Dec 31 '14 at 08:13
  • Nope! The paragraph align properly as well with the css I've put up! –  Dec 31 '14 at 09:46
  • On your first example there is no paragraph. Only a title. – Morgan Feeney Dec 31 '14 at 09:57
  • Since you insist that you wanted to see the paragraph. The given CSS in my question does the following inside my wordpress layout - http://i.imgur.com/iBz5c7q.png –  Dec 31 '14 at 10:48
  • I changed the width to 100% under a media query for screen size. I was able to get the layout given in the above comment. Many thanks! –  Dec 31 '14 at 11:24