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.
Related
I'm fighting with the unusual grid and I added some hover effects to boxes and when I'm resizing window it behaves so weird. I mean the final structure is good but why those boxes jumping in that way? I'm not uploading the code here because there are many things from other subpages and still much unnecessary code. Any suggestions how to fix it? Thanks!
Demo here
Wrap the contents of your<body>in a single <div>.
Set that div's width property like so:
.wrapper
{
width:1000px;
min-width: 400px;
margin: 0 auto;
}
The above values are given only as examples. Adjust the numbers to your liking.
I've never actually learned HTML or CSS properly, all of my knowledge comes from internet surfing and generally playing about with it. So i wanted to finally get some thing cleared up.
Firstly in my current 'messing about', i have a main div but that div will not sit at the very top of the page! It's at least 5 pixels from the top. I don't get it! I solved it once but i can't remember. There is an image of what i mean here: http://puu.sh/6jQUF.jpg
Here is the code:
HTML
<body>
<div id="Main">
This is a test.
</div>
</body>
</html>
CSS
#Main {
margin-right: auto;
margin-left: auto;
width: 900px;
height: 1200px;
outline: black solid thin;
padding: 20px;
top: 0px;
}
I'm sure it just something simple, i apologies for that.
Now another thing i have never understood is that in CSS can two divs sit beside each other, ie one has the float left property and the other float right thus pushing against each other and sitting beside each other, whenever i try this they end up ignoring the fact they are running into each other and both go to the left and right sides of the page.
I really hope i don't sound like an idiot I'm sure this is possible.
Lastly on the topic
If i have a main container how can i divs to stay in that container? I have tried this just by placing the div within in the container but that doesn't work.
Somebody please explain this, I would really appreciate that.
Thanks
The body has a default margin. Clear it with:
body {
margin:0;
}
jsFiddle example
If you want two divs to sit next to each other, either float them both left or both right, or make then inline, or inline-block elements.
I can't answer your question of "Lastly on the topic If i have a main container how can i divs to stay in that container? I have tried this just by placing the div within in the container but that doesn't work." as it makes no sense without code.
This happen because for default all elements has properties. In this case the tag body has some margin.
To avoid this kind of issues you can use a general Reset for this properties like this one Reset or the most basic reset:
* {
margin:0;
padding:0;
border:0;
}
Here the * helps to found all the elements on the DOM and set those properties to 0.
Try to keep one question per post. For your second issue I recommend to investigate the property display:inline-block and This Link to Clarify Floats
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;
}
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; }
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.