I'm trying to build a site that works best at fairly high resolutions, but also slides as far left as possible when the resolution gets lower.
I'm not even sure what code to copy in here, so the link is:
projects.thomasrandolph.info
What I need is for the left side of #page to stop sliding left at the right side of #logo plus a few pixels. It's 13.25em from the left of the page.
I've set the left margin of #page to 13.25em, which looks correct, but at higher resolutions, the page looks strange because it's not centered. I want to retain the centering but also stop it sliding at a certain point.
So I want the left side to go no farther left than this:
I would VASTLY prefer If I could do this with pure CSS on the two elements I've noted here, but I can add HTML as necessary.
I've been struggling for a long time with how to even ASK this question, so please ask me questions, or edit this question to improve the clarity of the question.
Update:
Here are images of how it currently looks at two resolutions:
1920
1280
Here's an image of how it should look at resolutions below approximately 1540:
Any resolution higher than ~1540 would slide smoothly to the right, as it currently does.
What I wound up doing was adding a wrapper around #page. It's not what I would want in a perfect world, but I would want min-margin in a perfect world (or at least margin: min())!
On the wrapper, I applied margin: 0 13.25em; where the 13.25em was where I wanted #page to stop sliding left. The equal margins on both sides leave #page centered without a 13.25em shift to the right. Because I used margins instead of padding, the right side can overflow the browser without causing the horizontal scrollbar to appear.
It seems to be a good fix. I had originally been looking for something more "clever" without adding HTML, but this was simple enough and seems effective enough that it appears to be well worth the extra markup.
If you don't use a border for the element you can use it to define a "min-margin".
.center
{
margin: 0px auto;
border: transparent solid 30px;
}
P.S. I know this is an old question, but the OP also commented this month.
Give exact width and height to class center. then set position to absolute: lets say we wanna set width:400px; and height:300px; try following piece of code for center
.center
{
postion:absolute;
width:400px;
height:300px;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-150px;
}
Related
The attached photo is a design I'm trying to produce using html/css. It needs to be responsive, where the image and quote breaks under the left div. The main problem I'm having is figuring out how to produce the background effect where the text is outside.
I tried position: relative, left: - 10px; for the <p> tag and then did a media query to reset it on mobile. That worked (sort of) but I can't imagine it's the most efficient.
Any chance someone could try replicating the below mockup to show me how you'd do it?
Mockup I'm working with:
I think you need to set image property
background-repeat: no-repeat;
It automatically adjust with screen resolution
For the main container, you could do something like this with CSS:
background: #cccbcb;
box-shadow: 0 0 0 50px #fff inset;
It doesn't really make the container smaller than its content, but it creates the illusion that it is without having to mess with positioning. Of course, you'll need a padding smaller than the box-shadow's 50px (or whatever) for this to work (or just no padding at all).
Hy there. I'm macking an HTML/CSS tutorial and I'm facing some problems with positioning and those stuff. I got 3 stacked elements at my header and want them to be at the very center.
So I try something like this:
.container {
margin: 0 auto;
width: 940px;
}
at my CSS code, and add this class to those elements. It is recognizing the comands, since it moved a bit. But not the way I expected:
It remanied at the left, just a few more steps to the right. Funny part is: if I put something like
.container {
margin: auto 50% auto 50%;
width: 940px;
}
it's behavior is:
it GETS centered, but extends the screen lenght and put a scrolling bar. Why? Shoudln't both those options center my elements? What can I do to achieve my goal? I would appreciate an answer so much, since I get a lot of difficulties when trying to understand this part.
In your first example, the element is centered fine - it's just still 940 pixels wide, nearly the entire browser, thus not really far from the left edge. If you want to center its contained elements as well, just add text-align:center to it.
To see better what's happening, consider temporarily adding a background:red to the element and a lot will be clearer. It makes learning CSS tons easier to actually see the 'boxes' of the box model doing their job.
In your second example you appear to be confusing the order of values of the margin declaration. You're actually giving it a left and right margin of 50%, putting its left edge indeed right in the center. The 940 pixels width then make it stretch off to the right, still 940px wide, causing the scrollbar.
.container { text-align:center }
Give it a shot.
This would be straight forward to solve if you added your html as well.
I have a grid of products four wide
http://jsfiddle.net/QpX4f/4/
Why won't margin:0 auto; on the product images centering them? And why aren't those view buttons inline?
http://jsfiddle.net/QpX4f/5/
Note that i'm not sure what you're trying to achieve with the blue bg but it appears to be the exact same size at the product image... i've just placed it exactly behind the product image, move as you please
edit :: I'll add my two cents to give you some pointers so you can learn.
A few notes, your CSS could use some real organization. This smashing article is great for learning about css.
Next, you're using floats all over the place and I'm not sure why. Float only the elements you need to which is your container for each production.
For the bg image, you just need to actually set its coords to center it, also, the floating if the product image inside the link was messing up its position, and your margins were taking it out of center.
The view button is unnecessarily wrapped in a p tag, which does nothing.
In my opinion your markup is extremely bloated. You should start with simple cases and only add declarations when you see fit. Lean CSS is often much easier to debug than bloated. (as with any code really)
Also, using a tool like Firebug or Web Inspector will really help you see how your css declarations actually affect the positioning of elements.
answering your new question
your margin:0 auto was most likely messed up by the floats. This would would if it was using a normal inline display with not float. The view buttons were inline, they were just pushed down according to the content above, to take it out of this display mode I made it position:absolute (note you have to position the parent relative) and just set it to be at the bottom left.
Here you go: http://jsfiddle.net/gVLXV/
So...
ul.display li .image { background: url(http://propono.co.uk/image-shadow.png) no-repeat top center; } /* Added top and center to the background. */
ul.thumb_view li .image { padding:0 0 0 8px; }
I'm having an issue where a div is not butting up to the very top of the page. I tried to solve this by adding
position:absolute;
top:0px;
which put it at the top like I wanted but it also went to the left of the page. I want it to be centered in the page which works if I use auto left and right margins without position:absolute.
Is there any way to have auto margins AND position it at the very top of the page?
I think you have to set left and right (or maybe only left) to 50%
left:50%;
right:50%;
Not an answer to your question, but this sounds like a hacky solution. Don't use position: absolute to solve spacing issues - it has too many other consequences, some of which we can't even see that become apparent on smaller resolutions and such.
Better use Firebug or a similar tool to find out what is causing the space, and fix the reason. It's annoying, but really worth the time.
If you really need to do this, one solution might be to put the position: absolute on a div that spans across the whole screen (width: 100%) and put the real div in there - presumably with the correct margins. (I can't build a test case right now so I can't guarantee 100% that this will work.)
position: absolute takes elements out of the normal flow calculations, so I'm not sure whether or not you can have auto-margins.
Either way, it's generally a bad idea for something like that. My advice is to look into why it's not butting up against the top of the page with normal positioning instead.
I never get that problem because the first thing I do in all of my stylesheets is reset all margins and padding to zero and then redefine them explicitly.
In your case, this might be enough:
html, body {
margin-top: 0;
padding-top: 0;
}
Please, look at this example. I intend making horizontal layout with pure html/css, don't bother of old browsers. I made it with display: table technique. But displaying main text containers (light-yellow) became a problem. Each of this has overflow: hidden to prevent vertical scroll. Later, I intend adding some shadow effect at the bottom. Now, I want to make in, for example, 80% height with 10% margin top and bottom. But what I get is container with larger text stretching all parents container (light-green), so 80% of it became too much.
Is there any way to avoid it without javascript?
Maybe I can get text container any height, but with some margin at the bottom. I will appreciate any solution.
Do not use table layouts, table cell divs have a problem setting their width/height and thus will not be able to follow overflow rules.
update the following css properties in your layout.css, this will get you started:
#content{
display:block;
height:90%;
overflow:hidden;
vertical-align:top;
}
#content-inner{
display:block;
height:100%;
vertical-align:top;
}
.article{
display:inline-block;
}
It's still not clear what you want; maybe post a quick sketch?
Anyway, I'd want to avoid the horizontal scrollbar. To do that set #content {
width: 61%;} (based on the rest of the CSS). Currently, in layout.css, #content width is set to 305%.
RE:
#Brock Adam, I mean I want to make div.article-content 80% of screen, not 80% of parent container. I believe this can be achieved by forcing parent div#content be exactly 100% of screen, not more. But I don't know how.
div.article-content currently appears 5 times in the page. Setting it to 80% of the screen will give a page that's at least 400% wider than what the user can see.
Questions:
The first div is ID'd as "header", but it's floated left and only 39% wide. Is this a header (bar at top of of page) or a left, side-bar?
Are the articles supposed to be in 5 tiny columns, on the same row, or are they supposed to be one after another, scrolling down the page?
Again, statements and the semantics of the example page are unclear. Posting a quick sketch of the desired layout will help us help you.