I have a centered webpage and for now I have resized it using media-queries but I don't know how I can achieve something like on stackoverflow itself. Once you decrease the width of the page, it's gettings smaller and smaller and the margin-left is decreasing towards zero; so at one point the page fills the whole window. I use a lot of margin-left: 25% to have the page centered, but this does not work like the design I want. Once I resize the browser window, the pages width gets smaller and it stays centered, while I don't really want the width to get smaller, but rather decreasing the space at the left and right of the page.
This is for example a title I use:
margin-top: 3%;
float:left;
font-size: 350%;
margin-left: 25%;
width:10%;
This is the "middle" of the site which has a white background:
position: absolute;
border-radius: 3px;
top: 0px;
left: 21%;
width: 58%;
min-height: 100%;
background: white;
z-index: -1;
-webkit-box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
box-shadow: 20px 0px 30px 0px rgba(0,0,0,0.5), -20px 0px 30px 0px rgba(0,0,0,0.5);
Sorry, this is probably quite easy, but I somehow really don't get it...
Thanks
I think you need to set your left and right margins to auto. Not 25%.
Like this:
margin-left:auto;
margin-right:auto;
But you have to define a width of your container to which the auto values are applied.
If you take a look at the CSS of the example site you provided in your comment:
#mainbody {
width: 980px; /*this line*/
text-align: center;
vertical-align: top;
padding: 0;
margin: auto; /*this line*/
height: auto;
background: #fff;
}
Related
I have 6 images next to each other in two rows. I used a CSS container to center it (couldn't use padding). However, when I shrink the screen, since the margin is set to auto, the container shrinks opposed to the blank space around the container. You can see this here . The blue is just there to show the container. The images need to stay in that order until it becomes physically impossible for them to stay there. Any help would be appreciated! Thank you in advanced!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Featured Industries</title>
</head>
<style>
.center {
margin: auto;
width: 66%;
height: 625px;
border: 3px solid #0026E3;
padding: 0px;
}
.img {
float: left;
}
a:hover img {
position: relative;
z-index: 1;
transition: -webkit-box-shadow 0.3s ease-in-out;
-webkit-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
box-shadow: 0px 3px 31px -6px rgba(0,0,0,0.75);
}
</style>
You have the container size in %, which means, in this case, it will always be 66% of the document width that matches the window's width. That's why, it shrinks when you change the window size. If you set the container width to double the width of the images, it will not shrink.
So, according to your example, this will work:
.center {
margin: auto;
width: 622px; /* (311 x 2) */
height: 625px;
border: 3px solid #0026E3;
padding: 0px;
}
Now you have to solve another problem when they don't fit in the windows, like in mobile phones for example. Then you can use CSS Media Queries. So now let's add another rule for when there is no space for the 2 images column.
/* This is the default behavior (mobile first) */
.center {
margin: auto;
width: 311px; /* 1 column by default */
height: 625px;
border: 3px solid #0026E3;
padding: 0px;
}
/* Let's now modify the container size when there is space */
/* for 2 image columns */
#media screen and (min-width: 622px) {
.center {
width: 622px; /* 1 column by default */
}
}
Use this class:
.center {
margin: auto;
width: 933px;
height: 625px;
border: 3px solid #0026E3;
padding: 0px;
}
If you set the width to the 66% it will depend on the father width, bit if you just set it to a number of px it will remain the same size
I have been searching since yesterday for a solution but couldn't find one, or couldn't find the right keywords to search with.
So I have a header on my website like this is a header and I centered that nicely and extended the background color of it.
Now I found out how to make a nice interactive/glossy nav bar as a footer but im using it at the top and the thing is I also want to extend it's size, however it just centers itself and doesn't extend. I'll show this in a screenshot and will post my code.
Also: I want my box to be centered, which is contained in a div called #main_inner_area.
Note: Navbar is still called #footer in CSS/HTML code.. I want to extend the sides of my navbar, like the background color of my header is extended to the full width.
my screenshot: i41 DOT tinypic DOT com SLASH 2qk6mmt.png (sorry but its hard to explain without screenie)
HTML:
<div id="main_area">
<header>
<h1>This is a header</h1>
</header>
<div id="footer">long code for layout navbar</div>
<div id="main_inner_area">
<article>d fsdf sdf sdf dsf dsf dsf</article>
</div>
</div>
CSS:
*{
padding: 0px;
margin: 0px;
}
#main_area{
background:#4863A0;
display: block;
text-align: left;
}
header {
height:100px;
background: #4863A0;
color:white;
border:none;
width:700px;
margin: 0 auto;
}
#footer{
width:700px;
top:100px;
margin:0 auto;
padding:0;
left:0;
right:0;
margin: 0 auto;
height: 40px;
border-radius:7px 7px 7px 7px;
font-family:Arial;
text-shadow: 1px 1px 1px black; /*h,v,blur,color */
/* glass effect */
border-bottom: 1px solid rgba(0,0,0,0.3);
background: rgba(0,0,0,0.5);
/*inset = inner shadow ----------- this just creates multiple shadows*/
/*top border, top white section, overlay top white, bottom*/
box-shadow: inset 0px -2px rgba(255,255,255,0.3),
inset 0px -15px 20px rgba(0,0,0,0.2),
inset 0 -10px 20px rgba(255,255,255,0.25),
inset 0 15px 30px rgba(255,255,255,0.3);
}
#main_inner_area{
float: left;
width:735px;
margin:25px 0px 10px 0px;
}
article{
background: rgba(255,255,255, 0.5);
border: 1px solid #4863A0;
margin:0px;
margin-bottom: 10px;
padding: 15px;
font-family: Tahoma;
font-size: 14px;
text-align:left;
display:block;
width:700px;
height:auto;
border-radius: 7px 7px 7px 7px;
}
P.S. I'd REALLY appreciate it. Im an 18 year old student trying to learn some extra things next to my study.
To make your header dynamic just remove the width attribute from it (and from #footer aswell). If you set it to a fixed value of course it cannot scale.
To center your article use margin-left: auto; margin-right: auto;
Update: (stretch Nav Bar)
CSS Changes
#footer {
width: auto;
}
#footer .links {
width: 700px;
margin: 0 auto;
}
HTML Changes:
<div id="footer">
<div class="links">long code for layout navbar</div>
</div>
See http://jsfiddle.net/UKYDb/1/
I'm not sure what you mean by "extend" but you're setting a fixed width and height to everything:
#footer {
width: 700px;
height: 40px;
...
}
Try using percents instead of fixed widths for everything in your CSS code.
width: 100%;
Whenever I put in the HTML for my webpage; the #content div is below the widget/sidebar and I already tried position:absolute- and that causes my images to not re-size.
#content {
background: #fff;
margin: 2px 0 2px;
padding: 20px 62px;
width: 68%;
display: block;
float: left;
margin-left: 25%;
/* rounded corner */
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
/* box shadow */
-moz-box-shadow: 0px 0px 0px 0px #000000;
-webkit-box-shadow: 0px 0px 0px 0px #000000;
box-shadow: 0px 0px 0px 0px #000000;
}
/************************************************************************************
SIDEBAR
*************************************************************************************/
#sidebar {
width: 25%;
float: left;
margin: 2px 0 2px;
}
.widget {
background: #0b2d7e;
margin: 0 0 0px;
padding: 0px 20px;
/* rounded corner */
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
/* box shadow */
-moz-box-shadow: 0px 0px 0px 0px #000000;
-webkit-box-shadow: 0px 0px 0px 0px #000000;
box-shadow: 0px 0px 0px 0px #000000;
}
Same lesson I tried to teach you earlier. You're stuff doesn't add up to 100% because of the paddings. You have 68% + 25% + 25% + more padding = way more than 100%.
If a box is 50% wide and it has a padding of 10px on the left and right, and a 1px border, then you have 50% +20px+2px.
If you have two divs exactly the same as above you have 100% +40px +40px +2px +2px = more than 100%.
Use box-sizing: border-box; to solve your padding and border problem above. Then you just have to take into account the margins.
See the Can I Use It for box-sizing.
Here is a JS Fiddle fixing your code... You also had a stray </aside> that wasn't needed.
http://jsfiddle.net/a2YSa/1/
Note that in the code I provided, box-sizing: border-box; tells the div to calculate its width including padding and borders. Then I have 25% sized left column, and a 50% right content column with a 25% margin = 100%.
Here is a fiddle with 25% sidebar and 75% main with 0 margins.
http://jsfiddle.net/a2YSa/3/
Screenshot of my last fiddle:
Have you tried using firebug to visualize the problem ? I think you should remove your 25% left margin on your #content...
i think the problem is here:
content width: 68%
content margin-left: 25%
sidebar width: 25%
you currently use more then 100%.
if that isn't the problem, please post html code too or check the width AND paddings / margins with Firebug. it's the easiest way.
This is my Portfolio i'm working on
The first time you enter the website the yellow Wakey card is below the sidebar (it should be on the right side of the sidebar.
And after refreshing the website it goes into the right position
What can be causing this?
This is the css of the content div where the card is located
#content
{
width:70%;
position: absolute;
display: inline-block;
}
And this is the sidebars
#sidebar
{
background-color:#4b4b4b;
margin:0px;
margin-left:5%;
width:400px;
height:1000px;
-moz-box-shadow: 0px 0px 25px #000000;
-webkit-box-shadow: 0px 0px 25px #000000;
box-shadow: 0px 0px 25px #000000;
display: inline-block;
}
You can see the html from the website so i won't post it to keep it short
On IE it's displaying properly, it gives me this problem on chrome
UPDATE:
I've changed the #content-wrapper display to display:inline; now, but it didn't help
Why not float your sidebar? and let the #content position itself in the normal document flow.. you might want to set width for #content also..
#sidebar
{
background-color:#4b4b4b;
margin:0px;
margin-left:5%;
width:400px;
height:1000px;
-moz-box-shadow: 0px 0px 25px #000000;
-webkit-box-shadow: 0px 0px 25px #000000;
box-shadow: 0px 0px 25px #000000;
float: left;
}
#content
{
float: left;
}
How to center vertical modal window with such css style:
.inquiry_form_container {
left: 50%;
margin-left: -375px;
width: 750px;
top: 150px;
position: fixed;
z-index: 10001;
background: #fff;
border: 1px solid #cccccc;
display: block;
-webkit-box-shadow: 0 0 10px #cccccc;
-moz-box-shadow: 0 0 10px #cccccc;
-o-box-shadow: 0 0 10px #cccccc;
box-shadow: 0 0 10px #cccccc;
}
it's has a non known height, how to do, that that window will be with same margins from top and bottom?
You may have the right idea using left:50% but I would use 2 DIVs. One inside the other:
The first DIV would have position:relative,left:50% and width:0px.
The second DIV (inside) would have position:absolute, width:200px and left:-100px.
Not sure what to do about the unknown height. How about a pixel height on the second DIV and use overflow-y:scroll?