Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,471
There are 1220 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

3 Image Navigation

Thread title: 3 Image Navigation
Closed Thread    
    Thread tools Search this thread Display Modes  
03-28-2007, 02:15 PM
#1
fooblah123 is offline fooblah123
Status: .
Join date: Jan 2007
Location:
Expertise:
Software:
 
Posts: 1,868
iTrader: 4 / 86%
 

fooblah123 is on a distinguished road

  Old  3 Image Navigation

Hey

I have a navigation with the XHTML code:
Code:
<div id="sub-nav">
	<ul>
			<li id="info"><a href="#">» info</a></li>
			<li id="about us"><a href="#">» about us</a></li>
			<li id="location"><a href="#">» location</a></li>
			<li id="testimonials"><a href="#">» testimonials</a></li>
		</ul>
		</div>
I then have 3 images, left corner, middle, and right corner. I was wondering how i could code that so it would work? (Have the corners at the corners and then filling the gap in the middle with the middle image).

Could someone help me with some code or show me a tutorial.

Thanks

03-28-2007, 07:46 PM
#2
wasahobo is offline wasahobo
Status: Member
Join date: Mar 2006
Location:
Expertise:
Software:
 
Posts: 333
iTrader: 0 / 0%
 

wasahobo is on a distinguished road

Send a message via AIM to wasahobo Send a message via MSN to wasahobo

  Old

What does your CSS look like for it ?

03-28-2007, 08:58 PM
#3
jabberwocky is offline jabberwocky
jabberwocky's Avatar
Status: Member
Join date: Oct 2005
Location: Calgary, Alberta, Canada
Expertise:
Software:
 
Posts: 278
iTrader: 0 / 0%
 

jabberwocky is on a distinguished road

  Old

if its a 'static' non stretching nav you could put one image in the back ground of the nav div. thats quick to do.

03-28-2007, 11:32 PM
#4
fooblah123 is offline fooblah123
Status: .
Join date: Jan 2007
Location:
Expertise:
Software:
 
Posts: 1,868
iTrader: 4 / 86%
 

fooblah123 is on a distinguished road

  Old

No i have 3 images so it can stretch. I have only:
Code:
#sub-nav {
	padding: 0;
	margin: 0;
	height:27px;
	width:800px;
	top: -20px;
	position: relative;
	background-image: url(sub-nav-left-corner.png);
	background-repeat: no-repeat;
}

#sub-nav ul {
	padding: 0px; 
	margin: 0 0 0 0;
	list-style: none;
}

#sub-nav ul li {
	display: inline;
	margin: 3px;
}

#sub-nav ul li a {
	float: left;
	display: block;
	height: 20px;
	width:88px;
	margin: 0 5px 0 0;
	text-decoration:none;
	font-weight:bold;
	font-size:12px;
	color:#999999;
	text-align:center;
	vertical-align:middle;
}

Closed Thread    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed