Help with Boxes

  • 2
  • Question
  • Updated 9 years ago
  • Answered
Im looking to get a box similar to the one on this website http://www.west-dunbarton.gov.uk/ both at the top and the ones with the green bar across them near the bottom, would anyone be able to help me achieve these?
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes

Posted 9 years ago

  • 2
Photo of Dré

Dré

  • 201 Posts
  • 15 Reply Likes
Hi Craig,

Sanja is going to take a look at this ticket and be online in a few hours. Sorry, I couldn't help.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig

Give this a try:

<style type="text/css">
body,
html {
margin:0;
padding:0;
color:#000;
background:#a7a09a;
}
#wrap {
width:750px;
margin:0 auto;
background:#ddd;
}
#header {
background:#ddd;
}

#nav {
background:#c99;
}

#main {
background:#ddd;
}

</style>
</head>
<body>
<div id="wrap">
<div id="header"><h1></h1></div>
<div id="nav">
<p>your text goes here</p>
</div>
<div id="main">
<h2>Column 1</h2>
<p>Your content goes here</p>
<br>
<br>
<br>
</div>

</body>
</html>
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Sanja,

Nope it doesnt seem to have worked, its changing the whole background colour and the line which splits the box in two is at the top and not just moved down a bit!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hi Craig

I wonder if you may have accidentally missed a part of the code? Here's the sample box I've done on my site:

http://rumballchick.yolasite.com/box1

Perhaps if you post your URL I can take a look at what's going on?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
<!--

I had a little play with Sanja's code.

I try'd to make it look more like the 1 in your example.

If you like it we can talk further about changing the colour scheme.

<style type="text/css">

.outerrim {
width: 250px;
padding: 4px;
background-color: #ffffff;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #CCCCCC;
}

#outerbox {
width:250px;
margin:0 auto;
background: #ccdceb no-repeat left top;
}

#topstrip {
background:#ccdceb;
padding: 1px;

}

#colorbar {
background:#003366;
}

#maininnerbox {
background-color:#ffffff;
background-image:url('http://hexham.info/resources/images/b...) ;
height: 300px;
}

</style>

<div class="outerrim">
<div id="outerbox">
<div id="topstrip"></div>
<div id="colorbar">
<p style="padding: 2px;"><font style="color: white;">Your text goes here</font></p>
</div>
<div id="maininnerbox">
</div></div></div>

-->

Hope you like it, if you need any help tweaking it let me know - Lee.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Excellent UK Duke exactly what im looking for but I just need it in green r maybe another colour?

Thanks

Craig
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes


You will need to go here http://tools.dynamicdrive.com/gradient/ and make a image then add it to your filemanager and change the image path at the bottom of the CSS (where it says 'make a new image' above.)

The image will need to be matched to the 'top colour' that you choose and will need to be the same width as the box. I did it 250x300.

Let me know if you get it working (let me see what you manage to create :)

Lee.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi Duke managed to get it all done but it wont add my gradient under http://abbotsfordgolfsection.yolasite... not sure if im not putting something in correctly?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
try and remove the .php - Also make sure you retain all this around the image path (' ')

Lee.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Hi tried that Duke still no joy
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
because we are using the full adress of the image you will need to publish it to see it working - or just use resources/gradient.png if you want to see it working without publishing.
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
Got it Duke cheers just cant get the coliurs to match now lol the 2 strips above and below the text strip the coliur doesnt match the top of the gradient even although I caopied the code ........................ strange, maybe just a bit of mucking about to get it right maybe
Photo of Craig

Craig

  • 449 Posts
  • 11 Reply Likes
got it, thanks for your help Duke