Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS challenge - Vertical stripes 2

Status
Not open for further replies.
tommyc7

tommyc7

Programmer
Feb 3, 2007
33
US
Maybe it won't be a challenge for you, but it is for me with my limited CSS skills...

I'm trying to create a background that is just 4 vertical stripes (four different colors) in which each stripe is 25% of the current screen width. I would then want to put a white box in the center that contains the text and images. I am trying to do this in CSS (I don't have a background image for example), but am open to suggestions.

Thanks!

Tom
 
Sort by date Sort by votes
The easiest thing would be to make an image, and just place it as the background. Then you can just place a div in the middle as your box.

The only downside of course is that you would need multiple bg images for different resolutions.


You could also use 4 floated divs and give them background colors. Then one absolutely positioned Div on top of them as your centered box.



----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Yeah, the second suggestion (floated divs) is kind of what I was thinking, but I was hoping for some pseudo-code or something because I can't seem to get it.
 
Upvote 0 Downvote
Here, this should produce the desired effect.

I've only tested this in FF and IE8 so I'm not sure it will work in other browsers, but technically it should.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd"><html>[/URL]
<head>
<title>Website</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
html,body{
width:100%;
height:100%;
text-align:center;
}

.bgdivs{
width:25%;
height:100%;
float:left;
}

.div1{
background-color:#FF0000;
}
.div2{
background-color:#00FF00;
}
.div3{
background-color:#0000FF;
}
.div4{
background-color:#FFBB33;
}

#mdbox{
clear:both;
position:absolute;
top:10%;
width:100%;
height:250px;
background-color:none;
margin-left:auto;
margin-right:auto;

}

#mid{
margin-left:auto;
margin-right:auto;
width:500px;
height:200px;
background-color:#FFFFFF;
border:2px solid gray;
}
</style>
</head>
<body>

<div class="bgdivs div1">
1
</div>

<div class="bgdivs div2">
2
</div>

<div class="bgdivs div3">
3
</div>

<div class="bgdivs div4">
4
</div>
<div id="mdbox">
<div id="mid">
Center White Box
</div>
</div>


</body>
</html>

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
656
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
338
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
268
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
298
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
125
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top