I want to position my webpage so that on zooming in or out, the webpage diminishes or increases in size from the center. For example while zooming in or out this website, the layout moves towards the center and away from it. I hope you understand
I think that you are talking about margin:0px auto;
All you have to do is add this to the body in CSS :-
body{
margin:0px auto;
}
Go to this link for further details :-
http://bluerobot.com/web/css/center1.html
I hope this helps...
.yourContainerClass{ margin:0 auto; width:1000px;}
Related
I've a problem with my layout. It seems like a horizontal scroll appears on the screen and I don't want that. I already tried to find the problem but I can't see it.
You can see the whole code in codepen.
click to open codepen
.header{
background:rgb(230, 94, 94);
width:8vw;
height:100%;
position: fixed;
left:0px;
bottom:0px;
}
Maybe the problem is the above code, but I recommend you that enter to codepen link to see all CSS and html.
You should change the view to editor view.
I hope somebody can find the problem because I can't see it, by the wa, I'm new in HTML & CSS that means maybe it's a fool problem.
Thanks and good luck!
If you reduce that viewport width set on your div main-content a little you might get what you want.
example set width to 99vw;
.main-content{
width:100vw;
background:white;
padding-left:8vw;
width:99vw;
}
codepen here
I'm trying to figure out how to make my homepage similar to my business card, seen here without the text: http://katiehambor.com/images/businesscardexample.png
I want the webpage to have this cropped circle to mimic my business card, and at almost any browser size the background image (diagonal stripes) will still be seen on the left and right.
Basically the top and bottom of the circle should be cropped and the left and right should be exposed so that the background image is shown (not shown on this codepen). I want it to be responsive so if someone makes their browser smaller, the circle will still be centered. I also do not want to be able to see the bottom of the circle, since right now if you scroll down you can see the bottom edge.
There will not be a lot of text in the circle, so there's no need to worry that all the text will fit inside.
I also want this site to be responsive so that for horizontal screens it will look like this, but on vertical screens the whole circle will probably be shown. I don't need to figure this out though because I know how to see the full circle, as my problem is with cropping the circle, but it's just something to keep in mind.
Also there will be a text div within the circle—right now it just says 'text' and I made it transparent for reference. I know this might need more divs to accomplish, but I don't really know where to go from here.
Please let me know if there's anything I can clear up about my question—sorry if it seems confusing!
Edit: Below is my first try, but it has been changed so it can now be seen here.
/*original on: http://codepen.io/mezzotessitura/pen/kfenK */
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Katie Hambor</title>
<style>
body {
text-align: center;
background-image:url(images/background.jpg);
background-size: auto;
color: black;
}
.box {
background-color:#00a886;
padding:5px;
top:-10%;bottom:0;left:15%;right:15%;
width:55em;
height:55em;
position:absolute;
border-radius:50%;
}
.textbox {
height:auto;
margin:5em;
position:absolute;
top:0;bottom:0;left:0;right:0;
background-color:#fff;
opacity:.25;
}
</style>
</head>
<body>
<div class="box">
<div class="textbox">
<p>text</p>
</div>
</div>
</body>
</html>
try background-size:cover on the body. but I would make it cross browser friendly.
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
This should work better for you. http://codepen.io/anon/pen/utkbF
Using css to create the circle:
.box{
border-radius: 50%;
background-color:#00a886;
margin: auto;
}
I received an answer on Reddit here.
Uses vw to accomplish the responsive aspect. And transform for centering it (from this css-tricks article). I used position: absolute instead of fixed, but both do the same job in this case because div.box is positioned relative to the body.
I am building out a page. I noticed that when I resize the browser to see how it looks in a smaller window, the horizontal scroll bar doesn't show up.
This is the only css code I have for the body:
body {
font-family:Helvetica, Arial, sans-serif;
margin:0;
background-image:url(img/paper-footerbg.png);
background-attachment:scroll;
background-repeat:repeat-x repeat-y;
}
Here is a link to the page I am building out, http://taghomecaremarketing.com/test/theadamgroup/
Any help is appreciated. Thanks.
In your css for container div's, remove overflow: hidden
#headerBox, #mainBox, #subBox, #footerBox
Surely, you will encounter some other problems, but that's the answer ...
Or add overflow:auto. or overflow:auto!important;
If that does work and brings up a scroll on the x and y axis. Then best to try overflow-x:auto;
Good luck!
You've set it to overflow: hidden! This hides the content. Change it to overflow: auto, or better still, delete it!
you can see my jsFiddle here http://jsfiddle.net/fcZQV/ where I posted the HTML and CSS of my page. You can see the result also in http://fiddle.jshell.net/fcZQV/show/ for better viewing example.
The #sidebar and #feed must come close and all of the page in the center of screen.
How can I do this? I tried margin:0 auto; but nothing...
Thank you for your help.
You should also set the width of the page. Then it will center inside that width.
margin: 0 auto; width: 980px;
I want to place a PNG with some transparency (a white column) over a tiled background on a webpage. It should stretch/tile out vertically (not horizontally) over the whole page. I'm just using CSS and HTML. I'm guessing my understanding of DIV's and CSS is lacking, for which I apologize.
Here's what I have, as a result of a lot of fiddling:
body {
background-image:url(bin/back.png);
background-position:left bottom;
}
#second-background {
position:absolute;
height:100%;
top:0;
margin: auto;
background-image: url(bin/column.png);
background-repeat: repeat-y ;
}
It's being displayed but I can't get it centered and on top of that it displaces the rest of my content. I've read through how-to-recreate-silverbacks-parallax-effect on thinkvitamin, but I can't get it to work myself.
Here's a link to a demo where you can see it in action.
I believe that you need to set a fixed width on #second-background. Otherwise, with no content in it, it has no width.
Edit: I'm sorry, I didn't read your question thoroughly. Let me check out the demo and investigate further.
Edit 2: Ok, if you want the white column image over the whole page and centered, then you'll need to set #second-background to width: 100%; and background-position: center top;. This will also allow #inner-body to center correctly.
Let me know if this isn't what you were going for.
I'm making a few assumptions here, but I think it'll work out:
Firstly, add this to near the top of your CSS:
html, body {
margin:0; padding:0; border:0
}
On #second-background, add width: 100%.
On #second background, either add background-position: center top, or scrap all of your background- properties and replace them with this: background: url(bin/column.png) repeat-y center top.
Tested in Firefox, with Firebug.
If you would like me to explain why these changes work, just ask.