I have this stylesheet, but the right and left margins are too large (about 5 cm), I don't know how to reduce them. I'd like to have 3 cm right and left.
I tried to change page_width, but it did't work.
Thanks,
rubik
Okay, well number one your
div.document {
width: {{ page_width }}px;
margin: 0 auto;
}
is set to margin: 0 auto; which makes it centered so your page will be 940px and will be centered (Resizing your page will confirm this). You probably have to change your content width along with the wrapper width, but keep in mind that the amount of padding depends on how large your viewport is.
Alternate
If you just want to make it strictly 3cm on the left and right sides and make the content in the middle have a fluid layout you can do this:
margin: 0 3cm;
position: absolute;
width: auto;
Related
I have a ReactJS/MaterialUI webapp I'm building. I want to add space on the left and right side of my page (to look like any other page, including stack overflow). I don't know if the best practice is to add padding, or a margin. Then on mobile, I wouldn't want the space.
One idea I had was to add blank grid sections on the left and right side with breakpoints where they don't appear on mobile. I'm not sure what's considered the best approach here.
You can use max-width: 1200px and margin: 0px auth; on the element which wraps the entire page to achieve this.
The margin: 0px auto will add 0px margin top and bottom, and center the right and left margin.
<div className="page_wrpr">
.......
</div>
.page_wrpr {
max-width: 1200px;
margin:0px auto;
}
.container{ width: 900px; margin: 0 auto; }
The margin will give your container a top- and bottom-margin of 0. The auto-value that however much horizontal space remains after you've used up 900px, will be evenly split to add the whitespace on each side of the body.
On my website, the center elements are defined by width, 79%, and margin: auto. I like how it looks.
But for some of the pages, the width and the margins are slightly different. The page shifts slightly to the right and is slightly larger. It's clear that the 79% width is calculated differently, and the margin: auto is as well.
I can't tell the difference between the pages, however.
See this page vs this page.
I can’t figure out why. Oddly, zooming in enough can make the difference disappear.
Here's some relevant css code:
#container,
#header,
#access,
#footer-wrap-inner,
.message
{
width: 79%; max-width: 80em;
margin: 0 auto; position: relative;
}
The page does use ems to define some elements, but it doesn't seem relevant.
Input would be much appreciated.
the difference is the scrollbar appearing :) If I make the window so small that both of them have a vertical scrollbar, then no difference can be seen at all
Let's say I want to create an HTML page with one main div that holds all the content.
The div should hold other divs and be fixed in the center of the page like in the image.
How should I specify the width? In a % value or a value in px? What is the best practise?
And what should be the correct value?
Please sorry if this has been covered before....
Image is here:
EDIT
So much nice answers... Thank you all very much
It all depends on the content you will be presenting and what you want to do with it. You may choose to use a fixed width layout if there is no need for the content to expand, or if you want to keep the text/design constrained within the width of the DIV. Though, one thing you may want to consider is using a combination of percentage and fixed width. For example, you may choose for your DIV to be 95% of the page as long as the minimum width is not below 700px and the maximum width is not over 950px. The result of this is a DIV that will expand and contract within your specified constrains.
div#container {
width:95%;
max-width: 950px;
min-width: 700px;
margin: 0 auto 0 auto;
}
In my opinion you should use px
Cause the % will depend on the wide-screen of the user, so images could display bad
I can't see your image but you can do that with two divs using percentages.
HTML:
<div id="outer">
<div id="inner">Your centered div</div>
</div>
CSS:
#outer {
width: 100%;
}
#inner {
width: 50%; // whatever width you want - I can't see your image
margin: 0 auto;
}
To center the div simply put left and right margins to auto on css.
Regarding the % or px, it would REALLY depend on the layout you are willing to code. If your layout was made thinking in a fluid layout, then you should use % but add a max-width so it would not stretch past n px.
For example:
You layout was made for a 1024px screen using 960px grid. But it would be cool to let it stretch a bit for 1280px screen users. So you put width:100%; and after ir, max-width:1280px.
So any user with bigger screen will see the layout for a 1280px.
I will suggest to use body margin:0 and use container div with margin auto, and use pixel for content width and height.
<div class="container">
<!-- HTML Content here -->
</div>
.container{
margin-right: auto;
margin-left: auto;
}
Css float left and right control the flow of the div. if you want to place two divs, right and left, then use
.left-div {
float: left;
width:200px // use pixel to control width
margin-left: 5px;
}
.right-div {
float: right;
width:200px;
margin-right: 5px;
}
First: Holding that main div in center position can be done with margin-left: auto; margin-right: auto;.
Second:
I don't think, that there is a basic best practice, because the usability of variable with depends highly on the content itself.
One usable solution that covers both could be using fixed width depending on the device (desktop, table, phone) using media queries.
Frustrated that I still can't grasp certain CSS concepts but anyway, here's the problem:
I want to center a LINE of TEXT at the bottom of my site (basic index.html splash page). I also want the text to float 10-20 pixels at the footer based on various monitor resolution so that it's always at the bottom.
What options do I need to tick off within the "Positioning" Style Sheet Properties? Relative? Fixed? Absolute?
So far my settings are "Relative" with 600px at the Top, and 200px at the Bottom. But it looks great on a 13" monitor and it goes right in the middle of the page on a 27" monitor, for example.
Just want to center the damn thing at the bottom with a little breathing space before the status bar in a browse - independent of monitor size.
Use position: fixed to stick the footer to the bottom of the window. I've drawn up a quick demo here.
The CSS:
div#footer {
position: fixed;
background: red;
text-align: center;
padding-bottom: 20px;
bottom: 0;
left: 0;
right: 0;
}
The red background can obviously be removed, and the padding-bottom can be changed to your requirements.
The bottom: 0, left: 0 and right: 0 properties force the footer to the bottom of the page, and stretch it all the way across.
To make a a footer that doesn't stretch all the way across, try this JSFiddle out instead. It uses an inner element and automatic left and right margins.
First, I wonder if anyone can even say that question title ten times fast.
This should be pretty easy. I've been googling around, and while there are a lot of tutorials on it, I'm having trouble grasping the idea overall. I've even looked at some other SO questions that seem related but I've not been able to make them work.
I have 3 layers. header, menu, body. The real application is much more complicated, of course. But for the sake of this question this is sufficient enough data.
The entire page itself fills 100% width, but the content within each section will be fixed to 1024px wide. This was easily done with the reknown margin: 0 auto; style. So that wasn't an issue.
Here is the trick. The middle layer, the menu. I want the menu to overlap the border between the header and the content. Now then, doing this was also not too hard. I just absolutely position the menu and kick it down by 100px to get it to the right vertical alignment.
What I cannot seem to achieve is the horizontal alignment of the 1024px block. I've included a light fiddle and an image of the expected output (beware, jsfiddle's default preview pane is not 1024px wide, so it looks like it is working at first glance)
Update
Following the instructions at this post I was able to make it work. But it is only functioning in Chrome.
http://jsfiddle.net/dE8xE/
Desired Output (colors exaggerated for emphasis and distinction)
#site-menu {
background-color: #fff;
height: 64px;
position: absolute;
top: 100px;
display: block;
width: 1024px;
/* everything is easy when you have fixed width */
left: 50%;
margin-left: -512px;
}
Can you use percentage margins and width to achieve the effect you're going for? Setting the z-index to something greater than those of the other sections will get it to float over them. Example: http://jsfiddle.net/6xCfU/
margin: 10% 0 0 10%;
width: 80%;
z-index; 100;