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.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Navigation Menu pictures have unexplained gaps between them

    Hi,

    I'm actually abit new in html and made a few landing pages for my business and now i'm working on building a website.

    After creating the menu pictures and setting them up in the html and of course in the css, I got a strange problem that I wasn't able to solve .

    The menu pictures have some unexplained gaps between them (at least I can't figure it out) and I can't get the pictures to get together.

    The header picture is width 500 px, the total width of all the menu pictures combined is 500 px, I just want them to be exactly next to each other.

    the code that I have for the menu css is :

    Code:
    #mainMenu div {
    	height: 35px;
    	margin: 0;
    	padding: 0;
    }
    
    #mainMenu img {
    	margin: 0;
    	border: none;
    	padding: 0;

    and the code for the HTML part :

    Code:
    <tr><td id="mainMenu">
    			<div>
    				<img src="images/current_maestro.png" width="90" height="35" alt="مركز مايسترو"/>
    				<a href="personal.html"><img src="images/menu_personal.png" width="86" height="35" alt="تدريب شخصي"/></a>
    				<a href="learning.html"><img src="images/menu_learning.png" width="81" height="35" alt="تأهيل مدربين"/></a>
    				<a href="workshops.html"><img src="images/menu_workshops.png" width="80" height="35" alt="ورشات تدريبية"/></a>
    				<a href="students.html"><img src="images/menu_students.png" width="82" height="35" alt="تدريب للطلاب"/></a>
    				<a href="business.html"><img src="images/menu_business.png" width="81" height="35" alt="تدريب للأعمال"/></a>
    			</div>
    		</td>
    		</tr>
    it's almost all the file but thats what i'm having problem with - the rest is pretty similar to regular single pages.

    there are a couple of things that I should notice:

    1. The language of the website is Arabic, so the difference from regular "English" websites is the Direction = Right .

    2. Link to site (Html code) :
    http://www.elham4u.com/tryout/home.html

    3. Link to the css code :
    http://www.elham4u.com/tryout/css/main.css

    4. I believe I fulfilled all the forum posting requirements so hope to get a solution to my problem

    Thanks in advance

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    hmmm strange. I'm not seeing where the gap is coming from either. I'm brain dead!

    A dirty solution could be to add a -4px right margin to your img styles. But someone else may see where the gap is coming from and offer a better fix.
    Teed

  • Users who have thanked teedoff for this post:

    white-night (09-15-2011)

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thanks for the offer though indeed i would prefer to even learn from this - as i'm still somehow in the learning process .

    though I must ask, how did you know it's 4 px ?? ( i don't)

    thanks either way

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by white-night View Post
    thanks for the offer though indeed i would prefer to even learn from this - as i'm still somehow in the learning process .

    though I must ask, how did you know it's 4 px ?? ( i don't)

    thanks either way
    I guessed...lol well somewhat.

    You should download firebug, if you haven't already, and learn to use it. Its a free plug in for Firefox and its very useful for inspecting page elements and styles. It does much more as well, like javascript inspecting and line by line debugging, dom, box model inspecting. Anyway, I could see your issue using firebug and then change the margin until it "fit". Hope this helps.


    btw, you might want to consider reworking your code in favor of using lists for your menu, since that's what they are. You dont seem that far along in your design phase, and so reworking things wouldn't be a huge task at this point.

    You can read about how lists are coded and how they can be styled here.
    Last edited by teedoff; 09-15-2011 at 06:28 PM.
    Teed

  • Users who have thanked teedoff for this post:

    white-night (09-15-2011)

  • #5
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,742
    Thanks
    41
    Thanked 191 Times in 190 Posts
    now as for the "margin" your table that houses all of this has the attribute border-spacing:2px which 2+2=4 and could be the culprit... not sure... chrome dev tools wouldnt let me disable it for some reason o.O

    Edit: After reading ur post i went and did math and they do all "just fit" my bad... idk where the border-spacing attribute was coming from but i saw it in chrome... good job getting it working though
    Last edited by alykins; 09-15-2011 at 07:12 PM.

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • Users who have thanked alykins for this post:

    white-night (09-15-2011)

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    hmm I'm not seeing a border spacing style.


    btw, I also wanted to mention in addition to the list coding, you should know why tables for layouts are bad. Again, you're not that far along that you cant go back and code a proper document.
    Teed

  • #7
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    First I would really like to thank you for your offers and the references that i will just start looking at..

    Second I found a solution if anybody is interested to know :

    The problem was whitespaces so if i connect them together it's fine ( tried on my notepad and it worked :

    Code:
    <div><a href=...><img src=... alt=...></a><a href=...><img src=... alt=...></a><a href=...><img src=... alt=...></a><a href=...><img src=... alt=...></a><a href=...><img src=... alt=...></a><div>
    As for lists and not tables, I'm open to hear any better suggestions - which i will do after going to the links you provided.

    till now I only saw a lynda html course and all the time my reference is wc3school (source) , there its allot of info and no direction, so if you say lists and give me a reference i'm looking

  • #8
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    You can read about how lists are coded and how they can be styled here.
    lools, seems its the same reference but to a specific page for a change


  •  

    Tags for this Thread

    Posting Permissions

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