Logo messes up alignment.

Viewing 4 replies - 1 through 4 (of 4 total)
  • noname1

    (@greyisgood)

    15 years, 9 months ago

    generally one doesn’t put images into heading tags.

    One youu have inserted the img you need to edit the css to ensure it fits.

    best find a theme that has a header img where you need it, and just change the file.

    Thread Starter captainlarryiii

    (@captainlarryiii)

    15 years, 9 months ago

    Oh ok,that makes since why I was having problems.:p Thanks.
    What kind of code would I add to the css to make it work?

    Also are there any easier ways to add images to this template, because I’d like to add an image to the blue heading part.

    /*
Theme Name: Blueeagle
Theme URI: http://www.freewordpresslayouts.com
Version: 1.0
Description: 2 Column theme
Author: Smartertemplates.com
Author URI: http://www.freewordpresslayouts.com
*/

/* Links */

a:link { text-decoration: none; color: #338AF3; }

a:visited { text-decoration: none; color: #338AF3; }

a:hover, a:active { color: #C84028; }

/* Headings */

h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 20px 0 10px; }

h1 { font-size: 32px; margin-bottom: 0px; margin-top: 10px;}

h2 { font-size: 28px; }

h3 { font-size: 24px; }

h4, h5, h6 { font-size: 20px; }

/* Other Html Elements */
.titles { font-weight: normal; border-bottom-width: 0; font-size: 24px; text-decoration: none; underline: none;}
.titles a:link, .titles a:visited, .titles a:active {
text-decoration: none;
underline: none;
font-size: 24px;
font-weight: normal;
border-bottom-width: 0;
}

pre, blockquote
{
	overflow: auto;
	padding: 0 10px;
	margin: 20px 30px;
	line-height: 1.8em;
	background-color: #f5f5f5;
	border: 1px solid #e0e0e0;
}

pre:hover, blockquote:hover
{
	background-color: #f0f0f0;
	border: 1px solid #d0d0d0;
}

pre { padding-top: 10px; padding-bottom: 10px; }

code { color: #779900; font-family: Consolas, Verdana, "Courier New", Sans-Serif; }

ul, ol { line-height: 2.0em; }

ul { list-style-image: url(images/bullet.gif); }

abbr, acronym { font-style: normal; border-bottom: 1px dotted #333333; cursor: help; }

del { text-decoration: line-through; color: #999999; }

ins { text-decoration: none; color: #009977; }

/* Structure */

body
{
	margin: 0;
	padding: 0;
	color: #222222;
	background-repeat: repeat-x;
	background-position: top left;
	background-color: #F3F3F3;
	background-image: url(images/bg.gif);
	background-repeat: repeat-x;
	font: normal 76% "Trebuchet MS", "Lucida Grande", Verdana, Georgia, Sans-Serif;
}

#wrapper2 {
width: 950px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;

}

#navigation
{
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	float: right;
	margin-top: 0px;
}
#headerbg {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: center;
width: 970px;
height: 341px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}

.categories {
width: 950px;
height: 30px;
background-color:#F2F2F2;
}

.categories ul {
list-style-type: none; list-style-image: none; float: left; height: 30px; margin: 0px 0px 0px 0px;
}

.categories li {
 float: left;
}

.categories li a:link,
.categories li a:visited
{
	float: left;
	color: #9B9B9B;
	display: block;
	padding: 5px 10px;
	margin-right: 1px;
	height: 25px;
	font-size: 12px;
	margin-top: 0px;
}
#wrapper
{
	clear: both;
	float: left;
	width: 100%;
	color: #555555;
	background-color: #FFFFFF;
	padding-top: 0px;
	background-image: url(images/content-bg.gif);
	background-repeat: repeat-x;
}

#content-wrapper
{
	width: 60%;
	float: left;
}

#content
{
	float: left;
	padding: 0 0px 10px 30px;
}

#sidebar-wrapper
{
	width: 35%;
	float: right;
	margin-top: 15px;
}

#sidebar
{
	float: right;
	padding: 0px 15px 10px 10px;
	width: 210px;
	margin-right: 15px;
	margin-top: 0px;
}

#footer
{
	clear: both;
	float: left;
	width: 930px;
	text-align: left;
	padding-left: 20px;
	color: #338AF3;
	font-size: 11px;
	padding-bottom: 10px;
	background-position: bottom;
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	height: 50px;
	}

#footer a {
	color: #338AF3;
	font-size: 11px;
	}

#footer a: visited {
	color: #338AF3;
	}
#footer a:hover {
	color: #338AF3;
	}
#extras
{
	float: left;
	width: 780px;
	color: #C7AA92;
	text-align: left;
	padding: 0 10px 10px;
	margin: 10px 12px 20px;
	background-color: #f5f5f5;
	border-top: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
}

/* Header */

#navigation h1 { margin-left: 100px; padding-top: 46px; float: left; text-transform: lowercase; font-size: 35px;}
#navigation h1 a { color: #FFFFFF;}

/* Navigation */

#navigation ul { list-style-type: none; list-style-image: none; float: left; margin-top: 36px; padding: 0px 0px 0px 0px; margin-left: 30px; }

#navigation li { float: left; }

#navigation li a:link,
#navigation li a:visited
{
	float: left;
	color: #FFF;
	display: block;
	padding: 20px 10px;
	margin-right: 1px;
	height: 25px;
	font-size: 13px;
	margin-top: 4px;
	font-weight: bold;
	background-image: url(images/nav-line.gif);
	background-repeat: no-repeat;
	background-position: right;
}

#navigation li a:hover,
#navigation li a:active
{
	color: #FFF;
	font-size: 13px;
	margin-top: 4px;
	background-image: url(images/nav-bg.gif);
	font-weight: bold;
	background-repeat: repeat-x;
}

#navigation li.active a
{
	color: #555555;
	background-color: #ffffff;
}

/* Wrapper */

#wrapper a:link { font-weight: bold; }

#wrapper a:visited { font-weight: bold; }

#wrapper a:hover, #wrapper a:active { }

/* Content */

#content .post-title a { border-bottom-width: 0; }

#content .post p.img { float: left; margin: 0 15px 0 0; }

#content .post p.img img { padding: 8px; border: 1px solid #d0d0d0; background-color: #eeeeee; }

/* Sidebar */

.sideblock
{
	padding: 5px 10px;
	margin-bottom: 20px;
	background-color: #F9F9F9;
	border: 1px solid #EBEBEB;
}

.post-wrapper {
padding-left: 30px;
padding-right: 30px;
padding-top: 10px;
padding-bottom: 0px;
width: 593px;
margin-left: -20px;
margin-bottom: 0px;
float: left;
}

.sideblock ul { }

.sideblock h3 { margin-top: 5px; font-size: 16px; color: #A2A2A2; padding-top: 4px; padding-left: 10px; font-weight: bold; display: block; border-bottom: 2px solid #DBDBDB; }

#sidebar dt { margin: 0; padding-top: 5px; font-weight: bold; color: #666666; }

#sidebar dd { margin: 0 0 5px; padding-bottom: 5px; line-height: 1.8em; }

#sidebar dd a:link { border-bottom-width: 0; font-weight: normal;  border-bottom: none; text-decoration: none;}

#sidebar dd a:visited { border-bottom-width: 0; font-weight: normal; border-bottom: none; text-decoration: none; }

#sidebar dd a:hover, #sidebar dd a:active { border-bottom: none; text-decoration: none;}

/* Extras */

#extras h6 { font-size: 14px; text-transform: uppercase; color: #555555; }

#friends
{
	float: left;
	width: 150px;
	margin-left: 20px;
	margin-right: 10px;
}

#links
{
	float: left;
	width: 275px;
	margin-right: 50px;
}

#about
{
	float: left;
	width: 250px;
	margin-right: 20px;
}

#friends ul { padding-left: 20px; }

#links dl, #links dt, #links dd { margin: 0; padding: 0; }

#links dt { font-weight: bold; padding-top: 5px; }

#links dd { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dotted #999999; }

	/* Comments Styling */
#commentlist li {
margin-bottom: 1.5em;
padding-bottom: 1em;
border-bottom: 1px solid #700000;
}

#commentform {
margin: 1em 0;
background: #FFFFFF;
width: 280px;
}

#commentform textarea {
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform textarea:hover {
background: #FFFFFF;
border: 1px solid #d6d3d3;
}
#commentform textarea:focus {
background: #ffffff;
border: 1px solid #939793;
}

#commentform #email, #commentform #author, #commentform #url {
font-size: 1.1em;
background: #f8f7f6;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #d6d3d3;
width: 280px;
}
#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
font-size: 1.1em;
background: #ffffff;
border: 1px solid #939793;
width: 280px;
}
#commentform input{
margin-bottom: 3px;
}

.date {
	background: url(images/date.gif) no-repeat;
	height: 56px;
	margin-bottom: 0px;
	width: 56px;
	text-align: center;
	float: left;
	margin-top: 15px;
}
.date .month {
	display: block;
	color: #FFD7C2;
	padding: 2px 0px;
	text-align: center;
	text-transform: uppercase;
	font-size: 10px;
	margin-top: 2px;
	font-weight: bold;
	margin-bottom: 3px;
}
.date .day {
	display: block;
	color: #FFFFFF;
	font: 2.3em Georgia;
	padding-top: 0px;
	text-align: center;
	margin-top: -12px;
}

.recent {
width: 271px;
height: 203px;
margin-left: 18px;
background-image: url(images/recent-bg.gif);
padding: 10px;
float: left;
margin-top: 15px;
}
#left {
	width: 60px;
	float: left;
}

.slogan {
font-size: 20px;
color: #FFF;
text-transform: lowercase;
margin-left: 20px;
margin-bottom: 2px;
float: left;
margin-top: 15px;
}

.search_bg {
height:40px;
width:356px;
float: right;
margin-right: -60px;
margin-top: 37px;
}

#search {
vertical-align:top;
color:#000000;
padding:0;
}

#search input {
background: transparent;
font-size:11px;
color:#000000;
font-family:Tahoma, arial, verdana, courier;
width:150px;
height:22px;
vertical-align:middle;
margin: 10px 0px 0 10px;
padding:0;
border: none;
}

#search .input {
width:79px;
height:33px;
background:none;
border:none;
vertical-align:middle;
margin:0;
padding:0;
margin-left: 20px;
}

.recent-titles {
font-size: 18px;
margin-left: 10px;
margin-top: 10px;
}

    noname1

    (@greyisgood)

    15 years, 9 months ago

    it’s a bit hard to tell what is wrong with the site and how you’d like it.

    this _may_ help

    #headerbg {
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: center;
width: 970px;
height: 341px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
}

    find out what img file it referes to

    noname1

    (@greyisgood)

    15 years, 9 months ago

    you are new to CSS, the clue to learning, is start be realising parts of the html/php refer to css, and normally have logical names, like headerbg for the background of the header. any name can be used, but esp with free themes have logical naming system so you can edit.

    lots of CSS refernces out on the web.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Logo messes up alignment.’ is closed to new replies.

Tags