Wrox Programmer Forums
|
BOOK: Beginning ASP.NET Web Pages with WebMatrix
This is the forum to discuss the Wrox book Beginning ASP.NET Web Pages with WebMatrix by Mike Brind, Imar Spaanjaars ; ISBN: 978-1-1180-5048-4
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning ASP.NET Web Pages with WebMatrix section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old May 6th, 2012, 08:01 PM
Authorized User
 
Join Date: Aug 2010
Posts: 50
Thanks: 7
Thanked 0 Times in 0 Posts
Default help with images

Hi,

I am trying get an image to show up on the header. Currently i have the url set on the CSS, but i don't know how to get it to display using _Header.cshml.

here is my css:
Code:
/*
--------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------
HTML Elements
--------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------
*/
*
{
    font-family: verdana, Arial, sans-serif;
    margin-left: 0px;
}

body
{
    margin: 0;
    background-color: #CDB38B;
    color: Black;
}

/*
--------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------
Site Structure
--------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------
*/
#header, #navstrip
{
    width:100%
}

#header
{
    background-image: url(images/header.png);
    width: 844px;
    height: 218px;    
}

#header a
{
    width:844px;
    height:138pcx;
    display:block;
}

#navstrip
{
    background-image: url(images/MenuBackground.png);
    width: 827px;
    height:36px;
    padding-top:7px;
    padding-left:17px;
}

#head, #nav, #wrapper
{
    margin: auto;
}

#wrapper
{
    width:844px;
    margin:auto;
}

#nav a, #nav a:hover, #nav a:visited
{
    color: #A0522D;
    font-size: 1.0em;
    text-decoration:none;
    padding: 5px, inherit;
}

#right_side, #content
{
    float: right;
    min-height:400px;
}

#right_side
{
    width: 180px;
    background-color:Aqua;
}

#content
{
    color:#777788;
    font-size:0.8em;
    width:850px;
    min-height:500px;
    padding-top:10px;
    padding-bottom:10px;
    padding-left:20px;
    float:left;
    background-color:#778899;
    color:blue;
}

#footer
{
    clear:both;
    font-size: 90%;
    color:Black;
    text-align:center;
}
my _header.cshtml
Code:
<div id ="head"><p>Header</p></div>
my _Layout.cshtml
Code:
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@Page.Title</title>
        <link href="@Href("~/Content/StyleSheet.CSS")" rel="stylesheet" type="text/css" />
        
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                @RenderPage("~/Shared/_header.cshtml")
            </div>
            <div id="navstrip">
                @RenderPage("~/Shared/_Navigation.cshtml")
            </div>
            <div id="side">
                <div id="right_side">This is where extra content goes</div>
            </div>
            <div id="content">
                @RenderBody()
            </div>
            <div id="footer">
                <p>This is where the footer goes</p>
            </div>
        </div>
    </body>
</html>
Any help would be appreciated.
 
Old May 7th, 2012, 03:26 AM
Imar's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 17,089
Thanks: 80
Thanked 1,576 Times in 1,552 Posts
Default

Hi there,

WIth CSS images are looked for relative to the location of the CSS file. So this:

background-image: url(images/header.png);

assumes that the folder that contains your CSS file has a subfolder called images that contains your images. Is that the case? Maybe you need this instead:

background-image: url(../images/header.png);

This would be the case if you had a folder called Styles and a folder called Images at the same level for example where the CSS resides in Styles and the images in the images folder.

Cheers,

Imar
__________________
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Follow me on Twitter

Author of Beginning ASP.NET 4.5 : in C# and VB, Beginning ASP.NET Web Pages with WebMatrix
and Beginning ASP.NET 4 : in C# and VB.
Did this post help you? Click the button below this post to show your appreciation!
The Following User Says Thank You to Imar For This Useful Post:
hozdaman (May 8th, 2012)
 
Old May 8th, 2012, 10:01 PM
Authorized User
 
Join Date: Aug 2010
Posts: 50
Thanks: 7
Thanked 0 Times in 0 Posts
Default

Thanks for all your help Imar.





Similar Threads
Thread Thread Starter Forum Replies Last Post
Images Eeyore BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 11 November 8th, 2009 03:56 AM
Load Images from and Save Images to a Database cyndie VB.NET 2 August 17th, 2008 06:42 AM
IMAGES OldCoder BOOK: Professional ASP.NET 2.0 Design: CSS, Themes, and Master Pages ISBN: 978-0-470-12448-2 3 November 20th, 2007 11:26 AM
IMAGES chmosiii CSS Cascading Style Sheets 6 November 8th, 2005 10:09 AM
Images TomAsp Access ASP 2 September 11th, 2004 07:34 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.