1. This website uses cookies. By continuing to use this website you are giving consent to cookies being used.
    For information on cookies and how you can disable them visit our Cookie Usage page.
    Dismiss Notice

Web Design T-shirt Website Template - navigation bar appearing incorrectly

Discussion in 'Web Design' started by stegnome, Feb 17, 2012.

  1. stegnome

    stegnome New Member

    hi there
    i'm getting au fait with html/css etc, and happy with FTP.

    i'm trying to design an ebay listing template based on the t-shirt website template. the html will be within ebay, and not on my webspace, so i've changed all of the urls in the html/stylesheet so that they're preceded by the webspace path. i haven't changed anything else at all, at least not yet. but when i preview the webpage, the navigation doesn't appear in its proper place, instead it's dotted about above the header...i'm v.puzzled?

    am using Kompozer to amend html file, notepad++ for css and filezilla to upload.

    please help?
     
    stegnome, Feb 17, 2012
    #1
  2. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    as we are puzzled
    the only urls i see in the template are in the upper left hand corner and in the footer
    you might try posting your code - use in the menu bar of post editor {}# to display your code.
     
    ishkey, Feb 17, 2012
    #2
  3. stegnome

    stegnome New Member

    stegnome, Feb 17, 2012
    #3
  4. ishkey

    ishkey Moderator, Logos, Sports Crests Staff Member Verified Member

    since we still can not see your code - i'll take a Shot In The Dark at it
    did you rename style.css to stylelistingtemplate.css before you uploaded the file?
    funny thing about browsers, they have to be told everything
     
    ishkey, Feb 17, 2012
    #4
  5. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    We need to see all the code to really help you out, but I will make a guess as to what is wrong:
    If eBay uses a standard stylesheet within the HTML and your CSS is placed before it you will have conflicts with the styling of the CSS as the styling eBay uses will overwrite it.

    That said, this is like asking a doctor to heal you over the phone―not impossible but very hard.
    So post the code as an attachment or show us a live link to the website.
     
    Mimoun, Feb 17, 2012
    #5
  6. stegnome

    stegnome New Member

    i've got it to work in part (some of my links were wrong originally).
    it seems as soon as i try to add anything in the div 'main' it seems to throw out the top navigation, and also affects the footer.

    i want to insert two columns in the main area, one for pics and one for description.

    attached is the code - all i did was insert a blank div before the picture, and the navigation's gone askew

    thanks people, really appreciate your help.
    HTML:
    <!DOCTYPE html>
<html>
<head>
<!-- Website template by freewebsitetemplates.com -->
  <meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
  <title>Sellcouth</title>
  <link rel="stylesheet"
href="http://stegnome.com/ebay/stegnome/css/style.css"
type="text/css" charset="utf-8">
</head>
<body>
<div id="background">
<div id="page">
<div id="header"> <span id="connect"><!-- <a href="http://www.youtube.com/fwtemplates" target="_blank" class="vimeo"></a> -->
</span><!-- /#logo -->
<ul id="navigation">
  <li class="selected"><a
href="http://stegnome.com/ebay/stegnome/shop.html">Shop</a></li>
  <li><a
href="http://members.ebay.co.uk/ws/eBayISAPI.dll?ViewUserPage&amp;userid=stegnome"
target="_blank">About</a></li>
  <li><a
href="http://my.ebay.co.uk/ws/eBayISAPI.dll?AcceptSavedSeller&amp;sellerid=stegnome&amp;ssPageName=STRK:MEFS:ADDSTR&amp;rt=nc"
target="_blank">News</a></li>
  <li><a href="http://stegnome.com/ebay/stegnome/terms.html">Terms</a></li>
  <li><a href="http://stegnome.com/ebay/stegnome/contact.html">Contact</a></li>
</ul>
</div>
<!-- /#header -->
<div id="contents">
<div id="main">
<p></p>
<div style="width: 300px;"></div>
<p style="text-align: center;"></p>
<p style="text-align: center;"><img
style="width: 700px; height: 434px;" alt=""
src="http://stegnome.com/ebay/products/2012-02-20bikerjacket/034.JPG"></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis </p>
<address> <span>Telephone numbers:</span>
555-5678901 to 555-5678902 <span>Email Address:</span>
info@sellcouth.aus.com <span>Street Address:</span> 8th
Street Arlington Park, Perth City </address>
</div>
<div id="featured">
<ul>
  <li><img
src="http://stegnome.com/ebay/stegnome/images/shirt-red.jpg"
alt="shirt"></li>
  <li><img
src="http://stegnome.com/ebay/stegnome/images/shirt-orange.jpg"
alt="shirt"></li>
  <li><img
src="http://stegnome.com/ebay/stegnome/images/shirt-green.jpg"
alt="shirt"></li>
  <li class="last"><img
src="http://stegnome.com/ebay/stegnome/images/shirt-blue.jpg"
alt="shirt"></li>
</ul>
<a href="http://stegnome.com/ebay/stegnome/terms.html"
class="button">shop here!</a> </div>
</div>
<!-- /#contents -->
<div id="footer">
<div id="description">
<div> <span>© Copyright © 2011. <a
href="http://stegnome.com/ebay/stegnome/shop.html">Company
name</a> All rights reserved</span> </div>
<p> This website template has been designed by <a
href="http://www.freewebsitetemplates.com/">Free Website
Templates</a>
for you, for free. You can replace all this text with your own text.
You can remove any link to our website from this website template,
you're free to use this website template without linking back to us. If
you're having problems editing this website template, then don't
hesitate to ask for help on the <a
href="http://www.freewebsitetemplates.com/forum/">Forum</a>.
</p>
</div>
<div class="navigation"> <a
href="http://stegnome.com/ebay/stegnome/shop.html">Shop</a>|
<a
href="http://members.ebay.co.uk/ws/eBayISAPI.dll?ViewUserPage&amp;userid=stegnome"
target="_blank">About</a>| <a
href="http://my.ebay.co.uk/ws/eBayISAPI.dll?AcceptSavedSeller&amp;sellerid=stegnome&amp;ssPageName=STRK:MEFS:ADDSTR&amp;rt=nc">News</a>|
<a href="http://stegnome.com/ebay/stegnome/terms.html">Terms</a>|
<a href="http://stegnome.com/ebay/stegnome/contact.html">Contact</a>
</div>
</div>
<!-- /#footer --> </div>
<!-- /#page --> </div>
<!-- /#background -->
</body>
</html>
     
    stegnome, Feb 21, 2012
    #6
  7. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    All you have to do is delete this from your HTML:
    HTML:
    <span id="connect"><!-- <a href="http://www.youtube.com/fwtemplates" target="_blank" class="vimeo"></a> -->
</span><!-- /#logo -->
     
    Mimoun, Feb 22, 2012
    #7
  8. stegnome

    stegnome New Member

    thanks for this, it's now sorted......but of course now i've lost my twitter and facebook icons.....can i have them at the top without this prob happening again? or perhaps somewhere else like in the nav bar instead?
    sorry to keep on, you guys are great at helping a newbie like me :)
     
    stegnome, Feb 22, 2012
    #8
  9. Mimoun

    Mimoun Administrator Staff Member Director Verified Member

    Yes you can still have the twitter/facebook icons. Where do you want the icons: top left or top right?Above the header/logo or under it?
     
    Mimoun, Feb 25, 2012
    #9