Jump to content
Lucy

Suggestion for how to do this

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?

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...