Our website engine uses 960.gs grid system and I am trying to modify it to 3 columns Fixed(100px)-Fluid(max to width)-Fixed(100px) view. Unfortunately all 960.gs online generators makes just or full-fixed or full-fluid grids. So I am trying modify originally generated full-fluid grid to this view:
<------------100%--------------->
======== =============== ========
| fixed| |max to screen| |fixed |
======== =============== ========
<-100px> <-100px>
The Code (after modification):
http://jsfiddle.net/vZm8x/
Problem 1) I am not sure how to make central content area max to left
on the screen. Because width:auto; doesn't work at all, width:100% just wrapping divs.
Problem 2) after fixed to 100px all div it continues wrapping down
anything. (display:inline; doesn't help any ideas?)
My question is: Is that possible to modify 960.gs template according to our needs? If yes please give me any advice to fix the problems? Thank you in advance!
With fixed-width side columns, it's actually very easy. You're going to want to use floats, and may need to do a faux columns trick, depending on your specific design needs.
You'll want something along the lines of:
<div class="left"></div>
<div class="right"></div>
<div class="middle">Content</div>
and:
div {
/* border-box, to make sure "width" is our intended width */
-moz-box-sizing: border-box; /* Firefox still uses prefix */
box-sizing: border-box;
}
.left {
float: left;
width: 100px;
background: #f00;
}
.right {
float: right;
width: 100px;
background: #00f;
}
.middle {
width: 100%;
padding: 0 100px;
background: #ccc;
}
See it in action here (this is without the faux column effect, but should give you a starting point). If you change the width of the section with the output, you'll see that the columns stay put, and the content stays within the bounds of the outer columns.
The content column needs to be last, because it's still in the document flow, so the right column would end up below the content.
Alternatively, you can use position: absolute; on your side columns with something like this:
.wrapper {
position: relative; /* Constrains the columns within their parent. Not needed if parent is <body> */
}
.left {
position: absolute;
top: 0;
left: 0;
}
.right {
position: absolute;
top: 0;
right: 0;
}
.middle {
padding: 0 100px;
}
div {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
These tricks will work in IE8+, Firefox, Chrome, Safari, and Opera. IE7 might have issues due to using the W3C box model ("content-box") and not recognizing the box-sizing CSS, but there are a few tricks to make it work if you need it. IE6 should be okay, because it uses "border-box" based box model by default. (You may need to play with z-index to get IE to behave. If so, then set .middle{ position: relative; z-index: 1} and add z-index: 2 to the left and right columns.)
The position: absolute trick does have the advantage over the float one in that your sidebars can appear before or after the content div, making it the potentially more semantic option.
The reason these work is because a) your side columns are fixed, so we just set the padding to the width of those columns, and b) position: absolute and float: [left/right] take the elements out of the document flow, which means that as far as the document is concerned, they aren't there and take no space. This allows other elements to move to where those elements used to be, layering them over top of each other.
Related
Disclaimer - I understand there exists questions around fixed elements in safari, and fixed elements weren't supported, but now are and so forth. However I can't find a question that addresses this exact question.
Given the simplest of fixed sidebars, something like:
.sidebar {
position: fixed;
top: 10px;
right: 10px;
}
And a relatively long page, with input elements.
When an input element is focused, any fixed element becomes absolute - I understand the why, safari is trying to declutter the viewport - thats fine, but not always appropriate. I ask that I get to choose the best experience for the user (i know best naturally).
So the Question..
Is there any way to leave fixed elements as fixed even when input elements are focused?
I have attempted to do a bit of $(window).on('scroll', magic and position elements manually on scroll, but its quite jittery on the ipad.
Safari has supported position: fixed since at least version 9.2, but if you're seeing difficult issues, you can fully create the fixed position effect by making the document element and body full screen and then using absolute positioning. Scrolling then occurs in some main container element rather than the body. Your "fixed" elements can exist anywhere in the markup using this method.
jsfiddle here
html,
body,
.mainContainer {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
}
.mainContainer {
overflow: auto;
}
.fixed {
position: absolute;
bottom: 20px;
left: 20px;
}
In order to achieve the effect you desire you need to change your approach to the layout. Instead of positioning the sidebar with position:fixed you need to use position:absolute within a position:relative container that is set to the height of the viewport within that position:relative container you need another div that uses overflow-y: scroll and -webkit-overflow-scrolling : touch
Caveat: I generally avoid using position fixed on tablet & mobile if possible although the browser support is there, in my experience it'll be janky and javascript solutions leave a lot to be desired, my first response would be to challenge the pattern with the designer. If I'm given designs that include a position fixed element when there are input elements, I'm more likely to seek a design solution than a development one as the focus issues you're describing are difficult to circumvent and maintain a quality user experience.
THE MARKUP:
<div class="outer">
<div class="sidebar">
<ul>
<li>Dummy list nav or something</li>
</ul>
</div>
<div class="container">
<input type="text" />
<!-- I added 10000 inputs here as a demo -->
</div>
</div>
THE CSS:
html,body{
-webkit-overflow-scrolling : touch !important;
overflow: auto !important;
height: 100% !important;
}
.outer {
position: relative;
overflow: hidden;
/* I'm using Viewport Units here for ease, but I would more likely check the height of the viewport with javascript as it has better support*/
height: 100vh;
}
.sidebar {
position: absolute;
top: 10px;
right: 10px;
/*added bg colour for demo */
background: blue;
}
.container {
height: 100vh;
overflow-y: scroll;
-webkit-overflow-scrolling: touch
}
input {
display: block;
}
Here's a CodePen for you to open in your simulator (presentation view):
https://codepen.io/NeilWkz/full/WxqqXj/
Here's the editor view for the code:
https://codepen.io/NeilWkz/pen/WxqqXj
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
I want to divide my webpage horizontally in to 2 parts, my monitor layout is 1410 X 752, if I write css code like this
.left{
width:210px;
}
.right{
width:1200px;
}
it wont work correctly in other monitors and also when I zoom in/out the browser the page structure will be totally out of order I mean the left DIV moves down and it will be to under the right DIV !
I know I must use % but when zoom in/out the browser scroll bar doesn't appear, please check this address to see what I said. what shall I do ?
thanks.
First of all, you aren't telling your divs to go anywhere. They are just stacking themselves on-top of each other.
You do however have the correct start and methodology, though it should be modified to fit current best practices. Let me elaborate...
To make your code work you need to add a float property change your code to this:
.left{
float: left;
width:210px;
}
.right{
float: left; /* could also put "right" here as a value */
width:1200px;
}
Now with that said... a better option that will produce the same result is this:
.left{
display: inline-block;
width:210px;
}
.right{
display: inline-block;
width:1200px;
}
Let's go a step further.... While this will "work" it will look terrible on other peoples screens. What if my resolution is 1280x1024, which isn't as wide as yours. I'll have to scroll to the right to see your site. That will encourage people to LEAVE your site. We can fix this though...
.left{
display: inline-block;
width: 20%;
}
.right{
display: inline-block;
width: 80%;
}
Now, no matter how big your browser window is your divs will take up 80% of the right side of the screen, and 20% of the left side of the screen. NOTE This will depend on a good reset.css as the width of an element is by default does not include any padding, margin or border space. If you add a padding or margin or border, the above method will break. To get around that there are a few options. You can use % values for your padding and margins but that breaks if you add a border.
A common solution is to add this property to your css:
.left{
display: inline-block;
width: 20%;
box-sizing: border-box;
}
.right{
display: inline-block;
width: 80%;
box-sizing: border-box;
}
This will fix any padding or margin space issues mentioned above, but you still have to account for margin space. Let's say you want a 5% gutter between the two, then you need this code:
.left{
display: inline-block;
width: 20%;
box-sizing: border-box;
margin-right: 5%;
}
.right{
display: inline-block;
width: 75%;
box-sizing: border-box;
}
Notice how I subtracted 5% from the right column to incorporate the margin space. if you add it all up 20+5=25 25+75=100% 100% means it works, if its more than 100% it will break.
For additional reading so some research (google) Responsive Layout/Web Design.
Info on float property -> http://www.w3.org/wiki/CSS/Properties/float
Info on display property -> http://www.w3.org/wiki/CSS/Properties/display
Info on box-sizing property -> http://www.w3.org/TR/css3-ui/#box-sizing
A good resource to determine browser compatibility is http://caniuse.com/
You should be using % instead of px here is a simple example.
If you are using 1200 of a 1410 monitor then we use math to get the % relative to that width
(1200 * 100) / 1410 = 85% (more or less... the right answer will be 85.71428571428571 %, but really don't matter).
HTML
<div class="left"></div>
<div class="right"></div>
CSS
.left {
float: left;
width: 15%;
background: green;
height: 300px;
}
.right {
float: left;
width: 85%;
background: blue;
height: 300px;
}
Live example.
As everyone says , you should use percentage, cause your window browser will never do the size of your screen, unless it is set on full screen.
Then scrollbars might show up.
% percentage are quiet safe if you manage a little less than 100% all together (calculation from percentage dow to pixels, can add extra pixels).
Differents ways to build ypour layout can help to use pixels, as :
display: table-cell:
you need to set the size of the smallest in pixel and set others to 100% to shrink small one to its size.
float:
set float and width on first element. second element can remain in the flow with no size and overflow:hidden; to keep aside float element and use all space left.
If you need a fiddle to get the idea, ask.
I have fairly simple layout, like this:
<div class="card">
<span class="attack">1</div>
<span class="defence">2</div>
</div>
They're arranged on top of each other with simple display: block. What I want to achieve is when a card is in specific areas, "attack" shows on bottom and "defence" is on top. I know I can make it with jQuery, but can I achieve the same effect using pure CSS?
Technically, this is a business rules thing, which is not the domain of your cosmetic layer.
In an HTML document, the order of elements from first to last has semantic meaning - your case is not different, I suspect, in that you are trying to indicate some difference in importance from one element to the next (in the document, not just the visual representation) depending on the context.
So your approach should be JQuery, or some other method of changing the meaning of the relationship of these two elements in terms of their order in the document. CSS is intended to change only their cosmetic appearance.
With situations like this, it can be helpful to think, "what if someone could not see the elements, and had to rely on a screen reader to read them in the order they appear in the document? Would this information (not just the content of the two elements, but their relationship) still be correct and comprehensible?"
You may not intend for this to be accessible to the blind, but that's often a good sanity check for how to approach a problem like this.
I'm pretty sure this will work:
.card {
width: 100px;
height: 150px;
float: left;
}
.attack, .defence {
width: 100px;
height: 75px;
clear: right;
}
/* Play with height and padding-top of .defence to
get the text to the very bottom */
.attack-top .card .attack {
float: left;
}
.attack-top .card .defence {
float: right;
height: Wpx;
padding-top: Xpx;
}
/* Play with height and padding-top of .attack to
get the text to the very bottom */
.defence-top .card .attack {
float: right;
height: Ypx;
padding-top: Zpx;
}
.defence-top .card .defence {
float: left;
}
There are a few details missing in your description, so I'll try to fill in my assumptions, and you can let me know if they're valid or not.
You said "when a card is in specific areas". I'll assume these areas can be represented by different containing classes (.attack-top and .defence-top, but rename as you see fit).
I'm assuming that a .card is 100px wide and 150px tall. If these width and height values are wrong, fill in the correct ones and make the appropriate recalculations. If .card doesn't have fixed width/height, it may still work, but I'm less confident, and you won't be able to get the bottom text to go to the very bottom of the card (just below the top text).
The first thought is to use absolute positioning within .card.
.card { width:100px; height:50px; position:relative; }
.attack { width:100px; height:25px; position:absolute; top:25px; }
.defense { width:100px; height:25px; position:absolute; top:0; }
In this example, .attack will be (visually) below .defense. But note, if you disable CSS, the true arrangement will be seen.
If you know the height of the element, you can use position: relative (with positive and negative values, respectively) or position: absolute. But this is all very hacky and comes with a lot of side-effects - I would do it in Javascript instead.
You can do this by using (if you only want to do the swap in div.card):
.card .attack {
position: relative;
top: 1em;
}
.card .defence {
position: relative;
top: -1em;
}
But as others have mentioned this can have some unintended side-effects. E.g. the above sample will move swap position correctly only for 1 line blocks.
No, you can't. Even if you decided to try to "hack" it out in CSS, the resultant CSS would be huge, messy, and not easily maintained. The corresponding jQuery code would be very simple by comparison, easily understood, and easily maintained.
How to horizontally center a floating element of a variable width?
Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a width for the containing element.
Assuming the element which is floated and will be centered is a div with an id="content"
...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS:
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good reference regarding that.
.center {
display: table;
margin: auto;
}
You can use fit-content value for width.
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
Note: It works only in latest browsers.
This works better when the id = container (which is the outer div) and id = contained (which is the inner div). The problem with the highly recommended solution is that it results in some cases into an horizontal scrolling bar when the browser is trying to cater for the left: -50% attribute. There is a good reference for this solution
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
Say you have a DIV you want centred horizontally:
<div id="foo">Lorem ipsum</div>
In the CSS you'd style it with this:
#foo
{
margin:0 auto;
width:30%;
}
Which states that you have a top and bottom margin of zero pixels, and on either left or right, automatically work out how much is needed to be even.
Doesn't really matter what you put in for the width, as long as it's there and isn't 100%. Otherwise you wouldn't be setting the centre on anything.
But if you float it, left or right, then the bets are off since that pulls it out of the normal flow of elements on the page and the auto margin setting won't work.
The popular answer here does work sometimes, but other times it creates horizontal scroll bars that are tough to deal with - especially when dealing with wide horizontal navigations and large pull down menus. Here is an even lighter-weight version that helps avoid those edge cases:
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}
Proof that it is working!
To more specifically answer your question, it is probably not possible to do without setting up some containing element, however it is very possible to do without specifying a width value. Hope that saves someone out there some headaches!
Can't you just use display: inline block and align to center?
Example.
for 50% element
width: 50%;
display: block;
float: right;
margin-right: 25%;