SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 38
  1. #1
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question different sized uls

    Hi
    I am making two onordered lists. these are to be displayed side by side and to have the same length. but the problem is first one is shorter than the second one. also im using blueprint's screen.css. even if i set the screen.css's default margins and paddings to zero, the size of the two uls differ.
    any suggestions?
    the ul's are displayed inline-block. setting them to float takes them out of their box.

  2. #2
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    could you post code pls.

  3. #3
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok here's the code.
    all of this h2 and p and li's are in a box.

    HTML Code:
    <h2>Lorem Ipsum is simply dummy text</h2>
                   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been </p>
    			   
    			   <div class="first ulleft">
    			   <ul>
    			   <li style="background:url(../../../images/magnify.png left no-repeat)">Lorem Ipsum is simply dummy text</li>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   </ul>
    			   </div>
    			   
    			   <div class="ulright last">
    			   <ul>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   </ul>
    			   </div>
    Code CSS:
    .ulleft{
    	width:49%;
    	display:inline-block;
    	margin:0;
    	padding:0;
    }
     
     
    .ulright{
    	width:49%;
    	display:inline-block;
    	margin:0;
    	padding:0;
    }
     
    h2{
    display:inline;
    vertical-align:top;
    text-align:center;
    color:#FFFFFF;
     
    }
     
    .last {margin-right:0;padding-right:0;}

    anything left out?

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    With the code you posted i'm unable to reproduce your problem: the lists appear with the same lenght. Your problem could be with the background image you have set with the inline style or with the class first you use. You forgot to post that class... It could also be that something else in your css is causing the problem. The full code or better yet a link to the page in question would be better.

    But what you do have is also a problem in IE6 and IE7 because they do not support display: inline block. Those browsers need to have display:inline or the lists will be stacked vertically. You can feed them with a condcom or like this:

    Code CSS:
    * html .ulleft,  * html .ulright  {
    	display:inline;
    }
     
     
    *+html .ulleft, *+html .ulright  {
    	display:inline;
    }
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  5. #5
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ic. i've checked in ff and ie8. both showed be diefferent heights. im really confused as to waht is actually causing problem.

    here is the full code. it contains box images which u obvuiosly wont be able to see. i cant put up the site (dont know how ) only have to do the css part.

    HTML Code:
    
     <div id="reasons_box">
    		    <div class="box_bottom_repeat">
    			<div class="box_left_repeat">
    			<div class="box_right_repeat">
    			<div class="box_bottom_left">
    			<div class="box_bottom_right">
    			<div class="box_header_center">
                <div class="box_header_left">
                <div class="box_header_right">
    			<h2>Lorem Ipsum is simply dummy text</h2>
                   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's .</p>
    			   
    			   <div class="first ulleft">
    			   <ul>
    			   <li style="background:url(../../../images/magnify.png left no-repeat)">Lorem Ipsum is simply dummy text</li>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   </ul>
    			   </div>
    			   
    			   <div class="ulright last">
    			   <ul>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   <li>Lorem Ipsum is simply dummy text</li>
    			   </ul>
    			   </div>
    			   
                </div></div></div></div></div></div></div></div>
    	   </div>

    Code CSS:
     
    #reasons_box{
    	width:100%;
    }
     
     
    .box_header_center{
    	background:url(../images/box_header_center.png) top left repeat-x;
    }
     
    .box_header_left{
    	background:url(../images/box_header_left.png) left top no-repeat;
    }
     
     
    .box_header_right{
    	background:url(../images/box_header_right.png) top right no-repeat;
    	padding:0 0 5px 10px;
    }
     
     
    .box_bottom_repeat{
    background:url(../images/box_bottom_repeat.png) #F4F4F4 0% 100% repeat-x;
    width:100%;
    }
     
    .box_bottom_left{
    background:url(../images/box_bottom_left.png) bottom left no-repeat;
    }
     
     
    .box_bottom_right{
    background:url(../images/box_bottom_right.png) bottom right no-repeat;
    }
     
     
    .box_left_repeat{
    background:url(../images/box_left_repeat.png) 0 0 repeat-y;
    }
     
     
    .box_right_repeat{
    background:url(../images/box_right_repeat.png) 100% 0 repeat-y;
    }
     
    .ulleft{
    	width:49%;
    	display:inline-block;
    	margin:0;
    	padding:0;
    	border:1px solid red;
    }
     
    ul{
    margin:0;
    padding:0;
    }
     
    .ulright{
    	width:49%;
    	display:inline-block;
    	margin:0;
    	padding:0;
    	border:1px solid green;
    }
     
    h2{
    display:inline;
    vertical-align:top;
    text-align:center;
    color:#FFFFFF;
     
    }
     
    /*below are screen.css's default settings*/
    p {margin:0 0 1.5em;}
    .first {margin-left:0;padding-left:0;}
    .last {margin-right:0;padding-right:0;}
    ul, ol {margin:0 1.5em 1.5em 0;padding-left:3.333em;}
    ul {list-style-type:disc;}

    the list image was to be my next question as it did not show as well. im sure the path and everything is ok.

    well?

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Also where is the .first CSS? We need hte full code . Post a link if you got it
    Edit:

    Ninjad that in before me. Still post a site if you have it. Let me know if you have one. It'd save me time
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mistaya123 View Post
    ic. i've checked in ff and ie8. both showed be diefferent heights. im really confused as to waht is actually causing problem.

    the list image was to be my next question as it did not show as well. im sure the path and everything is ok.

    well?
    I've checked the first code in Opera, FF, IE6, IE7, IE8 and all showed them to be of the same length. As to the image, we cant check that without having access to the actual image.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  8. #8
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, just checked the code in Opera, FF, IE6, IE7 and IE again: both lists have the same length .... a cache problem?????
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  9. #9
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok i figured it out. when i replace lipsum with something else the box with the less text becomes smaller than the other. they are aligned at the bottom. is there anyhting to force them to align at the top too. or just the top. i've tried vertical-align:top. doesnt seem to work.

    see for yourself. here is my other text (also dummy). sorry about no link. site is still at the very begining. not up yet.
    HTML Code:
    <div id="reasons_box">
    		    <div class="box_bottom_repeat">
    			<div class="box_left_repeat">
    			<div class="box_right_repeat">
    			<div class="box_bottom_left">
    			<div class="box_bottom_right">
    			<div class="box_header_center">
                <div class="box_header_left">
                <div class="box_header_right">
    			<h2>This is my dummy header</h2>
                   <p>this is my dummy text followed by more dummy text and more dummy text and yet more dummy text.</p>
    			   
    			   <div class="first ulleft">
    			   <ul>
    			   <li style="background:url(../../../images/magnify.png left no-repeat)">dummy text number 1</li>
    			   <li>all are of different lenghts all are of different lenghts all are of different lenghts</li>
    			   <li>with different text lenghts abviously</li>
    			   <li>and still more dummy text</li>
    			   </ul>
    			   </div>
    			   
    			   <div class="ulright last">
    			   <ul>
    			   <li>the left box is smaller than the right the left box is smaller than the right</li>
    			   <li>when i write text other than lorem ipsum</li>
    			   <li>both are aligned at the bottom</li>
    			   <li>but not at the top!</li>
    			   </ul>
    			   </div>
    			   
                </div></div></div></div></div></div></div></div>
    	   </div>
    	 

  10. #10
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i used borders only to check the relative heights and positions of the uls.

  11. #11
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry. the above code shows the same lengths. but if you change the li text anywhere you'll see what i mean

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well give us the code that shows the problem. Using different words shouldn't change the <li> height unless it makes the text wrap to another line
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #13
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mistaya123 View Post
    Hi
    I am making two onordered lists. these are to be displayed side by side and to have the same length. but the problem is first one is shorter than the second one.
    the ul's are displayed inline-block. setting them to float takes them out of their box.
    sorry. the above code shows the same lengths. but if you change the li text anywhere you'll see what i mean
    Hi mistaya123,

    If you are wanting the two lists to have equal heights then you will need to use an equal height columns method for your .ulleft and .ulright divs.

    It looks like you failed to contain your floats when you were testing with floats. I would have probably chosen floats for this rather than inline-block.

    I have no idea what your images make the layout look like since you have not provided a link. You could take something like this and nest a ul in each column.

  14. #14
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is what i mean. the text in the left ul is lessso its length is smaller than the right. i guess the only way to solve it would be to write equal texts in both uls.

    HTML Code:
    <div id="reasons_box">
    		    <div class="box_bottom_repeat">
    			<div class="box_left_repeat">
    			<div class="box_right_repeat">
    			<div class="box_bottom_left">
    			<div class="box_bottom_right">
    			<div class="box_header_center">
                <div class="box_header_left">
                <div class="box_header_right">
    			<h2>This is my dummy header</h2>
                   <p>this is my dummy text followed by more dummy text and more dummy text and yet more dummy text.</p>
    			   
    			   <div class="ulleft">
    			   <ul>
    			   <li style="background:url(../../../images/magnify.png left no-repeat)">dummy text number 1</li>
    			   <li>all are of different lenghts all are of different lenghts</li>
    			   <li>with different text lenghts abviously</li>
    			   <li>and still more dummy text</li>
    			   </ul>
    			   
    			   
    			   
    			   <ul>
    			   <li>the left box is smaller than the right the left box is smaller than the right</li>
    			   <li>when i write text other than lorem ipsum when i write text other than lorem ipsum</li>
    			   <li>both are aligned at the bottom</li>
    			   <li>but not at the top!</li>
    			   </ul>
    			   </div>
    			   
                </div></div></div></div></div></div></div></div>
    	   </div>
    	 

  15. #15
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes. i used floats but then the big box which contains all the h2 and p and uls shrunk up. the uls were left outside the box.

  16. #16
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    this is what i mean. the text in the left ul is lessso its length is smaller than the right.
    Yes, I understand what you are saying. A table-cell is the only element that will base it's height on another element. That is why I suggested that you use one of many CSS Equal Columns methods. Are you familiar with them?

    I made an edit to may last post and added another link, did you see it?
    yes. i used floats but then the big box which contains all the h2 and p and uls shrunk up. the uls were left outside the box.
    That is why I said you probably failed to "Contain Your Floats".

  17. #17
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, even with the new text the lists have the same length and the text is aligned at the top and fit into the boxes .....
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  18. #18
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You will probably have to give us a mock up image of what you are wanting to do since we can't access the images you are using in all those extra divs. It looks like they may be for shadows and /or round corners?

    Here is a simple 2-column demo that uses an extra wrapping div for the equal height columns.
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Two Column Demo</title>
     
    <style type="text/css">
    #wrap {
        width:100%;
        overflow:hidden;/*contain floats*/
        background:#CCF;  
    } 
    #left {
        width:100%;
        float:left;
        margin:0 -50% 0 0;
        background:#CDF;  
    }
    #innerleft {
        overflow:hidden;/*IE7 haslayout*/
        margin-right:50%;
        background:#CCF;
    }
    * html #inner {display:inline-block;}/*IE6 haslayout*/
     
    #right {
        width:50%;
        float:left;
        background:#CDF;
    }
    h2 {margin:20px}
     
    </style>
    </head>
    <body>
     
    <div id="wrap">
        <div id="left">
            <div id="innerleft">
                <h2>Left Column UL</h2>
                <ul>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                </ul>
            </div>
        </div>
        <div id="right">
            <h2>Right Column UL</h2>
                <ul>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                    <li>Lorem Ipsum is simply dummy text</li>
                </ul> 
        </div>
    </div>
     
    </body>
    </html>

  19. #19
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for not replying earlier. thanx for the help guys.i found my solution from that link you gave for equal height columns Rayzur. thanx again.

  20. #20
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    got another query!
    i picked the code for equal height columns from the above link. it works fine.
    my uls are in a div with more divs above and below it. do i have to put in the bug fixes for page height and float containments (given in the original code for equal columns) for ie6 etc. or not?
    bug fixes like float containments are to be given only at the begining of css or should they be repeated every time i use floats for each div?

  21. #21
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i picked the code for equal height columns from the above link. it works fine.
    Which link? There are several of them.
    do i have to put in the bug fixes for page height and float containments (given in the original code for equal columns) for ie6 etc. or not?
    What code are you referring to as "the original code"?
    Post #18 is the only code in this thread with IE6/7 bug (haslayout) fixes.

    bug fixes like float containments are to be given only at the begining of css or should they be repeated every time i use floats for each div?
    With modern browsers each new parent div will need to be told to contain it's floated children.

    For IE6/7 each new parent div will need "haslayout" set on it in order to force it to contain floats.

  22. #22
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol. i give so confusing statements! but you are experienced so you understand what i am trying to say.
    by original code i meant the one picked from the example site which is also given below.
    ( i made some arrangements and have finally made my site online. it is: webfocuz.us
    it is only demo yet.)
    here's the css for the part i want fixed. it is used within the tags "Main Starts" and "Main Ends" in the html code.

    Code CSS:
     
    .mainwrap{
    	margin:20px auto;
    	background:#E6E6E6;/*this color will be right column color*/
    }
     
    .maininner{
    background:#FFFFFF;/*background color for left column*/
    margin-right:300px;/*this should be equal to right column width*/
    min-height:0;/*IE7 haslayout(float containment)*/
    }
     
    .maininner:after{/*clearfix adaption for float containment*/
        clear:both;
        content:" ";
        display:block;
        height:0;
        font-size:0;
    }
     
    * html .maininner{height:1%;}/*IE6 haslayout(float containment)*/
     
    .mainleft{
    	float:left;
        width:100%; 
        margin-right:-1px;/*allow for .maininner's right border (stop float drop)*/
    }
     
    .mainright{
    	width:300px;
    	margin-right:-299px;/*must be 1 pixel less than width */
    	float:right;
    	position:relative;
    }

    could you please take a look at it? thank you very much for your patience and time.

  23. #23
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    On your new one that CSS means nothing without the HTML it's being applied to - maybe you could post a URL to the FULL page, instead of these snippets? You're basically asking for brain surgery advice while only showing us an x-ray closeup of the pituitary.

    In the case of the first one post, the question becomes WHAT box? It's inside a box, what is the box set to? Is it set to position:relative? Otherwise god only knows what it's pulling the width:49&#37; based off of...

    In the case of this latest CSS snippet, First you should consider taking a giant axe to that clearfix imitating nonsense. Clearfix is outdated, outmoded and generally a waste of code.

    I'd have to see the markup and layout you are trying to achieve to say for certain, but I suspect you are overthinking your columns. My approach to what I THINK you are doing would have this markup:

    Code:
    <div id="fauxColumns">
    
    	<div id="contentWrapper"><div id="content">
    		Content column
    	<!-- #content, #contentWrapper --></div></div>
    	
    	<div id="sideBar">
    		Side column
    	<!-- #sideBar --></div>
    	
    <!-- #fauxColumns --></div>
    With the following CSS:

    Code:
    #fauxColumns {
    	overflow:hidden; /* wrap floats */
    	width:100%; /* trip haslayout, wrap floats IE */
    	background:#EEE;
    }
    
    #contentWrapper {
    	width:100%;
    	float:left;
    }
    
    #content {
    	margin-right:300px;
    	background:#FFF:
    }
    
    #sideBar {
    	position:relative; /* depth sort over #contentWrapper */
    	float:left;
    	width:300px;
    	margin-left:-300px;
    }
    Which is a wee bit simpler than what you were trying to do there.

  24. #24
    SitePoint Zealot mistaya123's Avatar
    Join Date
    Dec 2009
    Posts
    135
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think u missed the site url which i gave in my last post. it is www.webfocuz.us. hope it helps.

  25. #25
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Yer right, I didnae see the URL.

    Ooph, that's got a lot of issues - I'd have to throw out about half the markup just to start cleaning that up.

    The biggest of the problems being the nonsensical heading orders, questionable source order, and endless nested div for the image corners... Nesting div for images on the corners is a ugly approach to the problem - it's why I prefer sandbags as if you are nested six div deep before you hit content, there's got to be something wrong. Multiple H1's, H4 without any lower order headings preceeding it... and even your COMMENT placement could be tripping IE rendering bugs. (No joke, comments between floats == double render and/or disappearing content bugs!)

    Oh, and you are writing a new site - why the tranny doctype? Transitional is for supporting old/outdated code, not for building new pages...

    But yeah, the column approach is all broken too.

    Seriously, this:

    Code:
    		           <div class="mainright">
                            <div class="rightboxes">
    			<div class="curvy_right">
                <div class="gray_bottom_center">
    			<div class="gray_bottom_left">
    			<div class="gray_bottom_right">
    			<div class="curvy_header_center">
                <div class="gray_header_left">
                <div class="gray_header_right">
    			<img src="images/tool+color.png"  alt=""  class="icon"/>
                   <h2>Lorem Ipsum</h2>
                   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p
                ></div></div></div></div></div></div></div>
    			<a href=""><img src="./images/go.png" alt="Go" class="go" /></a>
    		</div>
    Is pretty hefty for what should probably just be:
    Code:
        <div class="sideBar">
          <h2 class="tool">
          	Lorem Ipsum
          	<span></span>
          	<b></b>
          </h2>
          <p>
          	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
          </p>
          <div class="bottomCurve"><a href="#">Go<span></span></a></div>
    No joke. In fact, that might be a bit hefty.

    If I have time later, I'll do one of my infamous rewrites with a line-by-line breakdown of the HTML/CSS explaining my choices and methodology so you can learn from it. I'm seeing a lot of old/outdated techniques that were a bad idea when they were new - but that's the internet for you when it comes to development tutorials.... A lot of the people who used to make endless nested tables now just make endless nested DIV - net change zero.

    Not your fault, I have a sneaking suspicion as to which sites you got this methodology from - no fears, I'll show you a better way.


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
  •