Jump to content

Suggestion for how to do this


Lucy
 Share

Recommended Posts

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

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.

  • Like 1
Link to comment
Share on other sites

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

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 by niche
Link to comment
Share on other sites

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

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 by dsonesuk
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...