I'm trying to create something like yahoo.com where the content is in the middle and on the outskirts there's a grey margin (or at least something looking like a margin, not sure if it's padding). I was successful, however when the page is resized by the user I want this margin to decrease just like it is on yahoo.com but its not decreasing (go to www.yahoo.com and resize the page and their margin decreases). Anyone knows how to get this margin to decrease?
body
{
font-family: "Lucida Grande", "Lucida Sans";
background-color: #525252;
text-align: center;
margin-left: 150px;
margin-right: 150px;
margin-top: 0px;
margin-bottom: 0px;
min-width: 650px;
min-height: 685px;
color: #00008B;
}
table
{
margin:0;
padding: 0px 2px;
border-spacing: 0; /* remove the spacing between the borders. */
width: 950px;
height: 685px;
background-color: #C1CDC1;
}
The trick is to create a container div of fixed width within your body tag for the content and set the margin to auto.
body {
text-align: center;
}
div#container {
width: 960px;
text-align: left;
margin: 0 auto
}
May I also recommend firebug or something alike as a useful tool to inspect, among other this, css and html of websites?
Change your body style to:
body {
font-family: "Lucida Grande", "Lucida Sans";
background-color: #525252;
text-align: center;
margin: 0px auto 0px auto;
width: 650px;
min-height: 685px;
color: #00008B;
}
Related
I'm having a problem that absolutely triggers my OCD to no end and it NEEDS to be fixed.
I'm trying to adjust the .post_author/.post_content divs to be the same height as their parent div, in this case .post
At the moment there is a big ugly space if the post isn't long enough which is as I've said, ugly.
Post that's long enough:
Div structure:
<div class="post classic">
<div class="post_author"></div>
<div class="post_content">
<div class="post_head></div>
<div class="post_body></div>
</div>
</div>
Relevant CSS:
.post {
overflow: hidden;
}
.post.classic {
padding-top: 0;
min-height: 380px;
}
.post .post_author {
padding: 5px;
overflow: hidden;
color: #a1a1a1;
font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
}
.post.classic .post_author {
height: 100%;
width: 15%;
float: left;
padding: 15px 2% 15px 3%;
margin-top
font-family: 'Roboto', 'Open Sans', Helvetica, Arial, sans-serif;
font-size: 13px;
font-style: normal;
border-radius: 0;
/*box-shadow: 1px 0 0 #000;*/
}
.post.classic .post_content {
float: right;
width: 78%;
}
.post_content {
min-height: 321px;
background-color: rgba(255,255,255,0.04);
padding: 9px 10px 5px 0;
box-shadow: inset 1px 0 0 #000;
}
For the life of me I can't figure out how to fix this. I've tried setting the display to table, flex, inline-block, dug up many other similar stackoverflow posts but nothing's worked so far.
Just going on this info, I can only give you limited advice. I assume you're not able to reproduce this into a demo on jsFiddle because the 2 pics look like there's a lot more HTML/CSS than what you've posted. Now that I've cleared that up, I'll just concentrate on making 2 divs fit into another div at max height.
CSS
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; }
.post_content, .post_author { min-height: 380px; height: 100vh; overflow: none; }
See my answer on this post, it seems to be similar.
Try setting min-height of post-content to be 100% of the viewport
min-height: 100vh
Hope this helps.
I have been 75% successful by looking at this post: How Do I Make a CSS Button Clickable
But still if the cursor comes in on the left the button is not clickable.
HTML
<span class="buy">Buy Tickets Now</span>
CSS
.buy {
float: left;
position: relative;
display: block;
width: 200px;
height: 27px;
text-align: center;
margin-left: -70px;
margin-top: 30px;
font-family: Calibri,Helvetica, sans serif;
font-size: 22px;
font-weight: 700;
color: #ffffff;
background-color: #39b54a;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 15px;
}
.buy:hover {
background-color: #8dc63f;
}
Could someone help with what I got wrong?
http://christianfordlive.com
The problem is generated by the div mainImage and the left margin. The div mainPage is in front of your button, that's why you can't click on it.
You have two easy options to fix the bug:
1 - Remove the margin-left of your button
margin-left: 0px;
If you do it, the div mainImage will stop overlapping your span.
You can also modify the z-index of your button to force it to go to the front of the mainImage div. For example, just add it to your .buy class:
z-index: 1000;
Both options should fix your problem
First of all, your code is kind of a mess, and you are overruling properties inside the same rule. All you need is:
html:
<a class="buy" href="http://www.christianfordlive.com/buy-tickets/">Buy Tickets Now</a>
css:
.buy {
float: left;
position: relative;
font-family: Calibri,Helvetica, sans serif;
font-size: 22px;
font-weight: 700;
color: #fff;
text-align: center;
text-decoration: none;
border-radius: 15px;
background-color: #39b54a;
padding: 15px 40px;
margin-top: 30px;
z-index: 100;
}
I am trying to center two spans horizontally in a 150px div. I thought the simplest way of doing this world be to set the line-height of each of the spans to 150px, but for some reason, the text is not being centered when I try this method.
Here is my code:
HTML:
<div class="top">
<img src="/wp-content/themes/shipping/images/TV.png" />
<span class="cantstop">CAN'T STOP</span> <span class="shipping">Shipping</span>
</div>
CSS:
.top {
height: 150px;
padding: 10px 0;
}
.top img {
max-height: 100px;
padding: 0 10px;
}
.cantstop {
font-family: 'Lato', sans-serif;
font-weight: 300;
line-height: 150px;
font-size: 45px;
margin: auto 0;
text-shadow: 2px 2px 0px rgba(129,93,150,0.5);
}
.shipping {
font-family: 'Grand Hotel', cursive;
font-weight: normal;
font-size: 75px;
line-height: 150px;
margin: auto 0;
text-shadow: 4px 4px 0px rgba(217,144,178,1);
}
You can see the issue in action at cantstopshipping.com
Thank you for your time.
Add
.top img {
float:left;
}
.top span {
float:left;
}
and change
.cantstop,
.shipping {
line-height:130px;
}
The top container is actually 130px not 150px due to the padding on the top and bottom.
Hope my answer makes sense, let me know if it doesn't.
To align it vertically,
DEMO
Use vertical-align:middle
.top span {
vertical-align:middle
}
To align it horizontally,
DEMO*
Use .top { text-align:center }
I have a HTML like this:
<div id="footer">
<p> Copyright 2013 </p>
</div>
And a CSS like this:
#footer {
clear: both;
position: relative;
width: 980px;
font-size: 0.85em;
text-align: center;
margin: 0 auto;
padding: 20px 0 0 0;
border-top: 1px solid #E9E6D9;
}
I want my text in <p> to have Arial font but I would not like to add the font in the #footer but to make Arial font generic to all texts in the site (which do not have a specific font assigned).
How could I achieve that? I tried adding a * { font-family:arial; } but it did not help...
----------------- UPDATE
Here is what I have:
body {
font-size: 11px;
font-family: Arial,Helvetica,Verdana,Sans-serif;
color: black;
font-weight: normal;
}
#footer {
clear: both;
position: relative;
width:980px;
font-size: 0.85em;
text-align: center;
margin: 0 auto;
padding: 20px 0 0 0;
border-top: 1px solid #E9E6D9;
}
But the footer still comes out without inheriting the body's styles... :(
Apply that rule to the body
body {
font-family: arial;
}
Then any other element can override that:
.someClass {
font-family: verdana;
}
you have a style tag in your css which is invalid.
Removing it resolves the font issue, among others.
jsfiddle
You can declare the font on the body, with something like that.
body {
font: 16px/18px Arial, sans-serif;
}
You will set up, the size, line-height, and font for all font of the site.
I'm using this code to center/position a fixed width image as my background. I need to add color around the image that fills the margins in the browser window. I've tried background color, border color...
So, the width of the image is 1050px. If the browser window is 1500px I want to make the remaining area black (for instance). How can I do this?
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url(file:///X|/CarFingers/tabback1_hor.png);
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
}
<div id="content">
<body>
</body>
</div>
First: put the div INSIDE your body. Then you can just edit your body background like this:
body{
background-color: black;
}
Your HTML is invalid, you should not have a div tag enclosing the body tag. If you put the div within the body you should be able to simply set the background color of the body.
If you are wanting to know how to color a border in CSS it would be
border: 10x solid #000;
or
border-width: 10px;
border-color: #000;
border-style: solid;
#content {
text-align: left;
width: 1050px;
height: 825px;
margin: 0 auto;
padding: 0px;
background-image: url('file:///X|/CarFingers/tabback1_hor.png');
background-repeat: no-repeat;
}
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #333333;
text-align: center;
background-color: #000; /* Add this to your code */
}
In your html you should do something like this:
<body>
<div id="content">
</div>
</body>
You should never enclose the BODY in DIV