Anyone know how I can move the placement of my top banner ad? RESOLVED

by Oeshy

Posted: 15 years ago 6 replies

WEB DESIGN

Hi guys I need to move the placement of my top banner ad. I want to align it with the border of my current header. To do this I need to move it down 27px.

Any ideas how I can achieve this?

The site is in my sig. I can't link because I'm under 15 posts sorry.

Here is the code where my banner appears in the header.php

If you need more information to solve it just ask. Thanks

Code:

<div id="head" class="clearfloat">

<div class="clearfloat">
    <div id="logo" class="left">
    <a href="<?php echo get_option('home'); ?>/"><img src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/ft-header1.jpg" width="486px" height="106px" alt="Fight-Tourist" /></a>
    <div id="tagline"><?php bloginfo('description'); ?></div>
    </div>

    <div class="right">
    <a target="_blank" href="banner"><img src="banner"></a>
    </div>

</div>

#banner #move #placement #top

OaldDesign

15 years ago

hey you should check the css file i dont think that you can change that from the code you gave here

Thanks
1 reply

Signature

Graphic Design & Web Development Services: http://www.oalddesign.com
Banner Design Services: http://bannercheapdesign.com

{{ DiscussionBoard.errors[1175710].message }}

Oeshy

15 years ago

Ok here is my CSS.

I wasn't sure which part of my CSS you would need so I put it all here. Hope you can help me out now. Thanks boss.

Code:

/* HTML Elements */
* {
    margin:0;
    padding:0;
    }

body {
    font: 100% Arial, Helvetica;
    background: #FFF;
    color: #333;
    }

p {    
    margin: 15px 0;
    }

a:link, a:visited {
    color: #3c78a7;
    text-decoration:none
    }

a:hover, a:active {
    color: #3c78a7;
    text-decoration:underline;
    }

a img {
    border:0;
    }

code {
    font: 1.0em 'Courier New', Courier, Fixed;
    background:#ececec;
    }    

acronym, abbr, span.caps {    
    font-size: 0.9em;
    letter-spacing: .07em;
    cursor: help;
    }            

acronym, abbr {
    border-bottom: 1px dashed #999;
    }

blockquote {
    padding: 10px 10px 0 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    background: #eee;
    font:1.0em Arial;
    line-height:1.5em;
    margin:10px 0px;
    }

select {
    width: 130px;
    }    



/* Structure */


#head {
    width:960px;
    margin:0px auto;
    margin-top:15px;
    padding:0px;
    font-size:0.7em;
    }


#page {
    width:940px;
    margin:0px auto;
    padding:10px;
    background:#ececec;
    font-size:0.7em;
    }

.left, .alignleft {
    float:left;
    }

.right, .alignright {
    float:right;
    }


/* Navigation Bar*/
#navbar {
    margin:0 auto;
    margin-top:15px;
    padding:0px 10px;
    text-transform:uppercase;
    background:#2c2c2c url(images/navbar.png);
    }

#page-bar {
    width:722px;
    }

#page-bar ul {
    list-style: none;
    }

#page-bar li {
    float:left;
    list-style:none;
    cursor: pointer;
    display:block;
    border-right:1px solid #333;
    }

#page-bar li:hover {
    background: #3c78a7;
    }


#page-bar a, #page-bar a:visited {
    margin: 0px;
    padding:10px 16px;
    font-weight:bold;
    color:#FFF;
    display:block;
    }

#page-bar a:hover {
    text-decoration:none;
    display:block;
    }

#searchform {
    width:194px;
    float:right;
    text-align:right;
    padding-top:8px;
    margin-right:10px;
    }

/* Dropdown Menus */        
#page-bar li {
    float: left;
    margin: 0px;
    padding: 0px;
    }
    
#page-bar li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 132px;
    text-transform:none;
        position:relative;
        z-index:10;
    }

#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
    width: 122px;
    float: none;
    margin: 0px;
    padding: 4px 10px 4px 10px;
    background: #5b5b5b url(images/dots_nav.gif) repeat-x top;
    }

#page-bar li li a:hover, #page-bar li li a:active {
    background: #909090;
    padding: 4px 10px 4px 10px;
    }

#page-bar li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }



#page-bar li li { 
    }

#page-bar li ul a { 
    width: 140px;
    }

#page-bar li ul a:hover, #page-bar li ul a:active { 
    }

#page-bar li ul ul {
    margin: -16px 0 0 142px;
    }

#page-bar li:hover ul ul, #page-bar li:hover ul ul ul, #page-bar li.sfhover ul ul, #page-bar li.sfhover ul ul ul {
    left: -999em;
    }

#page-bar li:hover ul, #page-bar li li:hover ul, #page-bar li li li:hover ul, #page-bar li.sfhover ul, #page-bar li li.sfhover ul, #page-bar li li li.sfhover ul {
    left: auto;
    }



/* Text*/

h1 {
    font:3.5em Arial;
    font-weight:bold;
    letter-spacing:-0.08em;
    }

h2 {
    font:2.3em Georgia, "Times New Roman";
    }

h3 {
    font:1.3em Arial;
    margin-bottom:3px;
    color:#3c78a7;
    font-weight:bold;
    }

h4 {
    font:1.0em Arial;
    }

h3.cat_title, h3.cat_title a {
    color:#333;
    letter-spacing:-0.05em;
    font-size:0.85em;
    }

h3#respond {
    margin-top:0px;
    padding-top:20px;
    }

h3#comments {
    margin-top:32px;
    padding-left:0px;
    }

h3.authors {
    margin-top:15px;
    }

/* Index Page*/

#logo {
    width:350px;
    }

#tagline {
    margin-top:5px;
    font-size:1em;
    color:#333;
    }

#top {
    padding:0;
    }

#headline {
    width:590px;
    float:left;
    background:#fff;
    padding:10px;
    font-size:1.05em;
    line-height:1.5em;
    margin:0;
    }

#headline  div.title {
    font-weight:bold;
    font:2.4em Georgia;
    letter-spacing:-0.05em;
    display:block;
    padding-bottom:5px;
    }

#headline div.meta {
    display:block;
    margin-top:-5px;
    padding-bottom:2px;
    }

#headline p {
    padding-bottom:15px;
    }

#featured {
    width:300px;
    background:#fff;
    float:right;
    padding:10px 10px 9px 10px;
    }

#featured .clearfloat {
    margin-top:7px;
    margin-bottom:8px;
    }

#featured .info {
    margin-top:5px;
    padding-top:5px;
    float:right;
    width:180px;
    }

#featured .title {
    font-weight:bold;
    }

#headline a img, #featured a img {
    border:1px solid #ccc;
    margin-top:5px;
    margin-right:10px;
    padding:2px;
    }


#middle {
    width: 920px;
    background:#fff;
    float:right;
    padding:10px;
    margin:10px 0;
    }

.category {
    width:164px;
    float:left;
    border-top:8px solid #333;
    margin:0px;
    padding:5px 10px 10px 10px;
    background:#fff;
    }

.category p {
    margin:0;
    }

#cat-1, #cat-3, #cat-5  {border-top:8px solid #333333;}
#cat-2, #cat-4 {border-top:8px solid #3c78a7;}

.category span.cat_title, #front-popular h3, #front-list .cat_title, #archive .cat_title {
    text-transform:lowercase;
    margin:0;
    font-weight:bold;
    font-size:1.5em;
    letter-spacing:-0.05em;
    }

#front-popular h3 {
    color:#fff;
    }

.category a {
    color:#333;
    display:block;
    background:none;
    }

.category a:hover {
    background:none;
    color:#fff;
    text-decoration:none;
    }

#cat-1:hover, #cat-3:hover, #cat-5:hover {background:#333333; color:#fff; }
#cat-2:hover, #cat-4:hover {background:#3c78a7; color:#fff; }
#cat-1:hover a, #cat-3:hover a, #cat-5:hover a {background:#333333; color:#fff; }
#cat-2:hover a, #cat-4:hover a {background:#3c78a7; color:#fff; }

#bottom {
    width: 940px;
    }

#front-list {
    width:590px;
    background:#fff;
    padding:10px;
    font-size:1.05em;
    line-height:1.75em;
    float:left;
    }

#archive {
    padding-top:15px;
    font-size:1.05em;
    line-height:1.75em;
    }

#front-list blockquote {
    padding: 0px 10px 0 10px;
    }

#front-list .title, #archive .title {
    font-weight:bold;
    font:2.0em Georgia;
    letter-spacing:-0.05em;
    }

#front-list .clearfloat, #archive .clearfloat {
    padding-bottom:10px;
    border-bottom:1px dotted #ccc;
    margin-bottom:10px;
    }

#front-list .spoiler, #archive .spoiler {
    display:block;
    margin-top:3px;
    }

#front-list p, #archive p {
    margin:0px;
    padding:0px;
    }

.author {
    font-size:0.8em;
    font-weight:bold;
    }

.meta {
    font-size:0.8em;
    color:#333;
    }

.meta a {
    color:#333;
    }

#headline p, #featured p {
    margin:0;
    }


/* Content Page*/

#content {
    width:590px;
    background:#fff;
    padding:10px;
    font-size:1.05em;
    line-height:1.75em;
    float:left;
    min-height:400px;
    }

#content .breadcrumbs, #content .breadcrumbs a {
    font-weight:bold;
    color:#333;
    }

#content h2.title {
    font:2.2em Georgia;
    font-weight:bold;
    letter-spacing:-0.05em;
    border-bottom:1px solid #ddd;
    border-top:3px solid #ddd;
    padding:5px 0px;
    }

.post {
    font-size:1.05em;
    line-height:1.75em;
    }

.post p {
    margin-top:0px;
    }

.post .clearfloat {
    border-bottom:1px dotted #ccc;
    margin:10px 0px;
    }

.post ul, .post ol, #front-list ul, #front-list ol {
    margin-bottom:15px;
    }

.post ul li, #front-list ul li {    
    list-style:square;
    margin-left:30px;
    }

.post ol li, #front-list ol li {    
    list-style:decimal;
    margin-left:30px;
    }

.post ol li ul li, #front-list ol li ul li {    
    list-style:square;
    margin-left:20px;
    }

.post img, .post a img, #front-list img, #archive img {
    border:1px solid #ccc;
    margin:0 10px 5px 0;
    padding:2px;
    }

.post .ads {
    margin-top:10px;
    }

.entry {
    margin-top:20px;
    }

#stats {
    margin-top:0px;
    padding:4px 0px;
    text-transform:uppercase;
    font:0.8em Arial;
    display:block;
    }

#stats span {
    padding: 0px 20px 0px 0px;
    }

#stats span a:hover {
    background:none;
    }

#stats span a {
    color:#333;
    }

#stats img, #nav img {
    border:0px;
    margin:0px;
    padding:0px;
    }

#tools {
    width:590px;
    height:25px;
    font-size:0.95em;
    }

#tools a:hover {
    background:none;
    }

.navigation {
    padding:5px 0px;
    text-align:Center;
    }

/* Sidebar*/
#sidebar {
    width:320px;
    float:right;
    margin:0px 0px 0px 0px;
    }

#sidebar h3 {
    font:1.1em Arial;
    font-weight:bold;
    background:#333;
    color:#fff;
    margin:10px 0px 5px 0px;
    padding:3px 10px;
    }

#sidebar-top, #sidebar-bottom, #sidebar-left, #sidebar-right {
    width:300px;
    float:right;
    padding:0px 10px 10px 10px;
    background:#fff;
    }

#sidebar-bottom, #sidebar-middle {
    margin-top:10px;
    }

#sidebar-middle {
    width:320px;
    float:right;
    }

#sidebar li {
    list-style:none;
    border-bottom:1px dotted #ccc;
    display:block;
    padding:2px 0px 2px 13px;
    background:url(images/sub.png) no-repeat 0 0px;
    }

#sidebar li ul li:last-child{
    list-style:none;
    border-bottom:0px dotted #ccc;
    display:block;
    padding:2px 0px 0px 13px;
    background:url(images/sub.png) no-repeat 0 0px;
    }

#sidebar-ads {
    width:300px;
    float:right;
    margin-bottom:10px;
    padding:10px;
    background:#fff;
    }


/* Form Elements */

select {
    border:1px solid #333;
    width:100%
    }
    
.field {
    padding: 2px;
    border:1px solid #333;
    background:#fff;
    font-size:1.0em;
    }

#s {
    padding:1px;
    font-size:1.0em;
    width:150px;
    }
    
#searchsubmit {
    padding-left:5px;
    }

#commentform input {
    width: 140px;
    margin: 5px 5px 1px 0;
    }

#commentform textarea {
    width: 99%;
    margin-top:5px;
    }



/* Comments*/

.commentlist cite {
    font-style:normal;
    margin-bottom:4px;
    display:block;
    }    

.commentlist blockquote {
    background:#ededed;
    }
            
.commentlist li {
    padding: 10px 0px 10px 0px;
    list-style:none;
    margin-bottom:3px;
    }

.commentlist li li {
    background:none;
    border:none;
    list-style:square;
    margin:3px 0 3px 20px;
    padding:3px 0;
    }

.commenttext {
    padding: 10px 10px 0px 10px;
    background:#f2f2f2;
    border-top:1px solid #ddd;
    border-bottom: 1px solid #ddd;
    width:495px;
    float:right
    }
        
.commentlist cite strong {
    font-size:1.1em;
    }
    
li.my_comment {
    background: #FFF;
    border:none;
    }

li.my_comment cite strong {
    font-size: 1.3em;
    color:#313228;
    }
    
#commentform small {
    background:#FFF;
    font-weight:bold;
    padding:0;
    }
    
.commentmetadata {
    color:#4d4d4d;
    display: block;
    margin-top:3px;
    text-align:right;
    font-size:0.9em;
    }

.commentmetadata a, .commentmetadata a:visited {
    color:#959382;
    }
    
.commentlist small {
    background:#e9e9e9;
    }

.avatar {
    border:1px solid #bbb;
    margin:0px 10px 0px 0px;
    float:left;
    padding:2px;
    width:55px;
    height:55px;
    }    

#comment {
    width:590px;
    background:#fff;
    }

/* Footer*/

#front-popular {
    font-size:0.7em;
    color:#fff;
    width: 940px;
    background:#2c2c2c url(images/bottombar.png) bottom no-repeat;
    margin: 0 auto;
    padding:10px;
    }

#recentpost, #mostcommented {
    width:280px;
    float:left;
    padding:10px;
    border:1px solid #fff;
    }

#mostcommented {
    margin-left:17px;
    }

#recent_comments {
    width:280px;
    float:right;
    padding:10px;
    border:1px solid #fff;
    }

#recentpost a, #mostcommented a, #recent_comments a {
    color:#fff;
    }

#recentpost ul, #mostcommented ul, #recent_comments ul {
    margin-top:5px;
    }

#recentpost ul li, #mostcommented ul li, #recent_comments ul li {
    list-style:none;
    border-top:1px dotted #fff;
    padding:5px;
    display:block;
    }

#recentpost ul li:hover, #mostcommented ul li:hover, #recent_comments ul li:hover {
    background:#3c78a7;
    color:#fff;
    }

#recentpost ul li:first-child, #mostcommented ul li:first-child, #recent_comments ul li:first-child {
    border-top:0px dotted #fff;
    }


#footer {
    margin: 0 auto;
    width: 960px;
    font-size:0.6em;
    padding-top:10px;
    padding-bottom:10px;
    }


/* Float Properties*/

.clearfloat:after {
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    }

.clearfloat {
    display: inline-block;
    }


/* Hides from IE-mac */
* html .clearfloat {
    height:1%;
    }

*+html .clearfloat {
    height:1%;
    }

.clearfloat {
    display:block;
    }

Thanks

{{ DiscussionBoard.errors[1175781].message }}

sottalov 15 years ago

im checking on it. trying to look at it
- Thanks
- 1 reply
{{ DiscussionBoard.errors[1175851].message }}
- Oeshy 15 years ago
  
  Originally Posted by sottalov
  
  im checking on it. trying to look at it
  
  thankyou sottalov I appreciate it.
  
  Thanks
  
  {{ DiscussionBoard.errors[1175940].message }}
houdy 15 years ago
Two ways to do this, one is to make the image 106px tall the same as the one on the left, basically adding the margin needed to the image instead of messing with the themes code.

The other way is to mess with this code in the stylesheet, and I am not sure exactly what code to use so hopefully someone will elaborate on my suggestion and get it exactly right for you. But here is what I think you need to edit:
Code:

.right, .alignright { float:right; }
Now try to add some padding or margin to it like this:
Code:

.right, .alignright { margin-top:27px; padding-top:27px; float:right; }
Now I am no CSS expert and I usually have to use trail and error to get results. I would try just the margin code on its own first, then the padding on its own. I doubt you need both. You may also need to experiment with the value of the margin or padding. Hopefully someone will come by and elaborate or pinpoint the code on this. Make a backup of the stylesheet before editing so you can restore any mistakes.
- [ 1 ] Thanks
Signature

Jeff Houdyschell
WordPress Guides | WordPress Installation
Work At Home Business Blog | Proven Income Opportunities | Best Work At Home Jobs
{{ DiscussionBoard.errors[1176114].message }}
Oeshy 15 years ago

I added the margin line and it worked. thanks for the help i really appreciate it.

I also have one more problem if you have the time to look at it.

It is in my footer. My right footer is not in the same proportion as my middle. I will make another thread about it with the code. one moment.
- Thanks
{{ DiscussionBoard.errors[1176182].message }}

Anyone know how I can move the placement of my top banner ad? RESOLVED

Trending Topics

How did you turn it all around?

Any thoughts on golf's latest phenom...Scottie Scheffler??

What's the Best IM-Related Skill to Learn Today That Can Help in the Future?

Some interesting stats about brand comms

Infographic: How B2B marketers on LinkedIn can maximise their efforts for better audience reach