...

View Full Version : Positioning Problems..



jonnybinthemix
05-02-2006, 07:13 PM
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:


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

VIPStephan
05-02-2006, 07:29 PM
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:


#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.

jonnybinthemix
05-02-2006, 07:48 PM
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...



<!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...


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

VIPStephan
05-02-2006, 08:05 PM
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:



<img id="logo" src="logo_main.jpg">



#logo {
width: ??px; /* put the width of the logo here */
position: absolute;
left: 50%;
margin-left: -??px; /* must be half of the width above */
}

jonnybinthemix
05-02-2006, 08:20 PM
hi mate,,

thanks for the reply

i have it online here...

Farting Fish (http://www.fartingfish.com/random.php)

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

VIPStephan
05-02-2006, 08:50 PM
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:


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

#logo {text-align: center;}

Arbitrator
05-02-2006, 09:11 PM
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.

jonnybinthemix
05-02-2006, 09:11 PM
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

Arbitrator
05-02-2006, 09:14 PM
Example: <div style="border: 2px dotted #666;"></div>

Just move the CSS to your stylesheet.

jonnybinthemix
05-02-2006, 09:51 PM
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:


#container {
border: 2px dotted #87888d;

however i would like to set the size of the border and put it in the centre?

VIPStephan
05-02-2006, 09:57 PM
#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.

Arbitrator
05-02-2006, 10:22 PM
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)

jonnybinthemix
05-03-2006, 12:12 AM
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 (http://www.fartingfish.com/random.php)

thanks again guys..

Jon

VIPStephan
05-03-2006, 12:31 AM
Clear the content and revert the float from the "Page 1" link:



#content {
clear: left;
...
}

#navlinks a {float: none;}

Oh and you have old closing tags from the table stuff at the bottom. Don't forget to remove those. ;)

jonnybinthemix
05-03-2006, 01:14 AM
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 :D:D
jon

VIPStephan
05-03-2006, 11:48 AM
Wow, man that wasn't an easy task, I have to admit. I don't know everything from memory and for this I had to try myself... :)
So the "Page1" link is overlapping the content and the outer border because of it's padding. For some reason this won't push the content outside of that element away. In IE, however, it is not even overlapping but just cutting the top and bottom (the wrapping div is doing this). For this reason and for a better order of your HTML I moved the <div id="navlinks"> out of the #content and under it (and I ask you to do the same):


<div id="content>
JavaScript blabla
<div id="navlinks"></div>
</div>
--------------------------------
<div id="content>
JavaScript blabla
</div>
<div id="navlinks"></div>

Then in your CSS you change the settings for the div that contains the navigational links from this:


#navlinks{ /*DIV containing the navigational links*/
width: 400px;
}

to this:


#navlinks{ /*DIV containing the navigational links*/
width: 400px;
padding: .4em 0; /* to equal the padding of the link(s) inside and make it display correctly */
}

You can play around with the .4em value a little bit. I just put it because I was tired of trying around and not knowing how you'd like it. It will be slightly different in IE and Fx (<- the official abbreviation of Firefox) but try yourself.

As for the image gallery... I don't know what the problem is in putting a right margin of 10px? It works fine when I play around with it. But I have to tell you that you have a lot of errors in your CSS such as forgotten units (e.g. px or em) and semicolons at the end of a rule like on your content:


#content {
clear: left;
width: 800px;
height: 550px;
}

Always use a semicolon at the end of a rule, even if it's just one line. You'll avoid errors when editing the stylesheet later on.
This said change your .slidshow rule from this:


.slideshow{ /*DIV containing each image*/
float: left;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10;
margin-left: auto;
}

to this:


.slideshow{ /*DIV containing each image*/
float: left;
margin: 10px 5px;
}

Firstly this is a lot shorter and less code and secondly that works just fine for the spacing of the images. The first value is for top and bottom margins and the second value for left and right margins. You can play around with these too. (you can also have/specify 4 values for top, right, bottom, and left margins... clockwise ;))

And there's a lot of space on the right so you could consider making the gallery 5x2... if you like. ;)

jonnybinthemix
05-03-2006, 02:11 PM
Brilliant mate, its really starting to take shape now :D

Instead of using the space on the right to make it 5x2 can i centre the 4x2 rather than have them aligned to the left?

Thanks

Jon

jonnybinthemix
05-03-2006, 02:39 PM
i figured it out! :)

i must be learning something! :D

I really happy with the layout now, i cant thank you enough for helping me :D

Theres still so much for me to do on it, but as far as layout goes, im well happy now :)

thanks again

Jon

VIPStephan
05-03-2006, 02:54 PM
Well, the images are floated to the left. Without they would be displayed underneath each other (because of the surrounding divs that the JavaScript is writing which are block elements) and I tried display: inline; but that doesn't quite have the desired effect.
So to get the desired effect change this line:


.slideshow{ /*DIV containing each image*/
float: left;
margin: 10px 5px;
}

to something like this:


margin: 10px 0 10px 30px;

and play around with the last value (here 30px), meaning to add one more and another one and check the look on the website until you have a value that makes the images kinda centered.
However, this is a very static solution. If you change the size of the thumbnails some time you need to change the margin value too, to keep it centered.

And IE has some problems with floated content. If you feel like you need it to look the same adjust for IE with conditional comments in the <head> section:


<!--[if lte IE 6]>
<style type="text/css>
.slideshow {margin: 10px 0 10px ??px;} /* ?? = adjusted value for IE up to Version 6 */
</style>
<![endif]-->


Oh well... ok, didn't notice that you have it while I was typing. :) So what is the solution now?

jonnybinthemix
05-03-2006, 03:16 PM
i realised that as you suggested yesterday the content is now in a 'content' div, so i reduced the width of the div, (so its not the same width as the container div) and then just added, margin auto to centre it...


#content {
clear: left;
width: 640px;
height: 300px;
margin-left: auto;
margin-right: auto;
}

had to play with the width until the div was small enough to centre the content, but it seems to work ok and look ok.

What you think?

VIPStephan
05-03-2006, 03:45 PM
Ah well... good point. :thumbsup: I should have thought of that... :rolleyes:

jonnybinthemix
05-03-2006, 03:54 PM
hehe

i must be learning! :D

I do however, have another small problem, its not about the layout though, its avout the JS, so not sure if i should start another thread in the JS forum but....

When you click on an image to load a larger version, there is a blank space to the right of an image, i was wondering if i can have an image description in there that is different for each image, but i will need an easy way of adding a description when i upload a photo, because eventually, i want a form where users can upload an image and add a description.

is this possible and is it ok to ask that in here or shall i switch to the JS section?

thanks

jon

VIPStephan
05-03-2006, 04:46 PM
[...] eventually, i want a form where users can upload an image and add a description.
Well, I guess JavaScript can't go that far. It has to be done by a server side script like PHP or ASP.NET. But I'm not yet good enough at those to tell you how to do it. (see? I don't know everything... yet :D)

jonnybinthemix
05-03-2006, 04:50 PM
lol

ok mate, no probs....

Well ill hop on over to the php forum and get some words of wizdom..

but thankyou very much for your help on this :D

Thanks

Jon



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum