CodeVerge.Net Beta


   Explore    Item Entry   Register  Login  
Microsoft News
Asp.Net Forums
IBM Software
Borland Forums
Adobe Forums
Novell Forums




Can Reply:  No Members Can Edit: No Online: Yes
Zone: > NEWSGROUP > Asp.Net Forum > general_asp.net.master_pages_themes_and_navigation_controls Tags:
Item Type: NewsGroup Date Entered: 1/9/2008 6:59:48 AM Date Modified: Subscribers: 0 Subscribe Alert
Rate It:
NR
XPoints: N/A Replies: 6 Views: 86 Favorited: 0 Favorite
7 Items, 1 Pages 1 |< << Go >> >|
Jabalang
Asp.Net User
How to add footer image below div wrapper image using CSS?1/9/2008 6:59:48 AM

0

?Hi all,?How to add footer image below div wrapper image?using?CSS?
thx.



Regards,
Jabalang
--------------------------------------------------
Thanks for building the Internet as a Library.
Thanks for sharing and being helpful.
Rinze
Asp.Net User
Re: How to add footer image below div wrapper image using CSS?1/9/2008 8:17:50 AM

0

it really depends:
1. is the image in a container? Does the container have a margin, how is positioned? Can you post some code?

If the distance is always the same, a nice trick is to give it a negative top-margin. Depending on your code, there might be a better solution though.


Hope this helps !
Rinze

---------
please select 'mark as answer' if this post helped you!
joppo
Asp.Net User
Re: How to add footer image below div wrapper image using CSS?1/9/2008 3:28:43 PM

0

Hi there

put some colorful borders on the div tags - noone can say anything now - its simply invisible. put borders and edit the post.

Regards,

Zhivko 


Bulgaria
Jabalang
Asp.Net User
Re: How to add footer image below div wrapper image using CSS?1/9/2008 4:23:18 PM

0

?nope the distance is not the same for different pages. some is longer for the div tag.


Regards,
Jabalang
--------------------------------------------------
Thanks for building the Internet as a Library.
Thanks for sharing and being helpful.
mfoof
Asp.Net User
Re: How to add footer image below div wrapper image using CSS?1/10/2008 7:11:29 PM

0

If you post the markup, we could give a more specific answer. How about:

Add another element below the wrapper div, set the background image as this image and make sure to position it the same as the wrapper div and set height, etc..

<div id="wrapper' class="yourclass">

blah blah blah

</div>

<div id="underwrapper" class="underwrapper">

</div>


--Please don't forget to mark as answer just in case I happened to actually stumble upon it--



Michael Fouquette
Chief Operating Geek
Skype: mfoof01
MikeWorks.NET - Asp.Net for small business and non-profits
Amanda Wang - M
Asp.Net User
Re: How to add footer image below div wrapper image using CSS?1/11/2008 6:02:34 AM

0

Hi,

You can uss the css to adjust the proportion of the height of the divs, you can check the below code:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="TreeView_Cause_case2_MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        html, body
        {
            height: 100%;
            font-family: Arial;
            font-size: small;
            width: 100%;
        }
        #box
        {
            background-color: Orange;
            width: 100%;
            height: 100%;
        }
        #header
        {
            background-color: Orange;
            height: 5%;
            width: 100%;
            text-align: center;
        }
        #footer
        {
            background-color: Orange;
            background-image: url(../../../image/007004.gif);
             height:5%;
            width: 100%;
            text-align: center;
        }
        #menu
        {
            height: 4%;
            width: 100%;
            margin-top: 0;
        }
        #content
        {
            background-color: Olive;
            vertical-align: middle;
            height: 86%;
            text-align: center;
        }
        table
        {
            height: 100%;
            margin-top: 0;
        }
    </style>
 
</head>
    <body style="margin-top:0; margin-left:0; margin-right:0; margin-bottom:0;">
          <form id="Mainform" runat="server">
          <div id="box">
                  <div id="header">Header</div>
                     <div id="menu">        
                   <asp:Menu ID="HomeMenu" runat="server" StaticMenuStyle-Height="120%"  Width="100%" Height="150%"  BackColor="#FF6666" Font-Names="Verdana"  Font-Size="Small" ForeColor="Black" Orientation="Horizontal" BorderStyle=None  
                                     >  
                               <Items>
                                   <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                                   <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                                   <asp:MenuItem Text="New Item" Value="New Item">
                                       <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                                       <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                                       <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                                   </asp:MenuItem>
                                   <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                                   <asp:MenuItem Text="New Item" Value="New Item"></asp:MenuItem>
                               </Items>
                       </asp:Menu>
                  </div>
                       <div id="content"><asp:ContentPlaceHolder runat="server" ID="MainContentPlaceHolder"></asp:ContentPlaceHolder></div>           
                   <div id="footer"> 2007 All Rights Reserved<br />Powered by:************</div>
               </div>
       </form>
          </body>

</html>

Hope it helps.


Please remember to mark the replies as answers if they help and unmark them if they provide no help.


Yours sincerely,
Amanda Wang
Microsoft Online Community Support
Jabalang
Asp.Net User
Re: How to add footer image below div wrapper image using CSS?1/14/2008 6:41:08 AM

0

Problem solved, I add a footer div tag under the wrapper div tag.
then use css to set the footer div tag back ground image.


Regards,
Jabalang
--------------------------------------------------
Thanks for building the Internet as a Library.
Thanks for sharing and being helpful.
7 Items, 1 Pages 1 |< << Go >> >|


Free Download:

Books:
CSS: the missing manual Authors: David Sawyer McFarland, Pages: 476, Published: 2006
Flexible Web Design: Creating Liquid and Elastic Layouts with CSS Authors: Zoe Gillenwater, Pages: 324, Published: 2008
Adding Ajax Authors: Shelley Powers, Pages: 382, Published: 2007
Painting the Web Authors: Shelley Powers, Pages: 638, Published: 2008

Web:
How to add footer image below div wrapper image using CSS? - ASP ... Add another element below the wrapper div, set the background image as this image and make sure to position it the same as the wrapper div ...
Digital Web Magazine - Everything You Know About CSS Is Wrong Oct 21, 2008 ... Finally, producing table-like grid layouts using CSS will be quick and easy. ...
A List Apart: Articles: Creating Liquid Layouts with Negative Margins Jun 15, 2004 ... First, we create the below image. It is 200 pixels wide because the ... Our new wrapper div will contain the background image for our new ... Two- and three- column, liquid page designs with header and footer are easy to dash off using ... Ryan Brill whips up two quick CSS layouts to demonstrate the ...
Div Layout Problem [Archive] - CodingForums.com I have started to try and learn to code by hand using CSS div ... I think that the 'wrapper' div is what you would refer to as the ... Try adding "clear: both; " to the footer; that should make the footer only begin below both columns. ... replace background-color: #fff with image and add overflow: ...
Add zoom icon to images using CSS (and jQuery, of course) Add zoom icon to images using CSS (and jQuery, of course) ... This can be easily done with pure CSS. Take a look at the code below. Inside the each link there ...
. There are no elements inside links. We can add hem dynamically instead: .... I wanted a simple footer. Copyright © Janko Jovanovic 2009. ...

How to add footer image below div wrapper image using CSS? - ng ... How to add footer image below div wrapper image using CSS?, ... Add another element below the wrapper div, set the background image as this ...
ContentPlaceHolder background colour problem with CSS - ng.asp-net ... How to add footer image below div wrapper image using CSS? - ng ... background- color: Olive; vertical-align: middle; height: 86%; text-align: center ; . ...
adding FCKeditor to an old Club version - ng.asp-net-forum ... how to add footer image below div wrapper image using css? treeview and html- files · page attributes in web.config and master page attributes ...






trying to create an image gallery within a masterpage

disabling/enabling menu items while using sitemapdatasource

presenting menu control in horizontal view

how to refer nodes of a menu control which is bound to a sitemap ?

login controls in content place holder brake design

pathing of images from css

treeview collapse and expand dynamically

problem with passing the text box value when using master page

menu selection not staying highlighted

how to set theme for the whole web application instead of a single web page

create a page or a usercontrol?

printing, masterpages, and css

returning back on navigation

menu control problem in ie 7

pages rights for each user

removing arrow icons from menu control

no grid panels in vs2005

basic treeview issue

menu items are only selectable when hovered over the text

sub menu orientation

treeview - sitemap - expand parent node by clicking text

menu button with multiview

web sitemap menu control issues

menu

render the menu control as ul instead of table

looking for a quick method to develop good looking prof. web apps.

themes in .net 2.0 apply for html controls

order of a control on the page

theming and tagmappings mess up

links to inc/decrease font size?

   
  Privacy | Contact Us
All Times Are GMT