Aligning Divs - Problem

Pegasus-css

07-09-2008, 10:43 PM

What I Want. (This was made in Photoshop before some wise *** says i already got what i want) :thumbsup:

http://img295.imageshack.us/img295/7019/example5zx3.th.png (http://img295.imageshack.us/my.php?image=example5zx3.png)

The problem has been partially fixed now, everything is aligning correctly except everything is to the left of the browser and all my attempts to center everything like above has been met with failure.

All i need to do now is get the Site below to match the Site i've displayed above in the Thumbnail. (Those black boxes are all suppose to be there). The Site Below is my template for the other pages i will be making, so everything thats on the site below i need to have centered in the browswer like above and remain in their positions.

I hope that makes sense.

http://www.uriako.co.uk

Above is the site on my website. Thats where im at at the moment the above site also matches both Code Snippets below.

Any help would be greatly appriecated.

WEBPAGE CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>website1</title>
<link rel="stylesheet" type="text/css" href="sitename.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body {

background-image: url(bg_gradient.png);
background-repeat: repeat-y;
background-position: center;
background-color:#000000;
}
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:729px;
height:584px;
}

#index-01_ {
position:absolute;
left:0px;
top:0px;
width:729px;
height:69px;
}

#website1-02_ {
position:absolute;
left:0px;
top:69px;
width:729px;
height:20px;
background-color:#000000;
}

#index-03_ {
position:absolute;
left:0px;
top:89px;
width:317px;
height:253px;
}

#index-04_ {
position:absolute;
left:317px;
top:89px;
width:412px;
height:253px;
}

#index-05_ {
position:absolute;
left:0px;
top:342px;
width:729px;
height:187px;
}

#website1-06_ {
position:absolute;
left:0px;
top:529px;
width:729px;
height:15px;
background-color:#000000;
}

#index-07_ {
position:absolute;
left:0px;
top:544px;
width:729px;
height:40px;
}

</style>

</head>

<div id="Table_01">
<div id="index-01_">
<img id="index_01" src="images/index_01.png" width="729" height="69" alt="" />
</div>
<div id="website1-02_"></div>
<div id="index-03_">
<img id="index_03" src="images/index_03.png" width="317" height="253" alt="" />
</div>
<div id="index-04_">
<img id="index_04" src="images/index_04.png" width="412" height="253" alt="" />
</div>
<div id="index-05_">
<img id="index_05" src="images/index_05.png" width="729" height="187" alt="" />
</div>
<div id="website1-06_">
</div>
<div id="index-07_">
<img id="index_07" src="images/index_07.png" width="729" height="40" alt="" />
</div>
</div>
<div id="header-text01_"></div>
<div id="header-text02_"></div>
<div id="sub-header-text03_"></div>
<div id="text-area01_"></div>
</body>
</html>

Style Sheet Code

/* Global Styles */

body,td,th {

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
}
body {

background-image: url(bg_gradient.png);
background-repeat: repeat-y;
background-position: center;
background-color:#000000;
}
a {

font-size: 10px;
color: #6CB6FF;
}
a:visited {

color: #0066CC;
}
a:hover {

color: #00FFFF;
}
a:active {

color: #2492FF;
}
h1 {

font-size: 12px;
color: #990000;
}
h2 {

font-size: 14px;
color: #990000;
}
h3 {

font-size: 16px;
color: #990000;
}
h4 {

font-size: 18px;
color: #990000;
}
h5 {

font-size: 24px;
color: #990000;
}
h6 {

font-size: 36px;
color: #990000;
}

#text-area01_ {
position:absolute;
left:330px;
top:103px;
width:382px;
height:224px;
z-index:1;
background-color:#000000;
border:2px solid;
border-color:#990000;
}
#header-text01_ {
position:absolute;
left:366px;
top:34px;
width:328px;
height:33px;
z-index:1;
}
#header-text02_ {
position:absolute;
left:8px;
top:103px;
width:298px;
height:29px;
z-index:1;
background-color:#000000;
border:2px solid;
border-color:#990000;
}
#sub-header-text03_ {
position:absolute;
left:150px;
top:141px;
width:156px;
height:23px;
z-index:1;
background-color:#000000;
border:2px solid;
border-color:#990000;
}

FWDrew

07-09-2008, 10:47 PM

Do you have a URL also that you could post please?

Regards,

Drew

Pegasus-css

07-09-2008, 10:54 PM

Sent it to you in a PM with explanation as to why its in a PM.

jcdevelopment

07-09-2008, 11:23 PM

first thing... never trust Dreamweaver, they dont use a standard web based browser, so it won look right.

Also you are positioning alot of your elements with absolute positioning and that wont get it done. In order to center an object, the best way is to use this

margin:0 auto;

Also set a width to it, it wont work with out that. You may need to do some adjustments with your elements, seeing as many are positioned absolute. Use margins and padding to align your items.

Pegasus-css

07-09-2008, 11:35 PM

Thanks, i'll give it a go.

jcdevelopment

07-09-2008, 11:37 PM

sorry, make a habit of adding this to your CSS no matter what

* {
padding:0px;
margin:0px;
}

Resets all elements so no funny gaps!

Pegasus-css

07-10-2008, 12:18 AM

I've tried the above and im still no further to getting them aligned propperly. I cant understand it as far as i can see the coding should cause them to line up correctly.

It seems its something that happens when i align the table to the center, thats when the images go all to ****.

Im under the impression that the aligned images will take their left/top positions from the borders of the Table they are in. Am i right in what im thinking or am i wrong and that the images take their left/top positions from the window edges.

jcdevelopment

07-10-2008, 12:21 AM

well, i am going to be frank with you. You need to get rid of the tables and use divs instead. They are easier to use and wont give you these problems. If you need help converting from tables to divs let us know and we can help. Thats probably your best bet.

Pegasus-css

07-10-2008, 12:41 AM

I exported my Sites Image from Photoshop i sliced the image of the site into sections that would need editing, i've saved the slices as CSS ID's.

Will it still be possible to get my Images to align in the center so my site appears in the center of the page no matter what the resolution the user has?

I dont want the site to come apart depending on the resolution users who visit the site may have.

Check http://www.uriako.co.uk for an example of my site whilst its aligned together.

All i want from the page displayed in the link above is for the graphic to be centered and remain centered if the window is resized. Thats what im looking for but as it stands whenever i alter the DIV that the images are in they go all screwy.

There is no Tables sorry its just the name of the DIV that all others are inside.

jcdevelopment

07-10-2008, 02:19 AM

i got this as close as i could... it looks like a few images are off

#Table_01 {
position:absolute;
left:0px;
top:0px;
width:729px;
height:584px;
}

#index-01_ {
position:absolute;
left:0px;
top:0px;
width:729px;
height:69px;
}

#website1-02_ {
position:absolute;
left:0px;
top:69px;
width:729px;
height:0px;
background-color:#000000;
}

#index-03_ {
position:absolute;
left:0px;
top:70px;
width:317px;
height:240px;
}

#index-04_ {
position:absolute;
left:317px;
top:70px;
width:412px;
height:253px;
}

#index-05_ {
position:absolute;
left:0px;
top:323px;
width:729px;
height:187px;
}

#website1-06_ {
position:absolute;
left:0px;
top:500px;
width:729px;
height:15px;
background-color:#000000;
}

#index-07_ {
position:absolute;
left:0px;
top:500px;
width:729px;
height:40px;
}

Pegasus-css

07-10-2008, 02:44 AM

See first post.

Pegasus-css

07-10-2008, 01:46 PM

Im confused, there is nothing on that site that helps with CSS and im not having trouble with HTML.

jcdevelopment

07-10-2008, 02:44 PM

ok, sorry i see you also want it centerd. I believe a few posts ago, i mentioned getting rid of the position:absolute. Try this and see if it works for you.

* {
margin:0px;
padding:0px;
}

#Table_01 {
margin:0 auto;
width:729px;
height:584px;
}

#index-01_ {
margin:0 auto;
width:729px;
height:69px;
}

#website1-02_ {
margin:0 auto;
width:729px;
height:0px;
background-color:#000000;
}

#index-03_ {
margin:0 auto;
width:317px;
height:240px;
}

#index-04_ {
margin:0 auto;
width:412px;
height:253px;
}

#index-05_ {
margin:0 auto;
width:729px;
height:187px;
}

#website1-06_ {
margin:0 auto;
width:729px;
height:15px;
background-color:#000000;
}

#index-07_ {
margin:0 auto;
width:729px;
height:40px;
}

They are already underneath each other anyways so you waont have to change anything. Hopefully that works.

Pegasus-css

07-10-2008, 09:23 PM

www.uriako.co.uk - thats what happens when i use your coding.

Im thinking using HTML tables for this would be a hell of alot easier, css to me never seems to work.

jcdevelopment

07-10-2008, 09:29 PM

ok, you arent getting what im trying to do. All elments in your CSS are positioned:absolute. That wont work, all background-elements must have

margin:0 auto;

added to them. If you have some elements positioned absolute and some with margin:auto they wont work. So you need to take out position:absolute.

Pegasus-css

07-10-2008, 10:28 PM

Right, i got it now thanks alot for your paitence JC, dont know what i did thats made the difference i think i'll put it down to me being tired last night.

Now 1 last thing, If i draw a new div layer and position it within the image are to apply text into how would i go about anchoring that text div layer to the place i put it? Im wanting the text box to stay on the page in the position i place it relative to the BG Image.

IE: If someone resizes the window the BG images stay centered and locked together so they display the full image correctly. I also want the same to happen with the text box. I dont want the Text Box to start moving around when the window is resized.

Hope you can understand.

I've tried adding a new div layer but no matter where i draw it its causing the images to move out of its way rather than being over the images.

jcdevelopment

07-10-2008, 10:38 PM

well, i think i do.

All you need to do is nest the div element

EX:

<div class="whateverBG">
<div class="txtBox"></div>
</div>

Then you would have your back ground image like so in CSS

.whateverBG {
margin:0 auto;
width:;
height:;
background-image:url(image.gif);
background-repeat:no-repeat;/*or whatever*/
}

Then you have your text box class
.txtBox {
padding-left:20px;
padding-top:20px;
}

Its nested so it will stay with the div its in and not move.

Pegasus-css

07-11-2008, 02:14 PM

Fantastic JC, thanks so much for all your help.

Okay your method sent me in the right direction but it didnt quite give me the result i was looking for however i can say i've managed to do something myself and got it working how i want it to. Its starting to come back to me now.

Now ive come to add my rollover link images into the black bar at the top and im met with a problem, the coding is fine, they work perfectly, its just the alignment.

www.uriako.co.uk (http://www.uriako.co.uk)

As you can see on the website the links are placed on top of each other rather than side by side. not quite sure on what to do to fix this.

HTML Page Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>website1</title>
<LINK REL=StyleSheet HREF="sitename.css" TYPE="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>
<body>
<div id="Table_01">
<div id="index-01_">
</div>
<div id="website1-02_">
<div class="link1nav">
<a href="http://www.uriako.co.uk/page1.html"><img src="link1.png" alt="Yoursite - Homepage" width="182" height="20" /></a>
</div>
<div class="link2nav">
<a href="http://www.uriako.co.uk/page2.html"><img src="link2.png" alt="Yoursite - Gallery" width="182" height="20" /></a>
</div>
<div class="link3nav">
<a href="http://www.uriako.co.uk/page3.html"><img src="link3.png" alt="Yoursite - Forums" width="182" height="20" /></a>
</div>
<div class="link4nav">
<a href="http://www.uriako.co.uk/page4.html"><img src="link4.png" alt="Yoursite - Contact Us" width="182" height="20" /></a>
</div>
</div>
<div id="index-03_">
<div id="text-box_01_"></div>
</div>
<div id="website1-06_">
</div>
<div id="index-05_">
</div>
</div>
</body>
</html>

Links CSS Coding

.link1nav
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(link1_over.png) no-repeat;
white-space: nowrap;
display: block;
width: 182px;
height: 20px;
top:0;
left:0;
margin: 0;
padding: 0;
}

.link1nav a
{
display: block;
color: #000000;
font-size: 11px;
width: 182px;
height: 20px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.link1nav img
{
width: 182px;
height: 20px;
border: 0
}

* html a:hover
{
visibility:visible
}

.link1nav a:hover img
{
visibility:hidden
}
.link2nav
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(link2_over.png) no-repeat;
white-space: nowrap;
display: block;
width: 182px;
height: 20px;
top:-20;
left:182;
margin: 0;
padding: 0;
}

.link2nav a
{
display: block;
color: #000000;
font-size: 11px;
width: 182px;
height: 20px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.link2nav img
{
width: 182px;
height: 20px;
border: 0
}

* html a:hover
{
visibility:visible
}

.link2nav a:hover img
{
visibility:hidden
}
.link3nav
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(link3_over.png) no-repeat;
white-space: nowrap;
display: block;
width: 182px;
height: 20px;
top:-40;
left:364;
margin: 0;
padding: 0;
}

.link3nav a
{
display: block;
color: #000000;
font-size: 11px;
width: 182px;
height: 20px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.link3nav img
{
width: 182px;
height: 20px;
border: 0
}

* html a:hover
{
visibility:visible
}

.link3nav a:hover img
{
visibility:hidden
}
.link4nav
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(link4_over.png) no-repeat;
white-space: nowrap;
display: block;
width: 182px;
height: 20px;
top:-60;
left:546;
margin: 0;
padding: 0;
}

.link4nav a
{
display: block;
color: #000000;
font-size: 11px;
width: 182px;
height: 20px;
display: block;
float: left;
color: black;
text-decoration: none;
}

.link4nav img
{
width: 182px;
height: 20px;
border: 0
}

* html a:hover
{
visibility:visible
}

.link4nav a:hover img
{
visibility:hidden
}

Pegasus-css

07-11-2008, 11:17 PM

Okay i've now got everything to line up, it seems that when you try to make rollover images in the link divs its causing them to stack ontop of each other.

So im not too sure on how to fix this :(

www.uriako.co.uk - as you can see it looks right, but links are inactive cos i dont know how to make them rollover images without causing the link images to stack ontop of each other instead of side by side.

jcdevelopment

07-11-2008, 11:25 PM

i think you are going at it all wrong with the navigation

http://www.seoconsultants.com/css/menus/tutorial/

Pegasus-css

07-12-2008, 04:08 PM

Well the site is to showcase a friends art drawings, so it has to look arty i guess. There wont be any drop down menu's it will just be 4 links i imagine maybe 5 leading to 4-5 different pages I want them to start Red then on mouseover change to black.

The font i use is custom so i cant just type Text in a Div cos only i will be able to see it.

abduraooft

07-12-2008, 04:22 PM

Hi Pegasus-css,
An unordered list <ul> is the easy and semantic way to create a list of links. To make them horizontal, a simple float is enough!, say
<ul id="nav">
<li><a href="#"><img src="link1.png" alt="Homepage" width="182" height="20" /></a></li>
<li><a href="#"><img src="link2.png" alt="Gallery" width="182" height="20" /></a></li>
<li><a href="#"><img src="link3.png" alt="Forums" width="182" height="20" /></a></li>
<li><a href="#"><img src="link4.png" alt="Contact Us" width="182" height="20" /></a></li>
</ul> No need to apply separate ids or class for each individual items.

#nav{
margin:0;
padding:0;
list-style:none;
}
#nav li{
float:left
}
Have a try with the above, but before, make sure that you have no divitis (http://csscreator.com/?q=divitis)

Pegasus-css

07-12-2008, 04:56 PM

I'll give it a try when i get time on sunday.

Thanks for the help.