Please see this page:
http://artezanatostudio.com/index.php
Notice that at the bottom there is a margin below the footer bottom line. Thus far, all my efforts to get rid of it have failed. I have attempted to use:
body, html { margin: 0; padding: 0; }
#footer { margin: 0; padding: 0; }
I even tried:
#footer { margin: -50px; }
All to no avail.
While the page has many CSS files, the two important ones that I am editing to try to remove the bottom space are the following
site_above/includes/templates/zenn/css/style.css
and
site_above/includes/templates/zenn/css/style-ci.css
If you can provide any clues to assist me it would prevent me from going bold prematurely and you will have the satisfaction that you helped someone who was going mad.
Thanks in advance.
#footer > div.row {
margin-bottom: 0px;
}
The style sheet the issue is coming from is style-ci.css and the speciifc rule is on the .row div.
Remove:
div.row{
margin-bottom: 26px;
}
and make it margin-bottom: 0px;
Note: this is really easy to figure out using Chrome dev tools!!
Try this:
div.row {
font-family: MuseoSans-Reg, Verdana, Geneva, sans-serif;
color: #7f7f7f;
margin-bottom: 0px;
}
They key here is that margin-bottom was changed to 0px.
Do you use a browser with a decent web inspector? I was able to pinpoint it in under 10 seconds using the Chrome web developer console.
Inside your footer there is a div with class row. It has a margin-bottom with 26px. Remove this value and your issue is fixed.
div.row {
font-family: MuseoSans-Reg, Verdana, Geneva, sans-serif;
color: #7f7f7f;
}
You could also set it to zero but if it's not necessary I suggest you to remove it.
Please remove margin-bottom: 26px; from Style-ci.css (line no: 86)
ie change your div.row css as follows
div.row {
font-family: MuseoSans-Reg, Verdana, Geneva, sans-serif;
color: #7f7f7f;
}
On your <div class="row"> inside your <div id="footer"> remove that margin-bottom: 26px;
You are able to see this very easily by yourself.
If you are using Mozilla Firefox/Chrome:
Right click on the element that you have issue with
Select the last option - Inspect element (or something similar to it)
Start hovering over the elements in the code that popped up to see what makes the additional space appear there!
As you go trough the relevant css styles that appear on right side, you will soon find out where is some additional margin.
Which is in this case as everyone already mentioned in the element div.row:
div.row {
font-family: MuseoSans-Reg,Verdana,Geneva,sans-serif;
color: #7F7F7F;
margin-bottom: 26px;
}
Hope it helped a little!
Of course there could be a better solution, but for the moment you could try:
#footer {
overflow: hidden;
}
Related
My website is www.rosstheexplorer.com.
I am using the Penscratch theme although have modified many aspects of it.
I recently made a number of changes including making my header and navigation bar full width.
One of the unintended consequences of these changes is now my widget-area is no longer sitting side by side with my content-area.
I used the Developer Tools on Google Chrome and started trying to alter the width, padding and margin of both elements. Nothing I tried resulted in anything close to what I wanted. I would do more experimentation but I have very little idea as to where to begin.
In style.css do I have to made a modification to
.site-content .widget-area {
margin-top: 27px;
padding-top: 24px;
border-top: 3px solid #eee;
}
or
.widget {
line-height: 2.09231em;
position: relative;
overflow: hidden;
width: 100%;
margin: 0 0 27px;
padding: 0 0 27px;
border-bottom: 1px solid #eee;
See if this code works for you:
#primary.content-area {float: left;width: 70%;}
#primary.content-area .site-main{width:100%;}
.widget-area{float:right;width:30%;}
Inspecting your site, what i understand is, it is an issue related to float.
try applying
float:left
for your ".widget-area"
My website is www.rosstheexplorer.com.
I am using the Penscratch theme although have modified many aspects of it.
I recently made a number of changes including making my header and navigation bar full width.
One of the unintended consequences of these changes is now there is a lot of space between the navigation menu and primary and secondary areas.
I used the Developer Tools on Google Chrome and started trying to alter the width, padding and margin of a variety of elements on the page.
The below code was the closest I got to solving the problem. The below only works though if the browser window is certain dimensions. If the browser window is to small then the below code forces the content-area and widget-area to overlap the navigation menu and header.
Is there a way I can modify the below code so it works regardless of the browser window size.
.widget-area {
float: right;
width: 30%;
margin-top: -350px;
}
#primary.content-area {
float: left;
width: 70%;
margin-top: -350px;
}
Or is there another completely different solution?
Change the below css
style.css:1932 #screen and (min-width: 75em)
.site {
max-width: 1153px;
margin: 400px auto; // change this to margin: 5px auto;
padding: 54px 108px;
}
:43 #screen and (min-width: 75em)
.site {
max-width: 1153px;
margin-top: -50px auto; //remove this minus is not recommended
padding: 54px 108px; // change this to padding: 0px 108px 54px 108px;
}
kindly change the above margin and padding
It's much simpler than that:
http://www.rosstheexplorer.com/?custom-css=cedea99283
Line 45: margin-top only accepts 1 property, you specified 2 (50px auto). Just remove the "auto"
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.
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
I'm trying to make a clickable button by treating a hyperlink with CSS and adding a little icon next to it. Everything but one detail works great; namely the icons which are slightly offset from the text on the button. It looks as follows:
As you may see, the white icons (12x12px) on the buttons are slightly higher than the text, touching the CSS borders of the hyperlink, while the rest of the text does not.
I have tried every solution that came to mind, including applying vertical-align to the image elements (which put the icon too close to the LOWER border instead, reversing the situation), but sadly could not get it to just line up with the text in the middle of the element nicely. What should I do?
Code in question:
HTML example of a button:
<td class="headerlinks">
<img src="{T_THEME_PATH}/images/icon_mini_login.png" alt="*" /> {L_LOGIN_LOGOUT}
</td>
CSS of the buttons:
.headerlinks {
margin: 0px 0px;
font-size: 1.1em;
line-height: 200%;
}
.headerlinks a img {
}
.headerlinks a {
white-space: nowrap;
border: 1px solid #FAE000;
padding: 1px 4px 2px 4px;
border-radius: 4px;
margin: 0px;
background-color: #000;
vertical-align: middle;
}
Are you using a CSS reset? You can try the following one.
http://meyerweb.com/eric/tools/css/reset/
Also it's better to use a background-image for the icon, and set a position on it.
This should work if you add margin-top:2px; to the icon class. This number may need to be shifted by a digit or two.
This will work if you maintain the static font-size.