Good afternoon,
I am looking to do two things: 1) increase the padding above my menu. 2) center my menu on the page.
Unfortunately I am a beginner and don't know the code required to perform these functions. Any help would be greatly appreciated.
Screenshot:
https://flic.kr/p/omS63R
Webpage:http://visualicreative.com/employee-of-the-month-videos/
Here are the additional pieces of code that I currently use on this template:
#thumbnails .controls { display: none !important; }
.page-template-template-fullsize-php #main {
max-width: none !important;
}
#primary { box-shadow: none; border: 0 none; }
.page-template-template-fullsize-php #main { margin-top: 0; }
.page-template-template-fullsize-php #header { margin-bottom: 0; }
#welcomeTeaser { text-transform: none !important; }
.page-template-template-fullsize-php #content .entry-header {
display:none;
}
.page-template-template-fullsize-php #content {
padding: 0px 30px 30px 30px;
}
#main {padding-top:50px !important;
}
Very much appreciated!
Looks like your #mega-main-menu > .menu_holder needs more padding, try this for CSS:
#mega_main_menu > .menu_holder {
padding-top: 20px;
}
As far as centering your menu, you need to change the .not-fixed #site-title, .not-fixed #navigation:
.not-fixed #site-title, .not-fixed #navigation {
margin: 0 auto;
max-width: 900px;
}
Set max-width to anything you like.
Related
What is the way to make the left (large) margin as small as right?
I know about CSS resets, but still cannot figure out the actual working way.
<body>
<div id="quote">Foo</div>
<p>Foo</p>
</body>
<style>
body { padding-left: 10%; background-color: rgb(255,205,205); }
#quote { margin-left: -10%; padding-left: 10%; background-color: rgb(205,255,205); }
/* I can use `calc` as a value, but I understand that it is not
the clever way */
/* #quote { margin-left: calc(-10% - 16px); } */
</style>
The problem:
The behaviour I would like to implement:
Here:
body { background-color: rgb(255,205,205); }
p { padding-left: 10%; }
#quote { background-color: rgb(205,255,205); }
Give a width to your div and set margin to auto
jsfiddle
body { margin 0;background-color: rgb(255,205,205);}
#quote { margin:auto; width:95%; background-color: rgb(205,255,205); }
Is this is what you want ?
body {background-color: rgb(255,205,205); }
#quote {margin: 0 1%; padding: 0 10%; background-color: rgb(205,255,205); }
p {margin: 0 1%; padding: 0 13%;}
<div id="quote">Foo</div>
<p>Foo</p>
body {
background-color: rgb(255,205,205);
}
#quote {
margin: 0 auto;
width:90%
background-color: rgb(205,255,205);
padding-left:10%;
}
p{
margin-left:14%;
}
For Fiddle
Add this to your style:
p {margin-left:16px;}
First of all remove default margin and padding which browser taking.
like:
* {
margin: 0;
padding: 0;
}
Then,
Change css like following. There is not need of negative margin.
body {
background-color: rgb(255, 205, 205);
padding: 0 1%;
}
#quote {
background-color: rgb(205, 255, 205);
padding-left: 10%;
}
Working Fiddle
Hello I was trying to edit the css of the twitter timeline widget, I was trying to edit the padding of the .tweet part, I want to use width 100% but make the tweets appear centered, so I made something like
#twitter-widget-0.tweet {
padding: 12px 12px 10px 69px !important;
}
but didn´t work.
The jsfiddle is http://jsfiddle.net/pscxjeem/8/
Thanks in advance.
Try this.
html,body {
width: 100%;
height: 100%;
padding:0;
margin:0;
}
.tw-align-center {
padding: 0;
margin: 0;
}
.timeline, #twitter-widget-0, .tw-align-center {
width: 100% !important;
}
#twitter-widget-0.tweet {
padding: 12px 12px 10px 69px !important;
}
I would like to shrink the space between my header image and blog content, specifically directly above the date/title entry on my most recent posts. How can I do this?
The site is: http://www.studywithstyleblog.com
And below is some of the code:
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
and
.date-header span {
background-color: $(date.header.background.color);
font-size: 12px;
color: $(date.header.color);
padding: $(date.header.padding);
margin: $(date.header.margin);
}
.main-inner {
padding-top: $(main.padding.top);
padding-bottom: $(main.padding.bottom);
}
.main-inner .column-center-inner {
padding: 0 $(main.padding);
}
.main-inner .column-center-inner .section {
margin: 0 $(main.section.margin);
}
.post {
margin: 0 0 $(post.margin.bottom) 0;
}
Thanks in advance!
In your .main-inner class there is a padding-top:35px says Firebug. If you manipulate this value you can minimize the gap to whatever distance you want.
Add this to your CSS
.region-inner.main-inner{
padding-top: 0px;
}
Or set it to a small value of your choice. But this is the CSS property you need to manipulate.
I got some problems with layouting in CSS. Here is the code I am talking about: Fiddle.
The <div id="header"> should have the height of the <div id="menubuttons"> which I marked red.
I always thought that if you don't state the height of a div it will get the height of it's children.
The <div class="contentLine> is stuck to the <div id="theme"> although I defined margin-top: 20px;.
The right column always has greater margin than the left column. I want both to have the same margin to the browser window.
CSS
body {
margin: 0 auto;
padding: 0;
font-family:'Share', cursive;
}
#header {
width: 100%;
vertical-align: middle;
}
#header_logo {
width:;
float: left;
margin: 11px 20px 20px 20px;
background-color:;
}
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: inline-block;
background-color: red;
}
#menubuttons ul {
list-style-type: none;
margin:0;
padding:0;
}
#menubuttons li {
float: left;
margin-right: 20px;
}
a {
font-family:'Share', cursive;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:active {
text-decoration:underline;
}
#theme {
width: 100%;
height: 400px;
background-color: green;
margin-top: 0;
float: left;
}
.contentLine {
margin: 0 auto;
margin-top: 20px;
width: 96%;
}
.contentLine .column {
float: left;
margin: 0;
width: 30%;
margin-right: 1%;
padding: 1%;
position: inherit;
/* shadow for seeing div boundaries */
box-shadow: 0 0 1px black inset;
}
.contentLine #last {
margin-right: 0;
}
Let me go 1 by 1
1) Your <div id="header"> contains floated elements, you need to clear that, so use overflow: hidden; on parent element i.e #header
2) Again, you've floated #theme but you've set it to width: 100%; so you don't need float there.
3) About the last you need to set the margins accordingly, right now it's 1% so you need to calculate this correctly, I would like to suggest you to use box-sizing: border-box; and set 33% width for each element and than apply padding-right
Demo
Also make sure you clear your floating elements which are nested inside contentLine.
If you are not one of those IE fans, than you can use the snippet below, which will self clear the parent element in a better way.
.clear:after { /* Much much better than overflow: hidden; */
content: "";
display: table;
clear: both;
}
Update your html
</ul>
<!--Menu ends here -->
</div>
<!--menubuttons ends here -->
<!--Add following div to your code -->
<div class="clear"></div>
</div>
<div id="theme">
Update your CSS
.clear{
clear:both;
}
This should help.
- will be reusable also.
I have created a css sprite image for multiple images. The css for sprite is:
.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}
Now I want to assign the first image from this sprite to an li element. Currently the first images is assigned using background:url property of this li as:
li{margin-top:0;padding:3px 0 3px 25px;background:url(../images/arrow.gif)
How can bring the first image from sprite and assign to the li element. I have seen an example which suggests to use:
<div class="sprites" id="image_5306605314403955_gif"></div>
But I want to see if adding HTML can be avoided and use CSS only for that purpose. The li element on my page looks like:
<li>ABC</li>
I am not sure if that is what you are looking for or not, but the below code should do it:
HTML:
<li class="sprites"><a id="image_5306605314403955_gif" href="http://www.xyz.com">ABC</a></li>
<li class="sprites"><a id="#image_9167572062810537_gif" href="http://www.xyz.com">ABC</a></li>
CSS:
.sprites {background-image:url("/images/max.png");background-color:transparent;background-repeat:no-repeat;}
#image_5306605314403955_gif {height:10px;width:10px;background-position:0 0;}
#image_2814089791124994_gif {height:8px;width:8px;background-position:-10px 0;}
#image_05699283026450497_gif {height:36px;width:50px;background-position:-18px 0;}
#image_23591702358881883_gif {height:9px;width:11px;background-position:-68px 0;}
#image_9167572062810537_gif {height:10px;width:10px;background-position:-79px 0;}
#image_21043553959746242_gif {height:16px;width:16px;background-position:-89px 0;}
If what you are looking for is not to use class or id, then I think it is impossible, as your CSS needs an identifier to differentiate between your items (which are inherited from the same class <li>)
body {
overflow-y: scroll
}
.mini_iframe,
.serverfbml_iframe {
overflow-y: visible
}
.auto_resize_iframe {
height: auto;
overflow: hidden
}
.pipe {
color: gray;
padding: 0 3px
}
#content {
margin: 0;
outline: none;
padding: 0;
width: auto
}
.profile #content,
.home #content,
.search #content {
min-height: 600px
}
.UIStandardFrame_Container {
margin: 0 auto;
padding-top: 20px;
width: 960px
}
.UIStandardFrame_Content {
float: left;
margin: 0;
padding: 0;
width: 760px
}
.UIStandardFrame_SidebarAds {
float: right;
margin: 0;
padding: 0;
width: 200px;
word-wrap: break-word
}
.UIFullPage_Container {
margin: 0 auto;
padding: 20px 12px 0;
width: 940px
}
.empty_message {
background: #f5f6f7;
font-size: 13px;
line-height: 17px;
padding: 20px 20px 50px;
text-align: center
}
.see_all {
text-align: right
}
.standard_status_element {
visibility: hidden
}
.standard_status_element.async_saving {
visibility: visible
}
img.tracking_pixel {
height: 1px;
position: absolute;
visibility: hidden;
width: 1px
}