Body of page not shrinking at all, CSS, HTML - javascript

Right now I have a body with a width of 90%, and a left and right margin of 5%, and a border of 1px. Here's what I'm trying to do. I'm trying to make it so that when you zoom out all the way using ctr-, it'll shrink until it's a pin-prick in the middle of the page, but right now the body's width isn't shrinking at all when I zoom out all the way. It's staying the same size. Not sure what I did wrong. Please take a look at my code.
body {
width: 90%;
margin-left: 5%;
margin-right: 5%;
border: 1px solid black;
}
P.S: If you're not really understanding what I'm talking about, please either hit ctr-, or ctr and the scroll thing on your mouse until your page's size is around 25%. Do you see how stackoverflow is like a pin-prick smack-dab in the middle? Do you see the width of the entire site being shrunk down to that size? Well, when I do that, the body of my site doesn't shrink at all. It stays the same size.

Change % to px
body {
width: 1000px;
margin-left: 5%;
margin-right: 5%;
border: 1px solid black;
margin:auto;
}

I think this will fix your problem. Though best not using your body element as a wrapper. Use a div with the ID of wrapper like so.
#wrapper {
width: 90%;
margin: 0 auto;
box-sizing: border-box;
border: 1px solid black;
}
<body>
<div id="wrapper">
</div>
</body>
What this code does is sets the width to 90% so auto in margin property to take effect which centers your wrapper in the middle of their screen and uses border-box property so the border 1px width will not effect the layout, though you could use outline: 1px solid black if you do not want to use border-box.

Related

How to animate a border?

I want to create a circling border, as seen in the second state of this object. So the loading icon. How would I do that with JavaScript?
I'm not looking for someone writing out the full code, but would like some direction to what selectors etc to research.
Is quite easy. Basically you start with a circle with a certain width and height, a full border-radius and a transition to it. Then on hover for example, you increase the width of that circle. Doing this will smootly transform that circle into a rectangle. If you dont manage to make it work, i`l create some examples for you.
Take a look at this(hover on the circle)
div {
width: 50px;
height: 50px;
border: 3px solid green;
border-radius: 30px;
margin:0 auto;
transition: .5s;
}
div:hover{
width: 200px;
background-color: green;
}
<div></div>
From here on you can modifiy it to fit your needs.

How to reduce the range space of scrollbar to be different from the div height?

I want to resize the space where the scrollbar moves.
I don't want it to affect how much I can scroll.
Look at the following pictures (my drawings) to better understand what I mean.
I'm using chrome so webkit is viable.
Thanks to all of your answers!
(P.S. I would love to have reduce the image size, yet I don't know how to! My apologies!).
Without nesting another element and play with its height you could simply use a huge border-bottom and place a visible border around the element using the outline property, e.g.
div {
width: 200px;
height: 300px;
outline: 1px #9bc solid;
border-bottom: 50px transparent solid;
}
Codepen demo
Result
You can't change the height of the scrollbar but you can redesign the scrollbar with -webkit-scrollbar like this:
::-webkit-scrollbar {
width: 5px;
height: 10px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: #808080;
}

How to make a fixed div/nav resize with the div it's inside of?

I'm pretty fresh to web development and cannot figure this one out. Appreciate any help!
On re-size the fixed div moves out of the container instead of re-sizing. The site I'm working on has the nav as the fixed section and is inside of the main container.
Any help is appreciated. Thanks!
<div class="container">
<div class="fixed"></div>
</div>
.container {
border: 1px solid;
max-width: 600px;
width: 100%;
min-height: 1600px;
}
.fixed {
max-width: 600px;
width: 100%;
height: 50px;
border: 1px solid green;
position: fixed;
}
http://jsfiddle.net/KqvQr/
When you specify position as fixed the Element, even thought it is inside a parent container, It won't behave as a child of a parent container. It won't adjust his width according to the parent width. But I can give you a solution where when user resize the page the fixed element also get resize yet it is a position fixed
.fixed {
height: 50px;
border: 1px solid green;
position: fixed;
right:0;
left:0;
}
Don't specify widths for the container. instead of that specify left and right values. so then when page is resizing css only check for the left and right margin values. by keeping those values it will adjust its inner width always.
Here is the working fiddle http://jsfiddle.net/KqvQr/5/
I don't think you can achieve what you want if you stick with that constraints. Your width and max-width will work as expected if you change your position to relative instead of fixed..
Check out this Fiddle

How to create trapezoid div with background repeat

I want make a image background like this in a div like the following image.
but I can't find any appropriate css or js properties for this.
Is anyone can help to find out how this possible ?
Looks like CSS 3D Transforms. Here's the webkit way of doing it, tweak the angle and perspective as needed. You'll have to find something equivalent for other browsers, I don't think it's fully standardized yet.
Just apply this CSS to your div with the background image. I tested this with the lovely stackoverflow logo at the top of this page, which is a div with a background image.
Edit: And here, a red border too. Don't know if its part of the image or you need CSS for it as well.
-webkit-transform: perspective(500) rotateY(-60deg);
border: 3px red solid;
It will help you
Transform properties of css
http://www.w3schools.com/cssref/css3_pr_transform.asp
I have found a nice solution and solved the problem with the help of Cubicle Dragon like following-
HTML code
<div id="div1">
<div id="div2">HELLO</div>
</div>
CSS code
#div2 {
background: url("") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #000000;
padding: 50px;
position: absolute;
transform: rotateY(-234deg);
}
#div1 {
border: 1px solid #000000;
height: 150px;
margin: 50px;
padding: 10px;
perspective: 89px;
position: relative;
width: 150px;
}

Set border based on padding from content

As far as I know padding is the space between border and content. I tried using padding but instead of the border shrinking down to the content, the content gets pushed to a new line.
What I want is the content to stay but the border autoscale/auto size to the content. And if possible, if the content is resized (let's say different reso or the browser window gets smaller), the border also follows the content but still keeping the padding value (in my case, 10px)
Been playing around with margin and padding since yesterday, but still no idea how to do it.
Any help will be really appreciated, guys.
td;dr: How to get border to autosize/autoscale to content.
html:
<div id="container">
<div id="eachitem">
</div>
</div>
css:
#container {
margin: 0px 60px 0px;
}
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
}
Container is for position the whole content into postion based on margin.
Each item is for an individual item based on a list. That is where I want the border to autosize/autoscale to, to the items.
Since different content have different length. I want it to scale down to the max content as shown in image below:
Click Demo
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
float:left;
width:250px;
}
Try to use word-wrap property.
#container {
margin: 0px 60px 0px;
}
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
word-wrap: break-word;
}
Here is an example with your code.
After you edit your question, I see you want border to fit the content exactly? Well, try this.
#container {
margin: 0px 60px 0px;
}
#eachitem {
padding: 5px 2px 5px 5px;
border: 5px solid black;
display: inline-block;
word-wrap: break-word;
}
Here is an example.
Resizing padding, margins and border weights based on content size is nasty in any language, due to the unpredictable nature of text. Content length, font weight and sizes, display resolution and window size all affect text in myriad ways. Additionally, most high-level languages like JS cannot compute text dimensions without actually rendering it first. This means you must first display the text, then compute how much space it occupies, then twiddle the surrounding properties. And depending on the APIs available, you might not even be able to predict what values to use. In that case, you have to iterate over multiple values, see what it looks like, and if it is not correct, run through all the steps again. Not a fun endeavour to get into.

Categories

Resources