[css-d] Fwd: Centering contained div with unknown width.
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.
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.
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/
[css-d] desktop first tutorial
Hey all, I wanted to experiment with a desktop first media query setup. I've been using the mobile first approach for so long, that my brain is having troubles reversing that process. :D I understand the goal is to use max-width vs. min-width, but I was wondering if there are any good tutorials out there that you know of? One that focuses on desktop first would be awesome. Thanks! M __ 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] desktop first tutorial
Actually, my main question: When designing desktop first MQs, how should the MQs stack? Fake breakpoint numbers follow: Global styles, 545px, 845px, 1045px, Desktop OR Desktop global styles, 1045px, 845px, 545px In other words, what's the optimal way to order breakpoints and global/desktop styles so that I can take advantage of the cascade? Let me know if I need to clarify my question. Thanks! M __ 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] desktop first tutorial
On Tue, Apr 2, 2013 at 6:36 PM, Micky Hulse mickyhulse.li...@gmail.comwrote: I wanted to experiment with a desktop first media query setup. I've been using the mobile first approach for so long, that my brain is having troubles reversing that process. :D I understand the goal is to use max-width vs. min-width, but I was wondering if there are any good tutorials out there that you know of? One that focuses on desktop first would be awesome. The current Bootstrap toolkit takes a desktop first approach. The responsive design features are opt-in. http://twitter.github.com/bootstrap/scaffolding.html#responsive -- Jon Reece jon.re...@gmail.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] desktop first tutorial
I would assume the base styles are the desktop, and as break points decrease, you would undo the desktop layout. My experience with a site I took over that was done this way is that desktop first seems to require a lot more code to over-ride the desktop layout than it does to build mobile-first. My 2 cents... — Sent from Mailbox for iPhone On Tue, Apr 2, 2013 at 7:42 PM, Micky Hulse mickyhulse.li...@gmail.com wrote: Actually, my main question: When designing desktop first MQs, how should the MQs stack? Fake breakpoint numbers follow: Global styles, 545px, 845px, 1045px, Desktop OR Desktop global styles, 1045px, 845px, 545px In other words, what's the optimal way to order breakpoints and global/desktop styles so that I can take advantage of the cascade? Let me know if I need to clarify my question. Thanks! M __ 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/ __ 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] desktop first tutorial
On Tue, Apr 2, 2013 at 7:41 PM, Micky Hulse mickyhulse.li...@gmail.comwrote:
Actually, my main question:
When designing desktop first MQs, how should the MQs stack?
Thanks!
M
The computation, calculation. and variation is endless...
desktop laptop tablet
#stuff{width:98%;min-width:120px;max-width:68em}
mobile handset
@media screen and (max-device-width:480px),screen and (max-width:480px){
#stuff{width:99%;min-width:99%;max-width:99%}
Best,
David Laakso
__
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] desktop first tutorial
Le 3 avr. 2013 à 08:41, Micky Hulse mickyhulse.li...@gmail.com a écrit :
When designing desktop first MQs, how should the MQs stack?
Depends? How do you write your MQ's?
@media (max-width: 500px) {}
or
@media (min-width: 300px) and (max-width: 500px) {}
If you use the first one, bear in mind the cascade, as those MQ's are
cumulative (or the negative of it). IOW,
@media (max-width: 800px) would apply to both an iPhone and an iPad, whereas
@media (max-width:480px) would only apply to an iPhone. Eventually.
For the rest, what Tom says:
My experience with a site I took over that was done this way is that desktop
first seems to require a lot more code to over-ride the desktop layout than
it does to build mobile-first.
(it is less work when you start from scratch having a desktop first concept in
mind than when you refactor an existing site that was not build for
multi-devices display).
Philippe
--
Philippe Wittenbergh
http://l-c-n.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] desktop first tutorial
Thanks to everyone for the replies, I really appreciate it! :) @jon: Thanks for pointing me towards Bootstrap. That's an area of Bootstrap I have not explored (I've mostly studied Bootstrap in terms of the LESS setup). I'll take the time to look into the MQs used there and the docs/philosophy/thinking behind their setup. @tom: Thank you for your feedback! I experiment with your suggestion of undoing the desktop styles. @david: Thanks for the code example, that's helpful. @philippe: Thanks for help! I appreciate the examples as well. :) My main reason for wanting to learn more about (primarily) using max-width is that I'd like to see if it helps me solve (or, come close to solving) these two problems: 1. Allowing desktop styles to print by default. 2. Allowing old IE to load desktop layout by default. In reference to #2 above, for my latest project we're using respond.js as a polyfill for older IEs (IE 8) and it's a huge headache to manage due to our CSS assets being on multiple servers. The respond.js overhead is just to much of a burden. I'm wanting to explore a desktop first approach to see if that technique gets us any closer to having a manageable solutions for the items listed above. Thanks again folks! I owe ya'll an Oregon microbrew. :) Cheers, M __ 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] desktop first tutorial
In response to your issue #2 below, I have had good luck with putting MQs on link elements, and then repeating the link elements without MQs inside a conditional comment for 7 8, allowing the cascade work to deliver a desktop-only layout for old IE. I hate poly filling everything and also had bad luck with respond.js. I'm playing with sass now to use its import method to get all the above to work with only 2 http requests instead of several, but using the same concept. HTH — Sent from Mailbox for iPhone On Tue, Apr 2, 2013 at 11:42 PM, Micky Hulse mickyhulse.li...@gmail.com wrote: Thanks to everyone for the replies, I really appreciate it! :) @jon: Thanks for pointing me towards Bootstrap. That's an area of Bootstrap I have not explored (I've mostly studied Bootstrap in terms of the LESS setup). I'll take the time to look into the MQs used there and the docs/philosophy/thinking behind their setup. @tom: Thank you for your feedback! I experiment with your suggestion of undoing the desktop styles. @david: Thanks for the code example, that's helpful. @philippe: Thanks for help! I appreciate the examples as well. :) My main reason for wanting to learn more about (primarily) using max-width is that I'd like to see if it helps me solve (or, come close to solving) these two problems: 1. Allowing desktop styles to print by default. 2. Allowing old IE to load desktop layout by default. In reference to #2 above, for my latest project we're using respond.js as a polyfill for older IEs (IE 8) and it's a huge headache to manage due to our CSS assets being on multiple servers. The respond.js overhead is just to much of a burden. I'm wanting to explore a desktop first approach to see if that technique gets us any closer to having a manageable solutions for the items listed above. Thanks again folks! I owe ya'll an Oregon microbrew. :) Cheers, M __ 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/ __ 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/
