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: 9/8/2007 5:36:49 PM Date Modified: Subscribers: 0 Subscribe Alert
Rate It:
NR
XPoints: N/A Replies: 3 Views: 22 Favorited: 0 Favorite
4 Items, 1 Pages 1 |< << Go >> >|
ASP.Novice
Asp.Net User
how to align to the right of an image using css9/8/2007 5:36:49 PM

0

Hi I have a header section for my website that I would like to display the company logo to the left and have the name and address on the right. Here is my code thus far.

CSS:

body{

margin:25px 25px 0 25px;

padding:0;

background:white;

}

#header{

background: red;

height: 190px; /*Height of Header section*/

border-bottom-color:Black;

border-left-color:Black;

border-right-color:Black;

border-top-color:Black;

border-bottom-style:solid;

border-left-style: solid;

border-right-style: solid;

border-top-style: solid;

}

.HeaderAddress /*Align Name & Address to the right*/

{

text-align:right;

vertical-align:top;

color:white;

font-style:italic;

font-size: large;

}

.imgBorder /*Border for image*/

{

left: 2px;

border-right: black thin solid;

border-top: black thin solid;

border-left: black thin solid;

border-bottom: black thin solid;

position: relative;

top: 2px;

height: 182px;

}

HTML for masterpage:

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

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!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>

<link href="StyleSheet.css" type = "text/css" rel ="stylesheet" />

</head>

<body>

<form id="form1" runat="server">

<div id = "header">

<img src="logo1.gif" class="imgBorder" />

</div>

</form>

</body>

</html>

 

As you can see I have created a "class" for the name and address I'm just not sure how to use it in the HTML section.

Hears hoping somebody can help me!

 
Mikesdotnetting
Asp.Net User
Re: how to align to the right of an image using css9/8/2007 8:40:30 PM

0

If you use float, it's relatively simple:

<div id="header>
    <div id="address">
    Some address text
    </div
    <div id="logo">
    <img src="Somesource.gif" />
    </div>
</div>

#logo{float:right;} 

Regards Mike

8 out of 10 questions have already been asked. Their answers can be found using Google. Go on, try it.

If you prefer code samples or tutorials in another language, translate it for free at www.codechanger.com
millet
Asp.Net User
Re: how to align to the right of an image using css9/8/2007 9:16:19 PM

0

Hi,

Here is aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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 id="Head1" runat="server">

<title>Untitled Page</title>
<link href="StyleSheet.css" type = "text/css" rel ="stylesheet" />

</head>

<body>

<form id="form1" runat="server">

<div id = "header">
<div id="logo">
<img src="logo1.gif" />
</div>
<div id="address">

    sdfgsdfg<br />
    ghjfgj<br />
    kghjkghjkgjk<br />

</div>

</div>
</form>

</body>

</html>

 

and this is css:

 

body{

margin:25px 25px 0 25px;
padding:0;

background:white;

}

#header{

background: red;

height: 190px; /*Height of Header section*/

border-bottom-color:Black;

border-left-color:Black;

border-right-color:Black;

border-top-color:Black;

border-bottom-style:solid;

border-left-style: solid;

border-right-style: solid;
border-top-style: solid;

width: 800px;

}

.HeaderAddress /*Align Name & Address to the right*/

{

text-align:right;

vertical-align:top;

color:white;

font-style:italic;
font-size: large;

}
#header #logo
{
    width: 200px;
    float: left;
}

#header #address
{
    width: 600px;
    margin-left: 200px;
    text-align: right;
}
.imgBorder /*Border for image*/

{

left: 2px;

border-right: black thin solid;

border-top: black thin solid;

border-left: black thin solid;

border-bottom: black thin solid;

position: relative;

top: 2px;
height: 182px;

}

__
Please mark post as answer if it helps, if not come back and ask again!
ASP.Novice
Asp.Net User
Re: how to align to the right of an image using css9/8/2007 9:19:30 PM

0

Thanks Mike

Easy when you know how Smile

Thats the heading sorted now for my sidebar Smile

4 Items, 1 Pages 1 |< << Go >> >|


Free Download:

Books:
Dreamweaver CS3 For Dummies Authors: Janine Warner, Pages: 434, Published: 2007
HTML & XHTML: The Complete Reference Authors: Thomas A. Powell, Pages: 956, Published: 2003
Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: In One Hour A Day Authors: Laura Lemay, Rafe Colburn, Pages: 816, Published: 2006
How to Do Everything with HTML & XHTML Authors: James H. Pence, Pages: 416, Published: 2003
Web Design in a Nutshell: A Desktop Quick Reference Authors: Jennifer Niederst Robbins, Pages: 796, Published: 2006
Dreamweaver CS3 for Windows and Macintosh: Visual Quickstart Guide Authors: Tom Negrino, Dori Smith, Pages: 559, Published: 2007
Creating Web Pages All-in-One Desk Reference For Dummies Authors: Richard Wagner, Richard Mansfield, Emily A Vander Veer, Pages: 672, Published: 2007
Head First HTML with CSS & XHTML: with CSS & XHTML Authors: Elisabeth Freeman, Eric Freeman, Pages: 658, Published: 2005
Macromedia Dreamweaver 8 for Windows and Macintosh: for Windows and Macintosh Authors: Tom Negrino, Dori Smith, Pages: 514, Published: 2005
HTML 4 For Dummies Authors: Ed Tittel, Mary C. Burmeister, Pages: 432, Published: 2005

Web:
Aligning Images The Right Way Using CSS | Devlounge Aligning Images The Right Way Using CSS. This here’s a demo image Images are great for blog posts and chunks of text in general. ...
Float image to left or right using CSS Float image to left or right using CSS. ... In HTML, the align attribute is used to align images to the left or right side of a page, allowing text to wrap ...
Aligning, indenting text, margins, borders css tutorial Using CSS to align text and images. Controlling margins and borders, ... You can apply padding size for the top, bottom, left, and right sides of an element ...
Alignment, font styles, and horizontal rules in HTML documents Using CSS, for example, you could achieve the same effect as follows: ... Subsequent text flows along the image's right side. right: Floats the object to ...
right align an image.. Mar 9, 2005 ... On Wed, 9 Mar 2005 13:14:16 -0700, Deep Third Man [EMAIL-REMOVED]> wrote: > I need to right align an image and am using something like: > . ...
right align an image.. Mar 9, 2005 ... Block elements cannot be positioned using the text-align css property. ... right align an image.. - Deep Third Man, 9th March 2005 20:32 ...
CSS Positioning Properties This example demonstrates how to set the vertical align of an image in a text. ... The CSS positioning properties allow you to specify the left, right, top, ...
Replacing with CSS equivalent - CSS IMG.right { BORDER: 0; align: right }[/color] When using CSS, you don't .... This pushes the image to the right as far as it can go, but leaves some space ...
CSS Float Html Tutorial The section header in this example is defined using

which, as the CSS class name indicates, instructs the header to float right, ...
Creating clickable background images using CSS - Joomla! Documentation In the header you have placed a background image with a big company logo and ... vertical-align: bottom; text-align: right; }. Example 2 (CSS 2.1) HTML: ...

Videos:
AK vs. FACE Boxing






problem with master/child page displaying edge line

use sitemap to display nav items

menuitem will not select

datepick popup in a gridview does not work in master page

styles

causesvalidation property seems to be not working in a derived page

sitemap links open in a new window

session in master page

sql sitemap provider problems with root node

right aligment of dynamicmenu (submenu) of horizontal menu

why my master.page labels did not update?

disable wizard navigation button in templatedwizardstep

how to relate a stylesheet to an contentplaceholder?

menu item customization

bc30456: 'theme' is not a member of 'asp.default_aspx'.

changing the menu user control programmatically

why does this image repeat with no-repeat set??

aspx in subdirectory don't apply my css

uip navigation and sitemap ( breadcrumb control )

asp.net code giving me error that it cannot be connected to sql server

treeview parent checkbox selection when child nodes are selected and vise a versa

css for theme works in iis but not asp.net development server

horizontal menu...pls help

treeview general questions

css style not applied

getting a property in previouspage w/ a masterpage

asp:sitemappath print style

tree view control in list box

include labels in a master page that are assigned text by pages

accessing div tag on a masterpage from contentpage
   
  Privacy | Contact Us
All Times Are GMT