Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gaps between menu headings

    Hi guys,

    Just a quick one today. Im trying to code a site in css. Now I have managed to do most of it now. I just have one problem with the menu navigation on the left hand side.

    I have used a 'Unordered List' to make the menu but I am getting gaps between each one. Im just wandering if i can - and how I would get rid of the gaps between the menu headings. I need the images to sit directly on top of each other.

    I cant seem to figure it out ?

    http://www.turbobounce.com

    If you would be so kind as to have a look for me.


  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You do know you can't just make up your own tags right? As for your problem remove the parts in red.
    Code:
    div#leftcol ul, div#leftcol li {
    	margin: 0;
    	display: inline;
    	list-style: none;
    	padding: 0 0px;
    	line-height: 0em;
    }
    You need to validate your page as well. You have 26 coding errors. See them here: http://validator.w3.org/check?verbos...obounce.com%2F
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey

    Thanks alot Aerospace for pointing that out for me. Realy appreciate it. Didnt notice that for some reason ! ha. Maybe its time to go sleep.

    Anyway that has fixes it perfectly !

    I have also fixed all those errors now so it validates to XHTML 1.0 Strict


  • #4
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi again everyone,

    Just after one more little bit of help. On my page something seems to be forcing a horizontal scroll bar to appear. I cant figure out what it is though ?

    Need a fresh pairs of eyes basically.

    http://www.turbobounce.com


  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Remove the width on #bottomhead.

    Here is a tip. Get Firefox. Then get these three extensions

    EditCSS (allows you to edit CSS on the fly)

    Web Developer (has many useful tools like the ability to outline block level elements)
    Using the extension above I was able to spot what was causing the horizontal scrollbar.

    I then used an extension called CSS Viewer
    CSS Viewer (this shows the CSS information of whatever element is below the mouse cursor)
    Last edited by _Aerospace_Eng_; 12-07-2006 at 04:16 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah thanks Aerospace,

    You hit the nail on the head there again
    Thanks really do appreciate it.

    I have downloaded all those add ons now so i shall be using them in the future for sure

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Goodmorning wap3,
    That looks pretty nice!
    I just thought I'd let you know that div#rightcol is dropping down when I look at the site with IE7.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi excavator,

    Yer you are right there. I a just checking to make sure it looks ok in the most popular browsers.
    The background seems to be doing strange things 2 ?

    Well lets see if I can sort it out. If I cant I will be back for some more help.

    Cheers


  • #9
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi everyone,

    Im stuck ! lol

    Umm I have three little problems with this website i am doing and wondered if you could try to help me sort them out. I have managed to fix a few clitches but am abit stuck right now.

    Anyway the problems I have relate to IE and they are:

    1. The 'rightcol' div is dropping down the page below my 'leftcol' div. It needs to sit next to my 'leftcol' div.

    2. My menu sitting in the 'leftcol' div is shopping gaps between each line. I want to get rid of the gaps so the menu icons sit neatly on top of each other.

    3. The links on the bottom of my page. I want these to have a blue background with white text when the user hovers on them with there mouse. It is only coming up with the blue bakground right now, with no white text ?


    If you could try to help me out with these snags it would be great ?

    Thanks alot.



    The page is http://www.turbobounce.com

  • #10
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fixed number 2 now

    Just need some help on number 1 and 3 from above now.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello wap3,
    This fixes #1:
    Code:
    div#rightcol {
    	height: 100%;
    	/*take out width: 566px;*/ 
    	color: #333333;
    	padding-top: 13px;
    	padding-left: 190px;
    	}
    You already fixed #3?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey excavator,

    I tried taking out the width but 'rightcol' is still dropping down the page? Im looking at the page in IE 6 if that makes any diffenece.

    Also number 3 is not fixed. When I hover over the links only the background goes blue - i also want the text to go white ?


  • #13
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Oops,
    Looks like that bouncing.gif is too big. When you resize it(I didn't resize the actual image) like this:
    Code:
    <LI>:- No cancellation fee if due to bad weather. </LI></UL>
      <img src="Welcome To Turbo Bounce - South West Bouncy Castle Hire_files/happy.gif" width="300" height="61"> 
    </DIV><!--- Bottom div containg menu links, copyright info and background image -->
    it works.

    (Took out the extra </img> tag too)


    As for #3, on hover I see links with a square blue background and white text. I checked in IE6, IE7 and FF2. Wonder if your caching an old version of the page?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #14
    Regular Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    324
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmm this is real strange !

    I took out the image completey instead of resizing it for a minute. And now my right div is still dropping down the page.

    Also I have cleared out my cache and history etc etc and the bottom links are not right in mine still.

    Excavator could you do a screen shot for me now I have taken that image out so I can see what it looks like in your IE ?? much appreciated if you could.

    I wondering if it is my IE that is really playing up ? I does crash now and again. Maybe it needs re-installing of something.


  • #15
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Remove padding-left from #rightcol and float #rightcol to the left. Be sure to clear your floats: http://www.positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •