Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Box with background - CSS question
Designing a site now, and looking to use easy to use classes, which can be changed in terms of width.
This is what I have now:
What I have works, but I think its a bit clunky, and feels like tag soup. Looking for a suggestion for a more elegant solution, that allows me to use the CSS classes for boxes that are 200px wide (fixed), but also usable for a sidebar that stretches to 49% width, something like 475px.
Markup:
<div class="width200 floatLeft">
<h2 class="slashes white">Linker///</h2>
<div class="height200">
<ul>
<li class="links"><a href="#" title="">Hjem</a></li>
</ul>
</div>
<div class="slashbg"></div>
</div>CSS:
.width200 {
width: 200px;
background: #A0B6CE;
margin: 0 0 0 1em;
}
.floatLeft {
float: left;
}
h2.slashes {
text-transform: uppercase;
text-align: left;
padding: 0 0 6px 5px;
font: 1em/1em "Arial Black", Verdana, Helvetica, san-serif;
}
.white {
color: #fff;
border-bottom: 1px solid #fff;
}
.height200 {
min-height: 200px;
background: transparent;
}
.slashbg {
height: 50px;
background: url(/images/sitefiles/stripe_bg.gif) repeat-x 0 bottom;
}Offline
Re: Box with background - CSS question
I changed one part of the code above, after creating a 10×10px image, and then changed the following style:
.slashbg {
height: 50px;
background: url(/images/sitefiles/stripe.gif) repeat;
}Offline
Re: Box with background - CSS question
Could it all be done with:
ul.width200 {
width: 200px;
min-height: 200px;
background: #A0B6CE url(/images/sitefiles/stripe_bg.gif) repeat-x 0 100%;
margin: 0 0 0 1em;
float: left;
padding: 0 0 0 50px;
}
h2.width200 {
text-transform: uppercase;
text-align: left;
padding: 0 0 6px 5px;
width: 195px;
font: 1em/1em "Arial Black", Verdana, Helvetica, san-serif;
color: #fff;
border-bottom: 1px solid #fff;
background: #A0B6CE;
float: left;
}
#sidebar .width200 {
width: 475px;
}And then the (X)HTML:
<h2 class="width200">Linker///</h2>
<ul class="width200">
<li class="links"><a href="#" title="">Hjem</a></li>
<li class="links"><a href="#" title="">Hjem</a></li>
<li class="links"><a href="#" title="">Hjem</a></li>
<li class="links"><a href="#" title="">Hjem</a></li>
<li class="links"><a href="#" title="">Hjem</a></li>
</ul>What lesser a code, the better.
Cheers!
Last edited by Gocom (2007-12-11 22:09:13)
Offline
Re: Box with background - CSS question
Thanks a lot Jukka – less code is what I was looking for! I will play around with this…. I think I missed the background positioning declaration:
background: #A0B6CE url(/images/sitefiles/stripe_bg.gif) repeat-x 0 100%;Now I changed the image, and am using a 5×5px image instead, that needs to be around 50px high in the BG. Any suggestions for the appropriate size of a BG image that needs to be repeated? 10×10 or 5×5? Looking for best practices here.
Offline
Re: Box with background - CSS question
Now I changed the image, and am using a 5×5px image instead, that needs to be around 50px high in the BG. Any suggestions for the appropriate size of a BG image that needs to be repeated? 10×10 or 5×5? Looking for best practices here.
If it should be 50 pixels high, just use image of 5 x 50px, because that ul.width200-element is 200px high. So, it can’t be 5px and been shown at area of 50px.
Cheers!
Last edited by Gocom (2007-12-12 21:31:07)
Offline
Re: Box with background - CSS question
Thanks Jukka. What I was referring to is what is currently considered a good size image for repeating BG’s? I remember it used to be recommended something that was a round number, like 6×6 or similar, but that was sometime back. Using a smaller image makes more sense, unless its hard work for the browser.
Offline
Offline
Re: Box with background - CSS question
Jukka, I get all sorts of issues with floating with your example. What I am looking to do is create a page with 4 of these boxes floating from left to right, then another 4 underneath. 8 total.
Each box should be the same height, but I am thinking of what might happen if content in one is larger the other boxes. It looks good only if the boxes float side by side and are of the same height.
The slashes BG at the bottom has to be 30px in height, and must be at the bottom.
Do you have a suggestion on an easy way to get 4 boxes side by side? I get it to work, but not with your suggestion above, which features less code than my example.
Offline