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?
Related
My CSS positioning skills have always been truly terrible. I'm looking to place my nav bar next to my logo, as well as making it move with the page and not get all screwy on anything smaller than a maximized window on a 1080p screen.
What it currently looks like: http://5.9.78.201/abellant/
It will likely look odd if you're on a different screen size.
I've (so far) used methods found on here, to no avail, using relative, absolute, and even clearing before giving up on it.
Can anyone show me where I'm screwing this up? I'm quite embarrassed by the fact that of all things, my positioning is just so bad.
Thank you.
If you want to position your logo and navbar at the center of the page::
Set #header "display:inline-block", "height:auto" and "text-align: center;" and remove all the css you have added to #logo and #navigation
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
text-align: center;
}
And if you want to set your logo and navigation side by side::
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
}
#logo {
float: left;
width: 50%;
}
#navigation {
float: right;
margin: 40px;
}
If you want to move your header section with page scroll. Set #header to "position:fixed".
So part of the problem is that you have a fixed left and right margin. Remove the fixed left and right margin for #logo and #navigation and do something like the following in your CSS:
#header {
margin: 0 auto; /* 0 px on top and bottom, auto on left and right => centered for a block element */
width: 960px; /* You need a width that will accomodate the logo and nav */
}
To make this work at other sizes, you'll need to look into CSS3 breakpoints. Here is a tutorial:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en
I solve your problem.
.container {
min-width: 500px;
position: relative;
text-align: center;
}
#logo {
display: inline-block;
vertical-align: middle;
}
#navigation {
display: inline-block;
}
If you noticed that the logo and the menu are NOT perfectly center it's because your image has a small white space, if you could delete that space and replace the new image it will be PERFECTLY center :)
I want to know if you can let your site always be at the same size so when you view the site on a bigger screen, it just adds more space/background to the page.
(I don't want media queries so that the style changes when the screen gets bigger)
Using CSS you can center your main div (wrapper).
#wrapper {
width: 500px;
margin: 0 auto;
background: green;
}
body {
margin: 0px;
font-family: Arial;
}
#wrapper {
width: auto; /* You can set the width here, but if you want to make the page smaller on smaller devices you use 'auto' here. */
max-width: 500px; /* Set the maximum width of the webpage. */
margin: 0 auto; /* Center the wrapper */
background: green;
color: white;
}
<body>
<div id="wrapper">
<h1>Welcome to your webpage.</h1>
<h2>Site content goes here.</h2>
</div>
</body>
I want to get rid of all padding around the main page elemnts on the front page of my FRC team's website www.powerhawks.org because I am re-writing the page. I have a separate page where I am developing the new content that page is here. If I remove all padding from the page element that includes the top menu so I have used inspect element to find that this code affects the element I want to remove padding for.
/* base : layout
/* ------------------------------------ */
#wrapper { min-width: 1024px; height: 100%; }
.container { padding: 0 20px; }
.container-inner { max-width: 1380px; min-width: 1380px; width: 100%; margin: 0 auto; }
.main { background-color: #fff!important; position: relative; }
.main-inner { position: relative; min-height: 600px; /* instead of sticky footer */ }
.content { width: 100%; position: relative; }
.pad { padding: 0px 30px 20px; }
This is for the entire website though. The only way I know how to make this affect the front page is if I were to edit the div but I need access to the full HTML file for that which I do not know how to find.
Your body has unique classes for each page. For example, using page-id-442 for sponsorship.
Trying putting .page-id-442 in front of your CSS selector:
.page-id-442 .container { padding: 0 20px; }
//sorry for the bad formating, i am on my phone...
When someone asks how to center a page, then the response is like:
margin-left:50%;
left:(-1/2 width);
I used this code on a site with a width of 1000px,so it comes to screens, where this site does not fit.
Now the site gets centered on the smaller screen and gets equaly pushet to left and right.
So lets say, our screen is 600px wide:
200px are left
600px are on screen
200px are right
You can scroll to the right, but the pixels on the left are unreachable...
How can i solve this to control, how much of my site gets dragged to the left in case of smaller screens?
This is especially important for mobile phones...
If you are worried about different screen sizes then I highly suggest using Media Queries but this is also a useful way of setting up centered elements. Just use a % width instead of a set width and followed by margin: 0 auto;
Look at fiddle for visual aid. (If this answer does not suit your needs at all then I'll gladly remove it)
div {
margin: 0 auto;
width: 80%;
height: 500px;
background: mediumSeaGreen;
}
JSFIDDLE
Your best bet (Ignore the CSS it's from my portfolio.
.subMenu {
display: none;
float: none;
width: 100%;
background: rgba(254, 126, 1, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
font-size: 20px;
padding-left: 60%;
position: relative;
left: 0;
top: 3.85em;
list-style-type: none;
padding: 1.5em 0;
margin: 0;
overflow: hidden;
}
#media only screen and (max-width: 680px) {
.subMenu {
top: 4.9em;
font-size: 10px;
min-height: 100% !important;
padding: 0;
background: rgba(0, 0, 0, 0.5);
}
}
You can also use jQuery to dynamically find the width.
var width = $('div').width();
$('div').text(width);
You could try using margin: auto
http://jsfiddle.net/56N9w/
As you see there if you make the window too small for the content to fit it will left align by default
Use this:
margin: 0 auto;
width: 400px;
alternative:
margin: 0 auto;
width: 50%;
another alternative:
#outer-div {
margin: 0 auto;
width: 50%;
}
#inner div {
/* insert any CSS you want here */
}
NOTE 1: When using margin: 0 auto, you need to define the width otherwise it won't center.
NOTE 2: You should really put it inside another box, or make the page width 100% (or a width larger than the box).
NOTE 3: You can't center vertically with margin: auto auto. This simply won't work. See below for the solution to this:
Centered box both horizontally and vertically:
Working in jsbin:
http://jsbin.com/OSUViFi/1/
The code (same as the jsbin above):
page.html
<div id="outer-container">
<div id="inner-container">
<div id="centered-box">
</div>
</div>
</div>
style.css
#outer-container {
width: 100%;
height: 100%;
display: table;
position:absolute;
overflow: hidden;
}
#inner-container {
display: table-cell;
vertical-align: middle;
}
#centered-box {
margin: 0 auto;
height: 400px;
width: 400px;
background: #000;
}
Specific for your needs (not including vertical alignment which it looks like you don't need):
jsbin example:
http://jsbin.com/axEZOTo/2
The code (same as the jsbin above):
page.html
<div id="container">
<div id="centered-box">
</div>
</div>
style.css
#container {
width: 1000px;
margin: 0 auto;
height: 100%;
background: #999;
}
#centered-box {
max-width: 70%;
min-width: 200px;
height: 500px;
margin: 0 auto;
background: #000;
}
Here, the smallest it can go is 200px, this number you can change to the smallest amount that you want to allow your box to have.
NOTE:
I finally figured out what you were trying to say in your question, which was poorly worded.
You only used 600px as an example, but you really just want to have it be a fluid layout that changes with screen size.
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.