?
Solved

Formatting Issue on Web Page

Posted on 2012-09-10
21
Medium Priority
?
390 Views
Last Modified: 2012-09-11
Hello,

I know next to nothing about web design. It's taken me weeks just to copy one of the pages on my site & re-design it so we have a page that shows our products. If you look at www.auntruby.net/thebox you will see there is a lot of space in between the 4 images that appear in the same row & are followed by their descriptions. There is more than an inch separating these 2 lines of info and they need to be closer together. I cannot figure out what to change to shore this up.  I don't know how to get into the CSS or anything else, I only have access to the code in the .aspx file that I open in visual studio. Is there a simple html snippet I can insert in order to over-ride whatever it is that's making this space? Here is the code I have:
 <div style='margin-left:0px;top:-150px;'>
                        <br />
                          <img src="/assets/images/k_a_promo_photo_lr.png"border="0" style='position:relative;top:-160px;left:290px;'/></a>
                          <p style="margin-left:100px;"><span class="burgandy-header"><b>These are the fabulous companies spoiling you with their products right now:</b></span>
                        <br />
                        </p>
                        <img src="/assets/images/extras.png" border="0" style='position:relative;top:-150px;left:0px;'/></a>
                          <img src="/assets/images/feby.png"border="0" style='position:relative;top:-130px;left:0px;'/>
                        <img src="/assets/images/scensibles.png"border="0" style='position:relative;top:-130px;left:60px;'/>
                        <img src="/assets/images/sweet_spot.png"border="0" style='position:relative;top:-130px;left:120px;'/>
                        <img src="/assets/images/DongQuaiLadysHerbTea.png"border="0" style='position:relative;top:-130px;left:160px;'/>
                   </div>
                   
                     <div style='margin-left:0px;top:-150px;'>  
                        <table width="100%" cellpadding="0" cellspacing="0" border="-50">
                        <tr>
                       
                              <td width="25%" valign="top">
                                  <p><span class="burgandy-header"><b>Feby</b></span> is a calendar for the <br />
                                                                      average woman's menstrual<br />
                                                                      cycle in the form of a<br />
                                                                      bracelet. It is a useful,<br />
                                                                      reusable, constant reminder<br />
                                                                      of where you are in your<br />
                                                                      cycle and what that means<br />
                                                                      to your day-to-day life.<br /></p>

Thanks so much in advance for your help. My wife & I are going INSANE trying to fix this.
0
Comment
Question by:jeffmeverett
  • 10
  • 6
  • 5
21 Comments
 
LVL 13

Accepted Solution

by:
Andrew Derse earned 2000 total points
ID: 38384761
Try adding this near the top of your html page:

<style type="text/css">
table {
margin-top: -80px;
}
</style>

Open in new window


If that doesn't help, please let me know.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38384766
Remove all the negative margins you have, I cannot see a reason for them and they are screwing your layout up
e.g. those images have top:-130 and the divs have top:-150
0
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38384774
He said he doesn't have access to the css files...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 38384785
How can he not have access to the css files and some of that css is inline.
He has the aspx file to upload to the server and css is on the server.
And I'm assuming it is their site if I remember from previous questions

Are you using VS to create the website? In the explorer window you will see your assets and that is where the css is
0
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38384797
Don't ask me...he's the one asking the questions.  Obviously he's not as advanced in this stuff as you or I am, that's why he asked the question the way he did...we need to be resolving their problems in a manner in which they can understand at the level they can with the knowledge they have of this stuff...that's what experts do...
0
 
LVL 58

Expert Comment

by:Gary
ID: 38384808
Was a rhetorical question ;o)
0
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38384809
lol
0
 
LVL 58

Expert Comment

by:Gary
ID: 38384815
Ok he's using Spry, still there should be an explorer window for the files - but I don't know the software.
0
 

Author Comment

by:jeffmeverett
ID: 38384906
I'm sure I have access to the CSS, I just have no idea where to find it or what to do with it. I have completely stumbled through getting this far.

I pasted this in the page, nothing happened:
<style type="text/css">
table {margin-top: -80px;}
</style>

I removed a couple negative numbers and it caused the images to move to places I don't want them. They are where I want them right now. I'm sure the code is not the way it should be, but like I said, I stumbled through this & just kept trying changes until I got things where they needed to be. The space that exists between the group 4 products & the text below each one that describes it,  is the last thing left & the page is done! I hope there is an easy way to fix it. Thanks so much for your help so far. Any other ideas?
0
 
LVL 58

Expert Comment

by:Gary
ID: 38384936
There is no easy fix because for example you have images inside divs that have nothing to do with the image and are then using top to move it into position within another div.


Can you attach your actual aspx page and maybe I can just amend your html so it is correct.

Edit
Told you this in an answer to a previous question that it will only cause problems in the future ;o)
What you are doing is simple HTML/CSS - with a little patience you could very easily learn this stuff in a few weeks and be coding it by hand with a greater knowledge of what things are doing.

NUKIT's solution works but make sure you add to the bottom of your page so it overrides the other css.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38384964
NUKIT's solution works but make sure you add to the bottom of your page so it overrides the other css.
0
 

Author Comment

by:jeffmeverett
ID: 38384975
I see. I figured I might have coded myself into a corner. If you are able to do something with the code, that would be INCREDIBLE! I have attached the aspx file. Please let me know if there is anything else I can provide.
Default.aspx
0
 
LVL 58

Expert Comment

by:Gary
ID: 38384983
Use NUKIT's solution if it works for you, but it is an hack of the css rather than a fix.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38385067
Here's the page reformatted, still not perfect but things are where they should be.
Don't just copy this over your own page.

That should be default.aspx not htm
Default.htm
0
 

Author Comment

by:jeffmeverett
ID: 38385239
Oh my god! This is the greatest thing of all time! Thank you SOOOOO much! It looks amazing! The only thing is, the top of the page is now kinda wonky. I viewed it in Firefox & I've attached a print screen of it. Do you see how the 'every delivery' is at the top now? It is supposed to be below 'what's in the box'. There is also some stray code showing. I feel terrible asking, but I wouldn't know how to fix it...is there any way that you can? Or, can you tell me how I might go about doing so? Oh, thank you so much. I worked on this from 8 this morning until I got on here.
Default.aspx
0
 
LVL 58

Expert Comment

by:Gary
ID: 38385296
Don't know who you are talking to too but you should accept NUKIT's answer as it does work and solves your problem.
Your attachment is your code not a screenshot
0
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38386939
If you would like to you, you can head on over to my website and shoot me a message.  I can then email you or work with you on getting your site up to par with regards to setting it up exactly how you want it to look.

My website is: http://www.dersecomputers.com
0
 

Author Closing Comment

by:jeffmeverett
ID: 38386999
It took me about 4 hours of trying before I gave up & got on here & Nukit fixed it in a couple lines of code, copy & paste. Godsend. Thank you!
0
 

Author Comment

by:jeffmeverett
ID: 38387023
Thank you both so very much for your help! It's all fixed now, as I put the code in my page right before the images above that had the space below them. This is a great way to start a day! GaryC123- I'd love to learn more about code. I have tons of patience, just way to much on my plate with this new business. Do you have any suggestions as to where I should go to try & learn more about the website I have? I'd greatly appreciate it. NUKIT- I will be in contact today! Thanks again, both of you!
0
 
LVL 58

Expert Comment

by:Gary
ID: 38387034
www.w3schools.com is a great place to start and free, lots of example and Try It code
0
 
LVL 13

Expert Comment

by:Andrew Derse
ID: 38387055
No problem.  Glad to be of assistance.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
Measuring Server's processing rate with a simple powershell command. The differences in processing rate also was recorded in different use-cases, when a server in free and busy states.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month14 days, 8 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question