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.
Related
this might be a really stupid question, but I recently started getting into web development again as a hobby, and I am trying to create a simple website to remember what I knew.
Unfortunately, I ran into a roadblock: I want a navigation bar that spans 100% of the page, but no matter what I try, there are still tiny margins to each side, like this:
The website
Right now, the relevant CSS looks like this:
body {
background-color: beige;
}
.navbar {
background-color: black;
overflow: hidden;
margin: 0 0 1em 0;
float: left;
width: 100%;
display: inline-block;
}
.navbar a {
background-color: #dddddd;
color: black;
float: left;
font-size: 24px;
padding: 16px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #777777;
color: white;
}
.navbar a.active {
background-color: coral;
color: white;
}
Andrew provided a nice answer for you but to not run into this kind of problem again I suggest always adding this to your main .css file.
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
Otherwise just add this to the html and body elements.
The gaps are most probably from your parent body element. Add the following to your CSS to remove those gaps:
body {
background-color: beige;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
I am new to HTML and CSS so I am doing a online course, I don't understand what went wrong here and I cannot find it in my course.
My footer is smaller then it used to, it was as big as my header and I want it as big as my header. When I added all the .post code, it went wrong. When I edit my .post max-width my footer width is also adjusted. Please help me :)
.container {
max-width: 1000px;
margin: 0 auto;
}
#footer {
background-color: #2f2f2f;
padding: 50px 0;
}
.column {
min-width: 300px;
display: inline-block;
vertical-align: top;
}
#footer h4 {
color: white;
text-transform: uppercase;
letter-spacing: 0.1em
}
#footer p {
color: white;
.post {
max-width: 1000px;
margin: 0 auto;
padding: 60px 0;
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
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.
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
}