MyBB Community Forums

Full Version: help with header..
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2
Hi, I need some help positioning the "textbox_upper" and "Textbox_lower" that i have added to my header...

I would like for them to be on the same line so to speak as my logo but placed in the center...
At the moment they are under my logo and well, kind of in the way and ugly..

current global.css code for the textboxes:
#header .textbox_upper{
  	font-size: 300%;
    color: #000;
  	text-shadow: white 0.1em 0.1em 0.2em;
    font-weight: bold;
  	text-decoration: underline;
  	position: relative;
}

#header .textbox_lower{
  	font-size: 150%;
  	color: #fff;
  	text-shadow: black 0.1em 0.1em 0.2em;
	font-weight: bold;
   	position: relative;
}

current header.html code for text boxes:
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
                  <div class="textbox_upper"><center>CarFreaksUnite.com</center></div>
                  <div class="textbox_lower"><center>The No.1 Pit Stop For Car Fans!</center></div>

and if needed:
User: TEST
Pass: testing
Link in signature
Kinda cleaner look if you:
Remove textbox_upper.
Add this to global.css:
.cfu {
display: block;
text-align: center;
}
and set the logo in a div, like this:
<div class="cfu"></div>

Your logo will then be centered, and the text The number one....... will stand under, but still centered. It is then more easy to understand where to click to come back to homepage.

EDIT: Forget the above thing about div and css.
Just add this to global.css under .logo

text-align: center;

should do the same

IF you want the text under the logo, carfreaksunit, why not make it as part of the logo img?
(but still kinda double)
(2014-10-13, 06:45 AM)BaggerHD Wrote: [ -> ]IF you want the text under the logo, carfreaksunit, why not make it as part of the logo img?
(but still kinda double)

I want both the text boxes (upper and lower) to be inline with the logo..
So moved to the gap above where it is now if that makes sense..?

and clicking any of the three (text box_upper, textbox_lower or the logo) will all take you back to home page..
Then why not make it a part of your logo image?

But if you want to use textbox_upper and lower, add the a at the end of the css rule.
.textbox_upper a{
(2014-10-13, 08:10 AM)BaggerHD Wrote: [ -> ]Then why not make it a part of your logo image?

But if you want to use textbox_upper and lower, add the a at the end of the css rule.
.textbox_upper a{

Hmmm...
How would i go about making it part of my logo..?

Adding the "a" just seems to erase the css rules (no sizing, underline, shadow etc.).
In example photoshop, make the logo like you want,,including the text under.

or
the "a" does also mean that you have to make a
<a href="http://carfreaksunite.com"></a> (remove the <center> tag, and set a href in there.

In css, lower and upper text (where you added the a) add
text-align: center;
(2014-10-13, 09:20 AM)BaggerHD Wrote: [ -> ]In example photoshop, make the logo like you want,,including the text under.

or
the "a" does also mean that you have to make a
<a href="http://carfreaksunite.com"></a> (remove the <center> tag, and set a href in there.

In css, lower and upper text (where you added the a) add
text-align: center;

ok, so now my global.css code is:
#header .textbox_upper a{
  	font-size: 300%;
    color: #000;
  	text-shadow: white 0.1em 0.1em 0.2em;
    font-weight: bold;
  	text-decoration: underline;
  	position: relative;
   	text-align: center;
}

#header .textbox_lower a{
  	font-size: 150%;
  	color: #fff;
  	text-shadow: black 0.1em 0.1em 0.2em;
	font-weight: bold;
   	position: center;
  	text-align: center;
}

but the text boxes are not centered or inline with the logo and social icons.. (this is what i am trying to achieve..)
try this..... 

1. add a float left attribute to the logo a like this

<a href="http://www.carfreaksunite.com/index.php" style=" float: left;">

2. then in global.css, set the margin for #logo ul.top_links as "margin: 0px 5px 0 0;"
(2014-10-13, 09:35 AM)mmadhankumar Wrote: [ -> ]try this..... 

1. add a float left attribute to the logo a like this


<a href="http://www.carfreaksunite.com/index.php" style=" float: left;">

2. then in global.css, set the margin for #logo ul.top_links as "margin: 0px 5px 0 0;"

this seems to work Smile

I have however put "margin: 25p 5px 0 0;" so it sits underneath the social icons

So how do i now go about centering the textbox_upper and textbox_lower ..?
Maybe add "<center>href code etc. here</center>" in my header template ..?

I'm learning as I go here so im just going off what I can kind of grasp lol
<center> is outdated
use css, text-align: center;
Pages: 1 2