CSS - Logo Question

Hi,

I just installed Gallery on my website, and I'm trying to integrate it with the main theme of the rest of the site.

Well I'm having a problem with the banner overlapping the logo in FireFox. It renders fine in IE7 (surprisingly), but not in FF.

Have a look he
http://www.lightblu.com/gallery/main.php

un/pass: test/test

You can look at how I want it on the homepage, or anywhere else for that matter.

What am I doing wrong? I tried everything with no success.

Thanks guys
--Waj

Hi I really need help
I've added new template to my site and it's custom template(means it was on my web site provider)
BUT logo area is too small
And I also can't get rid of the picture that's in header and that came with template
The biggest problem is that I can't move logo area UP it's in same line always,it just increases down,when I try to make it bigger
I have NO idea about CSS coding so I really don't know how to fix it

HELP!!!

Hi

I am trying to insert a logo into my header at Site and here is the CSS code for the Header section:

Code:

/* HEADER */
#header h1{    
    font-family:Edwardian Script ITC;
    font-size:300%;
    font-weight:bold;
}
#header h1 a, #header h2{
    color:#000;
    margin-left:2em;
}
#header h1 a:hover{
    background:transparent;
    color:#000;
    text-decoration:none;
}
#header h2{
    padding-left:7em;
    font-size:120%;
    font-weight:bold;
    font-style:italic;
}

/* END HEADER */

I want to have this inserted which puts a logo icon exactly where I need it

Quote:
background-image: url(http://guayadeque.wikidot.com/local--files/start/guayadeque2.png);
height: 80px;
width: 80px;
position: absolute;
top: 5px;
left: 10px;


And this is exactly how I want it but no matter where I try to put it, it mucks up the entire Header.

Can someone shed some light on where that can go on the Header to be a logo icon in the position I want it?

I'm trying to get a dynamically populated logo to center in a div. I've found a solution which works in FF, IE7 and safari, but I've tried everything and I can get this to sit centered in IE6.

The html looks like this:

<div>
<table width="100%" height="100%">
<tr>
<td>
<a href="/somelink/">
<img src="dynamicallyGeneratated.jpg"/>
</a>
</td>
</tr>
</table>
</div>

The URL is sportsmembership.com.au/boxhillhawksfc/ and the logo is in the top left corner

The dtd is valid xhtml transitional, and IE6 is rendering in standards compliant mode. I've tried display block, and margin:0 auto on the image, and i've tried text-align center on the td, a and img tags, and I cannot get this to sit properly in ie6.

The image vertically aligns correctly but always sits to the left of the div, no matter what text-alignment I give it.

I can't find a way to center this with margins or padding because the image is dynamically called from a database, and can have different dimensions.

Hi,

I want to place a Logo and Banner in the header using CSS, i tried this but no use its not working properly.

PHP Code:
 div#main #header{
    width:100%;
    height:95px;
    text-align: center;
    background:url(images/top_bg.jpg);
}

div#header #header_title{
    text-align:left;
    font-family: Arial, Helvetica, sans-serif;
    font-size:25px;
    color:#ffffff;
    padding-left:20px;
    padding-top:20px;
}
div#header #header_title #banner{
    text-align:right;
    width:468px;
    height:60px;
    background:url(images/banner.jpg);
    background-repeat: no-repeat;
    padding-right:20px;
    padding-bottom:20px;
} 




Then i used this in html

PHP Code:
<div id="page">
<div id="header">
<div id="header_title">
Your Logo 
<div id="google"></div>
</div>

</div> 




But its not working properly, please please please help me....thanks...

vinodkv

I want to place the page title on the left and the pages logo on the right of the page. The logo must be directly accross from the title.

Can anyone suggest some CSS and html

Below is my feeble attempt

HTML:
<div id="header">
<p>Report Title
<span class="logo"><img src="logo.gif">
</span>
</p>
</div>

CSS:
#header p {
text-align: left;
}

#header .logo {
text-align: right;
}

I'm trying to get a search table to sit next to a logo, but the table is being placed below the logo. I'm not sure why it's being forced below, especially when there is no width defined.

Also, I would like the table converted into div's if possible, and I'm not quite sure how to do that.

Can someone take a look at this code and guide/tell me how to get this done?

you can view the page at http://66.201.102.201/headertest.hml

you should be able to grab the source. The logo is missing, but you can see the red X where the logo should be.

I just want the search stuff to be directly to the right of the logo, not below it.

Hello,

I'm having some problems with with the menu and CSS.

I'm trying to retouch some aspects of my website, and the last think I need to do now is the menu.

Right now, here is how it looks like:
www.lightblu.com

You see the menu on the very top, then the logo below it, and then the banner below the logo. My users were "annoyed" by the amount of empty space between the top menu and the banner. Having thought of many possibilities, I encountered a template over at TemplateMonster, which is the exact menu I need. The reason I did not purchase it is that usually TM uses tables rather than pure CSS.

And here is the menu I'm talking about:
http://www.templatemonster.com/website-templates/18925.html

You see the menu?


And that's the exact same menu-concept that I'd like to have. Of course the background will be Black just as my website, rather than the greyish one you see at TM.

Now here is the problem I'm having. When I'm trying to align the logo with the menu, it just doesn't happen. I have the logo the on top left, which is fine, but then the menu appears below the logo on the right side. And I just cannot figure this thing out. Grrrr.. What am I doing wrong?

Thanks a ton guys!

My site is here...

css here...

I have two .gif files I want to use in the header... the main one (header.gif) should be centered (as it is now)... while the other (header_spread.gif) should repeat on the left and right sides of the centered header.gif... The .gif files are transparent, so I can't use the spread as the entire background... I'd also like to refrain from making header.gif (don't care about header_spread.gif) a background or making the background of header.gif white, and have it in an <img> tag instead so I can dynamically change my header with the seasons... (though if background is the only way, I could have a header class for each season and have my script change it, so that solution would technically work too, but create a larger css file.)

I need help formatting this properly... I can get the spread to work as a background for the entire div header, but that messes up the look of the center gif...

Thanks
Bryan

Hi,

I'm new using CSS and was just handed the task of creating an external style sheet that will 'brand' the web page of a new service we are using with my company's logo and menu.

Our page has a logo on the left, with a menu bar extending to the right of it, then a graphic bannner with the company's slogan below all of it.

The requirements are for an external style sheet which will apply this to each page of the services hosted pages.

I desperately need an example of how this is done, or CAN it be done with an external style sheet (and what code needs to go into the HTML file to make it work).

Any help would be greatly appreciated. I've spent 4 days searching for an example and have come up dry, or what I did find didn't work. This is my last resort and I need to finish the project today.

Tillius

Greetings all,

Firstly, I am just now starting to use CSS instead of tabled layouts. I must say I am impressed by the power of CSS, but am still learning the ins-and-outs of it.

I was wondering if there are any good references/books you'd suggest purchasing or looking at online?

Now for my specific question. For my simple page project I am using to learn CSS, I have a <div> that denotes the header. This is supposed to simply have a small .jpg image on the left and some text on the right, like this:
___________________________
|[ i m a g e ]....................text |

However, it comes out looking like this:

___________________________
|[ i m a g e ]..........................|
|.....................................text|

I suspect it is due to the align: right of the text, but am not sure how to correct it.

Relevant snippets of code:

testpage.html
Code:

...
<div class=header>
<img src="image.jpg"><h1>TEXT</h1>
</div>
...

style.css
Code:

...
#header{
background-color: #FFF;
border: 2px solid #666666;
width: 860px;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
margin-bottom: 0;
}

#header h1{
text-align: right;
margin-right: 20px;
font-style: italic;
letter-spacing: 3px;
}

Thanks for any advice.

Hi,

I have three <div>

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
 <div id="container" style="width:500px;height:700px;background-color:green;">
     <div id="one" style="float:left;width:100px;background-color:#ff9900; ">one<br>one<br>one<br>one<br>one<br>one<br>one<br></div> 
     <div id="three" style="float:right;width:100px;background-color:red;">three </div> 
     <div id="two" style="float:left;width:70%;background-color:#ff9988;">two jdfk hnldncf ddhf sd ohdnfc kbldhcv ohsvnskd hvjnsdhv hviopsdhv kbhopvd v onksdnv oln;sdmnv m;mv mnml;vm  vm;klf kdfl'gl;v 'fg 'kdf'kvb'l ;'lfk</div>
    
 </div>
 </BODY>
</HTML>

I noticed when I increased the % width of my <div two> it goes below my <div three>

I was under the impression it should just stay at the same level and text should wrap around my div three? But I guess that's not the case. Am I doing the something wrong or is this the expected behavior?

how can i center a div in the center of a page, but within that div align every thing to the right. It seems simple but I can't get it to fly.

Hi,

I have the below css style that I am mostly using my pages, I have a standart anchor style. Anyway I want to attach "the other one" link with another style without touching the current style. How can I do this? Does CSS has a nested thing like c++?

Thank you,
Cem

Code:

<html>
<head>
<style type="text/css">
<!--
a:link {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}

a:active {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}

a:visited {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #0069b7; text-decoration: none;}

a:hover {font-family:verdana,helvetica; font-weight: bold; font-size:11px; color: #000000; text-decoration: none;}
-->
</style>
</head>

<body>
<a href="http://url">First one</a><br>
<a href="http://url2">The other one</a><br>
</body>
</html>