Page 1 of 1
Still can't get my content properly centered! [solved]
Posted: Mon Dec 03, 2007 5:40 am
by Sindarin
I have read tutorials and tutorials, still can't get it. I am trying to position all my elements of a page wherever I want them to be and I am successful at that,
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>CSS Test</title> <style type="text/css">.imageposition{ position:absolute; left:50px; top:50px; right:50px; bottom:50px; z-index:1; width: 55px; height: 55px;}.textposition{position:absolute;left:65px;top:92px;right:50px;bottom:50px;z-index:2;background-color:#FF9966;width:177px;height:33px;}</style> </head><body> <img src="img07.gif" alt="" width="155" height="131" class="imageposition" /><div class="textposition">This is a test text, to see if the css code is correct</div> <div></div></body></html>
when the user resizes the browser, it all gets messed up. Then I set the width and height properties, so that everything does not adapt to the browser window size, to remain "solid" and it worked.
BUT when the browser window is resized to the minimum amount, the layout gets stuck and has "no air" between the content. Meaning the content is not correctly centered.
So this is wrong:
And that'd be the right spacing:

Posted: Mon Dec 03, 2007 5:59 am
by jmut
well, what do you expect to happen, why should you care for window so small to magically fit this large content.
Posted: Mon Dec 03, 2007 6:25 am
by Sindarin
well here's a bigger window. My problem is mainly that the content is not centered at all and does not have some kind of margin left and right to give it some air.
Look at newgrounds.com They seem to not care about the background, but at least their content is centered correctly.
Posted: Mon Dec 03, 2007 9:57 am
by pickle
If you statically set the width of elements, they don't resize to fit the window. Consequently, when the window is smaller than the elements, they go off screen. If you want the margins to always be set regardless of the window size, do just that - set the "margin" property & leave the width alone.
Posted: Mon Dec 03, 2007 2:50 pm
by califdon
The problem lies with how you are thinking about your page. What the others said is absolutely correct. You can't have it both ways. You have to think about what you want to happen when the browser window size changes. Whatever you decide, you can do it with CSS, but you can't do impossible things. Be sure you spend some time learning the CSS positioning and sizing properties.
Posted: Tue Dec 04, 2007 6:11 am
by Sindarin
ah yes, I finally did it! Took a look into wrapper divs and did the trick, here's the code:
Code: Select all
body {
margin: 0 0 0 0;
text-align: center;
}
.wrapper
{
margin-top:0px;
margin-left: auto;
margin-right: auto;
width: 760px;
height:555px;
text-align: left;
left:0px;
top:0px;
background-color:#CCCCCC;
}
.imageposition
{
position:relative;
left:50px;
top:0px;
right:50px;
bottom:50px;
z-index:1;
width: 55px;
height: 55px;
}
.border-left
{
position:absolute;
left:0px;
top:0px;
right:0px;
bottom:0px;
z-index:1;
width: 25%;
height: 100%;
}
.border-right
{
position:absolute;
left:300px;
top:0px;
right:0px;
bottom:0px;
z-index:1;
width: 55px;
height: 100%;
}
.textposition
{
position:relative;
left:65px;
top:92px;
right:50px;
bottom:50px;
z-index:2;
background-color:#FF9966;
width:177px;
height:33px;
}
maybe a bigger second wrapper div could let some of the background left & right show up in smaller browser windows, but then again its kind of a waste.
Posted: Tue Dec 04, 2007 10:42 am
by matthijs
Not so sure what you're after exactly, but I bet the elements border-left and border-right can be removed from the html and css. And instead of those put a bg image "faking" borders on the wrapper. Saves a few HTML elements and css rules.
But if you're just beginning with CSS, no worries. Just keep this in mind.
Posted: Wed Dec 05, 2007 4:42 am
by Sindarin
Not so sure what you're after exactly, but I bet the elements border-left and border-right can be removed from the html and css.
ah yes, I just saw I had left those in.
I did some tests with them to see which method is better.
put a bg image "faking" borders on the wrapper. Saves a few HTML elements and css rules.
bg image 'faking' borders?
Posted: Wed Dec 05, 2007 7:34 am
by matthijs
Yes, so you don't put elements in your HTML for the sole purpose of adding borders. You just take an existing element, say div id="content" and give that a background repeating image to simulate borders (or backgrounds, or both). That way, you keep your markup clean and your styles neatly separated in the CSS.
Code: Select all
#content {
width: 800px;
background: transparent url(img/bg-content.gif) 0 0 repeat-y;
/* bg-content.gif is a 1px high, 800px wide image with the borders and/or background colors */
}
Posted: Sun Dec 16, 2007 6:30 pm
by Sindarin
Uh, I just noticed, I can't put elements wherever I want them (x,y) inside the wrapper. For example I want an image to overlap another and it just pushes it to next line?
Posted: Mon Dec 17, 2007 2:10 am
by matthijs
It's important to understand the basics of positioning in CSS first. Study floats, relative and absolute positioning. If you give something an absolute position it's taken out of the flow and will not "push" other elements around.
Generally, when you use a wrapper like you do, and want to position something relatively to that wrapper, you need to give that wrapper a position:relative
Code: Select all
#wrapper {
position:relative;
}
#sidebar {
position:absolute;
right:0;
top:200px;
width:250px;
}
Now the sidebar will always stay in the right side of the wrapper. Watch out though for overlapping content. Say you have a footer below, when the sidebar gets longer it will overlap the footer.
Posted: Tue Dec 18, 2007 7:23 am
by Sindarin
So wait, if I want to position my elements relatively this wrapper but freely, like text overlapping images, I'll have to insert a new div with left and top properties for every new element?
Posted: Tue Dec 18, 2007 8:20 am
by matthijs
Not entirely sure what you mean, but basically it comes down to:
you have a single wrapper, wrapping your website. You give a position relative to that. After that when you give an element an absolute position (can be a div, or a p, ul, ol, h2, h3, etc) it is positioned relative to the wrapper.
Code: Select all
#wrapper {
width:800px;
margin:0 auto;
position:relative;
}
#sidebar {
position:absolute;
left:10px;
top:200px;
}
#somewidget {
position:absolute;
top:10px;
right:10px;
}
// etc
Of course, you're not limited to a single layer. Now that sidebar has a position, you can have an element inside the sidebar, and when you position that element it is given the position relatively to the sidebar.
Clear/confusing?
Of course, floats are a good solution as well sometimes/often..
Posted: Wed Dec 19, 2007 2:46 am
by Sindarin
Well my previous problem was that the elements were acting as a table while in that div, you know. They disregarded the positioning elements, they were wrapped inside but not freely. That code of yours works well. I assigned the two other styles to two texts and they overlapped each other correctly. I don't know why my code didn't work properly. Do they need to be ids instead of class? (like #text not .text)
Posted: Wed Dec 19, 2007 8:25 am
by matthijs
An ID should/can be assigned if the element is unique. You are only allowed to use an ID once. A class can be reused more often.
There are differences in the preference they get in CSS. So
Code: Select all
#header { color:red; }
.green { color:green; }
Now the header will be red, not green.
So sometimes, when you have conflicting rules, they can lead to surprising results if you're not careful.