Still can't get my content properly centered! [solved]

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Still can't get my content properly centered! [solved]

Post 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:
Image

And that'd be the right spacing:
Image
Last edited by Sindarin on Tue Jan 15, 2008 3:27 pm, edited 2 times in total.
jmut
Forum Regular
Posts: 945
Joined: Tue Jul 05, 2005 3:54 am
Location: Sofia, Bulgaria
Contact:

Post by jmut »

well, what do you expect to happen, why should you care for window so small to magically fit this large content.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Post by Sindarin »

Image

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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
califdon
Jack of Zircons
Posts: 4484
Joined: Thu Nov 09, 2006 8:30 pm
Location: California, USA

Post 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.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Post 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. :D

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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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 */
}
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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..
User avatar
Sindarin
Forum Regular
Posts: 521
Joined: Tue Sep 25, 2007 8:36 am
Location: Greece

Post 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)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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; }

Code: Select all

<h2 id="header" class="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.
Post Reply