I am working with the site cardinalmma.com/ but you can see that the menu is not centered. For example see the news menu its in the left portion but with some padding. I want it to be centered can anyone help me.
thanks
Somdeb
You want the individual navbar labels centered, correct?
li.menu-item {
text-align: center;
}
This targets the <li> tags in your menu, identified by the .menu-item class. The text-align: center; rule takes care of centering the <a> tag with your text in it.
In my browser, this modification makes it look like this:
Try something in your css stylesheet to make the menu items be align center.
try something with the class menu and the li part:
.menu {
text-align: center;
}
Or something in that direction
Please update your css. This should resolve your issue.
.menu_top a {
color: #eee;
font-weight: bold;
line-height: 3.4em;
padding: 0 14px;
text-decoration: none;
height: 50px !important;
text-align: center;
display: block;
}
.menu_top ul ul li a {
text-align:left;
}
To center the navbar labels use this css courtesy of Surreal Dreams:
li.menu-item {
text-align: center;
}
Now to elaborate on how to find this solution. The best way to edit/develop CSS for wordpress is to use firebug or Chrome's developer tools to find the element you want to modify.Then you can add CSS right there and see the results real-time (these changes are not permanent). I would say it is likely this is how Surreal Dreams found the solution.
If you want to learn more about using the Chrome dev tools tool go to this page: https://developers.google.com/chrome-developer-tools/.
If you are new to CSS (I dont know if you are new to CSS or if youre problem is strictly editing CSS) for wordpress you should go check out http://www.codecademy.com/tracks/web
Related
I'm currently building a site using WordPress. I'm trying to layout a listview for the products page with CSS but I am experiencing a couple of problems. The code behind these elements are within the WordPress files so I'd rather not touch those if possible.
What I'm trying to do is move "MSDS" next to the title as it was below the title before. I've set it to relative position and moved it using top and right pixel values.
Example 1
Example 2
My first problem is that if you look at Example 1. I have positioned "MSDS" next to that specific title but when you look at Example 2, it has a shorter product name but the positioning of "MSDS" is the same therefore it looks silly. How do I go about fixing this?
My second problem may be fixed if the first is fixed but on a maximised window, the layout looks fine but when resized to a smaller window then the window covers "MSDS" but the title looks fine as it wraps so it's viewable on the page.
I'm not entirely sure where to look or what specific things I should be looking for to find a fix for this. So any help would be much appreciated. The code below is what I used to reposition the "MSDS"
.product-list .product-thumb .description {
position: relative;
bottom: 26px;
left: 290px;
width: 30px;
}
You can always use :after for these things
These should help.
Add these in your stylesheet to
.product-list .product-thumb .description:after {
position: absolute;
content: "MSDS";
color: blue;
}
You can style the element accordingly then
you are looking for position: relative and position: absolute i think.
Try this: https://jsfiddle.net/r5rnyh3y/1/
.title {
display: inline-block;
position: relative;
}
.title a {
position:absolute;
right: -100%;
margin-right: -10px;
display: inline-block;
width: 100%;
}
Hi I've been trying to create a smart button menu set in an drupal block that remembers which button has been clicked (which site it is on). For reasons that don't matter, it is not a menu it's an in-block item. I created the following in-line:
<div>Overview</div>
<div>Instruments</div>
<div>Travel</div>
This coupled with the following css produces lovely buttons:
.button {
background-color: #61210b;
color: white;
float:left;
padding: 2px;
border: 2px solid #000000;
border-radius: 5px;
text-shadow: 1px 1px #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: 'verdana';
margin-bottom: 10px;}
.button:hover {
background-color: green;
color: white;}
.button:focus {
background-color: green;
color: white;}
.button:active {
background-color: green;
color: white;}
So everything above works great. However, the green activation color does NOT stay. As soon as I go click it goes back to what it was before. I want it to 'show' the page it is on with it's color change and only the currently chosen button will have the green color. What I have not works great except for that little issue. I've read around on the site a bit and here are some things that do not work:
--> inline php, creates errors link unreadable, if I define a class as selected with a different color, this does NOT work:
Overview
What also does not work is defining an additional class in the <a href > or <div> to make it 'selected', at best if I use the css file and do
.selected a { color: green; }
#selected a { color: green: }
I can permanently change the color to green, which is not what I want at all. I saw the discussion previously of using lists <li id="selected"> to create menues but not only does this not give me very nice buttons like my div format does, it also flat out does not work. See: CSS: How to change colour of active navigation page menu
The color just changes permanently, I only want it to change color if page=page of link. Since I'm using div this means I also cannot use the other pseudo-class-selector tricks like :target or :root. I have a feeling php is the way to go but I don't know why it can't be read in-line from my drupal box item. It has no problems with html or css in-line. Any ideas?
Try this code
CSS
.button:active, .button.selected {
background-color: green;
color: white;
}
PHP
Overview
what you wrote is calling for something else...
.selected a is targeting any element with the class "selected" which is inside an anchor tag, what you mean is an anchor tag which has the class selected = a.selected
ok, so I heard back from our system administrator and Drupal safety settings do not allow for in-line php or java scripting. There is literally no way to do this with div statements. The only way is to delete everything and make a new block of type menu block. In a menu block the psuedo-class :active will stay active if you use css
li .active
otherwise you can try to get php enabled but most drupal areas do not allow that or java scripting (at least it's not allowed where I am).
Im building my first website and this is first time asking for help. I am unsure of how to position the sidebar widget area of my site in the position I want. Im working on making my the site fully responsive. What I am trying to accomplish is get the sidebar to "hug" the content area so they are always next to each other with a small 20-35px margin in-between them, and as screens get larger I want them to stick together. I came across this website http://uberhavoc.com, I am trying to model my sidebar and content in a similar way. Here is my site: http://peakworthy.com.
my site has the main site content area with two divs, the main content and the sidebar. I tried get the to position how i want using percentage margins, played with clears, clearfixs and everything else. I was wondering if I am approaching this wrong or if the DOM is causing issues with style hierarchy. If you have any ideas I would be greatful. been pulling hair out on this for a couple days now.
You need to place your main content area and your sidebar content inside a container element. Then use media queries to determine a breakpoint for when the sidebar should re-flow.
Below is the basic markup of my suggested approach. The main content and sidebar content are the two siblings of a container element. They are floated left and have a percentage width applied to each. A media query is used to determine when the two columns of content should be side-by-side or stacked.
<main class="cf">
<div class="content">Main Content</div>
<aside class="sidebar">Sidebar</div>
</main>
main {
background-color: #ddd;
min-height: 400px;
}
.content,
.sidebar {
float: left;
width: 100%;
}
.content {
background-color: #ccc;
}
.sidebar {
background-color: #bbb;
}
#media ( min-width: 480px ) {
.content {
width: 70%;
}
.sidebar {
width: 30%;
background-color: #bbb;
}
}
The clearfix and background colors used above are only in place for my demo and can be omitted.
jsFiddle: http://jsfiddle.net/vj9zq0oq/
Re-size the jsFiddle to see the content columns re-order.
I'd try to stay away from float if possible. Try this out instead. The display-block places them side by side and will help with the responsive feature because the sidebar will automatically jump down when space runs out, and text-align:center makes them stay in the middle of the page at larger sizes.
.site-content {
padding-bottom: 4em;
background: #f0f0f0;
text-align: center;
}
.content-area {
display: inline-block;
}
.site-content .widget-area {
width: 380px;
padding: .3em 0 .3em 4em;
background: #ffffff;
display: inline-block;
margin-left: 20px;
vertical-align:top;
}
I want my page's logo and articles to be in the center of the site. At the moment everything is on the left.
I just can't make it work.
For Example I tried to delete the wrapper and set margin-left:auto; margin-right:auto; in the logo's class. nothing works.
And for the posts i just don't know where to start. probably i would have to put everything in a container and make that central? (There should be three posts in a row, at the moment the theme stacks them up to the right screen border if you have a big screen)
Thank you so much.
EDIT: The Text align in the image class did the job. Thank you guys, question answered!
#logobild {
margin-left: auto;
margin-right: auto;
text-align: center;
}
That will do it for you :) Your header takes up 100% of the space, so the content inside has no fixed dimensions to center against. The text-align value assists with that.
Try:
#logobild {
margin-left: auto;
margin-right: auto;
text-align: center;
}
To center the logo you can do the following in CSS:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
The img element is inline by default, which means your margin styles won't be applied to it. When it is set to block level the margin settings will work.
To center the articles I suggest you give a width to the container div like this:
#post-area {
width: 85%;
margin-left: auto;
margin-right: auto;
}
I'm not sure if that's the best way, but it seems to work.
Wondering if anyone has a solution for this.
I would like to present an archive of thumbnail images oldest at the bottom and newest at the top. I would also like the flow itself to be reversed... something like this:
The page should be right aligned, with future images added to the top of the page. I am creating the page dynamically with PHP pulling image filenames from a MySQL DB. The catch here is I would love this layout to be fluid, meaning most PHP tricks for counting images and building the HTML accordingly go out the window.
Is there a way to do this with Javascript or even just CSS?
See: http://jsfiddle.net/thirtydot/pft6p/
This uses float: right to order the divs as required, then transform: scaleY(-1) flips the entire container, and lastly transform: scaleY(-1) again flips each individual image back.
It will work in IE9 and greater and all modern browsers.
CSS:
#container, #container > div {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
#container {
background: #ccc;
overflow: hidden;
}
#container > div {
float: right;
width: 100px;
height: 150px;
border: 1px solid red;
margin: 15px;
font-size: 48px;
line-height: 150px;
text-align: center;
background: #fff;
}
HTML:
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
..
</div>
CSS Flexible Box Module was made for this type of thing. See a quick example I whipped up: http://jsfiddle.net/c6QLC/2/ (look at this in Firefox)
Now the bad news: you can't really rely on it yet. Not only is the spec being rewritten, the current implementation doesn't support box-lines (which I did include in the example), which would allow the items to be in multiple rows as opposed to being overflow.
The new spec is being written into dev versions of some browsers, so it will happen. It's just a matter of time.
In the meantime, perhaps something like Isotope might fit your needs.
Should you want to check out the spec, you can find it here: http://www.w3.org/TR/css3-flexbox/
This can be solved with jquery masonry plugin. It's a bit like isotope but free of charge for private and commercial users.