68 users online (0 members and 68 guests)  


  Results 1 to 4 of 4

Related

  1. Replies: 0
  2. Need Help with my layout!!!    Forum: Myspace Forum
    Replies: 3
  3. Replies: 3
  1. #1
    zac's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    6

    Question Tabbed browsing layout

    Hello.. this is my first post.. hopefully its not too annoying but I am totally stumped,

    Using the coding from http://www.alistapart.com/articles/slidingdoors/ a great article on A List Apart I am trying to combine the tabbed browsing with my current layout which is a curved edged square.

    The code for the square is basically:

    Code:
    #image-header {
    	background-image:   url(images/image-header.png);
    	height: 50px;
    }
    #image-menu {
    	background-image:   url(images/page-whitebg.png);
    	padding-right: 13px;
    	padding-left: 13px;
    }
    #image-footer {
    	background-image:   url(images/image-footer.png);
    	height: 21px;
    }
    http://www.folkphotography.com/screenshots/css_ss1.jpg

    When I add the tabbed navigation I can get it close to where I want it but it creates a box that is too high. I made the background red so it is obvious where the header div is. The code for this nav is:

    Code:
     #header {
    	float:left;
    	width:90%;
    	font-size:93%;
    	line-height:normal;
    	background-color: #FF0000;
    	background-repeat: repeat-x;
    	background-image: url(images/bg.gif);
    	background-position: bottom;
    	padding-top: 20px;
          }
        #header ul {
    	margin:0;
    	list-style:none;
    	padding-top: 0px;
    	padding-right: 10px;
    	padding-left: 14px;
    
          }
        #header li {
          float:left;
          background:url(images/norm_left.gif) no-repeat left top;
          margin:0;
          padding:0 0 0 9px;
          }
    As you can see it is too tall. Is it possible to condense this so that this background is no taller than the actual tabs. The importance of this div is it provides the line across the bottom of the inactive tabs.

    http://www.folkphotography.com/screenshots/css_ss2.jpg

    Here is what it would look like if I lived in a fantasy world where I actually knew what I was doing:


    http://www.folkphotography.com/screenshots/css_ss3.jpg

    Thanks for any help with this !


  2. #2
    ALL's Avatar
    Super Dooper Nerd

    Status
    Offline
    Join Date
    Feb 2005
    Location
    localhost
    Posts
    382

    Re: Tabbed browsing layout

    do you have the html you are using? it would help alot!

  3. #3
    zac's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2005
    Posts
    6

    Re: Tabbed browsing layout

    Thanks. .but as usual, when I finally feel desparate enough to bug strangers in a forum, I figure it out. SInce i am so screenshot happy here is the finished product.
    http://www.folkphotography.com/screenshots/css_ss4.jpg

    I ended up just moving that tabbed browser to the very top of the square and I like it even better than my photoshop fake.

    glad i found this forum though
    Last edited by HTML; 03-09-2012 at 10:52 AM.

  4. #4
    ALL's Avatar
    Super Dooper Nerd

    Status
    Offline
    Join Date
    Feb 2005
    Location
    localhost
    Posts
    382

    Re: Tabbed browsing layout

    good to hear!



Tags for this Thread