By dimitris_s on

Hello,

I use the deco theme for my new website.

I'm trying to style a block in the "content-bottom" area. The html source from the page reveals this:

<div id="content-bottom">
				<div class="region-content clear-block"><div id="block-block-4" class="block block-block block-even">  
  <div class="blockinner">
        <div class="content">

I have tried many things into style.css but nothing worked. The last thing I tried is this:

#content-bottom .block-4 .content {
  background: url(http://antinomia.com/sites/default/themes/antinomia/images/block_process_bg.png) no-repeat;
  height: 262px;
}

But that also doesn't work. Could someone please tell me the correct way of doing this?

Thanks in advance,
Dimitris

Comments

Miszel’s picture

Miszel commented

Try this:

#block-block-4 {
  background: url(http://antinomia.com/sites/default/themes/antinomia/images/block_process...) no-repeat;
  height: 262px;
}

Personal Website
Company Website

dimitris_s’s picture

dimitris_s commented

Yeap! That's it, it worked! Thank you very much my friend! :)

www.dobro.gr - Online community for Greek students in Bulgaria
www.skyplius.dobro.gr
www.kormooikia.gr

dimitris_s’s picture

dimitris_s commented

A little extra help here. As you can see here : http://www.skyplius.dobro.gr, the bottom content with the 2 blocks that have background images, do not align correctly. I would like the blocks to center align, so I could have 3 blocks [one left, one center, one right].

What's the CSS for this?

Thanks in advance.

http://www.dobro.gr - Online community for Greek students in Bulgaria
http://simpledesigns.hopto.org - simple designs

nevets’s picture

nevets commented

First you want something like this

#content-bottom .block {
   float:left;
   width:33%;
}

This will float the blocks left and each will take up 1/3 of the space. This assumes you have no padding or margins though so you will probably need to adjust the 33% to take margin and/or padding into account.

Also, the theme you are using has in style,css at lne 690

#content-bottom .block-odd {
clear:left;
margin-right:5%;
}

The clear left will defeat the purpose of the float and would need to be removed.

dimitris_s’s picture

dimitris_s commented

Thank you very much! It worked like a charm. I must adjust the margins now a little bit and it's quite ready.

http://www.dobro.gr - Online community for Greek students in Bulgaria
http://simpledesigns.hopto.org - simple designs

dimitris_s’s picture

dimitris_s commented

Well I have another problem which really bugs me [and bugs my site also]...

You see I now have those 3 block which look like this :

click here to see the picture

I can perfectly center align them with correct paddings and margins, but when I open the page from my desktop with a resolution of 1680x1050, the blocks remain perfectly aligned to each other but they move at the left side of the page. And when I try to align them for the big resolution then they are not aligned for smaller resolutions. I hope you understand.

So, I need those 3 blocks to align to each other like they do, but also to remain center aligned to the page. Below is the CSS i use for those blocks.

#abfooter {
  color: #ccc;
  text-align:justify;
  border-top: 1px solid #e0e0e0; 
  clear: both;
  padding-top: 10px;
  padding-left: 10%;
  padding-right: 10%;
  height: 280px;
  background: url(images/header_pattern.png) repeat;
  font-size: 0.9em;
  font-weight: solid;
}

#abfooter a {
  color: #004f6a;
  font-weight: bold;

}
/* Custom Blocks - dimitris_s 


#block-block-4 {
  float: left;
  width: 33%;
  color: #fff;
  margin-bottom: 2px;
  margin-top: 2px;
  width: 220px;
  height: 220px;
  line-height: 160%;
  padding: 25px;
  padding-right: 100px;
  background: url(images/ab_footer_bg.png) no-repeat;

}

#block-block-4 a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff;

}

#block-block-4 a:hover {
  color: #fff;
  text-decoration: none;
  border: none;
  
}

#block-block-5 {
  float: left;
  width: 33%;
  color: #fff;
  margin-bottom: 2px;
  margin-top: 2px;
  width: 220px;
  height: 220px;
  line-height: 160%;
  padding: 25px;
  padding-right: 100px;
  background: url(images/ab_footer_bg_grey.png) no-repeat;

}

#block-block-5 a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff;

}

#block-block-5 a:hover {
  color: #fff;
  text-decoration: none;
  border: none;
}

#block-block-6 {
  float: left;
  width: 33%;
  color: #fff;
  margin-bottom: 2px;
  margin-top: 2px;
  width: 220px;
  height: 220px;
  line-height: 160%;
  padding: 25px;
  background: url(images/ab_footer_bg_blue.png) no-repeat;

}

#block-block-6 a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #fff;

}

#block-block-6 a:hover {
  color: #fff;
  text-decoration: none;
  border: none;
}

The block4 is for the left block and so on. What should I do? Any help greatly appreciated.

Thanks in advance.

http://www.dobro.gr - Online community for Greek students in Bulgaria
http://tus.ath.cx

nevets’s picture

nevets commented

Consider what you have what you have, three blocks inside a div. Each block is both fixed width and height (I would remove the width: 33%). Apply padding to a block determine how far in the content is from the edges of the block. So for padding you want a fixed value and not one in percent. It should also be relatively small. To seperate the blocks you want to use the margin setting (it sits "outside" the block). The question now is do you want the margins between blocks fixed (say 20px for the left margin for both block's 5 and 6) or variable (depends on width of page). Fixed margin is easier.

You also want to treat the 3 block plus the margins between them as unit that is centered in the abfooter div. Since the abfooter is full width you will need a div inside abfoote that wraps the blocks. You want this inside div to have only enough width to inclose the blocks and you want the left and right margins for the new div to be auto (which should center it).

dimitris_s’s picture

dimitris_s commented

You are awesome man, you' re great! Thank you very much!! I think it was more of a problem of clear thinking and "considering what I have"... ;-)

I added a div inside the abfooter div and gave it fixed width with auto margins. Then all it needed was a correct (fixed) setting of paddings.

You' re great, thank you very much again!

http://www.dobro.gr - Online community for Greek students in Bulgaria
http://tus.ath.cx