I want to achieve result as drawn on the image (red square is region, always fixed size, black square is the screen). I have no idea how to do this, unless here is a magical way of getting current size of screen and using conditional statements in CSS. Thanks!!
Here is the img: http://glothriel.org/uploads/layout.png
You can do it with a fixed width div and margin: 0 auto;
div {
width: 500px;
margin: 0 auto;
height: 500px;
background: red;
}
DEMO
Related
I'm currently learning web design and I was solving some sample problems online, there was one specific case when I was asked to:
Write a CSS rule that limits the width of the webpage to only half the size of the browser and centers it in the browser window.
Add a CSS rule, to the rule above , to display a green background color that fills all the browser window including the empty left and right sides.
For 2, I could use this:
body {
background-color: green;
}
But for 1, I couldn't do it. How do I get the size of the browser? It sounds confusing.
Set this CSS to your body-
body{
width:50%;
margin: 0 auto;
background-color: green;
overflow: hidden; //just in case if you don't want your any fixed width element crosses the body width.
}
All you have to do is set width: 50%;
Or if you want to set to maximum of 50%, use max-width: 50%;
To center, set margin-left: auto; and margin-right: auto;
this is very easy just one step you have to take try this
body {
width: 50%;
margin: 0 auto; //optional if you want your page in center
}
I am having trouble understanding why when i am using percentages, i have no appearance on my screen, but when i use pixels i do.
this is my code:
<body>
<div class="container-content"></div>
</body>
body{
width: 100%;
height: 100%;
}
.container-content{
width: 50%;
height: 50%;
margin: 0 auto 0 auto;
background-color: green;
}
if i occupy my div with some content it will not have the affect i want.
if i change the position to absolute or fixed it will have the affect i want (just a box).
if i only change instead of percentages to pixels it will also have the affect i want (just a box).
what am i getting wrong here?
thanks
In cases like these, both the html/body elements need a height of 100%. In doing so, it should work.
Example Here
html, body {
height: 100%;
}
The reason it wasn't working was because the html element had an initial height of 0. Since all the children elements were using percentage based values, 100% of 0 is also 0 - thus nothing was appearing.
I've put the following code in my page:
image {
margin: 0 2px 0 0;
height: 100px;
width: auto !important;
overflow: hidden;
text-align: center;
}
I want to scale all images to max height of 100px, and have the browser to adjust their height accordingly. But the result is that the images are only cropped to 100px height with rest of them hidden.
What should I do to achieve the scaling effect? Many thanks in advance!
use img for image not image to apply styles on in it
img{your style here}
You can achieve your desired effect with the following:
img {
max-height: 100px;
}
You do not need the overflow, text-align, or width properties. You can keep the margin properties, but the code above addresses your question.
I'm trying to build an 'elastic' website in CSS and HTML; I want there to be 6 squares along the width of the screen; I have the width of the squares scaling to the screen size, but I want to keep my squares square. Is there any way I can set the height of my div's to the same size as the div width (which is being set off of a % value).
See DEMO.
Basically, give the element the same value for the width and padding-bottom so that it will stay as a square as you scale the page.
.square {
background-color: red;
width:15%;
height:0px;
padding-bottom:15%;
display: inline-block;
}
Read more about fluid squares here.
Yes, the most common solution is to use a 1px by 1px image and make it full width with a variable height:
Demo: http://jsfiddle.net/57xhg/1/
CSS:
.wrap {
background: red;
margin: 0 auto;
width: 100px;
}
.wrap img {
width: 100%;
height: auto;
}
You can do it by using background-repeat-x and background-repeat-y property by providing the elastic line you want to draw
I'm trying to set the width of the slider to be 750px so that it fits within the Facebook canvas and doesn't bring up the scroll bars.
http://www.facebook.com/pages/GolfffffffSteadyyyyy/213226708784235?sk=app_315085095232861
I can't seem to effect the "element.style" which when I inspect it, it's set to 6032px. How do I control/override the element.style?
Inspecting your link, I've found that the problem is originated by the .container:
UPDATED IT TO THIS CSS
.container {
background: none repeat scroll 0 0 #FFFFFF;
margin: 0 auto;
overflow: hidden;
width: 800px;
}
This solves your issue.
Also, take into consideration that you are setting the .container with width:900px;, and the #contentArea where it is inserted as a width of width: 851px !important;.