School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!

Programming Help

Web Development



What's Here?

  • Members: 300,481
  • Replies: 826,137
  • Topics: 137,481
  • Snippets: 4,420
  • Tutorials: 1,148
  • Total Online: 1,774
  • Members: 80
  • Guests: 1,694

Welcome to Dream.In.Code
Become an Expert!

Join 300,481 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 1,774 people online right now. Registration is fast and FREE... Join Now!




Image CSS problem

 

Image CSS problem
Frode789

16 Jun, 2009 - 02:54 AM
Post #1

D.I.C Head
**

Joined: 11 Jan, 2008
Posts: 64


My Contributions
Hi.

I'm trying to fit my own logo (which is larger then the default one), but I can't seem to make the image fit. Here is the CSS:

CODE

#hdr {
    background: url('./images/header_back.gif');
    width: 100%;
    height: 200px;
    margin: 0;
    padding: 0;
}

#logo {
    background: url('./images/header_logo.png');
    width: 258px;
    height: 54px;
    float: left;
    margin: 5px 25px 0px 25px;
    padding: 0;
    
}


(the header has
CODE
<div id="hdr"><div id="logo"><
for the relevant CSS)

I've tried several things, but without success. All I get is the start of the image, but chopped off. Isn't it enough to alter the size values? (and resize the header_back.gif)

How do I fit my custom image if not, which is 768*183px? (there is enough "space" for the image on the sides, width wise) This should be so easy, which makes it kinda embarrassing to ask for help tongue.gif

This post has been edited by Frode789: 16 Jun, 2009 - 02:55 AM

User is offlineProfile CardPM
+Quote Post


tommyflint

RE: Image CSS Problem

16 Jun, 2009 - 03:01 AM
Post #2

D.I.C Addict
Group Icon

Joined: 24 Jul, 2008
Posts: 584



Thanked: 28 times
My Contributions
I'm guessing you have tried to alter the height and width within the #logo to fit your custom logo?

Is it possible you could show us the current layout (screenshot or link?)

tommyflint
User is offlineProfile CardPM
+Quote Post

noorahmad

RE: Image CSS Problem

16 Jun, 2009 - 03:03 AM
Post #3

Webmaster
Group Icon

Joined: 12 Mar, 2009
Posts: 2,018



Thanked: 125 times
Dream Kudos: 1350
My Contributions
for image try this:
HTML
img {
height: 100px;
width: 100px;
}


first insert image in a div then use this code:
HTML
#Table_01 #mylogo img {
height: 100px;
width: 100px;
}


you are inserting image to background and we have a few properties for background image.


QUOTE
s it possible you could show us the current layout (screenshot or link?)
User is offlineProfile CardPM
+Quote Post

Frode789

RE: Image CSS Problem

16 Jun, 2009 - 03:09 AM
Post #4

D.I.C Head
**

Joined: 11 Jan, 2008
Posts: 64


My Contributions
Here is the link:
http://intoxicated-guild.22web.net/forums/index.php

@ tommy:

Well, it somewhat worked as it did last time I tried to just alter the size. The menu (on the right side) disappears, and the search box is not located on the right place smile.gif

@ noora: I'll try that now.

This post has been edited by Frode789: 16 Jun, 2009 - 03:10 AM
User is offlineProfile CardPM
+Quote Post

tommyflint

RE: Image CSS Problem

16 Jun, 2009 - 03:13 AM
Post #5

D.I.C Addict
Group Icon

Joined: 24 Jul, 2008
Posts: 584



Thanked: 28 times
My Contributions
cheers, so currently is the logo saying aion your custom logo?
User is offlineProfile CardPM
+Quote Post

Frode789

RE: Image CSS Problem

16 Jun, 2009 - 03:14 AM
Post #6

D.I.C Head
**

Joined: 11 Jan, 2008
Posts: 64


My Contributions
QUOTE(tommyflint @ 16 Jun, 2009 - 03:13 AM) *

cheers, so currently is the logo saying aion your custom logo?


Yes it is icon_up.gif

However, the menu and search box problem is still there.

This post has been edited by Frode789: 16 Jun, 2009 - 03:18 AM
User is offlineProfile CardPM
+Quote Post

RudiVisser

RE: Image CSS Problem

16 Jun, 2009 - 03:18 AM
Post #7

.. does not guess solutions
Group Icon

Joined: 5 Jun, 2009
Posts: 1,872



Thanked: 137 times
Dream Kudos: 125
Expert In: PHP, MySQL, HTML, CSS, C#

My Contributions
It seems to work fine for me, what's the actual problem?
User is offlineProfile CardPM
+Quote Post

Frode789

RE: Image CSS Problem

16 Jun, 2009 - 03:20 AM
Post #8

D.I.C Head
**

Joined: 11 Jan, 2008
Posts: 64


My Contributions
QUOTE(MageUK @ 16 Jun, 2009 - 03:18 AM) *

It seems to work fine for me, what's the actual problem?


Menu on the right side disappeared, and the search box is placed in the middle instead of on the right side. (this happened when I got the new logo)
User is offlineProfile CardPM
+Quote Post

tommyflint

RE: Image CSS Problem

16 Jun, 2009 - 03:20 AM
Post #9

D.I.C Addict
Group Icon

Joined: 24 Jul, 2008
Posts: 584



Thanked: 28 times
My Contributions
I can't see where the problem is, maybe you could change it back to the orignal logo so we can see what it is meant to look like smile.gif

tommyflint

Edit: Sorry was posting while you two wrote something

This post has been edited by tommyflint: 16 Jun, 2009 - 03:21 AM
User is offlineProfile CardPM
+Quote Post

noorahmad

RE: Image CSS Problem

16 Jun, 2009 - 03:21 AM
Post #10

Webmaster
Group Icon

Joined: 12 Mar, 2009
Posts: 2,018



Thanked: 125 times
Dream Kudos: 1350
My Contributions
or try this:
HTML
<style type="text/css">
<!--
#logo img {
height: 100px;
width: 200px;
}
#logo {
height: 100px;
width: 200px;
}
-->
</style>
</head>
<div id="logo"> <img src="header_logo.png.jpg" width="768" height="183" />
</div>
User is offlineProfile CardPM
+Quote Post

tommyflint

RE: Image CSS Problem

16 Jun, 2009 - 03:23 AM
Post #11

D.I.C Addict
Group Icon

Joined: 24 Jul, 2008
Posts: 584



Thanked: 28 times
My Contributions
Looks fine to me?

Attached Image

tommyflint
User is offlineProfile CardPM
+Quote Post

RudiVisser

RE: Image CSS Problem

16 Jun, 2009 - 03:24 AM
Post #12

.. does not guess solutions
Group Icon

Joined: 5 Jun, 2009
Posts: 1,872



Thanked: 137 times
Dream Kudos: 125
Expert In: PHP, MySQL, HTML, CSS, C#

My Contributions
QUOTE(Frode789 @ 16 Jun, 2009 - 03:20 AM) *

QUOTE(MageUK @ 16 Jun, 2009 - 03:18 AM) *

It seems to work fine for me, what's the actual problem?


Menu on the right side disappeared, and the search box is placed in the middle instead of on the right side. (this happened when I got the new logo)

No, it works perfectly fine, seriously.

The issue is that your screen isn't big enough. Think about it, you're trying to display a what, 600px logo next to a 600px menu? When they're floated together and your screen isn't at least 1200px, it's gonna start knocking other stuff out. Make your logo smaller.

If you want proof that I'm not lying, look at these:
http://rudivisser.com/notwork.png
http://rudivisser.com/work.png

Your code works fine, get a smaller logo wink2.gif

@noorahmed, I have absolutely no idea what you're trying to acheive but that code is extremely contradictory and I don't see how it would help him at all.

This post has been edited by MageUK: 16 Jun, 2009 - 03:27 AM
User is offlineProfile CardPM
+Quote Post

Frode789

RE: Image CSS Problem

16 Jun, 2009 - 03:27 AM
Post #13

D.I.C Head
**

Joined: 11 Jan, 2008
Posts: 64


My Contributions
Oh ok. Thanks tongue.gif

I'll try to resize it! smile.gif

This post has been edited by Frode789: 16 Jun, 2009 - 03:28 AM
User is offlineProfile CardPM
+Quote Post

RudiVisser

RE: Image CSS Problem

16 Jun, 2009 - 03:31 AM
Post #14

.. does not guess solutions
Group Icon

Joined: 5 Jun, 2009
Posts: 1,872



Thanked: 137 times
Dream Kudos: 125
Expert In: PHP, MySQL, HTML, CSS, C#

My Contributions
Eugh I was just about to quote you and hit refresh instead, noorahmed's code wouldn't have helped, it just resized your logo to a silly size.

Here's what's happening:
IPB Image
User is offlineProfile CardPM
+Quote Post

Frode789

RE: Image CSS Problem

16 Jun, 2009 - 03:41 AM
Post #15

D.I.C Head
**

Joined: 11 Jan, 2008
Posts: 64


My Contributions
Ah I see. Well, I resized it too a much smaller size (400*148), and this is the result:

Does it look ok at you guys? For me the logo is chopped @ the bottom and slightly on the right side.

IPB Image
User is offlineProfile CardPM
+Quote Post

RudiVisser

RE: Image CSS Problem

16 Jun, 2009 - 03:45 AM
Post #16

.. does not guess solutions
Group Icon

Joined: 5 Jun, 2009
Posts: 1,872



Thanked: 137 times
Dream Kudos: 125
Expert In: PHP, MySQL, HTML, CSS, C#

My Contributions
It works fine for me, is that Firecrap? Don't expect that to do things correctly on it's own.

Try explicitly setting a height.
User is offlineProfile CardPM
+Quote Post

noorahmad

RE: Image CSS Problem

16 Jun, 2009 - 03:46 AM
Post #17

Webmaster
Group Icon

Joined: 12 Mar, 2009
Posts: 2,018



Thanked: 125 times
Dream Kudos: 1350
My Contributions
did you tried this http://www.dreamincode.net/forums/index.ph...110240&hl=#
User is offlineProfile CardPM
+Quote Post

Frode789

RE: Image CSS Problem

16 Jun, 2009 - 03:49 AM
Post #18

D.I.C Head
**

Joined: 11 Jan, 2008
Posts: 64


My Contributions
@ Mage: hehe, yes it is FireFOX smile.gif I sat height and cleared cache. Works now.

Thanks for the help fellas!

One last thing: I I were to place a image under the menu (so it looks like a bar. The menu looks so "empty" without a image under it..), how would for instance that look like code wise?

This post has been edited by Frode789: 16 Jun, 2009 - 03:50 AM
User is offlineProfile CardPM
+Quote Post

Toxicterror

RE: Image CSS Problem

16 Jun, 2009 - 04:07 AM
Post #19

You have [int.MAX] new eMails
****

Joined: 10 Mar, 2009
Posts: 625



Thanked: 14 times
My Contributions
add a background picture!!

CODE

<style type="text/css">
<!-- THAT DIV's ID/CLASS -->
    {
    background: url("pic.jpg");
    background-repeat:x-repeat;
    }
</style>
<div ... > NAVI </div>


This post has been edited by Toxicterror: 16 Jun, 2009 - 04:12 AM
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 11/8/09 03:57AM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month