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 2 of 2
  1. #1
    jzm
    jzm is offline
    New Coder
    Join Date
    Aug 2008
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML/CSS Formatting Issue

    I need to create the following 2 buttons:

    http://i.stack.imgur.com/3QrlQ.png
    http://i.stack.imgur.com/Yllsw.png


    **In Page Help:**

    This should be floated to the right of the nav menu. I cannot see it in my current code - http://jzm.co.nz/clients/dev but if I upload the current code to jsfiddle it works fine.

    How would I create an arrow that size?

    How would I position the icon? - http://jzm.co.nz/clients/dev/_assets...infoButton.png


    **HTML:**

    Code:
    	<div class="options">
    			                <nav class="mainOptions">
    			                    <ul>
    			                        <li><a class="composer" href="#"><img src="http://jzm.co.nz/clients/dev/_assets/images/composer.png" /> Composer</a></li>
    			                        <li><a href="#">Address Books</a></li>
    			                        <li><a class="active" href="#" target="_self" title="View Messages Scheduled for Future Delivery">Scheduled Messages</a></li>
    			                        <li><a href="#" target="_self" title="Message Templates for you or your organisation">Templates</a></li>
    			                    </ul>
    			            </nav>​
    			
    				<div class="pageHelp"><p>In Page Help</p></div>
    		</div>
    **CSS:**

    Code:
        .pageHelp{
        	float:right;
        	margin:10px 20px 0 0;
        	width:85px;
        	height:25px;
        	border-radius:3px;
        	background-color:#354E69;
        	position: relative;
        }
        .pageHelp:after, .pageHelp:before {
        	left: 100%;
        	border: solid transparent;
        	content: " ";
        	height: 0;
        	width: 0;
        	position: absolute;
        	pointer-events: none;
        }
        .pageHelp:after {
        	border-left-color: #354E69;
        	border-width: 5px;
        	top: 50%;
        	margin-top: -5px;
        }
        .pageHelp:before {
        	border-left-color: ##354E69;
        	border-width: 16px;
        	top: 50%;
        	margin-top: -16px;
        }
        .pageHelp p{
        	color:#000;
        	padding:5px;
        	text-align:center;
        }
    **Alert:**

    This Icon should be situated to the left of the text. How could I get the placement of the icon correct as I [cannot seem to ode - http://jzm.co.nz/clients/dev

    **HTML:**
    Code:
    	<div class="scheduledTop">
    				<h3>Scheduled Messages</h3>
    					<p class="alert">Alert Message Area</p>
    				</div>
    **CSS:**

    Code:
        .scheduledTop .alert{
        	width:200px;
        	height:50px;
        	float:right;
        	margin: -30px 20px 0 0;
        	color:red;
        	text-align:right;
        	font-weight:bold;
        	background:url('../images/alert.png') no-repeat 0 8px;
        	border:1px solid red;
        }

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    To me it looks like you are trying to use :before and :after, in order to position .pageHelp.

    Their purpose is mainly to add some text, styled or not, before or after the element.

    And your styling of it makes no sense at all.

    Code:
    height: 0;
    width: 0;
    makes it virtually non-existing.
    Code:
    position:absolute;
    takes it out of the flow.
    Code:
    left:100%;
    position it to the far right.

    Effect: You are placing a non-existing and non-affecting " "s , to the far right.


  •  

    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
    •