My website will not center no matter what I do to it. I have tried
margin: auto 0;
I have tried
margin-left: 50%;
margin-right: 50%;
and the most success I have had is getting the entire website aligned to the right, which is not quite what I was shooting for.
Here's the CSS that controls the alignment of the site, as well as other details. If you could hep me I'd greatly appreciate it.
#Content {
width: 1200px;
height: 850px;
padding: 5px;
margin-left: 50%;
margin-right: 50%;
background-color: #006600;
font-size: 12px;
font-color: #000;
text-align: center;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
}
Andrew is right, it should be:
margin:0 auto;
This is expressing margins in shorthand format. When only 2 values are given, it is interpreted as:
margin: (top and bottom value), (left and right value);
So
margin: 1px 2px;
means
margin-top: 1px;
margin-bottom: 1px;
margin-left: 2px;
margin-right: 2px;
More info here
margin:auto; works fine. here check the demo.
Fiddle
Full Screen Demo
just replace
margin-left: 50%;
margin-right: 50%;
with
margin:auto;
Full CSS
#Content {
background-color: #006600;
margin:auto;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-color: #000;
width: 1200px;
height: 850px;
}
Related
As the title says, I'm having issues with the hover action. Not sure what's causing it.
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header li a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
I'm working on my first website for my portfolio. I've done all the markup for the first page and I've started styling it, but I'm stuck on the navigation bar. It's only the hover action that isn't working as I want it to. I'm trying to make it so that there's a rounded box behind it in a darker shade than the navigation bar, but the hover effect moves the text to the right a little bit. I read somewhere that it could be padding but I'm not entirely sure.
Appreciate any help, I'm new to all this.
Alex
The tag in the default state doesn't have the same values of padding and font-size of when it's on hover.
Try correct your code like this:
header a{
color: white;
text-decoration: none;
font-size: 21px;
padding: 8px;
height: 5px;
}
Seems you are using header a for simple action and header li a for hovering kindly try to replace your code with the following, If there is any question feel free to ask, if it solves your problem , then vote up to acknowledge our combine effort.
Thank You.
Best Wishes,
body {
font-family: -apple-system-system-ui,BlinkMacSystemFont, "Gurmukhi MN Regular";
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
}
/* Global */
.container{
width: 80%;
margin: auto;
overflow: hidden;
}
/* Header */
header{
background: #3e3e3e;
color: white;
padding-top: 15px;
min-height: 50px;
}
header a{
color: white;
text-decoration: none;
font-size: 21.73px;
}
header a:hover{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
header ul{
margin: 0;
padding: 0;
}
header li{
display: inline;
padding: 0 140px 0 140px;
margin-left: 40px;
margin-right: 40px;
text-align: center;
}
header .current a{
font-size: 21px;
font-weight: bold;
border-radius: 12px;
background-color: #2d2d2d;
padding: 8px;
height: 5px;
}
input#submit {
position: relative;
background: transparent;
bordeR: none;
font-family: raleway;
text-transform: uppercase;
border: 1px solid #1ba39c;
margin-left: auto;
font-size: 13px;
display: block;
color: #1ba39c;
letter-spacing: 1px;
top: -5px;
left: -1px;
padding: 7px;
padding-top: 8px;
}
As you can see on chrome mobile the text inside of input with the value post comment gets moved upwards whereas on chrome desktop it perfectly centered. What must be the issue?
I'm not 100% clear what you're asking, but see if the following CSS change achieves what you are looking for:
textarea#comment {
background: transparent;
height: 28px;
}
I think this is # line 1663 of http://tenfizz.com/wp-content/themes/tenfizz/style.css
Good luck!
i'm trying to have the height auto adjust based on the content that's in the div.. i realize to do this, I shouldn't have a height: xpx;.
my popover is:
.popover {
position: absolute;
top: 0;
left: 0;
height: 120px;
z-index: 1010;
display: none;
max-width: 276px;
text-align: left;
white-space: normal;
background: #fff;
padding: 10px;
font-size: 12px;
}
what's currently in the div of that popover is:
span.details{
display: block;
font-family: Georgia,serif;
margin: 0 0 15px 0;
color: #888;
}
span.status{
display: block;
margin-bottom: 10px;
margin-top: -7px;
}
span.status strong{
font-size:x-small;
vertical-align:top;
}
span.date{
display: inline-block;
float: right;
font-style: italic;
font-weight: bold;
font-size: 11px;
}
span.url{
display: inline-block;
font-style: italic;
font-size: 12px;
font-family: "Arial Black", Gadget, sans-serif;
margin-right: 5px;
}
what it looks like without the height: 120px;
http://sc-cdn.scaleengine.net/i/2952f44fb396097037f8f5eaeabc52cd.png
what it looks like with the height: 120px;
http://sc-cdn.scaleengine.net/i/614d383b7cba18a7f7a9bc017f53b9c4.png
any ideas here guys? i just want it to adjust to whatever is in the box!
.popover {
display:block;height:100%
}
try this
Text within a button is breaking up in two lines in Safari - but not in Chrome and Firefox, see the screenshots. Using the CSS property break-word: keep-all; doesn't seem to work.
Any suggestions how to solve this?
not good:
good:
CSS code:
.button {
font-size: 1.5em;
padding: 0em 0.6em 0.1em 0.6em;
margin-left: 0%;
margin-right: 0%;
margin-bottom: 24px;
width: auto;
text-decoration:none;
display: inline-block;
border: none;
border-radius: 1em;
background-color: #4ca8da;
background-repeat: no-repeat;
font-family: 'Populaire';
font-weight: normal;
font-style: normal;
color: white;
text-align: left; }
white-space: nowrap; should fix it.
Further information.
You can visit the site I am trying to work on here.
I am trying to get basically the layout as in the top right box in the bottom right box, but for some reason I cannot get it to float to the right. Is there something I am missing here? It's driving me nuts because my code works in the upper box but not in the lower one.
Here's the HTML.
<div id="menu-ad">
<div>
<p class="titles">Our Fare</p>
<p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p>
VIEW MENU
</div>
</div><!--end menu ad-->
<div id="hours">
<div>
</div>
</div><!--end hours-->
</div><!--end container-->
And the CSS.
/*menu ad*/
div#menu-ad {
position: relative;
margin-right: -11px;
margin-top: -11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10px;
border-left: 2px solid #b9aea3;
border-bottom: 2px solid #b9aea3;
overflow: hidden;
}
div#menu-ad div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 200px;
display: inline-block;
}
.titles {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 2.5rem;
color: #d6832e;
}
#ad {
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.6rem;
line-height: 1.35;
color: #4f4d4b;
margin-top: .5rem;
width: auto;
}
a#button {
padding: .6rem 1.3rem .6rem 1.3rem;
font-family: "Montserrat", "Helvetica", sans-serif;
font-size: 1.8rem;
color: #fff;
background: #d6832e;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: absolute;
float: left;
bottom: 3.5rem;
}
/*hours*/
div#hours {
position: relative;
margin-right: -11px;
margin-top: 11px;
width: 268px;
height: auto;
float: right;
padding: 11px 11px 10px 10p;
border-left: 2px solid #b9aea3;
}
div#hours div {
background: #f9f4df;
padding: 1.9rem 4rem 2.5rem 2.5rem;
height: 150px;
display: inline-block;
}
Thanks for any help! It's probably something simple and I just need a fresh pair of eyes.
you seem to have a typo,
under the style rule for
div#hours
you have
padding: 11px 11px 10px 10p;
your missing an 'x' at the end. Which means the padding rule is not being applied
Now this solves the alignment, but the height might not be right now, but I'm sure that should be straight forward