Lucy Posted August 2, 2014 Share Posted August 2, 2014 Sorry the topic title isn't very informative - couldn't think of anything better. I have some titles on a page, as headers. I have a swirly line I would like underneath each title, but want to use it as a background image in some sort of box instead of just as an image, so it would be more responsive, if that makes sense. It seems a bit over the top to have a div for this underneath each header. It would probably be fine to do it that way, but it seems wrong. Is there any other way I could achieve this effect? Link to comment Share on other sites More sharing options...
niche Posted August 2, 2014 Share Posted August 2, 2014 Nothing's over the top when you're learning. Please post the code for what you have in mind so we don't have to guess. 1 Link to comment Share on other sites More sharing options...
Day Posted August 3, 2014 Share Posted August 3, 2014 Nothing's over the top when you're learning. Please post the code for what you have in mind so we don't have to guess. I don't have much to contribute without seeing the code first, but just wanted to point out how true a statement this is. Nothing is over the top when you're learning. I held myself back for a while because I always felt like everything I tried was the wrong/hard way (over the top) and it was very discouraging. The only way I was able to finally start excelling was to just make things work however I could, then go back later and see if there was a better way. The more solutions you can come up with, the better you'll be at problem solving. Link to comment Share on other sites More sharing options...
niche Posted August 4, 2014 Share Posted August 4, 2014 (edited) Day's on point. Coders are among the the most empowered people on the planet. They have the closest thing to a super power. I hope the op gets to tap into the gigantic power that is code and shares a few lines with us.. Edited August 4, 2014 by niche Link to comment Share on other sites More sharing options...
Lucy Posted August 7, 2014 Author Share Posted August 7, 2014 Thanks for the replies - sorry about the delay in responding, been having a rough time lately. Okay, well, I decided on a different way in the end, but am still having a problem. I'll post the relevant code below. There's a header, with a background image which is a decorative line. What I want now is to add a 'stopper' image to the end of the line - does that make sense? The only way I could think to do this is to put an empty div beside it with this image as a background image, with no margins or borders so it butts up to the background image for the header. Unfortunately, the empty div (named 'side' here) is refusing to go where I want it and is stubbornly staying put below the other div. CSS: h1 { float:right; width:100%; margin:3% 15% 2% 0; font-family:myfont, "Lucida Bright", "DejaVu Serif", Georgia, serif; text-align:right; font-size:7rem; font-weight:normal; padding:1% 2% 0.8% 2%; word-wrap:break-word; background:url('images/weave.png') repeat-x right bottom; background-size:5%; } .side { width:15%; margin:0; background:url('images/dragon.png') no-repeat bottom; background-size:50%; display:block; float:right; } HTML: <h1>hello there!</h1><div class="side">.</div> Oh, and I completely get what you're saying - but I've been learning web design on and off for 9 years (since I was 13) and feel I really need to start doing things 'properly' (especially as I'm trying to get an apprenticeship/job in development) Link to comment Share on other sites More sharing options...
johncc Posted August 9, 2014 Share Posted August 9, 2014 It is probably not the whole answer but side should be display:inline and try using dragon.png as an <img> within the side div. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 9, 2014 Share Posted August 9, 2014 (edited) Place background-image in header tag, position it how you want, once happy with that insert empty span give it display block, width, height and use margin-right minus width of this span. OR use h1:after {content:""; } with same styling as span, just note this won't work for older IE versions. <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> h1.bgstyle01, h1.bgstyle02, h1.bgstyle01 span, h1.bgstyle02:after {height: 8rem;} h1.bgstyle01, h1.bgstyle02 { float:right; /* width:100%;*/ margin:3% 15% 2% 0; font-family:myfont, "Lucida Bright", "DejaVu Serif", Georgia, serif; text-align:right; font-size:7rem; font-weight:normal; /*padding:1% 2% 0.8% 2%;*/ word-wrap:break-word; background:url('http://www.clker.com/cliparts/u/d/r/y/Z/N/beautiful-swirls-underline-md.png') repeat-x right bottom; background-size:25%; } h1.bgstyle01 span { margin: 0 -23% 0 0; width: 23%; background:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeLwkxL0o48kmnVjXzV94pwdNOmm0C2bexejLjj37h1I6ebo6a') no-repeat bottom center; background-size: 100%; display:block; float:right; } h1.bgstyle02:after { content:""; margin: 0 -23% 0 0; width: 23%; background:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSeLwkxL0o48kmnVjXzV94pwdNOmm0C2bexejLjj37h1I6ebo6a') no-repeat bottom center; background-size: 100%; display:block; float:right; } </style> </head> <body> <h1 class="bgstyle01">hello there!<span></span></h1> <h1 class="bgstyle02">hello there!</h1> </body></html> Edited August 9, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
Lucy Posted August 10, 2014 Author Share Posted August 10, 2014 I'm not sure I explained myself very well - the solutions didn't work too well because I needed really specific positioning that would respond correctly with browser resizing. I've got it sorted now though. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now