Jump to content


CSS: Vertical Image Border

Started by sunster13, Jul 12 2006 11:59 AM

4 replies to this topic

#1 sunster13

    Young Padawan

  • Members
  • Pip
  • 28 posts

Posted 12 July 2006 - 11:59 AM

I'm not sure how to make a vertical horizontal image border, like I have on my html site, http://www.sportsgfx.net. Here's what I have so far in css: http://www.sportsgfx.net/css

Each side of the border consists of 3 images, the top and bottom corner, and then the long part, as you can see here: http://www.sportsgfx.net

http://www.sportsgfx...e_sliced_01.jpg
http://www.sportsgfx...e_sliced_06.jpg
http://www.sportsgfx...e_sliced_49.jpg


Any help would be greatly appreciated, thanks :)

#2 Stephen

    Young Padawan

  • Members
  • Pip
  • 118 posts
  • Location:United Kingdom

Posted 13 July 2006 - 06:29 PM

Why do you have three images for it? Couldn't you just slice a section of it then stretch it vertically?

body {
background: url(YOURIMAGE.jpg) repeat-y; /* REPEAT-Y REPEATS THE IMAGE VERTICALLY */
background-position: 50% 0;
margin: 0;
}

#3 sunster13

    Young Padawan

  • Members
  • Pip
  • 28 posts

Posted 13 July 2006 - 09:21 PM

View PostStephen, on Jul 13 2006, 07:29 PM, said:

Why do you have three images for it? Couldn't you just slice a section of it then stretch it vertically?

body {
background: url(YOURIMAGE.jpg) repeat-y; /* REPEAT-Y REPEATS THE IMAGE VERTICALLY */
background-position: 50% 0;
margin: 0;
}

Well the top and bottom corner have shadows, but I don't mind I guess if I lose them.

Thanks for your help, I'll see if it works.

#4 coolaid

    P2L Jedi Master

  • Members
  • PipPipPipPip
  • 1,435 posts
  • Gender:Male
  • Interests:i wonder..

Posted 13 July 2006 - 09:25 PM

you just do what stephen said, but use a top image and a bottom image that would overlap the background

#5 sunster13

    Young Padawan

  • Members
  • Pip
  • 28 posts

Posted 13 July 2006 - 09:34 PM

I couldn't get it to work.

Here's my css code:

html {
	text-align: center;
	font: 10px/1.3 "Trebuchet MS", Verdana, Arial, Helvetica, Sans-serif;
	background-color: #EEEEEE;
	color: #4b4b4b;
}

body {
	margin: 0 auto;
	padding: 0;
	width: 840px;
	text-align: left;
}

div#sponsorsbg {
	background-image: url(images/sgfx-website_sliced_17.jpg);
	text-align: center;
}

#container {
width: 840px;
height: 769px;
margin: auto;
}
#left {
width: 191px;
height: 769px;
float: left;
}

div#wp {
	background-image: url(images/sgfx_23.jpg);
	height: 204px;
	padding-left: 20px;
}

div#poll {
	background-image: url(images/sgfx_28.jpg);
	height: 200px;
}

div#affiliates {
	background-image: url(images/sgfx_35.jpg);
	height: 165px;
}

div#maincontent {
	background-image: url(images/sgfx_24.jpg);
	height: 699px;
}

div#shoutbox {
	background-image: url(images/sgfx_25.jpg);
	height: 306px;
}

div#stats {
	background-image: url(images/sgfx_32.jpg);
	height: 175px;
}

div#grey {
	background-image: url(images/sgfx_37.jpg);
	height: 170px;
}

div#bottomads {
	background-image: url(images/sgfx_41.jpg);
	height: 108px;
}

div#footer {
	background-image: url(images/sgfx_45.jpg);
	height: 98px;
}

#main {
width: 458px;zz
height: 769px;
float: left;
}
#right {
width: 190px;
height: 769px;
float: left;
}
#sponsers {
width: 840px;
height: 128;
clear: both;
}

And my html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<TITLE>.:: SGFX ::. Homepage- For everything related to sports and sports graphics!</TITLE>
<meta name="robots" content="index,follow">
<META NAME="Keywords" CONTENT="Sports,sports graphics,sports wallpapers,sports gfx,SGFX,hockey wallpapers,basketball wallpapers,baseball wallpapers,soccer wallpapers,football wallpapers,photo gallery,sports forums,sports photo gallery">
<META NAME="Description" CONTENT="Everything related to sports, graphics, and sports graphics can be found here!  Talk about hockey, football, basketball, soccer, baseball, Photoshop, wallpapers, sigs, anything!">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style1.css" />
</head>

<body>
<div><img src="images/sgfx_02.jpg" alt="Header" width="840" height="144"></div>
<div><img src="images/sgfx_08.jpg" width="839" height="15"></div>
<div><a href="index.php"><img src="images/sgfx_09.jpg" alt="Home" width="132" height="31" border="0"></a><a href="/forums"><img src="images/sgfx_10.jpg" alt="Forums" width="133" height="31" border="0"></a><a href="/gallery"><img src="images/sgfx_11.jpg" alt="Gallery" width="130" height="31" border="0"></a><a href="news.php"><img src="images/sgfx_12.jpg" alt="News" width="132" height="31" border="0"></a><a href="affiliates.php"><img src="images/sgfx_13.jpg" alt="Affiliates" width="132" height="31" border="0"></a><a href="contact.php"><img src="images/sgfx_14.jpg" alt="Contact Us" width="150" height="31" border="0"></a><img src="images/sgfx_15.jpg" width="30" height="31"></div>
<div id="sponsors"><img src="images/sgfx_16.jpg" width="839" height="16">

  <div id="sponsorsbg">Sponsors<br>
	<script type="text/javascript"><!--
google_ad_client = "pub-2634942264724860";
google_ad_width = 200;
google_ad_height = 90;
google_ad_format = "200x90_0ads_al_s";
google_ad_channel ="5382090364";
google_color_border = "F5F5F5";
google_color_link = "0F4686";
google_color_bg = "F5F5F5";
google_color_text = "1A69AE";
google_color_url = "0F4686";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><br>
	<br>
	<br>
	<br>
  </div>
</div>


<img src="images/sgfx_18.jpg" width="839" height="15">
<div id="container">
	 <div id="left"><img src="images/sgfx_19.jpg" width="191" height="33">
	   <div id="wp"></div>
	   <div><img src="images/sgfx_26.jpg" width="191" height="30"></div>
	   <div><img src="images/sgfx_27.jpg" width="191" height="34"></div>
	   <div id="poll"></div>
	   <div><img src="images/sgfx_33.jpg" width="191" height="31"></div>
	   <img src="images/sgfx_34.jpg" width="191" height="35">

	   <div id="affiliates"></div>
	   <img src="images/sgfx_38.jpg" width="191" height="42"></div>
	 
	 <div id="main"><img src="images/sgfx_20.jpg" width="458" height="33">
	   <div id="maincontent"></div>
	   <img src="images/sgfx_39.jpg" width="458" height="42"></div>
	 
  <div id="right"><img src="images/shoutbox_21.jpg" width="190" height="33">
	   <div id="shoutbox"></div>
	   <div><img src="images/sgfx_29.jpg" width="190" height="32"><img src="images/stats_30.jpg" width="190" height="29">
		 <div id="stats"></div>

	 </div>
	   <img src="images/sgfx_36.jpg" width="190" height="29">
	   <div id="grey"></div>
  </div>
</div>
<div id="sponsers"><img src="images/sgfx_40.jpg" width="840" height="11">
  <div id="bottomads"></div><img src="images/sgfx_42.jpg" width="839" height="9"><img src="images/footer_43.jpg" width="839" height="41">
  <div id="footer"></div><img src="images/sgfx_47.jpg" width="839" height="30">
</div>

</body>

</html>

The image is images/sgfx_09.jpg

Do you think you could plug it in for me? Thanks alot. :P
Back to Programming and General Web Design · Next Unread Topic →


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Pixel2Life Forum
  2. → Help Section
  3. → Programming and General Web Design