WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Advanced CSS question. (13 posts)

  1. The Night Fox
    Member
    Posted 3 years ago #

    I recently started a website called http://www.videogamecoupons.org/.

    I use the following code to create a coupon box around a html link:

    p.coupon {
    	display: block;
    	margin: 0;
    	padding: 0;
    	height: 24px;
    }
    p.coupon a {
    	display: block;
    	margin: 0;
    	padding: 0 25px 0 5px;
    	font: bold 14px/22px 'Lucida Sans', 'Lucida Grande', sans-serif;
    	float: left;
    	border: 1px dashed #febf02;
    	background: #fdedb4 url('images/bg-post-coupon.gif') center right no-repeat;
    	color: #437216;
    	text-shadow: 1px 1px #fff;
    	text-decoration: none;
    	cursor: pointer;
    }
    p.coupon a:hover {
    	color: #000;
    	text-shadow: 1px 1px #fff;
    	text-decoration: none;
    }

    This coupon box can be seen if you scroll down to the bottom of my homepage.

    I use <p class="coupon"><a href="http://www.google.com">Text</a></p> in the wordpress post to call the styling features.

    The problem is that this creates a new paragraph. I would like it to appear just after the text on the first line of the post.

    ie: Gamestop coupon code: [Coupon Link/box]

    I'm sure there is an easy solution, but I have a very basic knowledge of CSS and can't figure it out.

  2. Shannon Smith
    Member
    Posted 3 years ago #

    Try using div tags instead, like this:

    <div class="coupon"><a href="http://www.google.com">Text</a></div>

  3. The Night Fox
    Member
    Posted 3 years ago #

    Thanks for the quick reply.

    When I put in div tags it still goes to the line below, but the styling featured don't work. Any other ideas?

    If you click onto the website now you can see what happens when div tags are used...

  4. Shannon Smith
    Member
    Posted 3 years ago #

    You'll need to change the styling to something like this:

    .coupon {
    	margin: 0;
    	padding: 0;
    	height: 24px;
    }
    .coupon a {
    	margin: 0;
    	padding: 0 25px 0 5px;
    	font: bold 14px/22px 'Lucida Sans', 'Lucida Grande', sans-serif;
    	float: left;
    	border: 1px dashed #febf02;
    	background: #fdedb4 url('images/bg-post-coupon.gif') center right no-repeat;
    	color: #437216;
    	text-shadow: 1px 1px #fff;
    	text-decoration: none;
    	cursor: pointer;
    }
    .coupon a:hover {
    	color: #000;
    	text-shadow: 1px 1px #fff;
    	text-decoration: none;
    }

    Both the p tags and display:block, will make it appear on its on line.

  5. The Night Fox
    Member
    Posted 3 years ago #

    I made the suggested changes but it still breaks to a new line. Also the text color is now static. Any other ideas?

    Really appreciate your help btw!

  6. Shannon Smith
    Member
    Posted 3 years ago #

    You'll need to put the coupon code on the same line as "Gamestop Coupons Code".

  7. The Night Fox
    Member
    Posted 3 years ago #

    I had alread put them both on the same line, but for some reason the coupon code always breaks to the next line.

    <strong>Gamestop Coupons Code:</strong> <div class="coupon"><a href="http://www.gamestop.com" target="new">GOOGLE</a></div>
    
    <strong>Description:</strong> Free value shipping on orders over $25.
  8. Shannon Smith
    Member
    Posted 3 years ago #

    If you look at the html output, you'll see this:

    <p><strong>Gamestop Coupon Code:</strong><br />
    <strong>Description:</strong> 16% off all in-stock used games & DVDs<br />
    <strong>Tip: </strong> Get free value shipping by combining with: <a target='new' href="http://www.gamestop.com" >SAVER</a>*<br />
    *Order must be at least $25 to qualify for free shipping.<br />
    <strong>Expires:</strong> Limited Time<br />
    <a target='new' href="http://www.gamestop.com" >Click Here To Get This Deal At GameStop.com</a></p>

    Try switching between the Visual and HTMl editor, and saving in each. You could also try switching the div tags to span tags.

    <span class="coupon"><a href="http://www.gamestop.com" target="new">GOOGLE</a></span>

  9. The Night Fox
    Member
    Posted 3 years ago #

    I love you right now! I used <span> tags and removed float: left; from the css and it positions correctly now :D .

    Before I removed p. from .coupon, the text in the coupon box used to be green and on mouse over it would turn black. Any idea why this doesn't work now?

    Thanks again!

  10. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    Paragraph (<p>) and Division (<div>) tags are block-level elements, which means that they break onto a new line.

    You have two options:

    1) Use an inline element, such as a <span> tag
    2) Add display:inline to your P/DIV tag CSS definition

  11. The Night Fox
    Member
    Posted 3 years ago #

    Thank's chip.

    When I edited the following code:

    p.coupon {
    	display: block;
    	margin: 0;
    	padding: 0;
    	height: 24px;
    }
    p.coupon a {
    	display: block;
    	margin: 0;
    	padding: 0 25px 0 5px;
    	font: bold 14px/22px 'Lucida Sans', 'Lucida Grande', sans-serif;
    	float: left;
    	border: 1px dashed #febf02;
    	background: #fdedb4 url('images/bg-post-coupon.gif') center right no-repeat;
    	color: #437216;
    	text-shadow: 1px 1px #fff;
    	text-decoration: none;
    	cursor: pointer;
    }
    p.coupon a:hover {
    	color: #000;
    	text-shadow: 1px 1px #fff;
    	text-decoration: none;
    }

    To this:

    .coupon {
    
    	margin: 0;
    	padding: 0;
    	height: 24px;
    }
    .coupon a {
    
    	margin: 0;
    	padding: 0 25px 0 5px;
    	font: bold 14px/22px 'Lucida Sans', 'Lucida Grande', sans-serif;
    	border: 1px dashed #febf02;
    	background: #fdedb4 url('images/bg-post-coupon.gif') center right no-repeat;
    	color: #437216;
    	text-shadow: 1px 1px #fff;
    	text-decoration: none;
    	cursor: pointer;
    }
    .coupon a:hover {
    	color: #000;
    	text-shadow: 1px 1px #fff;
    	text-decoration: none;
    }

    The text is always black now, whereas before I edited it it was green and on mouseover it would turn black. Do you have any idea why it stopped working when I removed the 'p' from '.coupon'?

  12. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    Do you have any idea why it stopped working when I removed the 'p' from '.coupon'?

    It could be a specificity problem.

    You're using <span> tags in place of the <p> tags now, right? If so, try appending "span" to your .coupon selectors, e.g.:

    span.coupon {}
    span.coupon a {}
    span.coupon a:hover {}

    I doubt that it's a specificity problem, but this will confirm.

    Assuming it's not a specificity issue, it might be that you're not fully declaring the anchor states. You need to include the link, visited, hover, and active pseudoclasses, e.g. replace this:

    span.coupon a {}

    with this:

    span.coupon a,
    span.coupon a:link,
    span.coupon a:visited,
    span.coupon a:hover,
    span.coupon a:active {}
  13. The Night Fox
    Member
    Posted 3 years ago #

    I simply added span to my .coupon selectors and everything is working perfectly now.

    Thanks for the help, I really appreciate it!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.