Bear with me as I try to describe my problem.
I have auto-aligned the content of a web page so that it appears in the center using the following code:
/* Universal Rules -------------------------------------------------- */
body {
margin: 0;
padding: 0;
background: #fff;
color: #333;
/* font sizing in ems, baby. if you want to change anything, just change this.*/
font: 75%/1.5 Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.ahem, hr { display: none !important; }
img { border: none; }
form { margin: 0; }
.floatleft, .alignleft { float: left; margin: 0 1em 1em 0; }
.floatright, .alignright { float: right; margin: 0 0 1em 1em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.clearboth { clear: both; }
All of my content is also wrapped in a div called "page" that has the following parameters:
#page {
width: 960px;
margin: 0 auto;
}
I don't understand why then, when you open up the page in a browser window that is clearly wider then the 960px width of the content, does the scroll bar on the bottom appear (as if there is more content to be seen on the edges).
Here is the website so you can play with it and see what I'm talking about. I hope my question is clear. Please don't hesitate for clarification. I'm hoping to solve this without changing my code too much.
Thanks
In your table, you set a min-width of 180px for the 'contact'. To make room, the page gets pushed to the right. Remove that if you can to fix this.
btw, you put a div inside the h2 element. This is not allowed and is invalid.
Alternatively, you can add the css overflow: hidden ; to the first table inside the div with id header.
What is happening is that the "Contact" table cell is wider than the table and is expanding the width of the page.
Related
I have a problem that I just can't wrap my head around, it might be because that I'm tired. I'm using Ryan's Fait sticky footer which I'm sure the most of you are familiar with. I use it regularly and never had any problems with it until now. The design that I'm working has a footer with several inner child elements.
One of the elements .newsletter is using padding or margins to make a wide gap so that a background image can be placed on the body. This is causing a overflow even when entering the correct height. Deleting the padding corrects the problem. I know that using overflow: hidden is an option but I'd rather find out the cause.
Screenshot with margins or padding set within the news letter element:
Screen without margins or padding set in the news letters:
Not working CSS:
body {
background: #212121;
color: #ddd;
padding: 0;
margin: 0;
font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1;
position: relative;
cursor: default;
height: 100%;
}
.maincontainer {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -424px;
width: 100%;
}
.mainfooter, .push {
height: 424px;
width: 100%;
}
.newsletter {
padding: 1.875rem 0 1.875rem;
}
.newsletter-fix {
background: #000;
padding: 3rem 0 1rem;
color: #ddd;
}
Working CSS:
Simply changing the following values from those mentioned above to the following resolves the issue but I want the padding, or margin gap between the newsletter.
.maincontainer {
margin: 0 auto -394px;
}
.mainfooter, .push {
height: 394px;
}
.newsletter {
padding: 0;
}
What if you put background-color : black to your .mainfooter instead of putting the background-color to the different element inside your footer?
It would seem that I'm extremely tried and stupid! I thank everyone for taking the time to take a look but it seems its as simple as a user error.
The problem was because I was counting from the very first bit of colour, in this case background: #000 on the .newsletterfix and not taking into consideration of the invisible padding above it. Stupid, me.
Example:
My page is set at 100% width, so that my navigation bar goes across the entire screen. However, the page contents as well as the links in the nav bar are only 1000px wide and centered.
How can I add 10px on each side of the 1000px page so that when viewed in an iPhone, the text is not all the way to the edge of the screen?
ie.
html, body {
width: 100%;
}
.nav-bar {
background-color: #000;
}
.nav-bar-links {
margin: 0 auto;
width: 1000px;
}
page {
margin: 0 auto;
width: 1000px;
}
You can use the padding property like this:
.page {
padding-left: 10px;
padding-right: 10px;
}
page {
...
padding: 0 10px;
box-sizing: border-box; /* keeps it at 1000px wide *with* padding */
}
It's not clear whether you'd actually like the space outside the page element. In that case, use padding on the body.
Side note: Did you mean .page?
I'm making a fixed width (120px) website for old feature phones that don't respond to media queries. The width of the body won't change even when I've defined it as 120px. When I open the website on the phone, it shows a huge horizontal scroll bar showing me a lot of blank space on the right which I'm assuming is the body. In the screen shot attached, I've set background color of body to red so you can see the problem (I also had to blackout the content for client privacy).
I'm using the following code:
html {
width:120x;
margin-left:0px;
}
body{
width:120px;
font-family: arial;
font: arial;
margin-left: 0px;
max-width:120px;
}
I think you've a typo here:
html {
width:120x;
margin-left:0px;
}
The width should be 120px
Remove the typo:
html {
width: 120px;
margin-left: 0px;
}
I think you have to use un child to wrap your content with a max-width.
and tags don't allow to do what you want.
HTML
<div class="wrapper">
Your content goes here
</div>
CSS
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
box-sizing: border-box;
position: relative;
padding: 20px;
width: 120px;
height: 100%;
font-size: 14px;
background-color: #d63b24;
color: #fff;
}
http://jsfiddle.net/vinzcelavi/1rx7yn57/
Try this
body {
min-width: 1024px;
}
Here's your fiddle: http://jsfiddle.net/enxRw/1/
What would be the easiest way to center align an inline-block element?
Ideally, I don't want to set a width to the elements. This way depending on the text inputted within the elements, the inline-block element will expand to the new width without having to change the width within the CSS. The inline-block elements should be centered on top of one another (not side by side), as well as the text within the element.
See code below or see on jsFiddle.
The current HTML:
<div>
<h2>Hello, John Doe.</h2>
<h2>Welcome and have a wonderful day.</h2>
</div>
The current SCSS:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
body {
margin: 0 auto;
background: rgba(51,51,51,1);
font-family: 'Open Sans', sans-serif;
}
div {
width: 100%;
height: auto;
margin: 15% 0;
text-align: center;
h2 {
margin: 0 auto;
padding: 10px;
text-align: center;
float: left;
clear: left;
display: inline-block;
&:first-child {
color: black;
background: rgba(255,255,255,1);
}
&:last-child {
color: white;
background: rgba(117,80,161,1);
}
}
}
Adding a br between the two elements and taking out the float: left/clear: left may be the easiest way; however, I was curious if there was another way going about this.
Like this? http://jsfiddle.net/bcL023ko/3/
Remove the float:left left and add margin: 0 auto to center the element. Or is it something else that your are looking for?
I'm currently having a problem with a website's footer.
When working on it at 100% size (normal size) the footer is nicely aligned. However, when I resize it it goes totally out of alignment and sits to the left, it needs to stay centred.
Screen shot:
Relevant CSS:
/* Dark blue area above the main part of the footer, stays aligned */
#footerUpper {
clear: left;
width: 100%;
vertical-align: top;
background-color: #252B76;
text-align: center;
color: #FFFFFF;
margin-top: 30px;
/* padding: 5px;*/
}
#footerUpper ul {
padding: 0;
margin: 25px 0px;
list-style: none;
}
#footerUpper li {
display: inline;
padding: 0 52px;
font-size: 14px;
font-weight: bold;
}
#footerUpper li a {
text-decoration: none;
color: #FFFFFF;
}
/* Main part of the footer */
#footer {
float: left;
width: 100%;
color: #252B76;
background-color: #89B0F1;
padding: 5px;
}
/* Table within the footer */
#footerTable {
width: 980px;
margin-left: 150px;
}
Thanks.
Without seeing more of the code, or a working example of it it's difficult to get too much of an idea about what's going wrong.
But I think a solution might be to have a static width on the inner-content, so for example the content that is mis-aligning itself, which I think is your "footerTable" - apply "margin:0 auto" to it to centre align it, this is assuming it's parent is 100% width, which I believe it is. Also, remove any other margin rules that apply to it.
It's because you're floating the footer to the left, and then there's no container of the footer which is centrally aligned. You can either:
Remove float: left and instead do a margin-left: auto; and margin-right: auto;
Make a container for your footer (or preferably your entire layout if it's all to be centrally aligned) and align the container to the center using margin-left: auto; and margin-right: auto;
There are of course other ways to centrally align block elements, but these are the most effective and recommended.
Since you have no reason to be floating the footer (so you say):
Remove the following styles:
float: left;
width: 100%;
Then, to make sure the table is centered, add this style:
text-align:center;
And you should find the footer stretches to the page width, no matter what zoom.