Help Contering CSS Plz
- Started
- Last post
- 10 Responses
- sem
Hi,
Anyone here handy with CSS? this is REALLY pissing me off now, I brought this theme and the designer has fucked off in terms of support.
The logo I have centres fine, and is responsive when the browser size is changed, but the menu and content menu are not. When resized to a small window they just stick to the middle, I just want everything cenetred nice.
/* CENTER MENU */
#menu {
float:right;
width:1240px;
margin:0 auto;
text-align:center;
}/* CONTENT MENU CENTER */
/***** Filter ****/
ul#filters {
margin: 0px 265px auto;
width: 867px; /* Your filter cats width, should measure and set */
}/* LOGO CENTER */ }
#header .navbar .brand, .navbar .brand {
float:none;
padding:40px 0; /* setting logo bottom top size */
width:477px; /* your original image width, should set */
}
.btn-logo-container { width:477px; /* setting logo area width */ }.nav-toolbar-container {
width: 1240px;
}
- sem0
I said contering haha sorry, clearly stupid today.
- mekk0
you have it somewhere viewable?
- sem0
- monospaced0
so, the menus "stick to the middle," but you want them centered instead?
- kingsteven0
"margin: 0px 265px auto;"
change to:
margin: 0px auto;
and this:
"width: 867px; /* Your filter cats width, should measure and set"your "filter cats" width is more like 650px
- spot130
You're basically over riding the above settings when the browser size changes with the responsive.css style sheet. You need to style each screen size option listed under line 613 of responsive.css starting with this:
http://pastebin.com/mVTfw2wQ- it's horizontally centered text man, he just hadn't defined the container width or auto margins correctly.kingsteven
- of course, i have no idea what he means by "stick to the middle" either.kingsteven
- yeah, tried it with automargins but its not working, will be overwritten as saidmekk
- mekk0
did a little hack, it works, but not a nice way to do it:
add:
.category-list {
padding: 15px 10px;
padding-left: 50%; /* mekks little change */
}replace ul#filters content with:
ul#filters {
float: left;
display: block; /* mekks little change */
width: 100%;
margin-left: -50%; /* mekks little change */
}works here in chrome (mac) didn't test it somewhere else
- or you set the width of your navbar individually for every size setting and then adjust the leftmargin manually as done beforemekk
- sem0
I tried your way Mekk and it just all went a little crazy.
KingSteven, that looks normal and good in Chrome, but in Safari (or when you make the browser small horizontally the logo falls out of place, or the menu slips...either way, they are no longer centered.
Sadly the person wants to see it looking 100% in Safari (cos thats what he uses) even though it looks fine in Chrome.
- sem0
Really I want the whole header area to just NOT be responsive I guess. Want it to stay centered and not really move.
- wordssssss0
why so many wrappers for your nav?
http://d1zjcuqflbd5k.cloudfront.…