Hello,
I am new in designing websites and I have a question I haven’t been able to answer anywhere else so far.
When I designed my website I did it using DreamWeaver CS5. I started using (or drawing) AP DIVs to place objects in them. Everything went well because I tested it on my laptop and It was working fine in at least three different browsers, then I did it in a smaller (screen) laptop and it worked just fine. However, when I opened the page in a wider screen. the main image (made in Photoshop as a template) remained centered because it was placed on a table, but everything else (text, buttons, images, etc) appeared moved to the left.
Also, when the page it is not totally maximized, the same thing happens.
What can i do? should I insert something in the code?
I tried converting APDivs to tables, but it just messed up everything.
AP is not good for page layout, but neither are tables. AP is very inflexible. For example, when you add more content to an AP element, the other elements on the page don’t shift position to accommodate it, meaning it’s a poor method for page layout.
Of course, the ideal is to learn HTML and CSS so that you can code the page yourself. But short of that, the main thing to know about AP is that the positioning is in relation to a parent element that is also positioned (e.g. position: relative).
By default, an AP element will be placed in relation to the view-port (browser window), so it the browser window is resized, the elements will move. The way to stop that is to wrap them in another element (say a div) and give that div position: relative. So if you have a site with everyhing centered on screen, you could possibly wrap everything in a div with a class (say) of “wrap”, and then in your CSS file give the “wrap” div a width (say 960px), center it (e.g. margin: 0 auto), and give it positon: relative.
I tried the piece of code you said, but it did not work. I actually tried a wrapper before with no luck.
here is a link where you can take a closer look of the website: www.spanishtarea.com
It looks good in 13 to 17 inches, but wider will look lika a mess.
Yeah, unfortunately that’s just not the way to lay out a web page, I’m afraid.
There might be a quick fix, such as adding this to your styles:
body {
margin: 0pt auto;
position: relative;
width: 900px;
}
Then you would have to adjust the left: settings on each div.
But really, it would be better to start from scratch, with a centered wrapper, and then elements placed appropriately inside that using various methods like float.
Also, it’s better not to have backgrounds detached from the elements they go with—such as having a big background image like that.
That it is a quick way to solve it. However, it changes the layout on smaller screens hahaha.
You are right I should start it again.
So, I should avoid AP DIVs, right?
Yes, it’s not a good method for page layout. It only really works for the occasional little element here or there that needs to be bolted on somewhere, rather than for a whole page.
What could I use instead?
tables?
No, that’s an even worse option. Tables are not appropriate for page layout. They were only used for that purpose a decade ago because browser support for CSS—the proper technology for page layout—was lacking. All browsers support CSS now, so tables should not be used—except for their actual purpose of presenting tabular data.
So, the best thing to do is learn about the proper use of HTML elements and find out how CSS works for page layout. What is your expericnce level with CSS?
I will do that! I have some basic experience with CSS, but definitely I will read more about it.
By the way, I was finally able to solve the problem with the code you sent (wrapper). The problem was that I missed a line of code, but now the site looks decent.
