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

My navbar's text - placement and vertical centering???

Discuss My navbar's text - placement and vertical centering??? in the CSS Help forum on Dev Shed.
My navbar's text - placement and vertical centering??? 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 May 4th, 2008, 08:54 PM
gsquare567 gsquare567 is offline
Contributing User
Click here for more information.
  
Join Date: Dec 2007
Posts: 297 gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 7 h 33 m 37 sec
Reputation Power: 8
Lightbulb My navbar's text - placement and vertical centering???
my navbar is a <ul> and i jsut added image icons. i have two problems, the placement and the vertical centering.

placement:
well, i guess its best to show you the code and what i had to do to get it in place. i used position:relative and then changed the bottom, but why is it so obscure???

Code:
#navbar {
	text-align:right;
	background-image: url('images/menu_new.GIF');
 	background-repeat:repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	padding-right: 8px;
	margin-top:-12;
	height:31;
}

#navbar ul {
	margin-right: -0.3em;
	height:31px;
	position:relative;
	bottom:-2px;
}

#navbar ul li {
	display: inline;
	list-style-type:none;
	margin-left: 0.3em;
	margin-right: 0.3em;
	position:relative;
	vertical-align:middle;
}

#navbar ul li a {
	padding-top:11px;
	color:#495B20;
	background-color:#BAD36B;
	border-left: 2px solid #fff;
	border-top: 2px solid #fff;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
}

#navbar ul li a:hover {
	background-color:#495B20;
	color:#BAD36B;
	border-left: 2px solid #000;
	border-top: 2px solid #000;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

#navbar ul li div {
	position:relative;
	
}

#navbar ul li img {
	border:none;
	width:24px;
	height:24px;
	padding-right:4px;
	margin: 0;
}


vertical centering:
i have looked at the tutorial, but i need serious help. i'm not trying it again, im missing something. can someone please show me how do do this? i want to center it like this...

.......................................
. .
. texttexttexttexttext.
.image texttexttexttexttext.
.----- texttexttexttexttext.
. .
.......................................
so both the image and text are centered but theyre floated left. actually, maybe they dont need to be floated cuz its just a word or two. look at the header for the best desc.

i have tried this with my game box, and i'm clued out. i really hope sum1 can help me with this.

http://www.viportals.com/

EDIT:

DID IT ON MY OWN!!! THATS A FIRST!!!

Code:
#navbar {
	text-align:center;
	background-image: url('images/menu_new.GIF');
 	background-repeat:repeat-x;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 14px;
	margin-top:-15px;
	height:31px;
	line-height:31px;
	margin-left:0;
	margin-right:0;
}

#navbar ul li {
	display: inline;
	list-style-type:none;
}

#navbar ul li a {
	padding-left: 0.3em;
	padding-right: 0.3em;
	padding-top: 4px;
	padding-bottom: 4px;
	color:#495B20;
	background-color:#BAD36B;
	border-left: 2px solid #fff;
	border-top: 2px solid #fff;
	border-right: 2px solid #000;
	border-bottom: 2px solid #000;
}

#navbar ul li a:hover {
	background-color:#495B20;
	color:#BAD36B;
	border-left: 2px solid #000;
	border-top: 2px solid #000;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

#navbar ul li img {
	border:none;
	width:24px;
	height:24px;
	padding-right:4px;
	vertical-align:	middle;
}



now i have one QUESTION:
how do i get all the buttons to align center?????????? they all stay to the right

oh, and not a huge deal, but the text is a couple pixels down so it brings the image down too. how can i make the text in the vertical middle? the line-height thing only worked so well.
__________________
Last edited by gsquare567 : May 4th, 2008 at 09:52 PM.
Reply With Quote
  #2  
Old May 5th, 2008, 05:29 AM
essee essee is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Mar 2008
Posts: 82 essee User rank is Sergeant (500 - 2000 Reputation Level)essee User rank is Sergeant (500 - 2000 Reputation Level)essee User rank is Sergeant (500 - 2000 Reputation Level)essee User rank is Sergeant (500 - 2000 Reputation Level)essee User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 2 Days 7 h 27 m 10 sec
Reputation Power: 12
The reason everything is pushed right and you have a gap at the top (which you fixed with the negative margin-top for #navbar is that <ul>'s have default padding and margins. Try -

Code:
ul{
   padding:0;
   margin:0;
}


and with something like that where it's a known fixed height I wouldn't bother with trying to use vertical centering methods. Just put them in and do it manually with margin-top.
Reply With Quote
  #3  
Old May 5th, 2008, 08:46 AM
gsquare567 gsquare567 is offline
Contributing User
Click here for more information.
  
Join Date: Dec 2007
Posts: 297 gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 7 h 33 m 37 sec
Reputation Power: 8
yeah i tried that before but it did not work. i tried taking away the negative top margin and making ul pad/margin free but it still appeared with that gap.
Reply With Quote
  #4  
Old May 5th, 2008, 12:13 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Click here for more information.
  
Join Date: Jul 2004
Location: USA
Posts: 15,149 Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level) 
Time spent in forums: 3 Months 2 Weeks 2 Days 2 h 47 m 18 sec
Reputation Power: 1294
Umm... What essee suggested is the correct answer. It's not centering because of the left margin/padding (different browsers vary on that) on the <ul>.

Many elements have default padding and/or margins and browsers differ on their defaults for these.
I recommend that you read No Margin For Error and Starting with CSS: revisited.
__________________
Spreading knowledge, one newbie at a time.

Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

IE7: the generation 7 browser new in a world of generation 8 browsers.
Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.
Reply With Quote
  #5  
Old May 6th, 2008, 11:10 AM
gsquare567 gsquare567 is offline
Contributing User
Click here for more information.
  
Join Date: Dec 2007
Posts: 297 gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 7 h 33 m 37 sec
Reputation Power: 8
Quote:
Originally Posted by Kravvitz
Umm... What essee suggested is the correct answer. It's not centering because of the left margin/padding (different browsers vary on that) on the <ul>.

Many elements have default padding and/or margins and browsers differ on their defaults for these.
I recommend that you read No Margin For Error and Starting with CSS: revisited.


that is why i hate browsers other than ffx. maybe i'll implement that someday, but for now i'll just try fixing it for ffx.
Reply With Quote
  #6  
Old May 6th, 2008, 12:08 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Click here for more information.
  
Join Date: Jul 2004
Location: USA
Posts: 15,149 Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level) 
Time spent in forums: 3 Months 2 Weeks 2 Days 2 h 47 m 18 sec
Reputation Power: 1294
Huh? That's normal. The specs don't specify it, so its implementation dependent. Firefox uses 40px left padding by default.

I think you need to take a break. This is not something worth getting that frustrated over.
Reply With Quote
  #7  
Old May 6th, 2008, 02:41 PM
gsquare567 gsquare567 is offline
Contributing User
Click here for more information.
  
Join Date: Dec 2007
Posts: 297 gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 7 h 33 m 37 sec
Reputation Power: 8
Quote:
Originally Posted by Kravvitz
Huh? That's normal. The specs don't specify it, so its implementation dependent. Firefox uses 40px left padding by default.

I think you need to take a break. This is not something worth getting that frustrated over.


i worded that incorrectly. ffx does everything else perfectly. sure, as you say, every browser has different padding, but if i put
Code:
* {padding:0; margin:0;}
then it is something that i will lose sleep over, because it will mean resetting all the padding and margins i have been using.
Reply With Quote
  #8  
Old May 6th, 2008, 03:01 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Click here for more information.
  
Join Date: Jul 2004
Location: USA
Posts: 15,149 Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level) 
Time spent in forums: 3 Months 2 Weeks 2 Days 2 h 47 m 18 sec
Reputation Power: 1294
So don't. I don't use the global reset either. Just set the margins and padding explicitly when you care, like on this <ul>.
Reply With Quote
  #9  
Old May 6th, 2008, 03:05 PM
gsquare567 gsquare567 is offline
Contributing User
Click here for more information.
  
Join Date: Dec 2007
Posts: 297 gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 7 h 33 m 37 sec
Reputation Power: 8
really? because the article said that if you don't, then you will need to do it for every element anyways, because you don't know its margins/padding in other browsers.
Reply With Quote
  #10  
Old May 6th, 2008, 03:20 PM
Kravvitz's Avatar
Kravvitz Kravvitz is offline
CSS & JS/DOM Adept
Click here for more information.
  
Join Date: Jul 2004
Location: USA
Posts: 15,149 Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level)Kravvitz User rank is General 5th Grade (Above 100000 Reputation Level) 
Time spent in forums: 3 Months 2 Weeks 2 Days 2 h 47 m 18 sec
Reputation Power: 1294
There are multiple ways to deal with it. Each has its advantages and disadvantages. Choose whichever way you think is best for the given situation.
Reply With Quote
  #11  
Old May 6th, 2008, 05:10 PM
gsquare567 gsquare567 is offline
Contributing User
Click here for more information.
  
Join Date: Dec 2007
Posts: 297 gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 7 h 33 m 37 sec
Reputation Power: 8
ok, so we're on the same page. i thought you were talking about setting the globals to 0. im going to try it now...

EDIT: i see why i was so confused... i'm not done converting from tables yet, so it was in a stupid td.
Reply With Quote
  #12  
Old May 11th, 2008, 01:24 AM
gsquare567 gsquare567 is offline
Contributing User
Click here for more information.
  
Join Date: Dec 2007
Posts: 297 gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level)gsquare567 User rank is Sergeant (500 - 2000 Reputation Level) 
Time spent in forums: 1 Day 7 h 33 m 37 sec
Reputation Power: 8
****ing works. love u kravvitz
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > My navbar's text - placement and vertical centering???

« 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