 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
Tami
Joined: 07 Aug 2008
Posts: 3
|
 Posted: Thu Aug 07, 2008 6:36 am Image alignmet help needed |
 |
|
|
I've very new to html and i'm having a problem with aligning some images on my website. I'm trying to place images on top of each other, but there is a huge gap inbetween the text and first image, and again with the second image. Here's the link so you can see what I'm talking about. http://ryancano.com/family.html
Here's the code
<P align=center><FONT face="Comic Sans MS"><U>Meet the family</U></FONT> </P> <P align=center><FONT face="Comic Sans MS">Ryan Mark Patrick Cano was born to Lisa and Phil on 30th December 2007. He has three older sisters, Ashlea aged 10, Kacie aged 7, and Jaime aged 5.</FONT><IMG src="http://ryancano.com/myPictures/lisaphilryan.jpg"></P> <P align=center><IMG src="http://ryancano.com/myPictures/girls.jpg"></P> <P align=center><IMG src="http://ryancano.com/myPictures/banner4.jpg"></P> <P align=center><IMG src="http://ryancano.com/myPictures/banner3.jpg"></P> <P align=center><IMG src="http://ryancano.com/myPictures/banner2.jpg"></P> <P align=center><IMG src="http://ryancano.com/myPictures/ban1.jpg"></P> <P align=center></P> <P align=center></P>
Can you see where I'm going wrong. Please help, I want this site to be perfect for my friend. |
|
sticks464
Joined: 31 Dec 2006
Posts: 1110
|
| Posted: Thu Aug 07, 2008 1:43 pm |
|
|
|
| Several problems, your images are too wide to fit the container they're in, plus there is a lot of bad coding and too many nested div's. I'll work on fixing the layout with the existing images. |
|
Tami
Joined: 07 Aug 2008
Posts: 3
|
| Posted: Thu Aug 07, 2008 1:49 pm |
|
|
|
| Thank you so much! |
|
sticks464
Joined: 31 Dec 2006
Posts: 1110
|
| Posted: Thu Aug 07, 2008 5:03 pm |
|
|
|
Here's updated css
| Code: |
* {
margin: 0;
padding: 0;
}
body {
background: #adc778;
font: 1em Trebuchet MS, Arial, Sans Serif;
padding:10px 0;
}
#container {
width:845px; /* any width including 100% will work */
background: #d4e3b6;
color: inherit;
margin:0 auto; /* remove if 100% width */
border: 1px solid #000;
}
#header {
width: 100%;
height: 34px;
background: #4d7300 url('../myPictures/ryanbanner2.jpg')no-repeat top right;
}
#content {/* use for left sidebar */
inherit;
float: right;
margin: 0 0 0 -210px; /* adjust margin if borders added */
width: 100%;
}
#content .wrapper {
margin: 0 0 0 210px;
overflow: hidden;
padding: 10px; /* optional, feel free to remove */
}
#sidebar {
color: inherit;
float: left;
width: 198px;
margin-left: 10px;
}
/* content styles */
#footer {
clear: both;
border-top: 1px solid #000;
background: #4d7300;
padding: 10px 0;
}
#footer p {
text-align: center;
padding-bottom: 5px;
color: #fff;
font-size: 80%;
}
#sBar {text-align: center; margin: 0; margin-bottom: 10px; padding: 5px 0px; width: 728px; background-color: #fff; border: 1px solid #dfdfdf;}
#sBar li {display: inline; }
#sBar li a, #sBar li a:visited {font: bold 11px tahoma,arial; text-decoration: underline; color: #004891; margin: 0px 15px;}
/* Top Horizontal Navigation */
#siteNavigation{
width: 100%;
height:23px;
border: solid #2e4500;
border-width: 1px 0px;
background: #698f1d;
}
#menu {
list-style: none;
}
#menu li {
float: left;
margin: 0;
padding: 0;
font-size: .8em;
}
#menu li a {
float: left;
display: block;
margin: 0;
padding: 4px 20px;
background-color: #698f1d;
color: #f7ffe6;
text-decoration: none;
font-weight: bold;
border-right: 1px solid #1a1a1a;
}
#menu li a:hover, #menu li a.active {
background-color: #adc778;
color: #0a0b0a;
}
/* sidebar */
#sidebar img {
border: 1px solid #000;
padding: 8px;
background: #adc778;
margin: 20px 0;
}
/* sidebar menu */
#sidemenu {
background: #adc778;
border: 1px solid #000;
width: 196px;
margin-top: 20px;
padding: 20px 0;
}
#sidemenu a, #sidemenu a:visited {
text-align: center;
color: #000;
display: block;
height: 2em;
text-decoration: underline
}
#sidemenu a:hover {color:#fff;}
/* main content */
#content .wrapper p {
color: #252723;
text-align: center;
font-family: Comic Sans MS;
margin: 10px 0;
}
#content .wrapper p span {
text-decoration: underline;
font-weight: bold;
}
/* bottom menu */
.bravenet {
width: 100px;
margin: 0 auto;
} |
HTML
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="HLH, Ryan Cano, Tami Williamson" />
<meta name="description" content="" />
<meta name="author" content="Tami Williamson" />
<title> Ryan Cano - A Bravenet.com Hosted Site</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" align="center" style="width: 754px; margin: 0 auto;">
<tr>
<td align="center" valign="top">
<ul id="sBar">
<li><a href="http://www.bravenet.com/webhosting/" target="_new">Web Hosting</a></li>
<li><a href="http://www.bravenet.com/webtools/guestbook/" target="_new">Guestbooks</a></li>
<li><a href="http://www.bravenet.com/webtools/counter/" target="_new">Hit Counter</a></li>
<li><a href="http://www.bravenet.com/webtools/forum/" target="_new">Forums</a></li>
<li><a href="http://www.bravenet.com/webtools/journal/" target="_new">Blogs</a></li>
<li><a href="http://www.bravenet.com/webtools/elist/" target="_new">Mailing List</a></li>
<li><a href="http://www.bravenet.com/webhosting/" target="_new">Free Web Hosting</a></li>
</ul>
</td>
</tr>
<tr>
<td align="center" valign="top">
<div align="center" style="z-index: 9000; margin-bottom: 10px;">
<script language="javascript" type="text/javascript" src="http://mercury.bravenet.com/rover/a?dbfile=SPONSORBAR_DB&serv=hosting-sites"></script><noscript><iframe src="http://mercury.bravenet.com/rover/a?dbfile=SPONSORBAR_DB&js=false&serv=hosting-sites" width="754" height="90" allowTransparency="true" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"><img src="http://mercury.bravenet.com/rover/d?dbfile=SPONSORBAR_DB&serv=hosting-sites" alt="" border="0"></iframe></noscript>
<div style="clear: both;"></div>
</div>
</td>
</tr>
</table>
<div id="container">
<!--header content goes here -->
<div id="header"></div>
<div id="siteNavigation">
<!--top menu goes here -->
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="fundraising.html">Fundraising</a></li>
<li><a href="hlh.html">What is HLH?</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="photo.html">Photo gallery</a></li>
<li><a href="ryansstory.html">Ryan's story</a></li>
<li><a href="family.html" class="active">Meet the family</a></li>
</ul>
</div>
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<p><span>Meet the family</span></p>
<p>Ryan Mark Patrick Cano was born to Lisa and Phil on 30th December 2007. He has three older sisters, Ashlea aged 10, Kacie aged 7, and Jaime aged 5.</p>
<img src="http://ryancano.com/myPictures/lisaphilryan.jpg" />
<img src="http://ryancano.com/myPictures/girls.jpg" />
<img src="http://ryancano.com/myPictures/banner4.jpg" />
<img src="http://ryancano.com/myPictures/banner3.jpg" />
<img src="http://ryancano.com/myPictures/banner2.jpg" />
<img src="http://ryancano.com/myPictures/ban1.jpg" />
</div>
</div>
<div id="sidebar">
<!--sidebar content goes here -->
<div id="sidemenu">
<a href="http://www.ryancano.com/">Home</a>
<a href="http://www.ryancano.com/fundraising.html">Fundraising</a>
<a href="http://www.ryancano.com/hlh.html">What is HLH?</a>
<a href="http://www.ryancano.com/links.html">Links</a>
<a href="http://pub18.bravenet.com/photocenter/album.php?usernum=1533988346">Photo gallery</a>
<a href="http://ryancano.com/family.html">Meet the family</a>
<a href="http://www.ryancano.com/ryansstory.html">Ryan's story</a>
<a href="http://williamsoncano.bravejournal.com/">Blog</a>
<a href="http://pub18.bravenet.com/guestbook/1533988346">Ryan's guestbook</a>
</div>
<img src="http://ryancano.com/myPictures/ryanpic1.jpg" width="180">
</div>
<!--<div class="clearer"></div>-->
<!--footer content goes here -->
<div id="footer">
<p>Copyright © 2008 tami williamson. All Rights Reserved.</p>
<!-- Start Bravenet.com Service Code -->
<div class="bravenet">
<script type=text/javascript src="http://pub18.bravenet.com/counter/code.php?id=402864&usernum=1533988346&cpv=2">
</script>
</div>
</div>
</div>
<div style="text-align: center">
<a href="http://www.bravenet.com/webhosting/" style="font: 11px tahoma, sans-serif; color: #004891;">Web Hosting</a>
·
<a href="http://www.bravenet.com/webtools/journal" style="font: 11px tahoma, sans-serif; color: #004891;">Blog</a>
·
<a href="http://www.bravenet.com/webtools/guestbook/" style="font: 11px tahoma, sans-serif; color: #004891;" target="_blank">Guestbooks</a>
·
<a href="http://www.bravenet.com/webtools/forum/" style="font: 11px tahoma, sans-serif; color: #004891;" target="_blank">Message Forums</a>
·
<a href="http://www.bravenet.com/webtools/elist/" style="font: 11px tahoma, sans-serif; color: #004891;" target="_blank">Mailing Lists</a><br>
<a href="http://allwebcodesign.com/" style="font: 11px tahoma, sans-serif; color: #004891;" target="_blank">Allwebco Web Templates</a>
·
<a href="http://resources.bravenet.com/bravenet_toolbar" style="font: 11px tahoma, sans-serif; color: #004891;" target="_blank">Build your own toolbar</a>
·
<a href="http://www.quotemedia.com/" style="font: 11px tahoma, sans-serif;color: #004891;" target="_blank">Financial Data</a>
·
<a href="http://resources.bravenet.com" style="font: 11px tahoma, sans-serif; color: #004891;" target="_blank">Audio, Fonts, Clipart</a><br>
<a href="http://www.bravenet.com" target="_blank" style="text-decoration: none; color: #004891; font: bold 10px tahoma, sans-serif; display:block; padding-top: 10px;">powered by <img src="http://assets.bravenet.com/bravenet/images/poweredby.gif" border="0" alt="a free webtools company" style="vertical-align: middle;"> bravenet.com</a>
</div>
</body>
</html> |
Notice in the html the width for the image in the sidebar has beeen set at 180px. You will need to crop the old image down to 180px and reload it to the server.
This layout works in IE6-7, Opera 9, Safari and Firefox with only a slight difference in appearance. I hopefully have commented enough in the code for you to use this site wide if you so choose.
It has seven validation errors thanks to the ads code from bravenet. |
|
Tami
Joined: 07 Aug 2008
Posts: 3
|
| Posted: Fri Aug 08, 2008 3:58 am |
|
|
|
| Thank you so so much, Sticks! |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
