The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image Spacing
spadez
post Oct 6 2006, 11:54 AM
Post #1


Newbie
*

Group: Members
Posts: 16
Joined: 30-September 06
Member No.: 295



I have a page which i am expecting to be viewed in a window of different sizes (it will be an ingame motd and different res = different window viewing size). I have 5 images in a line and i am looking for the images to have an equal spacing which varies depending on how large the window it is being viewed in. At the moment it is center aligned but it looks bad because there is a big gap on both sides, it would be better if it went the whole way across the window with spacing inbetween the images so that it goes the full way across what ever the window size its being viewed in.

Small Window:
[image1][image2][image3][image4]

Larger Window:
[image1]__[image2]__[image3]__[image4]

Large Window:
[image1]____[image2]____[image3]____[image4]

I hope that makes sense. Can you tell me what code i am looking for to do this?

p.s In this case an _ means a space

This post has been edited by spadez: Oct 6 2006, 11:56 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spadez
post Oct 6 2006, 12:23 PM
Post #2


Newbie
*

Group: Members
Posts: 16
Joined: 30-September 06
Member No.: 295



Also, for some reason when i added a linked image to my site it put a blue boarder around the image and once i had clicked on the link it turned purple. I cant see anything about that in my code so would you mind please telling me how i would go about removing it?

Thanks so much for the help guys, i really appreciate it.

James
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 6 2006, 12:27 PM
Post #3


.
********

Group: WDG Moderators
Posts: 7,966
Joined: 10-August 06
Member No.: 7



How about:

CODE
div {
width: 20%;
float: left;
text-align: center;
}

<div><img src="dog.jpg" width="100" height="50" alt=""></div>
<div><img src="dog.jpg" width="100" height="50" alt=""></div>
<div><img src="dog.jpg" width="100" height="50" alt=""></div>
<div><img src="dog.jpg" width="100" height="50" alt=""></div>
<div><img src="dog.jpg" width="100" height="50" alt=""></div>


In narrow windows the images cover each other in Opera and firefox, but in IE6 they linebreak.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 6 2006, 12:29 PM
Post #4


.
********

Group: WDG Moderators
Posts: 7,966
Joined: 10-August 06
Member No.: 7



QUOTE(spadez @ Oct 6 2006, 07:23 PM) *

Also, for some reason when i added a linked image to my site it put a blue boarder around the image and once i had clicked on the link it turned purple. I cant see anything about that in my code so would you mind please telling me how i would go about removing it?


It's the default link colors of your browser. See the FAQ: http://htmlhelp.com/faq/html/images.html#no-border and http://htmlhelp.com/faq/html/links.html#link-2color
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spadez
post Oct 6 2006, 05:06 PM
Post #5


Newbie
*

Group: Members
Posts: 16
Joined: 30-September 06
Member No.: 295



Ok, here is my huge post to get all of my many problems sorted in one post without keeping to come back and bug you. Here is my current attempt:

IPB Image

Firstly, the white / grey gradient bar has a grey line at the bottom. This is because the actual image is 20px high but on my site for some reason it is something like 24 px and so the single grey line at the bottom is being repeated to fill up the extra 4 px. It wasnt doing this before but i must of changed something to make it do this (and yes, the images on that bar are only 20px high too).

Secondly, there is a big gap between the bottom of the the grey / white gradient bar and the top of the latest posts block, can you tell me what is causing this and how i would go about getting rid of it.

Thirdly, regarding the images and their separation:

QUOTE
I have a page which i am expecting to be viewed in a window of different sizes (it will be an ingame motd and different res = different window viewing size). I have 5 images in a line and i am looking for the images to have an equal spacing which varies depending on how large the window it is being viewed in. At the moment it is center aligned but it looks bad because there is a big gap on both sides, it would be better if it went the whole way across the window with spacing inbetween the images so that it goes the full way across what ever the window size its being viewed in.

Small Window:
[image1][image2][image3][image4]

Larger Window:
[image1]__[image2]__[image3]__[image4]

Large Window:
[image1]____[image2]____[image3]____[image4]

I hope that makes sense. Can you tell me what code i am looking for to do this?


I tried the code you told me about but it just broke everything down into lots of lines, i dont know what i did wrong.

This is my code as it currently stands:

QUOTE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>MOTD</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-image:url('http://www.hiven.net/files/background.jpg')
}

#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: #FFFFFF;
display: table-cell;
visibility: visible;
position: absolute;
border-width: 1px;
border-color: black;

}

#content2
{
font-family: Verdana, Geneva, Arial, sans-serif;
position: absolute;
color: black;

}

.bodytext
{
font-size: 10px;
color: #000000
}

.headline
{
font-weight: bold;
font-size: 24px
}

a:link, a:visited
{
color: #000000;
text-decoration: none
}

a:hover
{
color: red;
text-decoration: none
}

.captions
{
color: white;
font-size: 10px;
line-height: 14px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: left
}

#header { background: #000000 url(http://www.hiven.net/forums/images/gradients/gradient_tcat.gif) position: absolute;
height: 25px }

#header2 { background: #000000 url(http://www.hiven.net/files/header2.gif) position: absolute;
height: 18px }
</style>
</head>
<body>
<div id="header"><img src="http://www.hiven.net/files/motdhg.gif" /></div>
<div id="header2"><a href="http://www.hiven.net/files/motd2.php"><img src="http://www.hiven.net/files/home.gif" border="0"></a>
<a href="http://www.hiven.net/files/stats.php"><img src="http://www.hiven.net/files/stats.gif" border="0"></a><a href="http://www.hiven.net/files/ranks.php"><img src="http://www.hiven.net/files/ranks.gif" border="0"></a><a href="http://www.hiven.net/files/music.php"><img src="http://www.hiven.net/files/music.gif" border="0"></a><a href="http://www.hiven.net/files/rules.php"><img src="http://www.hiven.net/files/rules.gif" border="0"></a><a href="http://www.hiven.net/files/apply.php"><img src="http://www.hiven.net/files/apply.gif" border="0"></a></div><div id="content2"></div>
<br />
<br />
<div id="content">
<div class="bodytext">
<B><center>LATEST POSTS</center></B>
<?php
$db_host = "****"; // Change this if your MySQL database host is different.
$db_name = "****"; // Change this to the name of your database.
$db_user = "*****"; // Change this to your database username.
$db_pw = "******"; // Change this to your database password.
$db_prefix = "***"; //Change this to the prefix of the forum database.

$forum_url = "http://www.hiven.net/forums"; // Change this to reflect to your forum's URL.
$limit = "10"; // Number of posts displayed.
$txtlimit = "22"; // This is the character limit.

// Connecting to your database
mysql_connect($db_host, $db_user, $db_pw)
OR die ("Cannot connect to your database");
mysql_select_db($db_name) OR die("Cannot connect to your database");

if ($limit) {
$limited = "LIMIT $limit";
}

$thread_sql = mysql_query("select threadid,title,lastpost,firstpostid from $db_prefix thread where visible=1 $wheresql and open=1 $forumid order by lastpost desc $limited");

while($thread_get = mysql_fetch_array($thread_sql))
{
$lastpost = $thread_get['lastpost'];
$tid = $thread_get['threadid'];
$psql = mysql_query("SELECT postid from $db_prefix post where threadid=$tid order by postid desc");
$getp = mysql_fetch_array($psql);
$pid = $getp['postid'];
$title = $thread_get['title'];
$title = substr($title,0,$txtlimit);

echo "<li class=\"item\"><a href=\"$forum_url/showthread.php?p=$pid#post$pid\"><span>$title</span></a></li>";
}
?>
</div>
</div>
</body>
</html>


Please please please help me with this.

James

This post has been edited by spadez: Oct 6 2006, 05:07 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 6 2006, 05:27 PM
Post #6


.
********

Group: WDG Moderators
Posts: 7,966
Joined: 10-August 06
Member No.: 7



QUOTE(spadez @ Oct 7 2006, 12:06 AM) *

I tried the code you told me about but it just broke everything down into lots of lines, i dont know what i did wrong.


I used the DIV element as a selector, but on a real web page you probably want to wrap it in a container DIV with a special CLASS or ID to avoid conflicts with other DIV elements. You may also want to clear this container so its height doesn't collapse (if you don't want that to happen).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 15th December 2018 - 04:36 AM