SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is It the pixels that went wrong or just the CSS?

    Hi Everyone,
    The following code has a menu item of 920px width and 30px height. Within the menu item there is a ul item of the same size.
    Both items are surounded with borders. "Menu" is surounded with red lines and "ul" is surounded with green.
    The screen shot attached shows the green rectangular (ul) wider then the red and situated at its' parent middle height although
    i defined its' "top" as 0 px.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>7_menu</title>
    <style type="text/css">
    	#menu 
    	{
    	   position:relative;
    	   width:920px; 
    	   height:30px;
    	   border:2px solid red;
    	}
    	#menu ul {position:absolute; border:2px solid green; width:920px; height:30px;top:0px;}
    	
    </style>
    </head>
    <body>
    	<div id="menu">
    		<ul>
    			<li class="menu1"><a href="#"></a></li>			
    		</ul>
    	</div>
    </body>
    </html>
    Could it be something wrong with my display's pixels ? :-) More likely, I still know nothing about CSS :-(
    I'll be grateful if someone explains me why widths defined as 920px both, have different width and why "top" defined as Attachment 595210 is greater then zero.
    Thanks

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi . By default, browsers give default margins and paddings to elements. As such, the <ul> has margins and paddings set (both vertical and horizontal). If you remove them, you will see it fit.

    Code:
    ul{margin:0;padding:0;}
    Though it would be better for you to have a full reset on your page to avoid future instances of this. Something like this
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ryan ! Thank you so much for that rapid aid. I'll read the article tomorrow and see if i have more questions. I had my share for today..

  4. #4
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    It's not really an article so much as a copy+paste+keep it in your archive. A pretty useful 'boilerplate', as they call it.

    I, personally, use it for all of my projects - thanks to Ryan, of course

    ~TehYoyo

  5. #5
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, I copied/pasted Ryan's CSS and miracoulusly the 2 rectangles became overlapping. Still I have to see what excactly made it different because my real problem was, i had 10 menu items of 100 pixels idth each and a ul item of 1000 pixel. The 10 menu items did not fit into 1000 width. I'll see if the new downloaded style will solve my original problem.
    Either way, all future style in future will contain that Ryan's style.
    Thanks a lot Ryan !

  6. #6
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deotpit View Post
    Hi, I copied/pasted Ryan's CSS and miracoulusly the 2 rectangles became overlapping. Still I have to see what excactly made it different because my real problem was, i had 10 menu items of 100 pixels idth each and a ul item of 1000 pixel. The 10 menu items did not fit into 1000 width. I'll see if the new downloaded style will solve my original problem.
    Either way, all future style in future will contain that Ryan's style.
    Thanks a lot Ryan !
    Take a look at where he got it from - the "reset" that he cited will help solve a bunch of problems that you normally would be confused about.

    ~TehYoyo

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deotpit View Post
    Hi Ryan ! Thank you so much for that rapid aid. I'll read the article tomorrow and see if i have more questions. I had my share for today..
    Okay!
    Quote Originally Posted by deotpit View Post
    Hi, I copied/pasted Ryan's CSS and miracoulusly the 2 rectangles became overlapping. Still I have to see what excactly made it different because my real problem was, i had 10 menu items of 100 pixels idth each and a ul item of 1000 pixel. The 10 menu items did not fit into 1000 width. I'll see if the new downloaded style will solve my original problem.
    Either way, all future style in future will contain that Ryan's style.
    Thanks a lot Ryan !
    As mentioned some elements have default styles applied. Have you wondered why a <p> tag holds a bit of space between other elements? That's the vertical margins that get applied to it. You just have to tinker around sometime and figure out which elements get default styles. <div>, for example, are one of the few elements that have NO styles added at all. <p>, all the headers (H1 to H6), <ul> OLs...all have some default stuff.

    In the reset I linked, one of hte very first rules select a buttload of elements and reset it to margin:0;padding:0; (along with a myriad of other stuff). A good chunk of them have default margins/paddings applied. It gives it a level playing field and stops any potential issues like you just had.
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  8. #8
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan,
    I knew that elements have their default margins but i couldn't pin point which was the reason to my elements scattering all over the
    page. I used the reset block which i downloaded from the link in your post, removing selectors i know i'm not going to use and all the elements reassembled to where they belong to.
    I'm truely grateful to you.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deotpit View Post
    Thanks Ryan, SNIP removing selectors i know i'm not going to use and all the elements reassembled to where they belong to.
    I'm truely grateful to you.
    You ideally should do that. Trim it down. Good job . Glad I was able to help.
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    1) I'd question the need for two elements there, the extra outer div might be unnecessary.

    2) border is added TO width, so if you declare the same width on both, and put two px padding, you've got a 924px wide ul inside a 920px content area on the outer div.

    This is why as a rule I have a single outer div to set the width for everything, then let all the child elements do the normal block behavior of filling whatever's available.

    Much less what on earth are you APo'ing the child UL for?!?

    You've over-thought... everything; for meaningful help though, we'd have to see the actual page it's on; but that extra DIV for nothing and APo of the UL is throwing up alarms here.

  11. #11
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Death...:-)
    Thanks for your reference.
    The first div I inserted because the first thing I did was deviding my page into few main elements.
    Eventually, it turned out that I could change the main UL into :"<ul id="main"> and get rid of that first div. So i did in accordance with
    your advise. The 2 ULs, I couldn't get rid of any because the first stands for the main menu and the other for submenu. It was ill
    presented in my post I have to admit :-(. Maybe I should have prsented the whole page as is but i wanted to concentrate on the problem that came across and not to let the Gurus of this forum to do the whole job for me...
    Your posts are very valuable and I thank you for that.

  12. #12
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    What does <ul id="main"> mean? How does one define the "main" ul? Is it a navigation list? A content list?

    ~TehYoyo

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    What does <ul id="main"> mean? How does one define the "main" ul? Is it a navigation list? A content list?

    ~TehYoyo
    Why does his ID naming have any concern to you or his problem?

    Many people do id="main". There's no reason to not use that. As long as the coder knows what it is, it's fine....
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  14. #14
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    But shouldn't I know what it refers to as well? Isn't that the point of naming things semantically?

    ~TehYoyo

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    But shouldn't I know what it refers to as well? Isn't that the point of naming things semantically?

    ~TehYoyo
    You don't have to because you won't be doing anything with his code, although I was mainly questioning your random question, when all is fixed and there's no reason to bring up that topic of discussion .

    For me, as long as the id/class isn't abstract or describing the contents, it's okay for me.
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  16. #16
    SitePoint Addict
    Join Date
    Feb 2009
    Location
    israel
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ryan,
    I was afraid a new error emerged...

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deotpit View Post
    Thanks Ryan,
    I was afraid a new error emerged...
    We need more specifics .
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  18. #18
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,195
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by RyanReese View Post
    We need more specifics .
    I don't think we do. I think deotpit meant that he was afraid (after reading TehYoyo's post) that a new error had occurred, not that one actually has occurred.

  19. #19
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Oops :/ Soz about that.

    ~TehYoyo

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    I don't think we do. I think deotpit meant that he was afraid (after reading TehYoyo's post) that a new error had occurred, not that one actually has occurred.
    Oh, I assumed it had nothing to do with that, since what TehYoyo was mentioning wasn't really an error .
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  21. #21
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Oh, I assumed it had nothing to do with that, since what TehYoyo was mentioning wasn't really an error .
    Now that was uncalled for *tear*


Bookmarks

Posting Permissions

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