I hope someone can help with this. I am still fairly new to ASP, but I have gotten pretty comfortable with customizing the look of a site via css, editing the default images, etc. My problem occurred when I changed the feature-area-home (default.aspx) div to
an image container to hold my logo next to the poster image, which I also modified. My logo was a little wider when resized to the same height as the poster image, so I resized the poster image container to compensate. I finally got the two images to line
up side by side with the 3px space between, but now the rest of the page content has moved up and is overlapping the images! It's 5:30am and Ive been up all night trying to fix this, can anyone help?
And I did update the code on Default.aspx to correspond to the naming changes here. Is this enough info? Please excuse my ignorance, like I said in the first post, I'm sill new to this...thanks!
Oh, and I guess you can tell, but the first image (left) is 427px wide. The image I added to the right is 330px wide and there is a 3px border between. All adds correctly to 760px and the images are both the same height, 180px. These all line up like they're
supposed to, but the content that should be below all keeps shifting up, even though none of the css for it has changed. (I've only gotten down to that point - everything that follows in css is unchanged.)
OK, sorry about the multiple posts...I just wanted to provide all the info I can. Here's the code for Default.aspx. As you can see, I haven't gotten far, as far as adding content yet. I have just been editing the images to go with my company's colors, trying
to get my images in place, etc. Thanks for your patience with me!
JodiC
0 Points
4 Posts
Problem aligning images
Apr 20, 2007 10:32 AM|LINK
tomaszwaraks...
Member
197 Points
36 Posts
Re: Problem aligning images
Apr 20, 2007 11:46 AM|LINK
JodiC
0 Points
4 Posts
Re: Problem aligning images
Apr 20, 2007 04:26 PM|LINK
OK,here's the part of the css I modified:
#poster-photo-container
{ margin-top:3px; margin-left:0px; margin-right:auto; width:427px; background:#ffffff; position:absolute;}
.poster-photo-image
{ border-right:3px solid #FFF; display:block;}
#feature-area-container
{ margin-top:0px; margin-left:430px; margin-right:0; width:330px; background:#ffffff; position:absolute;}
.feature-area-image
{ display:block;}
And I did update the code on Default.aspx to correspond to the naming changes here. Is this enough info? Please excuse my ignorance, like I said in the first post, I'm sill new to this...thanks!
JodiC
0 Points
4 Posts
Re: Problem aligning images
Apr 20, 2007 04:33 PM|LINK
JodiC
0 Points
4 Posts
Re: Problem aligning images
Apr 20, 2007 04:44 PM|LINK
OK, sorry about the multiple posts...I just wanted to provide all the info I can. Here's the code for Default.aspx. As you can see, I haven't gotten far, as far as adding content yet. I have just been editing the images to go with my company's colors, trying to get my images in place, etc. Thanks for your patience with me!
<%
@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" Title="Square 1 Consulting & Design" %><
asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<!--POSTER PHOTO
-->
<div id="poster-photo-container"> <img src="images/photo-poster.png" alt="Lightning Ball image" class="poster-photo-image" /> </div> <div id="feature-area-container"> <img src="images/square-1-logo-180h.png" alt="Square 1 logo" class="feature-area-image" /> </div> <!--CONTENT CONTAINER
-->
<div id="content-container-two-column"> <!--CONTENT MAIN COLUMN
-->
<div id="content-main-two-column"> <h1>World class, custom widgets for your industry
</h1> <p>Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat.
</p> <div id="three-column-container"> <div id="three-column-side1"> <a href="Items.aspx"> <img src="images/home-photo-1.jpg" class="photo-border" alt="Enter Alt Text Here" /></a> <h2>Our Products
</h2> <p>Amet, consectetuer adipiscing elit, sed diam tincidunt ut laoreet. Consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam.
</p> <a href="Items.aspx">read more</a><img class="arrow" src="images/arrow.gif" alt="" /></div> <div id="three-column-side2"> <a href="Contact.aspx"> <img src="images/home-photo-3.jpg" class="photo-border" alt="Enter Alt Text Here" /></a> <h2>Customer Support
</h2> <p>Amet, consectetuer adipiscing elit, sed diam tincidunt ut laoreet. Consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam.
</p> <a href="Contact.aspx">read more</a><img class="arrow" src="images/arrow.gif" alt="" /></div> <div id="three-column-middle"> <a href="About.aspx"> <img src="images/home-photo-2.jpg" class="photo-border" alt="Enter Alt Text Here" /></a> <h2>About Fabrikam, Inc.
</h2> <p>Amet, consectetuer adipiscing elit, sed diam tincidunt ut laoreet. Consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam.
</p> <a href="About.aspx">read more</a><img class="arrow" src="images/arrow.gif" alt="" /></div> </div> </div> <!--CONTENT SIDE COLUMN
-->
<div id="content-side-two-column"> <h2>Fabrikam in Business Magazine!
</h2> <p>Ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nost.
</p> <h3> <a href="News.aspx">Recent News </a> </h3> <ul class="list-of-links"> <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummynibh euismod tincidunt.
</a></li><li><a href="#">Sed diam nonummy</a></li><li><a href="#">Nibh euismod</a></li><li><a href="#">Ut wisi enim ad minim veniam, quis nostrud</a></li></ul> </div> <div class="clear"> </div> </div></
asp:Content>