Positioning items along a line

[Bert Coules]

Thanks for all the views. I've been searching around but haven't come up with a solution. I'm currently trying moving the menu icon out of the title bar altogether:

 

http://bertcoules.co.uk/test/about_me.php

 

but from a design point of view I'm not convinced. I'd like at least to try putting the icon at the right-hand end of the title bar with the title itself still centred so I can see what it looks like, but I can't work out how to do it.

Edited December 7, 2014 by Bert Coules

[D4rkH0rse]

No idea what you are exactly trying but did you attempt this?

<div id="title_bar">   title<img src="images/menu_icon.png"></div>

Giving them both their own div container is the same as placing them in 2 boxes that are lined-up next to each other for as far as I understood from the bit of reading on HTML and CSS I've done so far.

 

You could then play with the distance between the text by altering the padding from the text (right) or the image(left).

[Bert Coules]

Thanks for your thought. I did try that, but I wasn't able to place the text properly. The problem is, each page has a different title and they all vary in their length, so positioning by padding would have to be done separately for each of them. I was hoping to be able to use "centre" (sorry, "center") universally, but the presence of the icon graphic mucks it up.

 

I think I'm going to settle for having the icon just above the end of the title bar rather than within it. I'll try it tomorrow and see how it looks.

Edited December 8, 2014 by Bert Coules

[D4rkH0rse]

You could just add a CSS class to all titles.

 

CSS:

.titleClass{padding:5px;}

HTML:

<p class="titleClass">Your title</p><img src="images/menu_icon.png">

It will probably require some CSS rules for the image as well and maybe some more on the text for you to get it to work how you want to. But there is nothing better than experimenting to learn right?

Edited December 8, 2014 by D4rkH0rse

[tejasamrute]

CSS -

 

* { margin:0; padding:0; } body, html { height:100%; } .wrapper { width:100%; height:100%; background-color:#003E61; } .title { width:400px; height:100px; margin:0 auto; background-color:red; text-align:center; line-height:100px; } .menu { width:50px; height:30px; position:absolute; background-color:yellow; z-index:100; left:90%; top:8%; text-align:center; line-height:30px; } </style>

 

 

 

 

HTML -

 

<div class="wrapper"> <div class="title"><h1>Title</h1></div> <div class="menu">Menu</div></div>

 

 

 

 

Is this what you wanted @Bert Coules???

[Bert Coules]

Thanks for the new replies. Tezzo, I'll try your solution and see what happens.

[dsonesuk]

You have to make space for icon using margin, and position it within that margin, either within header tag, or outer container

            h1 {                color: #FF0000;                font-family: "Courier New",courier,monospace;                letter-spacing: -0.05em;                line-height: 0.7;                margin-bottom: 0.1em;                margin-left: 0.5em;                padding-top: 0.8em;                text-align: center;            }            .WithinHeaderMenu, .WithinDivMenu  {margin-right: 30px;}            .WithinDivMenu h1 {margin-right: 0;}            .WithinHeaderMenu a, .WithinDivMenu a{float: right;margin-right: -30px; }            .WithinDivMenu a{padding-top: 1.6em;}

        <!--option 1 --><h1 class="WithinHeaderMenu"> Bert Coules<a href="index.php"><img class="menu_icon" alt="Menu icon" title="Menu icon" src="http://bertcoules.co.uk/test/images/menu_icon.png"></a></h1>        <!--option 2 --><div class="WithinDivMenu"><a href="index.php"><img class="menu_icon" alt="Menu icon" title="Menu icon" src="http://bertcoules.co.uk/test/images/menu_icon.png"></a><h1 class="WithinHeaderMenu"> Bert Coules</h1></div>

[Bert Coules]

Many thanks for all the help. I've now managed to achieve exactly what I was after.