Joomla Templates Club 406,261 posts

[koteng Friend kotengJoin date: November 2009Posts: 23Downloads:0Uploads:0 Thanks: 7 Thanked: 2 times in 1 posts]

#147943

can someone pls Assist me with this? The Logo is not properly aligned.Would like it to move it to the left to fill the small margin.

URL

h1.logo, div.logo-text h1 {
font-size: 300%;
line-height: 1;
}

h1.logo, div.logo-text { float: left; }

/* Logo Image —*/
h1.logo {
width: 265px;
height: 62px;
margin: 0;
}

h1.logo a {
width: 980px;
height: 100px;
display: block;
background: url(../images/logo.gif) no-repeat left;
}

h1.logo a span {
position: absolute;
top: -1000px;

[mambolearn Friend mambolearnJoin date: January 2006Posts: 36Downloads:0Uploads:3 Thanks: 10 Thanked: 8 times in 1 posts]

#330149

Hi

Just add:

margin:0 0 0 -10px;

to:

h1.logo {}

Regards

1 user says Thank You to mambolearn for this useful post

1. koteng

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#332391

I would like to do the same thing. Sorry exactly where do you put the margin:0 0 0 -10px;

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#332419

You should do this in templates/ja_teline_iii/css/template.css

Good luck,
Micrantha

1 user says Thank You to micrantha for this useful post

1. James Weston

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#332452

Hi, thanks for that. I have found the right CSS file however am not sure where to put the line in that was previously advised. My html reads:

#ja-header { z-index: 10; position: relative; }

#ja-header .main { padding: 30px 0 10px; }

h1.logo, div.logo-text h1 {
font-size: 300%;
line-height: 1;
}

h1.logo, div.logo-text { float: left; }

/* Logo Image —*/
h1.logo {
width: 265px;
height: 62px;
margin: 0;
}

h1.logo a {
width: 265px;
height: 62px;
display: block;
background: url(../images/logo.gif) no-repeat left;
}

h1.logo a span {
position: absolute;
top: -1000px;
}

/* Logo Text —*/
div.logo-text h1 a {
letter-spacing: 1px;
font-weight: bold;
text-decoration: none;
color: #000;
}

p.site-slogan {
padding: 0 5px;
margin: 0;
color: #999999;
background: #f7f7f7;
display: block;
letter-spacing: 1px;
font-size: 85%;
text-transform: uppercase;
text-align: center;
}

The site is under development at http://www.vivaasiamagazine.com/joomla

you will see i have a large banner ad stretching across the page from a company called RATIONAL (you may have to refresh if the standard joomla banner pops up first)

The problem is the logo is not flush left and therefore the space is not enough so the banner drops down a level.

Cheers.

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#332492

Hello,
Your logo is 215x62px.
Take a look in stylesheet:

h1.logo {
width: 265px;
height: 62px;
margin: 0;
}

h1.logo a {
width: 265px;
height: 62px;
display: block;
background: url(../images/logo.gif) no-repeat left;
}

If you change width to 215px, maybe it fits.
If not you could also cut a little bit of white space of your logo.

Good luck,
Micrantha

1 user says Thank You to micrantha for this useful post

1. James Weston

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#332498

Thanks I think that will work. Silly question where do i find teh stylesheet file is in in my templates css?

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#332518

Thanks for that I have found it and got it working now, only thing is now how do i get them to be level with each other? Cheers and thanks for the great direction

[micrantha Friend micranthaJoin date: May 2007Posts: 465Downloads:0Uploads:6 Thanks: 6 Thanked: 158 times in 148 posts]

#332662

Hello,
You have to position your elements.
For instance you now have these lines:

h1.logo {
width: 215px;
height: 62px;
margin: 0;
}

You could change this to:

h1.logo {
width: 215px;
height: 62px;
margin: 0;
position:relative;
top:20px;
}

Regards,
Micrantha

1 user says Thank You to micrantha for this useful post

1. James Weston

[James Weston Friend James WestonJoin date: September 2014Posts: 1030Downloads:11Uploads:70 Thanks: 408 Thanked: 16 times in 1 posts]

#332670

Thanks very much again for a very clear and easy to follow answer. It really is great when somebody comes back in an easy to follow manner. I wish the guys on the SOBI forum were the same 🙂

[Author]

Posts