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 24
  1. #1
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Positioning Problems..

    Hi guys,

    I am building a small site, mainly for practice as im learning....

    Basically i am building an online photo album.

    One of my main issues are:

    Poisitioning of the Main logo and the menu...

    I want the logo in the middle and approx 10 px from the top, i can do this by using position:absolute; and then setting the top and left, however the image then stays still and when the browser window is resized the site move around the image. I understand that maybe this is normal for position: absolute;

    So i decided that maybe position absolute is not what i need.

    So i tried the following:
    Code:
    margin-left: auto; margin-right: auto; margin-top: -175px;
    again this works ok, but i have some javascript and a php script that adds thumbnails of images onto the page from a directory. so when i add more images to folder, therefore adding more content to the page, it pushes the image off the top off the page, which means i have to go and change the margin-top again, and thats no good, because there may be 1 row of photos or 2 at any time depending on what i add and delete.

    Im confusing myself now, but maybe you guys understand it better than me

    Thanks in advance

    Jon

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Actually no, I'm not understanding what you mean. So you have the main logo after the image gallery and when you add content it is getting pushed down? Maybe put it on top in your HTML?

    Ok, there is a solution with absolute positioning and that works like this:

    Position the element 50% to the left and then subtract the left margin by half of the width of the element. In CSS this would look like this:
    Code:
    #element {
      width: 200px;
      position: absolute;
      left: 50%;
      margin-left: -100px; /* half of the width = centered */
    }
    Now the element is centered. This works also if you want to center it vertically, you just need to work with the height then.

  • #3
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    thanks for the quick reply,

    im not sure i understand your code why the width of 200px??

    Maybe it would be clearer if i paste the code ;)

    Im trying to put the logo at the top...


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <link rel="stylesheet" type="text/css" href="style.css" />
    
    </style>
    </head>
    <body>
    
    <table class="main" width="84%" height="550px" align="center">
    <tr>
    <td>
    
    <table border="0" style="margin-left:auto; margin-right:auto; margin-top:-45px">
    <tr>
    <td>
    <img src="logo_main.jpg">
    </td>
    </tr>
    </table>
    
    
    	<table class="element">
    	<tr>
    	<td>
      		<ul>
        		<li><a href="jon.php">Home</a></li>
        		<li><a href="#">Ice Skating</a></li>
        		<li><a href="#">Pool</a></li>
        		<li><a href="random.php">Random Images</a></li>
        		<li><a href="#">Videos</a></li>
    		<li><a href="#">Contact Me</a></li>
      		</ul>
    	</td>
    	</tr>
    	</table>
    
    
    <script src="http://www.fartingfish.com/gallery/getpics.php" 
    
    type="text/javascript"></script>
    
    <script type="text/javascript">
    
    
    var dimension="5x2" //Specify dimension of gallery (number of images shown)
    var imagepath="http://www.fartingfish.com/gallery/" //Absolute path to image directory.
    var href_target="new" //Enter target attribute of links, if applicable
    
    //Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)]
    var popupsetting=[1, "width=500px, height=400px, scrollbars, resizable"]
    
    //Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)]
    var descriptionprefix=[0, "image"]
    
    //Sort images by date? ("asc", "desc", or "")
    //"desc" for example causes the newest images to show up first in the gallery
    //"" disables this feature, so images are sorted by file name (default)
    var gsortorder="desc"
    
    //By default, each image hyperlinks to itself.
    //However, if you wish them to link to larger versions of themselves
    //Specify the directory in which the larger images are located
    //The file names of these large images should mirror those of the original
    //Enter a blank string ("") to disable this option
    var targetlinkdir="http://www.fartingfish.com/largegallery/"
    
    /////No need to edit beyond here///////////////////
    
    function sortbydate(a, b){ //Sort images function
    if (gsortorder=="asc") //sort by file date: older to newer
    return new Date(a[1])-new Date(b[1])
    else if (gsortorder=="desc") //sort by file date: newer to older
    return new Date(b[1])-new Date(a[1])
    }
    
    if (gsortorder=="asc" || gsortorder=="desc")
    galleryarray.sort(sortbydate)
    
    var totalslots=dimension.split("x")[0]*dimension.split("x")[1]
    
    function buildimage(i){
    var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : 
    
    imagepath+galleryarray[i][0]
    var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" onClick="return 
    
    popuplinkfunc(this)">'
    tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][0]+' 
    
    ['+galleryarray[i][1]+']" />'
    tempcontainer+='</a><br />'
    tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""
    return tempcontainer
    }
    
    function jumptopage(p){
    var startpoint=(p-1)*totalslots
    var y=1;
    for (i=0; i<totalslots; i++){
    document.getElementById("slide"+i).innerHTML=(typeof 
    
    galleryarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : ""
    }
    while(document.getElementById("navlink"+y)!=null){
    document.getElementById("navlink"+y).className=""
    y++
    }
    document.getElementById("navlink"+p).className="current"
    }
    
    var curimage=0
    for (y=0; y<dimension.split("x")[1]; y++){
    for (x=0; x<dimension.split("x")[0]; x++){
    if (curimage<galleryarray.length)
    document.write('<div id="slide'+curimage+'" 
    
    class="slideshow">'+buildimage(curimage)+'</div>')
    curimage++
    }
    document.write('<br style="clear: left" />')
    }
    
    function popuplinkfunc(imgsrc){
    if (popupsetting[0]==1){
    var popwin=open(imgsrc.href, "popwin", popupsetting[1])
    popwin.focus()
    return false
    }
    else
    return true
    }
    
    </script>
    
    <!--HTML code refers to the navigational links for the gallery-->
    
    <div id="navlinks">
    <script type="text/javascript">
    for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
    document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ')
    document.getElementById("navlink1").className="current"
    </script>
    </div></td>
    </tr>
    </table>
    <p class="copy">www.fartingfish.com by 'Jonny B' in the 'Mix'</p>
    
    </body>
    </html>
    and the css...

    Code:
    ul
    {
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
    }
    a
    {
    	float:left;
    	width:auto;
    	text-decoration:none;
    	color:black;
    	background-color:#c3d9f9;
    	border-right:1px dotted #87888d;
    	border-left:1px dotted #87888d;
    	border-top:1px dotted #87888d;
    	border-bottom:1px dotted #87888d;
    	padding-top: 0.2em;
    	padding-right: 0.6em;
    	padding-bottom: 0.2em;
    	padding-left: 0.6em;
    }
    a:hover {background-color:#848484}
    li {display:inline}
    
    
    table.main {
    	border-width: 2px 2px 2px 2px;
    	border-spacing: 2px;
    	border-style: dotted dotted dotted dotted;
    	border-color: #87888d #87888d #87888d #87888d;
    	border-collapse: separate;
    	background-color: white;
    }
    
    div.logomain {
    	top: 26px;
            margin-left:auto; 
    	margin-right:auto;
    	
    }
    
    p.copy {
    	position: absolute;
            top: 552px;
    	left: 390px;
    	color: #ced1dd;
    }
    
    div.menu {
    	border-collapse: separate;
    	position: absolute;
    	top: 577px;
    	left: 214px;
    	width: 387px;
    }
    .element {
      	width: 200px;
      	position: absolute;
      	left: 50%;
      	margin-left: -232px;
    
    
    
    
    }
    
    .slideshow{ /*DIV containing each image*/
    float: left;
    margin-top: 10px;
    margin-right: 10;
    margin-bottom: 5;
    }
    
    .slideshow img{ /*each image tag*/
    border: 0;
    width: 123px;
    height: 116px;
    }
    
    #navlinks{ /*DIV containing the navigational links*/
    width: 400px;
    
    }
    
    #navlinks a{ /*each navigational link*/
    margin-right: 8px;
    margin-bottom: 3px;
    font-size: 110%;
    }
    
    #navlinks a.current{ /*CSS for currently selected navigational link*/
    background-color: #c3d9f9;
    }
    Thanks again

    Jon

    EDIT:- The .element style etc, i just put in as you sugested above, havent tested yet...
    Last edited by jonnybinthemix; 05-02-2006 at 07:51 PM.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Do you have a live example (=page online) somewhere? That would be easier to tell you what to do... From what I see now you have nested tables which isn't good for laying out a page.
    But what I meant with the 200px was just an example... you put the width of the logo_main.jpg there and correct the margin-left value accordingly to the half of the width of the image:

    Code:
    <img id="logo" src="logo_main.jpg">
    Code:
    #logo {
      width: ??px; /* put the width of the logo here */
      position: absolute;
      left: 50%;
      margin-left: -??px; /* must be half of the width above */
    }

  • #5
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    hi mate,,

    thanks for the reply

    i have it online here...

    Farting Fish

    lol forgive the Domain name, but its original!

    at the moment, its all roughly where i want it, (need to sort the spacing out aound the thumbnails) but i had to faff about with it loads and if i delete one image, taking it down to 1 row of images, it moves the logo and the menu! lol

    see what you think...

    thanks

    jon

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    The moving issue could be because of your improper use of tables... 3 divs should be enough, do the exact same thing, and are much less code.

    Let's say you have one div with the logo image in it and another one with the link list and the third is for the images. Ok, all these three divs should be wrapped by a container div.
    These three divs will stick underneath each other by default. And since <img> elements are inline elements you can center the logo with text-align: center; in your CSS (applied to the first div where the logo is inside of course). And the top div shouldn't care what's happening after it.

    Code example:
    Code:
    <body>
      <div id="container">
        <div id="logo"><img ...></div>
        <div id="menu">
          <ul>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div id="content">
          put Javascript (or PHP or whatever) for image generator here
        </div>
      </div>
    </body>
    CSS snippet for the logo:
    Code:
    #logo {text-align: center;}

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by jonnybinthemix
    margin-left: auto; margin-right: auto; margin-top: -175px;
    Why are you using a negative margin for this? You should be using a positive margin to push the object away from the top shouldn't you? Negative margins push something in the opposite direction and thus margin-top brings the logo even closer to the top. First start by using * {margin: 0; padding: 0;} at the top of your stylesheet to kill all default margins and padding on everything so that you can set them manually as you please.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #8
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    Starting to make sence now

    Thanks very much for your help, but just one more quick question...

    i am just re writing the site to tidy it up and take your advice by getting rid of the tables...

    I would like to keep the dotted box that im putting the whole site in, so shall i keep this as a table or is there a simple way of putting a border to that dimension with CSS. I remember reading something about borders in CSS...

    Thanks again

    jon

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Example: <div style="border: 2px dotted #666;"></div>

    Just move the CSS to your stylesheet.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #10
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    if i put the entire site in a "container" div as VIPstephen suggested, which seems like a very good idea...

    i can make that div have a dotted border 2px etc?

    But what do i use to centre the div? before i have a table and just used align="center" but how would i do this in css?

    at the moment i have:
    Code:
    #container {
    border: 2px dotted #87888d;
    however i would like to set the size of the border and put it in the centre?

  • #11
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Code:
    #container {
      width: ??px;
      margin: 0 auto;
      border: 2px dotted #87888d;
    }
    A div is 100% wide by default so you have to set the width before you can center it. Then margin: 0 auto; means you have a top and bottom margin of zero and left and right margin of "auto". That's the way to center it.

  • #12
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    I see that your home page doesn't have a document type declaration (DTD) at the top like your random.php page does. Keep in mind that without an appropriate DTD on the page, Internet Explorer 6 will go into quirks mode and margin: 0 auto; won't work. It only works when IE is in standards mode.

    Resource: http://hsivonen.iki.fi/doctype/ (currently offline)
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #13
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    ahhh how much sense its all making now!

    im so gratefull to you guys for stickin with me through my confused moments!!

    everything youve mentioned above works brilliant, but for some reason now one picture wants to sit up the top with the menu, also the page 1 goes below the border, apart from that everything is good

    Maybe you coul have a look let me know what you think....

    random

    thanks again guys..

    Jon

  • #14
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,471
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Clear the content and revert the float from the "Page 1" link:

    Code:
    #content {
      clear: left;
      ...
    }
    
    #navlinks a {float: none;}
    Edit: Oh and you have old closing tags from the table stuff at the bottom. Don't forget to remove those.

  • #15
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    is there anything you dont know! lol

    that worked mate, however the page1 is still kinda hanging off the edge a little,

    also, id like to space the images out aprox 10px, i set the margin-right: 10px, but it doesent apear to do anything, im sure it worked before! lol

    maybe if i kept the images as 4x2 on a page and centred the set of images in the middle and had the page 1 page 2 etc below the images by 20px.

    I got some really good ideas in my head, but everytime i try to get them to work it just.... doesent! lol

    I think the problem is that i dident write the code for the images, it was a script, so i dont fully understand the code behind it.

    Thanks yet again
    jon


  •  
    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
    •