I've got a basic website with very long mostly-text content:
HTML goes simplified like this:
<body>
<div class="content" id="01">
<p>LONG TEXT</p>
</div>
<div class="content" id="02">
<p>LONG TEXT</p>
</div>
</body>
Same goes on with about 40 more id's.
CSS looks for these parts like this:
.content {
max-width: 600px;
min-width: 240px;
margin: 0 auto;
}
So the content divs are scaled down with browser window / viewport. This finally takes us to my problem:
Whenever I scale the width of my browser window down, the width of the content div also scales down and so the content itself gets longer, or taller should i say. This leads to situation where current point of focus in content moves down. Especially bad this is when switching mobile device from landscape to portrait orientation or vice versa.
I'm now trying to find solution that scales the height of content both up and down, keeping the current vertical focus point on the screen. Does anyone have any ideas how this could be done in HTML, CSS or JS? Content divs have unique ids, single div not being very long so I guess that at least with JS this should be possible by somehow tracking the currently displayed id?
I hope I got some sense to this, while english not being my native language.
Thanks.
I think what you should do is set the <p> width fixed to the min-width of div.content, so it will never change it's width, but the parent <div> will, according to the current orientation.
You can see an example here: http://jsfiddle.net/dyjXC/1/
CSS:
body{ width: 300px; } /* portrait or landscape */
div.content
{
max-width: 600px;
min-width: 240px;
background: salmon;
border-bottom: 1px solid green;
}
div.content > p
{
text-align: center; /* I centered both the text and... */
margin: 0px auto; /* ... the p itself, but you can use default to left */
width: 240px;
background: lightgray;
}
I hope it works as expected.
Related
I'm optimizing my website for mobile devices at the moment, but ran into a problem. If i view the site on a mobile device or a small browser window some objects on the site wont have an effective width of 100% anymore, but others will. So you can scroll to the side and half of the content kinda sticks to the left. As Long as the width of the viewport is above 1000Px there are absolutely no problems. I use percent for measurement of the elements, so that shouldn't be a problem.
>1000Px screenwidth
<1001Px screenwidth
The effect isn't obvious instantly, as there wont be a horizontal scroll bar, but you can click and hold at the right side of the site and pull it over. The real problem is, that the header gets pushed out to the side, as it is one of the objects, which still uses the "full" 100% width.
I have a media querie, which changes the header at 1000Px
#media screen and (min-width: 1000Px) {.mobilenav {display: none;}
If i disable this one, the problem is gone, however if i delete the only div using this class
<div class="mobilenav">
<span style="font-size:25px; cursor:pointer;" onclick="openNav()">☰</span>
</div>
the problem is still there… The div does not stretch across the screen, i checked that and at this point i'm really out of solutions.
Here is the css for .mobilenav if it helps
.mobilenav {
position: relative;
}
.mobilenav span {
position: absolute;
bottom: 10%;
}
This may happen because of padding of your header element. You can check in example below it will be as width + padding
.container {
width: 300px;
height: 100px;
background: #ccc;
}
.article {
width: 100%;
height: 20px;
margin-top: 8px;
background: #999;
}
<div class="container">
<div class="article">article 1</div>
<div class="article" style="padding: 4px">article 2</div>
</div>
Background:
I'm trying to visualize the structure for my future pages and containers in the full screen.
Current JSFiddle:
Available here.
<div class="top">top</div>
<div class="middleleft">left</div>
<div class="center">center</div>
<div class="middleright">right</div>
<div class="bottom">bottom</div>
.top
{
background-color: yellow;
height: 20%;
}
.middleleft
{
float: left;
background-color: blue;
width: 20%;
}
.center
{
float: left;
background-color: white;
width: 60%;
margin: auto;
height: 60%;
}
.middleright
{
float:left;
background-color: red;
width: 20%;
}
.bottom
{
height: 20%;
background-color: green;
}
Problem:
For some reason, even with height defined on the CSS, it does not fill the entire screen to the bottom, linking only enough background color height and width until the text ends.
Need:
What code change is needed to fill the screen to the dimensions it has (like the 60% width on the center div), without having to write characters to the bottom to fill out the div on the screen?
Code type restrictions:
I do not wish to use JavaScript or JQuery in the solution, only CSS and HTML.
Many Thanks
JSFIDDLE CODE
I added this:
html, body {height:100%;}
Then I set your center div to height 100% (and made it pink so it can be seen more easily).
EDIT: I left your side divs alone as I'm not sure what you want to do with those, but I hope this helps.
Wrap the top/center/bottom content into one class allowing the left/right divs to merely sit outside of the wrapper.
This can be achieved, but I think you need to ask yourself why you want to do this. Today, with mobile there is no standard screen size, so a full screen for one screen is not going to be a full screen for another.
Instead, why not try adding some real content to your proposed structure and see how it stacks up then?
Or, if it's purely for mockup purposes, then maybe use some graphics software where it's much easier and quicker to move things around.
For example, I want this page to have the footer fill to the bottom of the page, but I want this page to behave how it does now - so the footer cannot be fixed. I'd prefer to not use JS simply because $(window).resize() is expensive and performance is a concern for us.
Our lowest supported browser is IE9, Firefox 13, Chrome 16 and Safari 5 so I'm not concerned about using a more advanced solution, though probably not bleeding-edge.
You can't - you have to either calculate the window height and footer top offset (which involves JS), or fix the position of the element to bottom: 0.
You could make the page background color match the footer color, and instead of using the graphic as the background for the whole page, make it only for the content area.
so put the background on main-content-container
and make the body background color #EBEBEB
Here is a way to do it, but it does bring other problems with it. You will need to set a min-height and make sure your content does not exceed that min-height or it may get cut off and all text must be at the top of the second div.
The css:
body,html
{
width: 100%;
height: 100%;
}
div#wrapper
{
overflow: hidden;
height: 100%;
min-height: 600px;
}
div#one
{
background-color: #0ff;
height: 200px;
}
div#two
{
height: 100%;
background-color: #f00;
}
The html:
<div id="wrapper">
<div id="one"></div>
<div id="two"></div>
</div>
So the content on the bottom, would not be able to exceed 400px in height in this example. But, if it was larger than that it would be filled in by a solid color.
I am looking to create a layout for my site where a sidebar is fixed at the right side of the viewport with a 30% width (content is to the left of it) until the browser window reaches a certain width, at which point I want the content and sidebar to be centred and no longer grow with the browser window (since it becomes hard to read at extremely large widths). Here is an idea of the html being used:
<body>
<div id=sidebar>sidebar content</div>
<div id=content>articles, images, etc</div>
And here is some of the basic HTML being used to format it:
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;
}
#content {
width: 70%;
margin-right: 30%;
max-width: 49em;
}
At this point, when the content gets wider than 49em, it sticks to the right side of the page creating an ever-increasing gap between it and the fixed sidebar. What I would like is to have it reach a max width of 49em, have the sidebar reach 21em (so they are still 70:30) and remain fixed, but have that whole 70em worth of width centered in the viewport.
I also want the background colour of the sidebar to span the entire way from the edge of the content to the right-hand side of the screen (i.e. a containing div that centers both the sidebar and content with a max width of 70em doesn't work since the background of the sidebar would only go to the edge of the containing div instead of the viewport). That one isn't as important because it might look fine to put some sort of textured background on the body element to make it look like as though the page is "sitting" on some textured surface (not ideal, but fine). I just haven't been able to center the sidebar and content while maintaining the sidebar's fixed positioning.
Thanks!
Update: here's a very rough schematic of what I am looking for:
|A|B|C|D|
B is the content area with a max width of 49em. C is the sidebar with max width of 21em AND it has to have fixed positioning. A and D would be the margins (each half of the difference between the viewport width and 70em). Background of D must be the same colour (gray) as the sidebar. Background of A must be white.
This solution meets most of your requirements, but you need to provide the width of the content+sidebar (in this case, I put 70em)
HTML:
<div id="container">
<div id="content">articles, images, etc</div>
<div id="sidebar">sidebar content</div>
</div>
CSS:
#sidebar {
width: 29%; background-color: gray; border: 1px gold solid;
float: left;
position: fixed; right: 0; top: 0;
}
#content {
width: 69%; max-width: 49em; border: 1px silver solid;
float: left;
}
#container {
max-width: 70em;
margin: 0px auto;
}
jsFiddle here. (You can test by just dragging the middle frame left and right)
Something like this:
<body>
<div id="wrapper">
<div id="sidebar">sidebar content</div>
<div id="content">articles, images, etc</div>
</div>
</body>
With CSS that is similar to this:
body { background:url(imageForSidebar.png) right top repeat-y; }
#wrapper {
max-width:1000px;
margin:0 auto;
background:#FFF url(imageForSidebar.png) -66% top repeat-y;
position:relative;
}
#sidebar {
width:30%;
float:right;
position: fixed;
}
#content { margin-right:30%; }
The background image on the body would take care of it going all the way to the edge of the screen. You would use a background image that was large enough to do this, but small enough so that it gets covered by the #wrapper background. The background image on the wrapper works in a similar way, but in this case it is just making sure that the sidebar image always extends to the bottom of the content.
You can add media queries into your css
//your normal css
#sidebar {
width: 30%;
position: fixed;
right: 0;
top: 0;
background-color: gray;}
//media query (you can add max and min width of the sceen or one of both)
#media screen and (min-width:500px) {
#sidebar{
//css you want to apply when when width is changed
}
}
i want a background image that is larger than the content, which will remain centered with the content, but will not affect the layout (meaning no scrollbars to accomodate the background image). the content must be centered using margin: auto; so that the left side will remain flush with the left side of the viewpane, when the viewpane becomes smaller than the content.
I have seen this question asked several times, and have tried quite a few solutions, but none of the accepted answers have actually worked.
Edit to Clarify
This question is still a bit murkey, so I will attempt to clarify with some images showing what I need. In these images, green is the background image, red is the main content, and blue is the browser's viewpane.
A: When the viewpane is smaller than both the background image and the main content, the left side of the content remains flush with the left side of the viewpane, the background image remains centered to the main content, the viewpanes scrollbars will only scroll out to the right edge of the main content (and not to the right edge of the background).
B: When the viewpane is larger than both the background image and content, both remain centered to the viewpane.
C: When the viewpane is the same size as the main content, the background image should remain centered to the main content, no scrollbars should be present.
Updated Answer: I still have spent way too much time on this :-), especially when it ended up so simple. It allows for a background to be sized based on the height of the container, which seems to be different than yunzen's solution. Now does use margin: 0 auto;. Still grows with container height.
View the new answer.
You can view the original, more complex answer which does not use auto margin.
HTML:
<div id="Bkg">
<div id="Content">Content goes here. </div>
</div>
CSS:
#Bkg {
width: 100%;
min-width: 300px; /* equals width of content */
background:url('http://dummyimage.com/400x20/ffff00/000000&text=Center') repeat-y top center;
padding-bottom: 50px;
}
#Content {
width: 300px;
margin: 0 auto;
}
I guess this is what you want
HTML
<div id="content">
content<br/><br /><br/>
content<br/>
</div>
<div id="background"><div></div></div>
CSS
html, body {
height: 100%;
}
#background {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* this is the height of the bg image */
min-height: 600px;
z-index: -1;
}
#background > div {
margin: 0 auto;
background: url("http://lorempixel.com/800/600/sports/2") no-repeat 50% top gray;
width: 100%;
height: 100%;
/* this is the height of the content */
min-width: 500px;
/* this is the width of the bg image */
max-width: 800px;
/* this is the height of the bg image */
max-height: 600px;
z-index: -1;
}
#content {
/* these are just some numbers */
width: 500px;
height: 400px;
border: 1px solid gold;
margin: 0 auto;
background: rgba(255,255,255,0.2);
}
Well, if it expands past the browser's window size, it's going to create a scrollbar for the entire window. I wasn't sure exactly what scrollbar you're trying to prevent.
max-width tells it "under no circumstances should this box be bigger than this width." So a box bigger than that will simply expand past the parent's boundaries.
See the jsFiddle.
If I'm understanding the question right, I believe this is what you're wanting.
.main-container
{
height: 1005px;
left: 50%;
margin-left: -560px;
position: relative;
width: 1120px;
}
To hide the scrollbars, you can add
overflow: hidden;
For horizontal only:
overflow-x: hidden;
Try this then:
<div id="wrapper" style="position:relative;margin:auto;width:200px;height:200px;">
<div id="image" style="position:absolute;top:0px;left:-100px;width:400px;height:400px;background-image:url(your_bgimage);background-repeat:no-repeat;background-position:top center;">
<div id="content" style="position:absolute;top:0px;left:100px;width:200px;height:200px;"><p>
<p>/* YOUR CONTENT */</P>
</div></div></div>
For some reason I couldn't get the z-index work, but if you can, you can put your content in the wrapper too, and content is not needed.
Given your original diagram I assumed that the background image was intended to be that - an image, possibly hi-res, rather than a repeated pattern. You may want to play with css3 background-size property which is handy for this specific purpose. It is well supported by modern browsers and regresses reasonably well if you have to support IE8 and under.
body {
background-image:url(/*nice higher res picture*/);
background-size:cover;
background-repeat:no-repeat;
}
http://jsfiddle.net/YyzAX/