I have few divs on my page, which serve as a containers. Here is a sample CSS code of one of the divs:
header {
background-color: #fff;
height: 153px;
width: 97%;
min-width: 1084.06px;
margin: 15px auto;
position: absolute;
left: 0;
right: 0;
border-radius: 20px;
}
This is a centered container for my header. There are several other containers which I have styled simillar way (absolute, centered and width in %).
Problem is, when I resize the window, all these containers hit the left side of the browser window. I want to save some margin on particular window width. How can I achieve that?
P.S. If I add margin-left it breaks my center position of the div
You can use media queries, media queries are only applied on specific conditions, such as a specific width.
For example the following background-color rule won't apply for screens wider than 480px:
#media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
For more info about media queries see this w3schools page
Add another margin-right
then straighten it out depending on what you use
Related
I am truly stuck with this, basically I am using wordpress, and want a horizontal line to go across the page (breaking out of the inside container). This line should adjust to the screen size, so if you zoom out the line should keep getting longer, basically an infinate line.
So far the what i've managed to do is the following code:
.horizontalrule1 {
position:relative;
height:82px;
background: #f1f2f2;
overflow:hidden;
width:600%;
margin-left: -100%;
}
This technically looks fine but the issue is it's causing a scroller to appear at the bottom of the page because the width is set at 600%
If I set the width to 100% it doesnt make the line full width and stops it at the inside container which is about 990px.
All I want is an infinate line that will adjust itself to the screen size, so if you have a screen width of 1900px the line should be 1900px etc.
Hope this makes sense.
My html is:
<div class="horizontalrule1"></div>
To give everyone a better idea of what i want, check out onlywire.com, they have thick grey horizontal rules that stretch accross the site. This is exactly what I'm looking to do.
You want it to go OUTSIDE the DOM element?
.elementContainingYourHorizontalRule {
overflow: auto; /* or whatever, just don't set it to hidden. */
position: relative;
}
.horizontalrule1 {
position: absolute;
width: 600%;
left: 50%;
margin-left: -300%;
height: 2px; /* or whatever. */
}
I don't know if this is the best way to do things -- if I were you, I'd make your containing element go the full width of the page and let your custom HR do it's own thing automatically. I understand that may not work with your design/layout though.
At any rate, your horizontal rule will never be able to know your page width if you don't give the container the full width as well. So you're stuck with an ugly 600% hardcode until you get your container full-width.
Try this which should force it outside the surrounding container using negative horizontal margins:
hr {
margin: 20px -10000px;
}
And to avoid horizontal scrollbar add this to body:
body {
overflow-x: hidden;
}
If you only want to apply it to specific horizontal rulers, add it as a class.
HTML:
<hr class="full">
In Style Sheet:
hr.full {
margin: 20px -10000px;
}
You should set your body's padding and margin to 0 :
body{
padding: 0;
margin: 0;
}
I am trying to set the width of the .full_height_div element using pure css, based on its height. It has to be width-relative-to-height, and not height-relative-to-width. The reason for this is that the parent container (.set_rectangle_height) is already a div with height relative to the page width. Obviously, as the page is resized the divs on the page will resize, so i cannot set a fixed width in px for the .full_height_div child.
So .rectangle and .set_rectangle_height make up the parent container which has a width as a percentage of the page and a height relative to this width. See here for an explanation for this method.
But the problem is that then I want to place a div inside the parent with height: 100% and width relative to this height. The aim is then that I will be able to alter the browser window size and everything will keep its aspect ratio.
here is my failed attempt:
.rectangle
{
position: relative;
width: 30%;/*the outermost div is always a % of the page
width, even while resizing*/
display:inline-block;
background-color: green;
}
.set_rectangle_height
{
padding-bottom: 30%;/*this sets the height of the outermost div
to a ratio of 1:3*/
position: relative;
float: left;
width: 100%;
height: 100%;
}
.full_height_div/*this is the div that i want to have a width relative
to its height*/
{
height: 100%;
width: 20px;/*i will delete this once .square_set_width is working*/
position: absolute;
background-color: red;
}
.square_set_width
{
display: inline-block;
padding-left: 100%; /*i want to use something like this line to set
the width of this div to be equal to .full_height_div's height - ie a 1:1 aspect
ratio, but padding-left does not work :( */
position: relative;
height: 100%;
background-color: blue;
}
<div class='rectangle'>
<div class='set_rectangle_height'>
<div class='full_height_div'>
<div class='square_set_width'></div>
</div>
</div>
</div>
So, this is what the above incorrect markup looks like:
And this is what i want it to look like:
I know I could find the blue square percentage height in javascript, then set the width to be equal to this height, but it would be really handy if there is a pure css fix for what I am trying to do. I will be using this structure a lot and I don't really want to go writing code to resize all the divs on my page.
you have to use javascript for that. If I understood you, you want a perfect blue square. Use
var height = $('.square_set_width').height();
$('.square_set_width').css('width',height);
here is a jsfiddle: http://jsfiddle.net/a8kxu/
Edit: instead of doing padding-bottom: 30% do height: 70% instead. Here is another fiddle: http://jsfiddle.net/a8kxu/1/
Edit #2: Sorry, but you cant use css to do this. Its not powerful enough
If i understand you correctly
you can do
#divID {
width: 75%;
margin-left: auto; // this is used to center the container
margin-right: auto;// this as well
}
I've created a really simple modal that allows the content to decrease or expand without running off the page - always leaving 10% margin on the top and bottom. When the page isn't tall enough to contain all the modal content, the entire modal becomes scrollable.
See jsfiddle here
Is it possible, using only CSS, to replicate this behavior but only have the modal body be scrollable, so the header is always fixed. I've tried a few things, but haven't come up with the solution yet. Making the header position: fixed almost works, I have to reposition it over the modal box and then try to add padding to the body so the content is visible under the header, which doesn't budge the scrollbars down. I always prefer to exhaust all the css alternatives before I bind some js to window resize and manually manipulate the body height.
This might be late, but I had to solve a similar issue of fixed header, fluid height, fluid width.
This is how I tackled the issue:
Give your elements a border-box box-sizing. Use a wrapper to center and create a bounding box. This can be a fluid one with min-width and max-width + percentages.
Give your content element an overflow-y of auto and a max-height of 100%;
Use box-sizing:border-box;
The complete code should be something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.modal {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.8);
}
.wrap {
position: relative;
margin: 0 auto;
display: block;
width: 90%;
/* Change the max-width value on a media query breakpoint to make this example more "responsive" */
max-width: 500px;
height: 90%;
padding: 30px;
}
.modal header {
height: 30px;
padding: 0;
color: #FFF;
background-color: #007;
}
.modal .body {
background-color: #FFF;
max-height: 100%;
overflow-y: auto;
}
http://jsfiddle.net/mariomc/EhR7r/
Applying the max-height and overflow-y settings to .body rather than to .wrap...?
Edit 1:
Nothing's turned up so far within the constraints, which suggests either JavaScript or straying from the constraints (using % for the header height or px margins).
Edit 2:
Here's an initial demo using % for the header height. I added a px min-height to the header tag to prevent the header from almost disappearing on very small screens, at the expense of the top margin (which is reduced on very small screens).
On a screen >= 400px tall, it should work exactly as per the requirements (40px header with 10% height). If the header were reduced in height, it would support slightly-smaller screens (a 30px header with 10% height would support >= 300px screens). Here's a demo with a 30px header.
It's a clumsy solution, but it's the only one that turned up without using JavaScript.
Also, note that I added an h2 and a .content tag and moved the padding:10px; there, to avoid combining % height and padding in the same elements (which leads to a taller height than the % value specified).
Id like to know why my inner wrap of the desktop css for this site is not working.
Basically if set innerwrap to margin:0 auto; and width: auto; there is no problem, but it's not centered on the footer or main div
When I have innerwrap as it's currently set margin:0 auto; and width:960px; you'll notice that the page presents a horizontal scroll bar after resizing the window a bit, and all the content is squished to the left with a white background starting to become visible.
Is there anyway to have it transition fluidly to the next tablet size layout without have a scroll bar appearing and content getting squished?
It shows Scrollbar because of the padding you apply in .innerwrap
Read this article about the Box Model
Use of padding on the sides of certain elements when applying 100% width to parent element its not recommendable because it adds width to the whole group, and since you,re using the browsers width it shows the scrollber to see the extra space you added.
My humble advice is that if you want a block element to appear centered apply an margin:auto style rule whenever is possible, the same also has to be displayed as a block element with no float.
Remove this:
.innerwrap {
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
width: 80%;
}
Keep This
.innerwrap {
margin: auto;
width: 960px;
}
Since you are applying fixed margins for you social icons they will show misplaced, so don't use fixed margins for centering them, use percentage width instead.
you may want use a common class for aligning them
.social {
background-position: center center;
background-repeat: no-repeat;
display: block !important;
float: none;
height: 150px;
margin: auto;
padding-top: 50px;
width: 30% !important;
}
For a.twittersocial and a.twittersocial:hover and the rest of the social links just keep the background properties.
Create a determined class if you need to apply common style rules to several elements (if there are many of them) and avoid usage of ID selectors whenever is possible, use classes instead (.daclass).
Use a web inspector like Firebug to track down styling errors.
Good luck Developer!
If you will notice when you visit... http://www.thebattleforarcadia.com/construction/index.html when you shrink the size of the screen the top bar content overflows it's parent div and runs over the rest of the website.
What I want to do is, if in-case the resolution of the receiving end is too small, I want to force them to have to use the scrollbar at the bottom so they can see everything. Just so the website is displayed properly.
Any coding ideas?
Thank you,
Aaron
Add...
min-width: 1260px;
at the
#news-container
css rule.
Your website will display fine in 1280x** resolutions but there will be a vertical scrollbar in anything less than that (in width).
Perhaps you could make the min-width 960px and make the text expand in two lines (pushing the top graphic a bit) ? Just a suggestion
EDIT: here's an example
#news-content {
float: left;
padding-left: 25px;
padding-top: 12px;
overflow: auto;
padding-bottom: 20px;
}
#news-container {
width: 100%;
background: url(images/news-background.png) repeat-x left bottom;
z-index: 10;
}
#news-header {
width: 150px;
height: 23px;
float: left;
padding-left: 25px;
}
The above example will make the header "Expand" when the resolution is shrinked without forcing screenwidth < 1280px users to use the vertical scrollbar
Give the body element or any other element that is setting the width you want a min-width to match that. This should make sure that whenever the page is being viewed on a smaller resolution have a horizontal scroll-bar
See here for Commonly used pixel sizes for webpages and their pros/cons.