CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

CSS and border

Discuss CSS and border in the CSS Help forum on Dev Shed.
CSS and border Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old January 28th, 2004, 04:30 PM
Scatt-Neko Scatt-Neko is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2003
Location: East Hartford, CT
Posts: 68 Scatt-Neko User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 47 m 59 sec
Reputation Power: 6
CSS and border
Hi,

I am trying to box around a text, but what happen is that when I setting up borders for it, it shows the box expand longer than the text. Is there a way to have the box just as big as the text (Well, slightly bigger, but just enough for the text)? I thought border-collapse:collapse would do it, but apperantly not.

This is the CSS code I am using:

PHP Code:
 div.submenu1 {
  position: relative; 
  left: 22px; 
  padding: 4px; 
  border-style: solid;
  border-width: 0px 1px 1px 1px; 
  border-color: #0000FF;
  border-collapse: collapse; 
  background-color: #3399FF
} 


And on the html it's:

PHP Code:
<div class='submenu1'>
<a href='somelink' class='submenu1'>somelink</a>
</div> 
__________________
Scatt-Neko
Reply With Quote
  #2  
Old January 28th, 2004, 05:00 PM
f'lar's Avatar
f'lar f'lar is offline
Senior WeyrLeader
Dev Shed Expert (3500 - 3999 posts) Click here for more information
 
Join Date: Aug 2003
Location: WI
Posts: 3,865 f'lar User rank is Major General (70000 - 90000 Reputation Level)f'lar User rank is Major General (70000 - 90000 Reputation Level)f'lar User rank is Major General (70000 - 90000 Reputation Level)f'lar User rank is Major General (70000 - 90000 Reputation Level)f'lar User rank is Major General (70000 - 90000 Reputation Level)f'lar User rank is Major General (70000 - 90000 Reputation Level)f'lar User rank is Major General (70000 - 90000 Reputation Level)f'lar User rank is Major General (70000 - 90000 Reputation Level)f'lar User rank is Major General (70000 - 90000 Reputation Level)f'lar User rank is Major General (70000 - 90000 Reputation Level)f'lar User rank is Major General (70000 - 90000 Reputation Level)f'lar User rank is Major General (70000 - 90000 Reputation Level)f'lar User rank is Major General (70000 - 90000 Reputation Level)f'lar User rank is Major General (70000 - 90000 Reputation Level) 
Time spent in forums: 1 Month 1 Week 4 Days 21 h 22 m 20 sec
Reputation Power: 785
Send a message via Google Talk to f'lar
Try adding a span and putting the border on that.
__________________
Primary Forums: .Net Development, MS-SQL, C Programming
VB.Net: It's not your father's Visual Basic.

[Moving to ASP.Net] | [.Net Dos and Don't for VB6 Programmers]
Reply With Quote
  #3  
Old January 28th, 2004, 05:04 PM
Phil_work Phil_work is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2002
Location: Canberra, Australia
Posts: 324 Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 20 h 47 m 53 sec
Reputation Power: 7
What is happening here is there is no width applied to the div, therefore it is stretching out the width of the screen.

The way around this is:

Create an ID that surrounds your navigation options. Set the position, width, border and thing else CSS you like.

then write the new ID with a pseudo class a:link

which says "any links within the navigation div display them like this"

Code:
/*CSS */

#navigation {
  position: relative;
  display: block; 
  left: 22px; 
  width: 150px;
  padding: 4px; 
  border-style: solid;
  border-width: 0px 1px 1px 1px; 
  border-color: #0000FF;
  background-color: #3399FF
}

#navigation a:link {
	color: #ffffff;
	text-decoration: none;
}

#navigation a:visited {
	color: #ffffff;
}

#navigation a:hover {
	display: block;
	color: #3399FF;
	background-color: #FFFFFF
}

#navigation a:active {
	color: #ffffff;
}

/* HTML */
<div id="navigation">
<a href='somelink'>somelink</a>
</div>


hope it helps ya....
Reply With Quote
  #4  
Old January 28th, 2004, 05:13 PM
Scatt-Neko Scatt-Neko is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2003
Location: East Hartford, CT
Posts: 68 Scatt-Neko User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 47 m 59 sec
Reputation Power: 6
If I put multiple lines in the span (with different length), then the border will be mess up because they only try to border up each line of text. I wonder if I have missed something...

Edit: Hm.. just saw the 2nd post about width after I post this... I will try it now!
Reply With Quote
  #5  
Old January 28th, 2004, 05:26 PM
Scatt-Neko Scatt-Neko is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2003
Location: East Hartford, CT
Posts: 68 Scatt-Neko User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 47 m 59 sec
Reputation Power: 6
Nice, adding width helps a lot! Thanks! But I suppose I can't have it auto-set to the longest line in the <div>, can I?

I know I am asking too much from CSS, but it's such a great tools
Reply With Quote
  #6  
Old January 28th, 2004, 05:37 PM
Phil_work Phil_work is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Sep 2002
Location: Canberra, Australia
Posts: 324 Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level)Phil_work User rank is Corporal (100 - 500 Reputation Level) 
Time spent in forums: 20 h 47 m 53 sec
Reputation Power: 7
Check out this page there should be some good examples in there,

http://www.w3schools.com/css/default.asp
Reply With Quote
  #7  
Old January 28th, 2004, 05:53 PM
Scatt-Neko Scatt-Neko is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2003
Location: East Hartford, CT
Posts: 68 Scatt-Neko User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 2 h 47 m 59 sec
Reputation Power: 6
I actually have been looking at that site quite a lot for references. How I missed "width" element in that page, I have no clue, must be thinking too hard...

Anyway, thanks a lot for the help! really appreciate it!
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > CSS and border

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 6 hosted by Hostway.