• 0

Center LOGO and NAV bar


Question

I've been trying to Center the logo and NAV bar on my webpage but I can't seem to do it. The float element only has left and right. The page is http://pclatino.com/ and I only want to center the logo and navigation bar. Please let me know if you can help. I'm attaching the CSS below. Thanks!


/* --------------------------------------------------------- */
/* ----------------------- HEADER ----------------------- */
/* --------------------------------------------------------- */


#header { width: 100%; }
#header #headerInner h1#logo { background: transparent url(../images/blackwhite/logo.png) no-repeat center; float: none; display: block; letter-spacing: -1000em; 
overflow: hidden; text-indent: -9999em; width: 450px; height: 130px; }
#header #headerInner{ padding: 50px 50px 36px; }
#header #headerInner ul#nav { text-align: center; float: left; margin: 24px 0 0; position: relative; }
#header #headerInner ul#nav li { float: left; margin: 0 30px 0 0; }
#header #headerInner ul#nav li ul { position: absolute; display: none; center: 0; top: -28px; width: 550px; padding: 0 0 10px; }
#header #headerInner ul#nav li ul li { display: block; float: none; margin: 0 25px 0 0;}
#header #headerInner ul#nav li:hover ul { display: block; }

Link to comment
Share on other sites

15 answers to this question

Recommended Posts

  • 0

Cupcakes, Deathlace: Many thanks, however it's not working even when put like this: :unsure: Maybe I'm not putting it where it belongs?

#logo {
        width: 450px;
        margin: 0 auto;
  } 
 #nav {
        width: 478px;
        margin: 0 auto;
 }

#header { width: 100%; }
#header #headerInner h1#logo { background: transparent url(../images/blackwhite/logo.png) no-repeat center; float: none; display: block; letter-spacing: -1000em; overflow: hidden; text-indent: -9999em; width: 450px; height: 130px; }
#header #headerInner{ padding: 50px 50px 36px; }
#header #headerInner ul#nav { text-align: center; float: left; margin: 24px 0 0; position: relative; }
#header #headerInner ul#nav li { float: left; margin: 0 30px 0 0; }
#header #headerInner ul#nav li ul { position: absolute; display: none; center: 0; top: -28px; width: 550px; padding: 0 0 10px; }
#header #headerInner ul#nav li ul li { display: block; float: none; margin: 0 25px 0 0;}
#header #headerInner ul#nav li:hover ul { display: block; }

And this below is absolutely all the CSS

/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: '';content: none; }
:focus { outline: 0;}
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse;border-spacing: 0; }




/* --------------------------------------------------------- */
/* ---------- TYPOGRAPHY and text COLORS ----------- */
/* --------------------------------------------------------- */


body { font-family: Helvetica, "Lucida Grande", "Helvetica Unicode", Arial, sans-serif; color: #404040; font-size: 80%; line-height:1.65em; }
h1, h2, h3, h4 { font-family: Helvetica, serif; margin: 0 0 0.9em 0; }
h5, h6 { margin: 0 0 0.9em 0; }
h2 { font-size: 2.50em; color: #f1faff; line-height: 1.22em; }
h3 { font-size: 2em; color: #002233; line-height: 1.22em; }
h4 { font-size: 1.33em; color: #333333; line-height: 1.22em; }
h5 { font-size: 1.33em; font-weight: bold; color: #333333; }
h6  { font-size: 1em; font-weight: bold; color: #333333; }
a { text-decoration: none; color: #002233; }
a:hover { color: #002233; }
p { margin-bottom: 1.65em; }
em { font-style: italic; }
strong { font-weight: bold; }
big { font-size: 1.3em; }
small { font-size: 0.83em; text-transform: uppercase; color: #7b7b7b; }

#main ul, #main ol { padding: 0.35em 50px 2em; color: #666666; }
#main ul li, #main ol li { padding: 0 0 1em; }
#main ul { list-style-position: outside; list-style-type: disc; }
#main ol { list-style-position: outside; list-style-type: decimal; }
#main ul.listWithIcons { list-style-type:none; list-style: none; }
#main ul.listWithIcons li { line-height: 29px; background: transparent url(../images/blackwhite/yes.png) no-repeat left top; padding: 0 0 1em 50px; }
#main ul.listWithIcons li.no { background: transparent url(../images/blackwhite/no.png) no-repeat left top; }

blockquote { padding: 0.35em 50px 2em; color: #666666; }

h1 a, h2 a, h3 a, h5 a, h6 a { text-decoration: none; color: #002233; }
h1 a:hover, h2 a:hover, h3 a:hover, h5 a:hover, h6 a:hover { text-decoration: none; color: #002233; }
h4 a { color: #333333; text-decoration: none; }
h4 a:hover { color: #525252; }
#header h1#logo { margin: 0; }
#featuredText h2, #pageHeaderText h2 { margin: 0 0 0.5em 0; }
#featuredText h4, #pageHeaderText h4 { line-height: 1.65em; margin-bottom: 0; color: #d9d9d9; }
#featuredText, #pageHeaderText { color: #d9d9d9; }
#sidebar h5, #sidebar h6 { margin: 0; }

#header #headerInner ul#nav { font-weight: bold; text-transform: uppercase; letter-spacing:0.03em; }
#header #headerInner ul#nav li ul { text-transform: none; }
#header #headerInner ul#nav li a { color: #404040; text-decoration: none; }
#header #headerInner ul#nav li.current a { color: #002233; text-decoration: none; }
#header #headerInner ul#nav li a:hover { color: #002233; }
#header #headerInner ul#nav li ul li a { color: #404040; font-size: 0.83em; }
#header #headerInner ul#nav li.current ul li a { color: #404040; font-size: 0.83em; }
#header #headerInner ul#nav li.current ul li.current a { color: #002233; font-size: 0.83em; }
#header #headerInner ul#nav li ul li a:hover { color: #002233; }
#header #headerInner ul#nav li:hover a { color: #002233; }
#header #headerInner ul#nav li:hover ul li a { color: #404040; }
#header #headerInner ul#nav li:hover ul li a:hover { color: #002233; }

#content #main .tagline { font-weight: bold; color: #333333; }
#content #main .blogPost .tagline { font-size: 0.83em; line-height: 1.65em; vertical-align: top; }
#content #main .blogPost .metaData { color: #666666; font-size: 0.83em; }
#content #main .blogPost.singlePostHeadNoimg .metaData, #content #main .blogPost.singlePostHead .metaData { font-size: 1em; }
#content #main .blogPost .metaData a { text-decoration: none; color: #404040; }
#content #main .blogPost .metaData a:hover { color: #666666; }
#content #main .blogPost p { font-style: italic; }
#content #main #pagination a { text-transform: uppercase; font-weight: bold; color: #404040; }
#content #main #pagination a:hover { color: #f74a95; }

#comments .commentlist { color: #404040; }
#comments .commentlist .children { color: #404040; }
#comments .commentlist .comment .comment-body .commentmetadata { font-size: 0.83em; color: #666666; }
#comments .commentlist .comment .comment-body .commentmetadata a { color: #404040; text-decoration: none; }
#comments .commentlist .comment .comment-body .commentmetadata a:hover { color: #666666; }
#comments .commentlist .comment .comment-body .vcard .commentAuthor { font-size: 0.83em; color: #666666; }
#comments .commentlist .comment .comment-body .vcard .commentAuthor .fn { font-size: 1.2em; font-weight: bold; font-style: normal; color: #002233; }
#comments .commentlist .comment .comment-body .vcard .commentAuthor .fn a { text-decoration: none; color: #002233; }
#comments .commentlist .comment .comment-body .vcard .commentAuthor .fn a:hover { color: #002233; }

#galleryHeader #galleryTitles { color: #333333; }
#galleryHeader #galleryTitles a { text-decoration: none; color: #333333; }
#galleryHeader #galleryTitles a:hover { color: #525252; }
#galleryHeader #galleryTitles .current { color: #333333; font-size: 1.33em; }
#galleryHeader #galleryTitles .current a { text-decoration: none; color: #333333; }
#galleryHeader #galleryTitles .current a:hover { color: #525252; }
#galleryHeader #galleryTitles .middot { font-size: 1.4em; }
#gallerybuttons .button { color: #b2b2b2; }
#gallerybuttons .button .highlight { color: #e5e5e5; }

#sidebar { color: #666666; }
#sidebar .sidebarWidget .postList .metaData { font-size: 0.83em; }
#sidebar .sidebarWidget .postList .metaData a { text-decoration: none; color: #404040; }
#sidebar .sidebarWidget .postList .metaData a:hover { color: #666666; }
#sidebar .topics li {font-weight:bold;}

#bottombar .minipost { color: #666666; font-style: italic; }
#bottombar .tagline { color: #333333; font-style: normal; font-weight: bold; font-size: 0.83em; }

#footer { font-size: 0.83em; color: #d9d9d9; }
#footer a { text-decoration: none; color: #8f8f8f; }
#footer a:hover { color: #d9d9d9; }
#footer #footerInner .disclaimer { color: #8f8f8f; }
#footer #footerInner .disclaimer a { text-decoration: none; color: #d9d9d9; }
#footer #footerInner .disclaimer a:hover { color: #8f8f8f; }




/* --------------------------------------------------------- */
/* --------------------- MAIN styles --------------------- */
/* --------------------------------------------------------- */


body { background: #f5f5f5 url(../images/blackwhite/backgroundTile.png) repeat 50% 0; }
.wrapper{ width: 900px; padding: 0 50px; margin:0 auto; }
.clear{ clear:both;height:0;font-size:0;margin:0;padding:0;visibility:hidden; }
.alignleft{ float:left; }
.alignright{ float:right; }
.aligncenter{ display:block;margin:0 auto; }
#main img.alignleft { margin: 0 20px 20px 0; }
#main img.alignright { margin: 0 0 20px 20px; }




/* --------------------------------------------------------- */
/* ----------------------- HEADER ----------------------- */
/* --------------------------------------------------------- */
#logo {
        width: 450px;
        margin: 0 auto;
  } 
 #nav {
        width: 478px;
        margin: 0 auto;
 }

#header { width: 100%; }
#header #headerInner h1#logo { background: transparent url(../images/blackwhite/logo.png) no-repeat center; float: none; display: block; letter-spacing: -1000em; overflow: hidden; text-indent: -9999em; width: 450px; height: 130px; }
#header #headerInner{ padding: 50px 50px 36px; }
#header #headerInner ul#nav { text-align: center; float: left; margin: 24px 0 0; position: relative; }
#header #headerInner ul#nav li { float: left; margin: 0 30px 0 0; }
#header #headerInner ul#nav li ul { position: absolute; display: none; center: 0; top: -28px; width: 550px; padding: 0 0 10px; }
#header #headerInner ul#nav li ul li { display: block; float: none; margin: 0 25px 0 0;}
#header #headerInner ul#nav li:hover ul { display: block; }



/* --------------------------------------------------------- */
/* ----------- FEATURED and PAGE HEADER ----------- */
/* --------------------------------------------------------- */


#featuredTop { width: 100%; height: 13px; margin: -12px 0 0; background: transparent url(../images/blackwhite/featuredBgTopTile.png) repeat-x; position: relative; }
#featuredBottom { width: 100%; height: 13px; margin: 0 0 -12px; background: transparent url(../images/blackwhite/featuredBgBottomTile.png) repeat-x; position: relative; z-index: 2; }
#featured { width: 100%; background: #002233; border-top: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb; }
#featured #featuredInner { padding: 37px 50px 36px; background: transparent url(../images/blackwhite/featuredBgShine.png) no-repeat left top; margin: -1px auto 0; }
#featured #featuredInner #featuredText { width: 420px; float: left; margin-top: 28px; }
#featured #featuredInner #pageHeaderText { width: 100%; margin: 14px 0; }
#featured #featuredInner #featuredImage { width: 420px; height: 220px; float: right; overflow: hidden; position: relative; }
#featured #featuredInner #featuredImage #imageFrame { width: 420px; height: 220px; position: absolute; top: 0; left: 0; background: transparent url(../images/blackwhite/featuredImgFrame.png) no-repeat top left; z-index: 99; }
#featured #featuredInner #featuredImage #imageFrame #prevButton { display: block; width: 29px; height: 38px; position: absolute; left: 0; top: 92px; background: transparent url(../images/blackwhite/featuredPrevBtn.png) no-repeat; cursor: pointer; z-index: 100; }
#featured #featuredInner #featuredImage #imageFrame #nextButton { display: block; width: 29px; height: 38px; position: absolute; right: 0; top: 92px; background: transparent url(../images/blackwhite/featuredNextBtn.png) no-repeat; cursor: pointer; z-index: 100; }
#featured #featuredInner #featuredImage #slides { width: 398px; height: 198px; margin: 11px; }





/* --------------------------------------------------------- */
/* ----------------------- CONTENT ---------------------- */
/* --------------------------------------------------------- */



#content { padding: 46px 50px 6px 50px; background: transparent url(../images/blackwhite/contentBg.png) no-repeat left top; position: relative; z-index: 1; }
#content #main { width: 580px; float: left; margin: 0 60px 0 0; padding: 0 0 15px; }
#content #main .blogPost { border-bottom: 1px solid #d9d9d9; padding-bottom: 24px; margin-bottom: 25px; }
#content #main .blogPost .postTitle { margin: -6px 0 5px 0; }
#content #main .blogPost .metaData { margin: 0 0 18px 0; display: inline-block; }
#content #main .postHead { padding-left: 175px; position: relative; min-height: 140px; }
* html #content #main .postHead { height: 140px; } /* IE6 hack */
#content #main .postHead .postImage { position: absolute; left: 0; }
#content #main .singlePostHead { padding-left: 220px; position: relative; min-height: 195px; }
* #content #main .singlePostHead { height: 195px; } /* IE6 hack */
#content #main .singlePostHead .postImage { position: absolute; left: 0; }
#content #main .singlePost { border-bottom: 1px solid #d9d9d9; }
#content #main #pagination { margin: -5px 0 12px; }
#content #main #pagination a { display: block; float: left; margin: 0 12px 0 0; width: 23px; height: 26px; line-height: 26px; text-align: center;  }
#content #main #pagination.default a { display: inline; float: none; margin: 0; width: auto; height: auto; line-height: 26px; text-align: left;  }
#content #main #pagination a.current { background: transparent url(../images/blackwhite/paginationLinkBackground.png) no-repeat; }
#content #main #pagination a.paginationLastLink { margin: 0; width: auto; }

#content.fullWidth #main { float: none; width: 100%; margin: 0; }





/* --------------------------------------------------------- */
/* ----------------------- GALLERY ---------------------- */
/* --------------------------------------------------------- */



#gallery { width: 100%; margin: 0 0 12px 0; position: relative; }
#galleryHeader { margin: 0; text-align: center; position: relative; float: left; text-align: left; left: 50%; }
#galleryHeaderContainer { width: 100%;  border-top: 1px solid #b3b3b3; border-bottom: 1px solid #b3b3b3; margin: 0 0 34px; background: rgba(255, 255, 255, 0.4); }
#gallerybuttons .button { display: block; width: 78px; height: 34px; background: transparent url(../images/blackwhite/button.png) no-repeat; line-height: 34px; font-size: 0.83em; text-transform: uppercase; text-align: center; cursor: pointer; position: absolute; }
#gallerybuttons .button .highlight { display: block; width: 78px; height: 34px; position: absolute; top: 0; left: 0; background: transparent url(../images/blackwhite/buttonHighlight.png) no-repeat; }
#main { position: relative; }
#gallerybuttons {position: absolute; top: -3px; width: 100%; }
#gallerybuttons #prevButton { position: absolute; left: 0; }
#gallerybuttons #nextButton { position: absolute; right: 0; }
#galleryHeader #galleryTitles { line-height: 26px; text-align: center; padding: 0; position: relative; left: -50%; list-style:none; }
#galleryHeader #galleryTitles li { margin: 0 18px; padding: 0; float: left; position: relative; }
#galleryHeader #galleryTitles li a { margin: 0; }
#gallery #slideContainer { width: 900px; }
#gallery #slideContainer .slide { width: 900px; }
#gallery #slideContainer .slide .galleryImage { float: left; margin: 0 40px 25px 0; position: relative; overflow: hidden; }
#gallery #slideContainer .slide .alt { float: left; margin: 0 0 25px 0; }
#gallery #slideContainer .slide .galleryImage .zoomButton { width: 97px; height: 95px; display: block; position: absolute; left: 0; top: 50px; background: transparent url(../images/blackwhite/galleryButtonLeft.png) no-repeat; }
#gallery #slideContainer .slide .galleryImage .descriptionButton { width: 98px; height: 95px; display: block; position: absolute; right: 0; top: 50px; background: transparent url(../images/blackwhite/galleryButtonRight.png) no-repeat; }

#description { background: #0a0a0a url(../images/blackwhite/backgroundTile.png) repeat 50% 0; width: 580px; margin: 0 auto; padding: 45px 45px 30px; }
#description img.alignleft { margin: 0 25px 25px 0; }
#description img.alignright { margin: 0 0 25px 25px; }





/* --------------------------------------------------------- */
/* ----------------------- SIDEBAR ---------------------- */
/* --------------------------------------------------------- */



#sidebar { width: 260px; float:right; padding: 0 0 5px 0; }
#sidebar .sidebarWidget { margin: 0 0 37px; }
#sidebar .sidebarWidget .widgetTitle { margin: 0 0 21px 0; }
#sidebar ul li { margin: 0 0 8px; }





/* --------------------------------------------------------- */
/* --------------------- BOTTOMBAR -------------------- */
/* --------------------------------------------------------- */



#bottombar { background: transparent url(../images/blackwhite/bottombarBg.png) no-repeat center top; overflow:hidden; padding: 38px 0 0; }
#bottombar .minipost { float: left; width: 260px; margin: 0 60px 0 0; }
#bottombar .lastChild { margin: 0; }
* html #bottombar .lastChild { margin-right: 0 !important; width: 250px !important; }
#bottombar .minipost .minipostIcon { margin: 0 10px 3px 0; }
#bottombar .minipost .minipostTitle { margin: 0 0 11px 0; }
#bottombar .minipost p { clear: both; }





/* --------------------------------------------------------- */
/* ------------------------ FOOTER ----------------------- */
/* --------------------------------------------------------- */



#footerTop { width: 100%; height: 13px; background: transparent url(../images/blackwhite/featuredBgTopTile.png) repeat-x; }
#footer { width: 100%; background: #002233; line-height: 1.4em; border-top: 1px solid #cbcbcb; }
#footer #footerInner { padding: 35px 50px 24px; text-align: center; }
#footer #social { margin: 0 0 24px 0; }
#footer #social li { display: inline; }
#footer #social a { margin: 0 0 0 33px; display: inline-block; position: relative; }
#footer #social li:first-child a { margin: 0; }
#footer #footerInner #social a .tooltip { position: absolute; top: -58px; left: -57px; display: none; width: 146px; height: 39px; line-height: 26px; background: transparent url(../images/blackwhite/tooltipBg.png) no-repeat; }
#footer #footerInner .disclaimer, #footer #footerInner .copyright { padding: 0 180px; }





/* --------------------------------------------------------- */
/* ------------------------ COMMENTS ----------------------- */
/* --------------------------------------------------------- */



#comments, #respond { margin: 40px 0 0; }
#comments .commentlist { list-style-type: none; padding: 0; }
#comments .commentlist .comment { border-bottom: 1px solid #d9d9d9; padding: 25px 0; }
#comments .commentlist .comment .comment-body { position: relative; padding: 0 0 0 100px; }
#comments .commentlist .comment .comment-body .avatar { position: absolute; left: 0; top: 0; }
* html #comments .commentlist .comment .comment-body .avatar { left: -100px; } /* IE6 hack */
#comments .commentlist .comment .children { padding: 0 0 0 60px; list-style-type: none; }
#comments .commentlist .comment .children .comment { border-top: 1px solid #d9d9d9; border-bottom: none; padding: 25px 0 0; margin: 25px 0 0;}





/* --------------------------------------------------------- */
/* -------------------- FORMS AND BUTTONS ------------------- */
/* --------------------------------------------------------- */



form .button { display: block; width: 78px; height: 34px; background: transparent url(../images/blackwhite/button.png) no-repeat; line-height: 34px; font-size: 0.83em; text-transform: uppercase; text-align: center; cursor: pointer; position: relative; }
#sidebar form .button { float: right; }
form .button { color: #b2b2b2; }
form .button input.highlight { display: block; width: 78px; height: 34px; padding: 0; margin: 0; position: absolute; top: 0; left: 0; background: transparent url(../images/blackwhite/buttonHighlight.png) no-repeat; outline: none; border: none; text-transform: uppercase; font-size: 1em; font-family: Helvetica, "Lucida Grande", "Helvetica Unicode", Arial, sans-serif; color: #e5e5e5; cursor: pointer; }
input { width: 244px; background: transparent url(../images/blackwhite/inputBg.png) no-repeat; border: none; outline: none; padding: 9px 8px; color: #7B7B7B; font-family: Helvetica, "Lucida Grande", "Helvetica Unicode", Arial, sans-serif; font-size: 12px; line-height: 12px; }
input#s { width: 166px; float: left; margin: 2px 0 0; }
textarea { width: 564px; height: 126px; padding: 12px 8px; background: transparent url(../images/blackwhite/textareaBg.png) no-repeat; border: none; outline: none; color: #7B7B7B; font-family: Helvetica, "Lucida Grande", "Helvetica Unicode", Arial, sans-serif; font-size: 1em; line-height: 1.65em; }
#main input { margin: 0 15px 0 0; }
#contactForm { margin: 35px 0 0; }
#ajaxResponse { padding: 20px 0 0; position: relative; }
#ajaxResponse #loaderIcon { visibility: hidden; background: transparent url(../images/blackwhite/ajax-loader.gif) no-repeat; display:block; width: 16px; height: 16px; }
#ajaxResponse #loaderIcon2 { position: absolute; top: -26px; left: 90px; background: transparent url(../images/blackwhite/ajax-loader.gif) no-repeat; display:block; width: 16px; height: 16px; }
#ajaxResponse span.error { display: block; height: 30px; line-height: 30px; padding: 0 0 0 40px; background: transparent url(../images/blackwhite/no.png) no-repeat left top; font-size: 0.83em; }
#ajaxResponse span.success { display: block; height: 30px; line-height: 30px; padding: 0 0 0 40px; background: transparent url(../images/blackwhite/yes.png) no-repeat left top; font-size: 0.83em; }





/* --------------------------------------------------------- */
/* ------------------ Portfolio single post ----------------- */
/* --------------------------------------------------------- */



img.attachment-medium {float: left; margin: 0 60px 15px 0;}
img.attachment-large {margin: 0 0 25px;}
#portfolioSidebar { float: right; width: 260px; }

Thank you again and I hope you can help me!

Link to comment
Share on other sites

  • 0

You have some things overwritting what we gave you :)

Remove what we gave you

Find #header #headerInner h1#logo in your CSS.

Remove: float: none; (it's not needed, that is the default float)

Add: margin: 0 auto;

Find #header #headerInner ul#nav in your CSS.

Remove: float: left;

Add: margin:0 auto; & width:478px;

All should work!

P.S. Cupcakes feel better!

Link to comment
Share on other sites

  • 0

Thank you deathlace! I hope you feel better Cupcakes. So now, the logo is centered where I want it but If I remove float: left; from #header #headerInner ul#nav li it changes from how it looks from pic 1 to pic 2 which is not how I want it. I want the nav horizontal but centered, not vertical as a list.


/* --------------------------------------------------------- */
/* ----------------------- HEADER ----------------------- */
/* --------------------------------------------------------- */
#header { width: 100%; }
#header #headerInner h1#logo { background: transparent url(../images/blackwhite/logo.png) no-repeat center;  margin: 0 auto; display: block; letter-spacing: -1000em; overflow: hidden; text-indent: -9999em; width: 450px; height: 130px; }
#header #headerInner{ padding: 50px 50px 36px; }
#header #headerInner ul#nav { text-align: center; margin:0 auto; & width:478px; position: relative; }
#header #headerInner ul#nav li { float: left; margin: 0 30px 0 0; }
#header #headerInner ul#nav li ul { position: absolute; display: center; top: -28px; width: 550px; padding: 0 0 10px; }
#header #headerInner ul#nav li ul li { display: block; margin:0 auto; & width:478px;}
#header #headerInner ul#nav li:hover ul { display: block; }

post-276844-12844101329503.pngpost-276844-12844101460356.png

Link to comment
Share on other sites

  • 0

Sorry the float: left I wanted removed from #header #headerInner ul#nav which you have, keep it for #header #headerInner ul#nav li { float: left; margin: 0 30px 0 0; }

However your #headerInner ul#nav is wrong, make it:

#header #headerInner ul#nav { text-align: center; margin:0 auto; width:478px; position: relative; }

You just need to remove the & that's in the middle of the margin: 0 auto and width: 478px; :)

Link to comment
Share on other sites

  • 0

Sorry the float: left I wanted removed from #header #headerInner ul#nav which you have, keep it for #header #headerInner ul#nav li { float: left; margin: 0 30px 0 0; }

However your #headerInner ul#nav is wrong, make it:

#header #headerInner ul#nav { text-align: center; margin:0 auto; width:478px; position: relative; }

You just need to remove the & that's in the middle of the margin: 0 auto and width: 478px; :)

Thank you very much! You rock man :) Appreciate it a lot.

On a sidenote, your site looks very nice :)

Thank you! It's a custom wordpress skin, nothing fancy really, but it works for what I wanted it to.

Link to comment
Share on other sites

  • 0

Floating li elements to the left followed by a width for ul will work fine but then you have to define a width and it can be a hassle sometimes. A better solution would be to set li elements to display inline or inline-block followed by applying test-align center on ul. Now the li elements will be centered and you don't need to define a width for ul.

Link to comment
Share on other sites

  • 0

Floating li elements to the left followed by a width for ul will work fine but then you have to define a width and it can be a hassle sometimes. A better solution would be to set li elements to display inline or inline-block followed by applying test-align center on ul. Now the li elements will be centered and you don't need to define a width for ul.

Thanks a lot for the advice. I'm a noob with it comes to CSS. I will do that next time :)

Link to comment
Share on other sites

  • 0

Floating li elements to the left followed by a width for ul will work fine but then you have to define a width and it can be a hassle sometimes. A better solution would be to set li elements to display inline or inline-block followed by applying test-align center on ul. Now the li elements will be centered and you don't need to define a width for ul.

If you set them as display: inline-block, add zoom: 1;, and *display: block, IE6 won't recognize inline-block

so

#header #headerInner ul#nav li {

display: inline-block;

zoom: 1;

*display: block;

}

Plus all your other styles in there :)

Link to comment
Share on other sites

  • 0

If you set them as display: inline-block, add zoom: 1;, and *display: block, IE6 won't recognize inline-block

so

#header #headerInner ul#nav li {

display: inline-block;

zoom: 1;

*display: block;

}

Plus all your other styles in there :)

zoom is a IE only property and should be on a separate stylesheet. The same applies for IE6 only style. Avoid using hacks like that because you never know how future browsers will react to it.

Link to comment
Share on other sites

  • 0

zoom is a IE only property and should be on a separate stylesheet. The same applies for IE6 only style. Avoid using hacks like that because you never know how future browsers will react to it.

+1 or just not worry about IE6 ;).

But to add onto sweetsam's:

For displaying CSS (or anything else) for IE6 and lower:

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" media="screen" />
<![endif]-->

To change to IE7 and lower just change the 6 to 7. :p

Link to comment
Share on other sites

  • 0

zoom is a IE only property and should be on a separate stylesheet. The same applies for IE6 only style. Avoid using hacks like that because you never know how future browsers will react to it.

haha yes I know, was a quick reply from my phone so I couldn't go into much detail. Also I had an error, it's *display: inline;, not *display: block;

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.