Quantcast

Jump to content

» «
Photo

CSS help anyone?

4 replies to this topic
Forty
  • Forty

    he shouts stroke darker the strings

  • The Precinct
  • Joined: 01 Sep 2002
  • None

#1

Posted 25 September 2012 - 01:30 PM

I'm helping put together a little website for a friend's new company, and I need a little help on the CSS. This is what the center of the front page looks like normally: http://i.imgur.com/XbBRZ.png

In the three boxes on the bottom I have some copy that needs to go in there, and I'm trying to get it to look like this: http://i.imgur.com/Lw61Z.png

but due to some flaw in my design, when I try to add padding to the CSS for those boxes it starts to repeat the background image despite my having background-repeat:none;. Example: http://i.imgur.com/iWAML.png

This is my CSS for that area of the page. #info-boxes is a div that houses each of the boxes, and .box-item is the class that I use for the text within.

CODE
#info-boxes {
margin-left:260px;
margin-top:55px;
font-family: "Trebuchet MS", Verdana;
font-size:10pt;
color:white;
height:138px;
position:relative;
z-index:1;
padding:20px;
}

div.inline { float:left; }

#box-red {
width:300px;
height:138px;
background-image:url("img/redbox.png");
background-repeat:none;
margin-right:22px;
}

#box-orange {
width:300px;
height:138px;
background-image:url("img/orangebox.png");
background-repeat:none;
margin-right:22px;
}

#box-pink {
height:137px;
width:301px;
background-image:url("img/pinkbox.png");
background-repeat:none;
}

.box-text {
font-family: "Trebuchet MS", Verdana;
font-size:9pt;
color:white;
padding:5px;
text-align:left;
}


What element of CSS would allow me to replicate the original and create space around the text without that odd background repeating element?

Chopper Gunner
  • Chopper Gunner

    Player Hater

  • Members
  • Joined: 23 Jun 2012

#2

Posted 26 September 2012 - 11:32 PM

If you can send me your entire front page html doc and your entire css style-sheet I can do it for you.

Inky
  • Inky

    Pineapple.

  • The Connection
  • Joined: 04 Jul 2003

#3

Posted 27 September 2012 - 11:59 PM

I may be reading it wrong, but say you add a padding of 20px, then couldn't you reduce the width and height each by 20px to make up for it?

riquenunes
  • riquenunes

    Soldier

  • Members
  • Joined: 28 Apr 2008

#4

Posted 08 October 2012 - 06:23 AM Edited by H3NR1QU3, 05 November 2012 - 07:02 PM.

I had problems with padding while making a web site for a school project too. My solution was using margin on the elements inside the div instead of setting a padding value to it.
Anyways, I created a simple page using your CSS and made some small modifications to your box-text class. Try it now:

CODE

  .box-text {
   font-family: "Trebuchet MS", Verdana;
   font-size:9pt;
   color:white;
   margin:20px; /* Changed padding to margin */
   display:inline-block; /* Added this line otherwise the text would be too close to the top */
   text-align:left;
  }


By the way, I know it wasn't the original question, but why don't you group your CSS selectors? It's a lot easier to work with IMO.

CODE

#box-red {
background-image:url("img/redbox.png");
}

#box-orange {
background-image:url("img/orangebox.png");
}

#box-pink {
width:301px;
height:137px;
background-image:url("img/pinkbox.png");
}

#box-red, #box-orange, #box-pink {
background-repeat:no-repeat;
}

#box-red, #box-orange {
width:300px;
height:138px;
margin-right:22px;
}

johnny_zoo
  • johnny_zoo

    Gangsta

  • Members
  • Joined: 15 Mar 2009
  • United-Kingdom

#5

Posted 24 October 2012 - 10:37 AM

QUOTE
but due to some flaw in my design, when I try to add padding to the CSS for those boxes it starts to repeat the background image despite my having background-repeat:none;. Example: http://i.imgur.com/iWAML.png

The correct CSS syntax is background-repeat:no-repeat;.




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users