Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Aligning Divs - Problem

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



    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

    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

    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;
    }
    Last edited by Pegasus-css; 07-10-2008 at 03:50 AM.

  • #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Do you have a URL also that you could post please?

    Regards,

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sent it to you in a PM with explanation as to why its in a PM.

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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

    Code:
    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.

  • #5
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks, i'll give it a go.

  • #6
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    sorry, make a habit of adding this to your CSS no matter what

    Code:
    * {
    padding:0px;
    margin:0px;
    }
    Resets all elements so no funny gaps!

  • #7
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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.

  • #9
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Pegasus-css; 07-10-2008 at 01:58 AM.

  • #10
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    i got this as close as i could... it looks like a few images are off

    Code:
    #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;
    }

  • #11
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    See first post.
    Last edited by Pegasus-css; 07-10-2008 at 03:52 AM.

  • #12
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Im confused, there is nothing on that site that helps with CSS and im not having trouble with HTML.

  • #13
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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.

    Code:
    * {
    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.

  • #14
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #15
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    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

    Code:
    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •