PDA

View Full Version : Images Images Images Images Images

Seth
10-04-2005, 09:08 PM
I'm having problems with placing my image in a exact place on this template I downloaded.It is 100% XHTML 1.0 Strict and CSS .When I alter it by putting my image into a exact position that I want,it messes up the structure of the page.

When I set the position in css to "absolute" it stops altering the structure but the image moves to a completely different places when i change the size of the screen .

Look at the code i used: css

/*computer Stuff*/
#computer
{
width: 92px;
height: 92px;
position: absolute;
left: 735px;
top: 185px;
font-size:10px;
font-family:verdana,arial,monospace;
weight:bold;
}

and here is the code i used in html:

</div>
<div id="computer">
<img src="images.jpg" alt="sidis the king" />
<p style="color: black">I hope someone can help me with my technical problem</p></div>

This is just the code that I added to the template, not the whole code.
Any help would be greatly appreciated.


Seth
Seth
10-04-2005, 09:12 PM
Hmmm ....maybe I should show all of the code. If you want me to show you all the code , just ask.

Seth
Seth
10-04-2005, 09:41 PM
lol... I might as well just show you the code, why wait

First up is the :Html

< "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
@import "main.css";
</style>

<!-->
<style>
#content
{
margin-top: -5px;
}

ul.heading_info
{
margin-left: 5px;
}

hr.hr
{
margin-top: -5px;
}

ul.heading_info
{
margin-top: -5px;
}

</style>
<![endif]-->

</head>

<body>

<div id="outline">
<div id="header">
<h1></h1>
<h2></h2> </div>
<div id="computer">
<img src="images.jpg"/>
<p style="color: black"></p>

</div>



<table id="inner">
<tr>
<td>
<div id="navigation">
<br />
<ul>
<li id="current_tab"></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</div>

<div id="content">
<h1></h1>
<h2></h2>
<p> <a href=""></a></p>

<h2>SUPPORT ZYMIC</h2>

<p></p>

<p>Example: Template Designed by <a href="http://zymic.com">www.zymic.com</a></p>

<p></p>

<p></p>

<p> <a href="mailto:templates@zymic.com"></a> </p>

<p></p>
</div>
</td>


</tr>
</table>

<p><a href="http://zymic.com/"></a> - 100% <a href="http://jigsaw.w3.org/css-validator/check/referer"></a> &amp; <a href="http://validator.w3.org/check?uri=referer"></a></p>
</div>

</body>
</html>



[I]And now were on to the :css


body
{
background-color: #efebef;
}
div
{
margin: 0px;
font-size: 10px;
font-family: Verdana, Arial, monospace;
}

/*computer Stuff*/
#computer
{

width: 92px;
height: 92px;
position: absolute;
left: 735px;
top: 185px;
font-size:10px;
font-family:verdana,arial,monospace;
weight:bold;
}
/*Outline Stuff*/
#outline
{
margin: 20px auto 0px auto;
padding: 1px 10px 0px 10px;
width: 708px;
height: auto;
background-color: #9c0000;
}

#outline p
{
margin: 0;
padding: 0;
color: #fff;
text-align: center;
}

#outline a:link, #outline a:visited, #outline a:hover, #outline a:active
{
color: #fff;
text-decoration: none;
font-weight: bold;
}

/*Header Stuff*/
#header
{
margin-top: 10px;
width: 708px;
height: 101px;
background-image: url("./header.gif");
}

#header h1
{
font-size: 18px;
font-family: Arial, Verdana, sans-serif;
position: relative;
left: 40px;
top: 5px;
}

#header h2
{
font-size: 14px;
font-family: Arial, Verdana, sans-serif;
font-style: italic;
font-weight: bold;
position: relative;
left: 70px;
top: -10px;
}


/*Inner Stuff*/
#inner
{
margin-top: 10px;
margin-left: 1px;
width: 705px;
height: auto;
padding-bottom: 1px;
background-color: #f7f7f7;
}

/*Navigation Stuff*/
#navigation
{
width: auto;
height: 23px;
background-color: transparent;
margin: 0px;
padding: 0px;
}

#navigation ul
{
margin: 0px 0px 0px 10px;
padding: 0px;
position: relative;
top: 5px;
}

#navigation li
{
margin-left: 10px;
background-color: #f7f7f7;
list-style: none;
font-size: 15px;
font-family: Verdana, Arial, sans-serif;
line-height: 20px;
color: #9c0000;
letter-spacing: -1px;
text-align: center;
float: left;
}

#current_tab
{
width: 95px;
height: 23px;
display: block;
background: url("./current_tab.gif") transparent no-repeat;
border: 0px;
border-bottom: 5px solid #ffffff;
font-weight: bold;
}

#navigation a:link, #navigation a:visited
{
width: 95px;
height: 22px;
display: block;
border: 1px solid #bdc3bd;
font-size: 13px;
font-family: Verdana, Arial, sans-serif;
color: #bdc3bd;
text-decoration: none;
letter-spacing: -1px;
}

#navigation a:hover, #navigation a:active
{
color: #585b58;
}

/*Content Stuff*/
#content
{
width: 545px;
height: auto;
margin: 10px;
padding: 0px;
background-color: #fffbf7;
border: 1px solid #bdc3bd;
clear: both;
}

#content h1
{
margin: 10px 0px 0px 0px;
padding: 0px;
color: #9c0000;
font-size: 12px;
text-align: center;
}

#content h2
{
margin: 10px 0px -5px 0px;
text-indent: 10px;
color: #ffffff;
font-size: 10px;
font-family: Verdana, Arial, sans-serif;
background-color: #9c0000;
}

#content p
{
margin: 10px;
color: #000000;
text-align: left;
}

#content a:link, #content a:visited
{
color: #9c0000;
font-weight: bold;
}

#content a:hover, #content a:active
{
text-decoration: underline;
}

Ok, now all need is a clever person to show me my flaws.




Seth
dolce shanti
10-04-2005, 10:09 PM
Replace position:absolute; with position:relative;

See if that works :)
Seth
10-04-2005, 11:06 PM
When I replace absolute with relative, for some reason a large space appears between the header and the content. I'm not sure how to solve this Shanti.
dolce shanti
10-04-2005, 11:13 PM
Could you please show the actual page? That may be easier.
mzhao
10-05-2005, 12:13 AM
It would help a lot if we had the images and text content to work with :)
Seth
10-05-2005, 02:16 AM
Thanks singingshanti and mzhao for your replys. However, I have a newb question to ask ,how do i show you the actual page?
I mean I downloaded it , will i have give you the link to where i got it, or is there some other way to show you the actual page.

Thanks again,

Seth
dolce shanti
10-05-2005, 02:35 AM
You have to have hosting. Geocities.com has free hosting...sign up, and then upload your files to the site. Once finished, you can send the link to us.

God bless!
mzhao
10-05-2005, 04:18 AM
One method would be to compress all the pages, images, etc. into a ZIP archive, upload it somewhere (like Geocities, as singingshanti said), and post the link.
Seth
10-05-2005, 06:59 PM
LOL.... I figured it out by my self after spending a few hours testing the code in various ways, and I learned alot about css doing it.

Thanks for all the help singingshanti and mzhao , hope you have a nice day.

God bless!!

Seth
dolce shanti
10-05-2005, 07:24 PM
Glad you could figure out the coding on your own! I think that's a wonderful way to learn :)

God bless!