[css-d] Fwd: Centering contained div with unknown width.

2013-04-02 Thread J.C. Berry 
I have a problem. I have to vertically center (middle) my nav items. See
http://mindarc.com/capture2_(1).JPG

This is my HTML snippet:

div id=secmidpagenav
div id=block-menu-block-22 class=block block-menu-block
contextual-links-region
  div class=content!--menu--
div class=menu-block-wrapper menu-block-22 menu-name-main-menu
parent-mlid-2315 menu-level-1
  ul id=subnavli class=menu-mlid-2039a
href=/solutions/xifin-inet/web-servicesWeb Services/a/lili
class=menu-mlid-2318a href=/solutions/xifin-inet/cloudBusiness Is
Better in the Cloud/a/li/ul/div
  /div
/div
  /div

And my CSS:

div#secmidpagenavcontainer{width:100%;border:0;height:59px;clear:both;}
div#secmidpagenavcontainer
div#secmidpagenavbkgdimg{position:absolute;width:1194px;margin-left:-597px;left:50%;padding-top:0;background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd.png')
no-repeat;height:59px;}
div#secmidpagenavcontainer
div#secmidpagenav{position:absolute;width:1170px;margin-left:-594px;left:50%;height:59px;text-align:center;margin-top:1px;}
div#secmidpagenavcontainer div#secmidpagenav
ul{/*margin-top:0;text-align:center;top:7px;*/margin-top:-3px;position:relative;display:inline-block;height:59px;vertical-align:middle;}
div#secmidpagenavcontainer div#secmidpagenav ul
li{list-style-type:none;margin:15px 0 0
0;display:inline;padding:0;vertical-align:top;height:20px;border-right:1px
solid #ebebeb;}
div#secmidpagenavcontainer div#secmidpagenav ul
li:last-child{list-style-type:none;display:inline;border:none;margin:15px 0
0 0;vertical-align:top;height:20px;}
div#secmidpagenavcontainer div#secmidpagenav ul li
a{float:none;display:block;vertical-align:middle;padding:10px 5px 10px
5px;margin-top:-13px;min-width:120px;max-width:160px;height:59px;overflow:visible;text-decoration:none;font-size:14px;color:#fff;font-weight:normal;}
div#secmidpagenavcontainer div#secmidpagenav ul li
a.active{background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd-active.png')
0 0 repeat-x;font-weight:bold;}
/*div#secmidpagenavcontainer div#secmidpagenav ul
li:hover{background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd-active.png')
0 0 repeat-x;}*/
div#secmidpagenavcontainer div#secmidpagenav ul li
a:hover{background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd-active.png')
0 0 repeat-x;}

Any ideas? Thank you!


On Fri, Mar 29, 2013 at 2:07 PM, Jay Tanna jta...@rocketmail.com wrote:

 You need to have margin-left and margin-right to be auto something like
 this:


 #container {
 width: 960px;
 background-color: silver;
 }
 #contained {
 width: 500px;
 margin: 0 auto;
 background-color: gray;
 }

 Your HTML might look like this:

 div id=container
 div id=containedContained/div
 /div

 If this doesn't help then please post a link to your page for us to have a
 look at the source code.

 Good luck.


  I have the below link to a problem. I have an absolute page
  and container
  width, but I have a div inside the container that I need
  centered no matter
  how wide that contained div is. How can I make the contained
  div only as
  wide as its content and center it?
 
  http://mindarc.com/capture.JPG
 




-- 
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
portfolio: http://www.mindarc.com


This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.





-- 
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
portfolio: http://www.mindarc.com


This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ --

Re: [css-d] Fwd: Centering contained div with unknown width.

2013-04-02 Thread Tom Livingston 
On Tue, Apr 2, 2013 at 12:24 PM, J.C. Berry jcharlesbe...@gmail.com wrote:

 I have a problem. I have to vertically center (middle) my nav items. See
 http://mindarc.com/capture2_(1).JPG

 This is my HTML snippet:

 div id=secmidpagenav
 div id=block-menu-block-22 class=block block-menu-block
 contextual-links-region
   div class=content!--menu--
 div class=menu-block-wrapper menu-block-22 menu-name-main-menu
 parent-mlid-2315 menu-level-1
   ul id=subnavli class=menu-mlid-2039a
 href=/solutions/xifin-inet/web-servicesWeb Services/a/lili
 class=menu-mlid-2318a href=/solutions/xifin-inet/cloudBusiness Is
 Better in the Cloud/a/li/ul/div
   /div
 /div
   /div

 And my CSS:

 div#secmidpagenavcontainer{width:100%;border:0;height:59px;clear:both;}
 div#secmidpagenavcontainer

 div#secmidpagenavbkgdimg{position:absolute;width:1194px;margin-left:-597px;left:50%;padding-top:0;background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd.png')
 no-repeat;height:59px;}
 div#secmidpagenavcontainer

 div#secmidpagenav{position:absolute;width:1170px;margin-left:-594px;left:50%;height:59px;text-align:center;margin-top:1px;}
 div#secmidpagenavcontainer div#secmidpagenav

 ul{/*margin-top:0;text-align:center;top:7px;*/margin-top:-3px;position:relative;display:inline-block;height:59px;vertical-align:middle;}
 div#secmidpagenavcontainer div#secmidpagenav ul
 li{list-style-type:none;margin:15px 0 0
 0;display:inline;padding:0;vertical-align:top;height:20px;border-right:1px
 solid #ebebeb;}
 div#secmidpagenavcontainer div#secmidpagenav ul
 li:last-child{list-style-type:none;display:inline;border:none;margin:15px 0
 0 0;vertical-align:top;height:20px;}
 div#secmidpagenavcontainer div#secmidpagenav ul li
 a{float:none;display:block;vertical-align:middle;padding:10px 5px 10px

 5px;margin-top:-13px;min-width:120px;max-width:160px;height:59px;overflow:visible;text-decoration:none;font-size:14px;color:#fff;font-weight:normal;}
 div#secmidpagenavcontainer div#secmidpagenav ul li

 a.active{background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd-active.png')
 0 0 repeat-x;font-weight:bold;}
 /*div#secmidpagenavcontainer div#secmidpagenav ul

 li:hover{background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd-active.png')
 0 0 repeat-x;}*/
 div#secmidpagenavcontainer div#secmidpagenav ul li

 a:hover{background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd-active.png')
 0 0 repeat-x;}

 Any ideas? Thank you!



Maybe:

!DOCTYPE html
html lang=en
head
meta charset=utf-8

title/title

style type=text/css
#secmidpagenav{background: grey; padding:1em;}
#subnav li{display: table-cell; width: 100px; vertical-align: middle;
text-align: center;}
/style
/head

body


div id=secmidpagenav
div id=block-menu-block-22 class=block block-menu-block
contextual-links-region
div class=content
!--menu--
div class=menu-block-wrapper menu-block-22
menu-name-main-menu parent-mlid-2315 menu-level-1
ul id=subnav
li class=menu-mlid-2039a
href=/solutions/xifin-inet/web-servicesWeb Services/a/li
li class=menu-mlid-2318a
href=/solutions/xifin-inet/cloudBusiness Is Better in the Cloud/a/li
/ul
/div
/div
/div
/div

/body
/html



-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Fwd: Centering contained div with unknown width.

2013-04-02 Thread Georg 

On Tue, Apr 2, 2013 at 12:24 PM, J.C. Berry jcharlesbe...@gmail.com wrote:


I have a problem. I have to vertically center (middle) my nav items. See
http://mindarc.com/capture2_(1).JPG


For completeness - along the same lines as others have presented - 
here's how I used to solve such cases...


http://www.gunlaug.no/contents/wd_additions_20.html
...with 5 demo pages to show variants, are linked to in that old article.

regards
Georg

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/