The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> Im very new, could you help me with this please?, Possible table / background image related question
spadez
post Sep 30 2006, 10:16 AM
Post #1


Newbie
*

Group: Members
Posts: 16
Joined: 30-September 06
Member No.: 295
Here is what i currently have:

QUOTE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<CENTER>
<head>
<title>The Hive MOTD</title>
</head>
<body>
<body background="http://www.hiven.net/files/background.jpg">
<div style=" _position: absolute; _top: 50%;display: table-cell; vertical-align: middle;">
<b><FONT FACE="arial">Loading</FONT></b>&nbsp;&nbsp;<img src="http://www.hiven.net/forums/images/misc/progress.gif" />
</div>a
</body>
</CENTER>
</html>


What i am after is the loading text and image in a small table with a white background and a black 1px boarder. Then this box containing the text and image to be at the very center of the screen, both vertically and horizontally. At the moment this is what i have got, can anyone help me out with this? It would be really appreciated, it has taken me an hour and a half just to get to this stage sleep.gif

James

p.s about the box im after that would contain the loading text and image with the white bg and black boarder, is that easier to do using a backgound image or using a table?

This post has been edited by spadez: Sep 30 2006, 10:18 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spadez
post Sep 30 2006, 10:21 AM
Post #2


Newbie
*

Group: Members
Posts: 16
Joined: 30-September 06
Member No.: 295
Kind of like this (see attachment)


Attached thumbnail(s)
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Sep 30 2006, 10:45 AM
Post #3


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16
Hi James,
Well you won't see a black border when you have a black background. And if you did want a black background it's better to just specify that as a background color than load an image of black as you are now.

Secondly you don't have a table, if that's what you want.

And all of this is easier to accomplish with CSS. You have something resembling an in-line style at the moment although it doesn't look right.

Lastly validate your page - you have 2 body tags at the moment.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spadez
post Sep 30 2006, 11:06 AM
Post #4


Newbie
*

Group: Members
Posts: 16
Joined: 30-September 06
Member No.: 295
The image above was made in paint, this is what i have at the moment:

http://www.hiven.net/files/motd2.txt

All i want to do it place a small image just behind the text and image so it shows up like above. Failing that i could put the image and text in a white box to give it a similar effect.

Can you tell me exactly what i need to be looking at in order to accomplish this?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Sep 30 2006, 04:35 PM
Post #5


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16
HTML
<body bgcolor="black">
<CENTER>
<table bgcolor="white">
<tr>
<td>
<b><FONT FACE="arial">Loading</FONT></b>  <img src="http://www.hiven.net/forums/images/misc/progress.gif">
</td>
</tr>
</table>
</CENTER>


So center a table with your stuff in it. Move it down the page with page breaks or spacer.gifs. It's not really recommended and not too pretty and you can't really control the vertical positioning this way. Or forget the table and make the text and background part of the graphic image so you only have one element on the page.

To center it exactly vetically and horizontally you need to use CSS, click the link posted earlier to learn about CSS.
When you're ready here's how to exactly center the box http://www.wpdfd.com/editorial/thebox/deadcentre4.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spadez
post Oct 1 2006, 09:39 AM
Post #6


Newbie
*

Group: Members
Posts: 16
Joined: 30-September 06
Member No.: 295
Right, ive got this far:

www.hiven.net/files/motd4.txt

which is using this code:

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>The Hive MOTD</title>
</head>
<body background="http://www.hiven.net/files/background.jpg">
<CENTER>
<table bgcolor="white">
<tr>
<td>
<img src="http://www.hiven.net/files/loading.gif" /></div>
</td>
</tr>
</table>
</CENTER>
</body>
</html>


Can you please explain what i would do to vertically center it all? I did try but it only vertically centered the image not the table around it, that was left at the top.

Sorry to be a newbie.

This post has been edited by spadez: Oct 1 2006, 09:40 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
jimlongo
post Oct 1 2006, 10:25 AM
Post #7


This is My Life
*******

Group: Members
Posts: 1,128
Joined: 24-August 06
From: t-dot
Member No.: 16
No need to be sorry, although I thinking i'm giving you too much fish and not enough fishing lessons. smile.gif

With this type of layout you can't center the table vertically. For that you need to use CSS for which a link has been given earlier. With this table type layout all you can do is put page breaks or spacer.gifs to move the table down the page.

QUOTE
www.hiven.net/files/motd4.txt

Why do you have a .txt extension on this? Change it to .html if you want it to display as such in a web browser. As text it is just going to display as that - the source text. For this forum it would make it easier if you add http:// to the front of it so that it would become a clickable link.

And why do you continue to display a background image that is a just a solid color? Even though it is only 1 pixel of black it is faster (better) to display it as a bgcolor.

Then you should also start to validate your code as you learn. There are links to HTML validators at the top of these pages. You'd see that you have an ending div tag for no reason, and you shouldn't be ending the image tag with a forward slash.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spadez
post Oct 1 2006, 01:49 PM
Post #8


Newbie
*

Group: Members
Posts: 16
Joined: 30-September 06
Member No.: 295
Im using .txt because this is for a CounterSrike motd which needs to be in this format, it displays the information just as it would if the extension is .html, internet explorer also does this.

I finally got it to work, the code may be a little messy, ill put it through the validator now but it works!

This is the code:

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>Dead Centre</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;
position: absolute;
top: 50%;
left: 50%;
display: table-cell;
visibility: visible
border-width: 1px;
border-color: black;
}

.bodytext
{
font-size: 14px
}

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

a:link, a:visited
{
color: #06f;
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
}


--></style>
</head>

<body>
<div id="content">
<div class="bodytext">
<img src="http://www.hiven.net/files/loading.gif" />
</div>
</div>

</body>

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
spadez
post Oct 1 2006, 02:27 PM
Post #9


Newbie
*

Group: Members
Posts: 16
Joined: 30-September 06
Member No.: 295
Without trying to take the *beep*, can you help me turn that white square content box into a rounded box. I round out that this is the code i need:

CSS
CODE

/* set millions of background images */
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }


Html
CODE

<div class="rbroundbox">
    <div class="rbtop"><div></div></div>
        <div class="rbcontent">
            <p>Lorem ipsum dolor sit amet,
            consectetuer adipiscing elit. Duis
            ornare ultricies libero. Donec
            fringilla, eros at dapibus fermentum,
            tellus tellus auctor erat, vitae porta
            magna libero sed libero. Mauris sed leo.
            Aliquam aliquam. Maecenas vestibulum.</p>
        </div><!-- /rbcontent -->
    <div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->


I have a question though, first off im confused how they have divided the code into CSS and html. Do i put the image in the html using the css class and then put the css class info above it like i have with the content class?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 23rd April 2024 - 09:44 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC