Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 210
  • Last Modified:

image not showing correctly with CSS

Hi,

I am creating a website for a friend and for the first time and thinking about using CSS. I have an image that i want to align at the very top of the page but cannot for some silly (most probably very simple) reason I cant get it to show properly.

Im creating this in an aspx page and also for some reason this will only work if I line break the <div> tag a number of times...

Willl be very grateful for any assistance provided...


I typically would have used teh valign but have not used this for some time and also cannot remember where this would go....

 
.head_image  {
	display:block;
	background-image:url(../_images/DNA_Head.png);
	background-repeat:no-repeat;
	background-position: 140px 0px;

}

Open in new window

<link href="CSS/DNA.css" rel="stylesheet" type="text/css" />
</head>
<body class="body">

    <form id="form1" runat="server">
    <div>
    <span class="head_image">
    
           
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    
           
    </div>
    </form>
</body>
</html>

Open in new window

0
SimonPrice33
Asked:
SimonPrice33
  • 2
1 Solution
 
jonahzonaCommented:
You need to give it some size properties.

Also, I would recommend using a DIV here as upposed to a span. Currently your span isn't even closed, so it will make stuff funky.

Anyway, also understand the difference between ID's and CLASSES. ID's are UNIQUE and CLASSES will REPEAT throughout the page. Sorry for the caps, it is faster than making them bold....

So in this case, I would say to change this from a SPAN CLASS to a DIV ID.

The HTML would look something like this:

<link href="CSS/DNA.css" rel="stylesheet" type="text/css" />
</head>
<body class="body">

    <form id="form1" runat="server">
    <div>
    <div id="head_image"></div>
           
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    
           
    </div>
    </form>
</body>
</html>

Open in new window


The CSS would look something like this:

#head_image  {
	background-image:url(../_images/DNA_Head.png);
	background-repeat:no-repeat;
        width: (put width in px);
        height: (put height in px);
        float: left;
}

Open in new window


From what it seems like to me, if this is your first time using CSS I would recommend installing Firebug (a plugin for firefox) and going to a website with a similar layout of what you are trying to accomplish. When you open firebug you can't not only view the source code, but it lets you do some great peaking into how HTML and CSS work together.

Let me know if you have any more questions.
0
 
atipicoCommented:
Put this line
min-height: 100px;
on your code, like this:

.head_image  {
        display:block;
        background-image:url(../_images/DNA_Head.png);
        background-repeat:no-repeat;
        background-position: 140px 0px;
        min-height: 100px;
}

Open in new window

0
 
DesignbyonyxCommented:
Umm, you need to close the span tag
<link href="CSS/DNA.css" rel="stylesheet" type="text/css" />
</head>
<body class="body">

    <form id="form1" runat="server">
    <div>
    <span class="head_image">
    
           
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
    
       </span> <!-- See this guy... he's required -->
    </div>
    </form>
</body>
</html>

Open in new window

0
 
atipicoCommented:
One more thing: if you specify the height (or min-height), you can remove all the "<BR>"s
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now