1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to put <hr> using css after every </ul>...?

Discussion in 'CSS' started by webwebby, Sep 23, 2013.

  1. #1
    Hi
    SEMrush
    How can I show a horizontal rule <hr> after every <ul>? I have placed a loop on very <ul> and I want to put a separation line using css at the end of every ul.

    I have a guess it will be something like

    .classname ul:after {
    content:...
    }

    The problem is the right command to put inside content: " here "; as I had used before \A for new line.

    Please help

    Thanks in advance
     
    Last edited: Sep 23, 2013
    webwebby, Sep 23, 2013 IP
    SEMrush
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,651
    Likes Received:
    1,561
    Best Answers:
    225
    Trophy Points:
    515
    #2
    If you want a HR, the tag meaning a change in subject when a numbered heading is inappropriate, it belongs in the markup, not the CSS.

    Sounds more like you just want to draw a line across the bottom of the page. That is NOT what HR means or is for -- so that's either border-bottom's job, or set a border and background on your :after element with an empty content. (setting font-size to 0 to avoid IE's element minimum height bug)

    It sounds like you are thinking presentational non-semantic markup -- I'd have to see the page in question to weigh in more.
     
    deathshadow, Sep 23, 2013 IP
  3. webwebby

    webwebby Member

    Messages:
    111
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #3

    Actually I am working on local wamp server. Below are few more details.

    I have a webpage. On left side, there is a sidebar where categories will appear. All categories have thier child categories as well. They are coming up in an ul way.

    <ul>
    <li>Main Category 1</li>
    <ul>
    <li>Sub Category 1</li>
    <li>Sub Category 2</li>
    <li>Sub Category 3</li>
    </ul>
    <li>Main Category 2</li>
    <ul>
    <li>Sub Category 1</li>
    <li>Sub Category 2</li>
    <li>Sub Category 3</li>
    </ul>
    <li>Main Category 3</li>
    <ul>
    <li>Sub Category 1</li>
    <li>Sub Category 2</li>
    <li>Sub Category 3</li>
    </ul>
    </ul>

    So now, I want the when a Main category ends, I want to print an <hr>. So will look like below in browser.

    Main Category 1
    - Sub Category 1
    - Sub Category 2
    - Sub Category 3
    ------------------------------
    Main Category 2
    - Sub Category 1
    - Sub Category 2
    - Sub Category 3
    ------------------------------
    Main Category 3
    - Sub Category 1
    - Sub Category 2
    - Sub Category 3
    ------------------------------

    I hope this gives more better idea what I am looking for.

    Looking forward for solution.

    Thank you.
     
    webwebby, Sep 24, 2013 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,651
    Likes Received:
    1,561
    Best Answers:
    225
    Trophy Points:
    515
    #4
    CSS for that is simple... THOUGH, your markup is gibberish. UL cannot be a sibling of LI, it has to go INSIDE it. The ONLY tag that can be a direct child of a UL is LI.

    <ul id="categories"> 
    	<li>
    		Main Category 1
    		<ul> 
    			<li>Sub Category 1</li>
    			<li>Sub Category 2</li>
    			<li>Sub Category 3</li>
    		</ul>
    	</li><li>
    		Main Category 2
    		<ul> 
    			<li>Sub Category 1</li>
    			<li>Sub Category 2</li>
    			<li>Sub Category 3</li>
    		</ul>
    	</li><li>
    		Main Category 3
    		<ul> 
    			<li>Sub Category 1</li>
    			<li>Sub Category 2</li>
    			<li>Sub Category 3</li>
    		</ul>
    	</li>
    </ul>
    Code (markup):
    With CSS something like this:

    #categories,
    #categories li,
    #categories ul {
    	list-style:none;
    	padding:0;
    	margin:0;
    }
    
    #categories {
    	font-weight:bold;
    }
    
    #categories ul {
    	padding:0 0 1em 2em;
    	margin-bottom:1em;
    	border-bottom:2px solid #000;
    	font-weight:normal;
    }
    Code (markup):
    That's off the cuff/untested, but should give you a general idea what I mean.
     
    deathshadow, Sep 24, 2013 IP