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.
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 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"
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 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
Im a beginner when it comes to building a site. Thats why i choosed to build with Wordpress.
The thing is that i got i responsive theme that should work with any browser.
I upload a logo by going to appearance>Customize>upload logo.
With Crome it looks great:
But with firefox, Iphone safari and IE it looks bad:
http://imagizer.imageshack.us/v2/800x600q90/838/8tl2.png
I've a Childtheme, and the only code i've put in is to get the logo to display a bit more towards the middle:
#import url("../realia/style.css");
.logo-wrapper { position: relative; left: 10%; }
Why is it looking like this, ive tried with .clearfix codes and to change the image height etc.
Have a great day and thank you in advance!
Just remove the height from your,
.logo class
Height is causing issue on Chrome as well, while resizing the window. Image is not able to resize. So, remove the height in px.
Good luck!
I have just checked your theme out, and noticed this class:
#header-wrapper #header #header-inner .navbar .navbar-inner .logo {
float: left;
height: 90px;
line-height: 90px;
margin: 0;
}
Remove the height: 90px and it should look good in all browsers!
Remove float: left from the logo.
e.g:
#header-wrapper #header #header-inner .navbar .navbar-inner .logo {
height: 90px;
line-height: 90px;
margin: 0;
}
I have recently faced this issue when my logo was not showing up properly in internet explorer, try with this code hope this will work.
max-height: 100% !important;
I have a little problem. At the end of my R script I create an image .png as output. I wanna show this image on my website but sometimes it is drawn, sometimes it is not drawn. I don't understand how it is possible. I`ll put my code:
I insert the image in a div with this features:
#diagramm {
position: relative;
border: 2px solid #333;
border-color: #6495ED;
width: 820px;
height: 370px;
margin: 2px auto;
margin-top: 2em;
background-image: url("/home/daniele/public_html/appweb2013/venn_final/fungo_final.png");
}
Where is the mistake? Can I use a better method?
This is CSS, it only puts specific design rules for an element that has the id diagramm.
So what you've posted is not code so to speak.
In what way do you generate the output? When? what does the user do to generate it etc.
Do you have any javascript or html code you can show?