align title below image in blog's front page

For a quick fix – line 30 of style.css, add:

position:relative; left:15px

Although your site title should really be in a h1 or h2 tag, I strongly you suggest you modify your HTML to insert the text in a header tag and work from there.

thanks for the quick response.
sorry about my next questions, i’m just a newbie!

please confirm content of line 30 in style.css.
is it line:
.menu ul { list-style-type: none; }

????

so do i just put the line you gave me between the brackets?

also, i didn’t get your last statement… i’ve read about h1 tags but i wouldn’t know where to insert it. please walk me into the procedure.

Sorry, line 30 is coming as a different line in my firebug. Make the modifications at the CSS rule using this selector: #site-title a. Yeah just add them as new styles to your CSS rule.

About the headers, they are used for search engine bots and visual readers to better detect what is the big headings of your website. So usually you want h1 to be for your website title, h2 to be your page title, etc. etc… In your case your anchor is holding your logo image and your site title. If I were you I’d fix it by removing the image from the anchor and placing the anchor inside a h1. Then reconfigure your CSS to reposition your elements as you want it.

adding text-align: center; to the style of #site-title might also work …

#site-title { float: left; width: 210px; padding-right: 40px; overflow: hidden; line-height: 27px; font-size: 23px; text-align: center; }

did the style.css change but it didn’t work…

here is what my line looks like:

#site-title { float: left; width: 210px; padding-right: 40px; overflow: hidden; line-height: 27px; font-size: 23px; position:relative; left:15px }

i’m still not following you on the h1 thing…
i should remove the image, then what?

thanks for your patience ??

If you’re just starting with HTML and CSS, forget what I said about using a header for now ??

And for the css, this is the line you want to change:

#site-title a { color: #333; font-weight: bold; text-decoration: none; position:relative; left:15px; }

if you don’t see the changes after an edit to style.css, you might need to clear the browser cache, by pressing ‘CTRL F5’ or ‘reload’ or whatever your browser needs…

tried:
#site-title a { color: #333; font-weight: bold; text-decoration: none; position:relative; left:15px; }

and

#site-title { float: left; width: 210px; padding-right: 40px; overflow: hidden; line-height: 27px; font-size: 23px; text-align: center; }

but still no go.

i did refresh the page, though nothing changed. i also tried opening the blog with firefox and internet explorer unsucessfuly.

maybe the problem has to do with the way i set the logo in the first place. i did it at header.php

this was the original line:

<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"><?php bloginfo( 'name' ); ?></a>

which i replaced with:

<a href="<?php echo home_url( '/' ); ?>"><img src="https://www.thefactoryofthoughts.com/blog/wp-content/uploads/2012/07/Untitled-1_2.jpg" alt="<?php bloginfo( 'description' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"align="left" /><?php bloginfo( 'name' ); ?><br><br><?php bloginfo( 'description' ); ?></a>

just wondering…

hey there!

i finally got to do it right!

i actually used a whole different solution, which was editing my logo with the title right inside it. that way i don’t have to trouble with the alignment.

thank you for your time and assistance.

Hi guys

I noticed you managed to reach somewhere I need to edit too.
what i would like to do is, I want to put some social network small icons right beneath the site title.

can someone help me?