So I've read a couple of CSS guides and understood most properties, but I still can't position elements PROPERLY.
What I mean by properly: right now I position stuff using specific values ofmargin, margin-right, margin-left, padding, (margin-left:50px), etc... What this means is that my divs are all positioned properly when I view it in my own computer with a specific resolution.
So I hope this isn't too general, but how do I position stuff in a way that they will be in the same relative spot in the page, for every resolution/page size, no matter who and what views it (I guess if it's the same for 99% of cases it's also a good start).
A bit more specific: which properties can I use to position elements in the manner I described?
Here's a link of one of my little projects which are badly positioned (it's all good in my screen, but not so much on others:
http://kash.hostzi.com/utopia/minesweeper.html
check out #gameTable's css for example - I wanted to center that and did it in a horrible way.
In your linked example, it looks like you want the gameboard to be centered. If it's a block-level element, such as a div or table, and you want to center it, you can use this on the element itself:
margin-left: auto;
margin-right: auto;
If it's an inline element, and you want to center it, you can use this on the parent element:
text-align: center;
If you weren't trying to center it, but just want to have the position scale with the screen size, do something like this:
margin-left: 10%;
margin-right: 10%;
If you want the position to scale with the font size, do something like this:
margin-left: 10ex;
margin-right: 10ex;
You can start using percentages. Like:
margin-left: 20%;
margin-right: 20%;
and it will be margined depending on the window(the element in which it is) size.
Related
I'm trying to understand this code in order to both crop and center an image.
I think I've understood most of it, but I'm still not figuring out why I need this:
.img-crop img{
/* removes(sorta) image from the flow */
padding-left: 100%;
margin: -100% -100%;
}
I think margin: -100% -100% is for centering the image both vertically and horizontally, but why is it placed on the left of the container (and therefore: why do I need that padding-left: 100%)?
I think I figured out how it works. here you can find an example I tried to write for you from scratch. The image has been replaced by a div, but since they are both displayed as inline-block, the last one is convenient for changing heights and play with it.
Let me say it's quite useful if you don't want to use jquery to heavily manipulate all your DOM! Crop and centering just in a bunch of css rulesets.
I need help in fixing my right sidebar in Wordpress so that it doesn't move around when seen in different resolution sizes on the screen?
CSS for the right sidebar
#socialsidebar {
float: right;
position: relative;
overflow: hidden;
margin-right: 200px;
margin-top: 200px;
height: auto;
width: 194px;
}
CSS for the container/page
body {
min-width: 960px;
}
.container_12 {
background: #fdfdfd;
margin-left: auto;
margin-right: auto;
width: 960px;
}
You need to learn about position property of CSS.
there are few thumb rules that you have to take care of.
avoid unnecessary horizontal scroll.
try not to give static height, cause you always have infinite height at your disposal. use height:auto for your bigger containers.
give static dimensions to such containers which you know can be accommodated on most of the resolutions.
avoid inline css - try to define generic css as much as possible.
decide the possible resolution range of your app usage. and then begin writing CSS.
and most importantly, always cross verify your CSS(as you write it) on IE(biggest challenge).
most of the time, best way to go about it is that it should be simple and easily modifiable.
see you need to look at the entire screen as a co-ordinate system whose origin is at top-left corner and Y-Axis downwards.
this is one of the best articles on CSS-Position property. Go through it. It will help you in understanding how left,right,top,bottom work.
now, I've made a super simple sample, covering your needs. i.e. right navigation and it stays stable in any resolution.
Sample-fiddle
what you should notice in this sample is, extensive usage of percentage for width, height, top, left. and position attribute.
you can modify it accordingly. or take a reference from it. one more thing, you don't need to do position:absolute, I am doing it cause, i wanted to provide dimension to the container through its top, left,right bottom attribute, you can do it through percentage and position:relative.
What's the simplest solution to make four equally sized boxes that is displayed inline (horizontally) and is centered in the screen all through out responsively?
I have four divs with same sizes, displayed inline and is always placed in center, meaning they always have an equal margins on left and write of the screen. And i want it to be responsive. I already tried flex-box but i'm having trouble with browser compatibility with css3.
I don't know if this is the absolute "best" way. But something like this would definitely work.
div {
width: 22%; //adjust as necessary
margin-right: 4%; //adjust as necessary
float: left;
height: 5em; //adjust or remove as necessary
}
div.last { //alternatively you could consider using the :last-child selector
margin-right: 0;
float: right;
}
You will have to apply a class of "last" to the last div. Alternatively you could use div:last-child if they were all contained in a parent element.
Also, when adjusting the margin/width make sure they stay relative. widthx4 + margin-rightx3 should always = 100 (assuming no padding or borders).
My page I'm working on is at http://www.derekbeck.com/1775/excerpts/
It looks all fine in desktop browsers, but on mobile screenshots, like below, it is forced to wrap. (see below the image for my questions...)
(full sized image)
I've tried to make it wrap gracefully, but I have two questions:
1) Is there some CSS way to control how the div inline-block (class="exnote2") Want the entire chapter?<BR>Sign up for the newsletter! wraps?
Specifically, I want:
1a) that padding-left: 20px; on the left side of it to be non-existent if it is on a second line as below (but it is necessary to keep it 20px from the PDF icon if it is indeed all on one line),
1b) some whitespace above the div inline-block (class="exnote2"), so that it is not so close to the "Read Online" icon. If I add padding-top or margin-top however, it effects the nice layout for the desktop version (linked above).
For what it's worth, for 1b) above, I did jury-rig a solution together for the entire inline block that follows the image, the entire div inline block that contains text (class="exitemdetails"). I did it this way:
.exitemdetails {
margin-left: 25px;
/* The following allows for graceful wrapping for mobile phones */
padding-top: 20px;
position: relative;
top: -10px; /* half the padding-top */
}
I could jury-rig something for the Want the entire chapter?<BR>Sign up for the newsletter! line too, but I suspect under different conditions it would not display as I hoped. Hence, I post here hoping for a better, more elegant solution, namely, how to use CSS to control the way div's wrap, and the spacing between them only if they do wrap.
2) I have one other question related to this: is there no simple CSS way to shrink that book cover image down when there is not space enough? I tried this, but it does nothing:
.eximage {
width: auto;
height: auto;
}
.eximage img {
max-width: 100%;
height: auto;
}
Thanks for looking!
Derek
Have you considered using css media queries to change the layout of your page at different screen sizes? Might be worth a shot.
http://www.w3.org/TR/css3-mediaqueries/
Just a quick question regarding CSS positioning. I have several "segments" on my site which are 100% wide (fills the screen), and I want them floated next to each other. So only the first one will be visible, the other ones will be off-screen. I've tried playing around with positions and the overflow property without luck. Right now they just pop down below each other instead of floating.
This would work perfectly if the elements did not exceed the screen width, but as they do, they just pop down as I said earlier. I've tried setting a huge width to the "wrapper", something like 99999px. And then setting the segments to 100%, but that will just fill the whole 99999px width instead of the screen.
Any ideas?
JSFiddle example: http://jsfiddle.net/9xGPb/
Do you mean like this?
Example Fiddle: here
I used my favourite alternative to floats, inline-blocks
if you actually take it out of the fiddle it has some pretty (gaudy?) colours which show that it allows for the min-width: 900px; on the centered_content div to work too, and I removed the absolute positioning for the menu so the content would go below it, for demo only but you may find it useful..
let me know if any good or if you have any questions
Updated with some jQuery and to make corrections for default word-spacing
New Example: here
re: the IE6/7 hack rightly mentioned in the comments;
.segment {
display: inline-block;
overflow: hidden;
width: 0;
}
.segment {display: inline !ie7;}
needn't be a "parse hack" if that's your preference as long as that second rule is given to [lte IE 7] somehow, and separately at that it cannot be combined into the original rule with the * hack or anything, it won't work.. has to be in a separate ruleset.
I discovered word-spacing might be a problem if relying on width to hide, the natural behaviour of inline blocks is to put 3-4px between the elements like the space in between words, the workaround to this is to correct the word-spacing on the wrapper
.segment-wrapper {
white-space: nowrap;
word-spacing: -4px;
}
then restore it normal for the actual content divs, same place as you would restore the normal wrapping behaviour
.centered_content {
width: 900px;
margin: 0px auto;
background: #fcf;
white-space: normal;
word-spacing: 0;
}
and last, apart from this was fun.. there's 2 effects in that new fiddle - uncomment and comment the other.. forgive me I was playing! :)
The meaning of float is to try to float to the right or left unless there is not room for it.
This means that you cannot ever float an element off the page.
If you need to keep the element off the page, you will need to use a different positioning mechanism like position: absolute.
It sounds like you're creating a horizontal one-page portfolio. I've recently been working on something similar.
Using your fiddle I've set the .segment class to
.segment {width:90%;height:90%;position:absolute;}
and then offset each left positioning further off the screen
#home {background-color:red;left:5%;}
#work {background-color:yellow;left:105%;}
#portfolio {background-color:green;left:205%;}
#contact {background-color:blue;left:305%;}
http://jsfiddle.net/9xGPb/2/
I also added some jQuery logic to switch views for the divs.
I'm still not entirely sure which segments you want to start off the page but this jsfiddle uses positioning to shove the #two div off to the right: http://jsfiddle.net/EdAZP/1/
Which part of your example did you want to start off the page?
Did you try to just hide the other elements and toggle them with some javascript (jQuery is much easier)?
http://api.jquery.com/toggle/