Reducing the space equally when resizing browser window - javascript

When resizing the browser window the browser just reduces the space after the element. I want to decrease the space equally on the left and right as it is done in Facebook.
Here is my code
CSS:
body{
margin-left:10%;
margin-right:10%;
}
HTML:
<body>
Some content
.
.
.
.
</body>
First I thought of giving a min-width to body. But computers having less screen size will be a problem. Also min-width will not be good solution.

Just give width 80% to your body and give margin-left and margin-right to auto for center aligning
body{
margin:0 auto;
width:80%;
}
suggestion:
To give styles to body is not a good practice, give styles to top parent div in your page
like this,
<body>
<div class="container">
all page elements.....
</div>
</body>
CSS:
container{
margin:0 auto;
width:80%;
}

Have you considered media queries?
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
here's a demo:
http://playground.johanbrook.com/css/mediaquerydebug.html
and another good article: http://css-tricks.com/css-media-queries/

What's the problem with
width: 50em;
max-width: 95%;
margin: 0 auto;
as it is suggested so many times on the web to display a centered wrapper, that shrinks and expands with the browser window and equal spaces left and right…

Related

Div Not Showing Up for Unknown Reason

I have a div with a simple width, height, background color, and margin:0 auto yet it won't show up and I can't figure out why. In Dreamweaver, it actually shows up just fine, but not in browsers. This is becoming problematic because I need it to center other content (the only reason I gave it a colored background and didn't put anything inside was to troubleshoot). The page with the problem is here. My code is below
HTML
<div id="7steps"></div>
CSS
#7steps {
width:1100px;
margin:0 auto;
height:1000px;
background-color:#960;
}
It has to be some sort of conflicting code that I'm not seeing.
An ID can't start with a number, and height and width doesn't really apply without a position
<div id="steps7"></div>
and
#steps7 {
width:1100px;
margin:0 auto;
height:1000px;
background-color:#960;
position: relative;
}
FIDDLE

I created a slideshow using jQuery and the slideshow stays in the middle of the screen when I scroll down

http://magician.sdf-eu.org/zee/Click%20This%20One%20To%20View%20What%20I%20Have%20So%20Far.html
Thanks a lot for your help, stack overflow.
CSS is here
http://magician.sdf-eu.org/zee/css/showcss.css
jQuery source code is included in the page.
This is because your ".center" class has position of fixed. Try switching it to absolute:
.center{
//other styles
position: absolute;
}
change the position:fixed to position:absolute at your .center class
.center
{
position:absolute;
left:50%;
margin-left:-490px;
}
Note :at fixed position the element is positioned relative to the browser.
or instead you can use this
.center{
width: 980px;
margin: 0px auto;
}
a bit less code :)
badAdviceGuy is right, it's because your position is fixed. This tells the item to stay on this part of this page no matter what the scroll value is.
However, you shouldn't even need to set an absolute or fixed position here.
A nice fix for you would be to remove all of the styles you currently have set on your center tag.
Then style it like this:
.center{
width: 980px;
margin: 0 auto;
}
We use 980px, because this is the width of your images/image container and most likely always will be, at least on this project.
And margin: 0 auto, basically tells your center container to add 0px on the top and bottom margins, but set the left and right margins to the same px amount so that the element is centered within it's container.

How to centre and scale up/down image within a resizing DIV

I have a DIV that is changing size depending on the browser window. I have an image inside of it which in effect will essentially fill up the entire browser window, and I need it to resize without stretching out of proportion when the window gets too wide or too long.
Additionally I need to have the image centred so you see the 'sweet spot' of the image when it becomes too big for the browser window.
I've been searching for ages and trying many different things but I can't work it out for the life of me. Perhaps it could be solved with Javascript or jQuery?
This is the CSS I have so far of the DIV id and the IMAGE class:
#VisitUsSlides {
height:100%;
width:100%;
position:absolute;
top:0px;
left: 0px;
}
.resizingImage {
width:100%;
min-width:100px;
min-height:100%;
position:fixed;
top:0;
left:0;
}
It's scaling up and down but starts to 'squash' horizontally when the window gets to thin, and it isn't centering.
Give it a try
<html>
<head>
<style type="text/css">
div
{
width:100%;
height:100%;
background-image:url('sample.jpg');
background-repeat:no-repeat;
background-attachment:fixed;//**Edit: Add this and check**
background-size:cover; //Edit2: Add this and check
background-position:center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Hope this solves your problem.
assuming the div have an id named
imageholder
#imageholder{width:500px;height:500px;position:relative;}
#imageholder>img{width:90%;height:90%;position:absolute;z-index:10;top:5%;left:5%;}
hope that helps
also while re-sizing the div. set the image max-height and max-width to its original dimension.
img {
margin : 0 auto;
display:block;
}
give it a try.
position your div as you want.
Try this JavaScript:
http://jsfiddle.net/Teak/6yxcG/
I'm not sure it's what your looking for but it could be expanded/edited, to be better. I'm not completely certain about what it is your after.
Edit: Try this full page version: http://www.teaksoftware.com/html/
There's a CSS3 property but i'm not sure about the support it has.
.resizingImage {
height: 100%;
width: 100%;
object-fit: contain; /*OR*/
object-fit: fill; /*there's also an object-position property*/
}
This prevents the image from being stretched.
Given that it's only ONE line of CSS you can try it out.

Image doesn't grow in width to equal parent div's width

I have a really simple page, with a div. Inside that div is an image that sits at the top of the div some text that sits below the image.
My Problem: The image is supposed to have a width equal to the divs width, ie, the image is supposed to stretch to the width of the div. But what happens is that the image stretches only about 80% of the width of the div, so theres a gap on the right side of the image.
How can I make the image stretch all the way to the right so its width is the same as the divs width? I think you can see my problem in JSFiddle(complete with uploaded images): http://jsfiddle.net/ajEmm/ but I also encourage you to show the HTML in IE, the image is a link so it will show.
NOTE: This problem only occurs in IE, in firefox the image correctly stretches to the width of the div
<html>
<head>
<style type="text/css">
<!--
body { background-color: RGB(218,238,248); }
.content { padding-top: 2%; margin: 10px; margin-top: 0; width: 58%;
max-width: 58%; float: left; color: #454545; }
#announcement { margin: 5%; margin-top: 0%; margin-bottom: 5%; border-color: #99CCFF;
border-width:thin; border-style:solid; border-right-width:thick;
border-top-width:0px; border-bottom-width:thick; background-color: #FFFFFF; }
-->
</style>
</head>
<body>
<div class="content">
<div id="announcement">
<img class="anncHeading" src="http://i54.tinypic.com/qs1lsg.png" width="100%" height="60%" alt="1"/>
<p><b>Announcements</b></p>
<p>Planning on hosting an indoor/outdoor event? We have large, modern educational facilities & surounding gardens available for hire & lease at an economical rate.</p>
</div>
</div>
</body>
</html>
Woah, woah woah.
PLEASE write it in a structured, easy-to-digest format. It will help you out in the long run as you learn code (whether it's css, php, js, etc...)
Your code is formatted poorly. I updated your fiddle: http://jsfiddle.net/ajEmm/3/ (plugged everything in the HTML box so you can just copy and paste it into your page file)
Because some users have massive screen resolutions, width: 58%; could be incredibly large. Using a percentage-based width like that is good practice, but usually reserved for site containers and core elements. When using images in fluid layouts, special precautions must be taken (to avoid warping, etc). In your specific case, the image you have IS NOT IDEAL for the code you have. I would suggest one of two things:
Set the container width at 450px, which is the width of your image; or,
Rewrite the way your page works, and use a really long header image without text. If you would like to do this, I'm available to help you. Let me know and I'll make a fiddle and write instructions for ya. :)

How to make my page load centered using CSS, HTML or really basic javascript

Hello Ive made a page which has an image of width 1300px as its widest point. I'm trying to make something which makes the page load with the centre of the page (where text etc. resides) in the middle of the browser. Is there a simple way of doing this?
Add this to the outer wrapper CSS:
width: <text width>px;
margin: 0px auto;
And make the image a centered background of the body:
background: url(image.png) top center;
in CSS, do this:
body: {
text-align: center
}
#main {
text-align: left
margin: 0 auto;
}
The text-align center is for old IE6, whereas margin works for newer browsers. #main is your main div that is to be centered.
if you want to display some block elements (with fixed width) centered you need to use this rule:
margin:0 auto;
if inside an element you want to center some text, just set:
text-align:center;
if you want to center an absolute element (fixed widh aswell, i.e. 1300px) you need to be more tricky this way:
margin-left:-650px;
left:50%;
Body{margin: 0px;}
.wrapperDiv{Margin: 0 auto;}

Categories

Resources