|
CSS - Trouble Getting Graphic To Float Right
I created our site's home page using strictly presentational mark-up and am now trying to lay it out strictly using css. Here is my attempt:
jalc.org/index_css.html The graphic on the right-hand side with the word Jazz and the musicians should align with the large center image (just under the drop-down nav). Here is how the page is supposed to look: jalc.org I can't get that image to float right and align with the top of the large image. If anyone has any suggestions I would be most appreciative if you could share. I have spent too much time on this already. I'm going mad. Thanks, Andy Similar Tutorialshi I have this.. http://www.thehundreds.com/thewall/index.php as u can see the threads to the right are acting up once the float of the login is done, because the height is not the same.. is there anyway to force the threads div to continue to line up, or better yet, have that div to the right of the login without using a float?? ok im having some trouble with the layout of some stuff. i have my webpage set up so i have a <div> floating to the left and a content area to the right. in my "content" area, i have an img where i used "float:left;" so i can have text to the right of it. but now after that, i have <br clear='left' />. the problem is that when i put that break in there, it clears the float for the first <div>. is there anyway around this? here is some sample code. Code:
<html>
<head>
<style type="text/css">
div{
float:left;
width:150px;
color:red;}
</style>
</head>
<body>
<div>
<p>text</p><p>text</p><p>text</p><p>text</p>
</div>
<img scr='fake.jpg'>
<p>text</p>
<br clear='left' />
<p>text under thats not susppose to clear float to the left</p>
</body>
</html>
Ok, so I've got a decent design laid out, and I'm working on creating the markup for it, but I've run into some trouble. It's a fairly common style, two collumn with a header and footer. The navbar is a 2 deep nested unordered list sitting on the left side inside a floated div called "sidebar." What I'd like, is for the space to the right of it to function as if it was a separate cell as it were (in tables lingo anyway, if you can't tell I'm still learning the new way of things). The funny thing is, IE does this by default, and I know that's incorrect, but I really wish I could get the layout working just like it works in IE. The page is located at: http://www.digital-traffic.net/gallery.php CSS is at: http://www.digital-traffic.net/styles/main.css I am having trouble with my navigation. it works fine in safari and firefox, but when i try it in IE for the PC the main navigational elements don't move. does anyone know why? www.iconiqdesigner.com thanks! subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hi There - Am converting another design from tables, working with a CMS (Drupal) and an existing CSS / table combination that I didn't write and have no choice about. Think of the header as having three sections. The top section has logo on the left, search box on the right. Rounded corners. I'm cool with that section. Then there's a space. Created a div for the space. Love the space. Problems with the space in IE. Will go into it later. Then there's the next section. Rounded corners. Contains the entire page. On the left is a pulldown menu, about 1 cm from the top. On the right is a tabbed menu. This menu has flexible height. It needs to be right up against the bottom with the menu below it. Call this section the tabbed menu section. Third section. Immediately below that is a bar menu like the one Apple's got. Looks like a metal bar with divisions. Call this primary links. ---------- First, the space between. In IE, when you roll over the bar menu, the space disappears. Won't come back. Initially, in the second section, floated the pulldown menu left and the tabbed menu right. That worked fine, except that the tabbed menu had a width of 100% and pushed up the pulldown menu so the section was too wide. When I put it to 65%, all hell broke loose with the bar menu in the third section below it and bits of it snuck up into the second section. If I left it alone, and left the tabbed menu at 100%, when I checked over its container with firebug, it said that it was being affected by the primary links. I figured that out also because the background for that container was a really weird color that I finally found in the background of the navigation id and changed to white. Primary was overlapping it so I couldn't see it with firebug. So after fiddling with several clearing methods, I gave up and decided to try a table. Table worked fine, and the second section looks good except that there's a one pixel space between the tabbed menu and the bar menu. --------- It is my greatest wish right now to be able to float the pulldown to the left, the tabbed menu to the right and have the primary links stay below. I wish I could get the space to work and I wish for a clear understanding of it all so I can then figure out where to put the corners. Anyone who can enlighten me on this would have my undying gratitude. I've been working on this all day and the deadline's tomorrow. Code: <div id="top part" logo and searchbox </div> <div> that pesky space that disappears in IE when roll over primary links </div> <div id=navcontainer> dropdown and tabbed menu </div> <div id="navigation" class="menu> <!-- couldn't find the menu class in the css --> <div id="primary" class="clear-block"> contains barmenu - very fussy </div> </div> Here's the relevant CSS: Code:
div#navigation {
background: #fff url(../images/blue/menu-bg.png) 100% 100% repeat-x;
}
#primary {
line-height: 30px;
}
#primary ul {
padding:0;
margin:0;
list-style:none;
}
#primary li {
display:inline;
}
#primary a {
font-weight:bold;
display:block;
float:left;
padding:0px 14px 0px 14px;
margin: 0px 1px 0px 0px;
font-size: 95%;
}
#primary a {
background-position:0% 0px;
}
#primary a:hover {
text-decoration: none;
background-position:0% -42px;
}
#primary a.active {
background-position: 0% -84px;
}
#primary a {
background: url(../images/blue/menu-div.png) 100% 0 repeat-y;
color:#666666;
font-size: 120%;
font-family:Arial,Helvetica,sans-serif;
}
#primary a:hover {
color: 666666;
background: #B8B8B8;
}
#primary a.active {
color: 666666;
background: #B8B8B8;
}
This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> Ok I have created an background image to what i want in a navaigation list, the problem is I need to set the height else the graphic fails to appear and the graphic won't scale to fit inside the area ( end part chops off). #n1 { /* all lists */ // height:50px; background-image:url('green1.gif'); } #n1 ul{ /* all lists */ height:50px; //will fail without? list-style-type:none; // background-image:url('green1.gif'); } #n1 li a{ /* all lists */ float:right; // background-color:yellow; padding-right:5px; text-decoration:none; } <div id="n1"> <ul> <li><A href="#">kkk</a></li> <li><A href="#">kkk</a></li> <li><A href="#">kkk</a></li> </ul> </div> Can anyone take a minute or two and see if they can figure out why the header graphic on the following page is not aligning properly: Click Here It appears that way in FF, IE6, and IE7... I don;t have time to recode the entire page -- I just need to know what is causing the problem....Try as I might, I don;t see the cause...Maybe conflicting styles? I dont know... Thank you. Hi people I have a graphic which has a specific Hue. I would like to allow users who have IE to change the Hue of that graphic by picking it from a combo-box Is there a way to change the Hue of a graphic in runtime by changing CSS filters or by some other technique? regards Hello there, I have been trying to get a web site up and running and am having problems getting a graphic to be positioned to the left and a menu right justified. So far I have been able to make the CSS compatible with both firefox and IE. So far I've got Code: <table width="100%" bgcolor="#666666"> <tr> <td> <img src="images/logo.gif"> </td> <td> <div class="menu" style="text-align:center"> <div class="outerFirst"><a href="index.php"><span>Home</span></a></div> <div class="outerFirst"><a href="index.php"><span>Services</span></a></div> <div class="outerFirst"><a href="index.php"><span>Senoir Centers</span></a></div> <div class="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div> <div class="outerFirst"><a href="index.php"><span>Contact Us</span></a></div> <div class="outerFirst"><a href="index.php"><span>About</span></a></div> </div> </td> </tr> </table> and for the CSS Code:
#menu {
height: 54px;
margin: 3em 0; padding:0 1em;
border-bottom: 0px solid black;
}
div.outerFirst {
float: left;
width: 100px; height: 130px;
margin: 0 0px 0 0;
background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat;
}
div.outerFirst a {
cursor: pointer;
display: block;
margin: 0; padding:0;
width:100px; height:54px;
overflow:hidden;
font-family: Arial;
font-size:0.7em;
font-weight:normal;
color:#FFFFFF;
text-decoration: none;
background: url( '../images/greyFirst.gif' ) top left no-repeat;
}
div.outerFirst span {
height: 54px;
display: block;
margin:0; padding: 25px 0px 0px 0px;
}
I know that I've got tables in there, but I don't know how the image and the menu be on the same level without it. Any help with the CSS and html (if I've missed something) would be awesome. Thanks! - K Basically I am creating a webpage using the free webhost weebly. I have modified the CSS, and the webpage is getting there, however, I have a problem with the graphics in the background, this is what I mean... [IMG](URL address blocked: See forum rules)[/IMG] Why am I getting this? Why isnt the graphic going all the way up? I also get this at the bottom of the page but only on the right hand side. Anyway heres the html.. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "(URL address blocked: See forum rules)"><html xmlns="(URL address blocked: See forum rules)"><head> <title>%%TITLE%%</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--[if lt IE 7.]><script defer type="text/javascript" src="/files/theme/pngfix.js"></script><![endif]--></head><body><div id="wrapper-menu-top"><div id="menu-top"> <ul> %%MENUITEMSTART%%<li><a href="%%MENUITEMLINK%%"><span>%%MENUITEMTITLE%%</span></a></li>%%MENUITEMEND%% %%MENUITEMACTIVESTART%%<li class="active"><a href="%%MENUITEMACTIVELINK%%"><span>%%MENUITEMACTIVETITLE%%</span></a></li>%%MENUITEMACTIVEEND%% </ul></div><!--menu-top--></div><!--wrapper-menu-top--><div id="wrapper-header"><div id="header" class="weebly_header"><div id="wrapper-header2"><div id="wrapper-header3"> <h1>%%TITLE%%</h1></div></div></div></div><div id="wrapper-content"><div id="content"> %%CONTENT%% </div><div id="wrapper-footer"><div id="footer"> <p><span id='weeblyFooter'>%%WEEBLYFOOTER%%</span></p></div></div> </body></html> and the css Code: body { font-family: trebuchet ms, verdana, arial, tahoma; font-size: 90%; color: #888; background-color: #CDBA96; line-height: 160%; margin: 0; padding: 0; text-align: center;}/* Set the page width */#wrapper-menu-top, #header, #wrapper-content, #wrapper-footer { width: 768px; margin: 0 auto; text-align: left;}#wrapper-menu-top { background: white url('fff.jpg') no-repeat left top;}#menu-top { background: transparent url('fff.jpg') no-repeat right top;} #menu-top ul { margin: 0 20px; padding: 1em 0 0 0; list-style: none; font-size: 85%; float: left;}#menu-top li { display: inline; float: left;}#menu-top a { float: left; background:url(menuleft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; line-height: 1.5em;}#menu-top a span { background: transparent url(menuright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#5b8fbe; display: block; float: left; cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */} #menu-top a:hover { background-position:0% -42px; } #menu-top a:hover span { background-position:100% -42px; } #menu-top li.active a { background-position:0% -42px; } #menu-top li.active a span { background-position:100% -42px; }#header { background: #eee url('banner_mountains.jpg') no-repeat center top;}#wrapper-header2 { background: transparent url('ds.jpg') top left no-repeat;}#wrapper-header3 { background: transparent url('right1.jpg') top right no-repeat;}#header h1 { margin: 0 25px; padding: 0; height: 192px; line-height: 3em; color: #636363; font-size: 130%;}#wrapper-content { background: white url('left1.jpg') no-repeat left top;}* html #wrapper-content { height: 1%; }#content { background: transparent url('right1.jpg') no-repeat right top; padding: 15px 40px; min-height: 600px; height:auto !important; height:400px;}/*#wrapper-menu-page { float: right; width:10px; margin: 20px 0px 3em 0px; text-align: center; line-height: 140%; font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;}* html #wrapper-menu-page { margin-right: 15px; }*/#menu-page { padding-top: 5px; }#menu-page ul { margin: 0; padding: 0; list-style: none; font-size: 90%;}#menu-page h3 { font-size: 75%; text-transform: uppercase; margin: 1em 0 0.3em 0; color: #5b8fbe; font-weight: normal; letter-spacing: 0.15em;}#menu-page a:link, #menu-page a:visited { color: #888; }#menu-page a:hover { color: #5b8fbe; }#wrapper-footer { margin-top: 1em; text-align: center;}#footer { margin: 0 20px; background-color: #e5f0fc; border: 1px solid #ccc; border-bottom: 0; clear: both;}h2 { font-size: 110%; }h3 { font-size: 100%; }a:link, a:visited { color: #5b8fbe; text-decoration: none; }a:hover{ color: #666; text-decoration: none; }
Thanks Hi there, I have two questions actually. I purchased this web template and am putting in my own logo but running into two problems: 1) I don't know how to adjust the css file to get the logo to move towards the bottom of brown header area (more in line with the nav text) 2) The logo I created looks okay in Internet Explorer, but is showing up as really pixelated in Firefox and I cannot seem to find any reasons why this is occurring. I am including links to the website http://www.kohlrbaby.com/Communicating/index.html and CSS file http://www.kohlrbaby.com/Communicating/default.css , but have put in the exact associated code below: CSS code associated with the logo as far as I can tell: Code: /** LOGO */
#logo {
float: left;
width: 430px;
height: 96px;
}
#logo h1, #logo p {
margin: 0px;
line-height: normal;
text-indent: -9999em;
}
#logo h1 {
display: block;
top: 0px;
left: 0px;
width: 430px;
height: 96px;
}
#logo img {
top: 200px;
left: 0px;
}
#logo p {
margin: -50px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
HTML Code: Code: <div id="logo"> <a href="http://www.communicatingwell.com"><img src="images/CWlogo.gif" height="35" width="300"/></a> </div> I hope these are okay questions to post, I have tried to figure it out myself, but don't seem to be getting anywhere! Many thanks for any ideas or help! Hi guys, I'm roughing out a template and wondered if you could please help me with something: In IE the background graphic body-stretch.jpg does not stretch as it does in Firefox, I read around and thought this may be something to do with the peekaboo hack but I couldn't get any of the fixes to work. Any ideas? Also, you will see I have a footer graphic that stretches all the way across the bottom of the page, right now it is outside my "container" div because when placed inside it is restricted to the width of the container and not to the edges of the page. If I change the width of the container to suit it everything gets left aligned. Placing the footer div outside the container means the textual content crosses over it (see page in firefox to see what I mean). Pulling my hair out! Any pointers would be greatly appreciated Code:
@charset "utf-8";
/* CSS Document */
html { background-image:url(images/body-stretch.jpg);
background-repeat:repeat;
}
body { background-image:url(images/header-stretch.jpg);
background-repeat:repeat-x;
/*width:100%;*/
padding:0px;
margin:0px;
text-align: center; /* to centre page pt 1 */
font-family:Arial, Helvetica, sans-serif;
}
a {
color:#b7b977;
text-decoration:none;
}
a:hover {
color:#8e52b6;
text-decoration:underline;
}
#nav {
background-image:url(images/navigation.jpg);
background-repeat:no-repeat;
width:899px;
height:108px;
padding:0px;
margin:0px;
}
#nav a {
font-size:24px;
color:#000;
background-color:#e2b550;
}
#nav a:hover {
font-size:24px;
color:#fff;
background-color:#9755c3;
}
p {
color:#fff;
}
#container {
margin: 0 auto; /* to centre page pt 2 */
width:899px; /* centres stuff but messes up footer if
it's contained within it (which it is */
}
#header {
}
h1 { background-image:url(images/banner.jpg);
background-repeat:no-repeat;
width:899px;
height:242px;
padding:0px 0px 0px 0px;
margin:0px;
text-indent: -9999px;
}
h2 {
font-size:34px;
color:#e1b650;
}
#content { background-image:url(images/body.jpg);
background-repeat:repeat-y;
height:100%;
/*width:899px;
margin: 0 auto;*/
}
#main-content {
float:left;
width:635px;
text-align:left;
padding-left:20px;
}
h2 {
display:inline;
}
#sidebar-content {
float:right;
width:244px;
}
#footer { background-image:url(images/footer-stretch.jpg);
background-repeat:repeat-x;
width:100%;
height:281px;
}
Code:
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>Dwardus</title>
</head>
<body>
<div id="container">
<div id="header">
<h1><a name="top">Dwardus Prime - Entertainment Blog</a></h1>
<div id="nav">
<a href="#">HOME</a>
<a href="#">FILM</a>
<a href="#">TELEVISION</a>
<a href="#">MUSIC</a>
<a href="#">VIDEO GAMES</a>
</div>
</div>
<div id="content">
<div id="main-content">
<h2>Welcome</h2>
<p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<a href="#">link</a><p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<a href="#">link</a><p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<a href="#">link</a>
<p>quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa
quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa quaggaaaaaaaaaaaaaaaaa</p>
<a href="#">link</a>
</div>
<div id="sidebar-content">
STUFF HERE!
</div>
</div>
</div>
<div id="footer">
<p>FOOTER INFO</p>
</div>
</body>
</html>
Hi, This is my first post, and I am grateful for any help. I am new to CSS and I have read and absorbed Simon Collison's very good book "CSS Web Development." My question is quite simple. I have a background-image associated with an ID (shown below) which successfully lays down the image but it does not push text. #mainmenu{ background-image: url(images/mainmenubg.jpg); background-repeat: no-repeat; background-position: top center; text-align:left; } ie, my html or php file might read: <div id="mainmenu> <p>Some text blah blah </div> and the text goes right over the image. Is there a "best way" to ensure that the text appears below the image? I can apply a height variable to the id, and then place the text below the /div, which works, but it is not flexible, ie, if I change the size of the image, I need to adjust the height value, and I am trying to avoid this. Any help would be greatly appreciated. Thanks, Pradhan I'm trying to have the contact information for a site to always appear in a right div next to the main content div. I would like it to always appear in the top right of the div, no matter how much the user scrolls down. This way, the information is always visible. I tried experimenting with background images in certain divs, but Firefox (but not IE) was having trouble displaying it the way I wanted. I've seen it in action before, so I'll post a URL if i can find where. Hi There I'd really appreciate some help on this please. I keep getting a problem on just one PC (my client's!!), where a left hand graphic disappears, but shows up on everyone else's browsers in firefox, opera, IE6 and safari. She's running Windows XP with IE6 and firefox. Can anyone suggest why the left hand black logo panel does not show up on her system? Any help would be most appreciated. Thanks! Hello, I need to make some unordered lists within a page appear with a graphic as a bullet, and some appear with a disc. My current code is: Code:
ul {list-style-image: url(../img/redarrow.gif)}
But this makes all unordered lists appear with the graphic, and of course if I comments out that code, all unordered lists appear with a disc. Please let me know if it is possible to code it so that I can have both in a page. Thanks! Hi, can anyone help me with this problem? I using a graphic with individual boxes on it for links. I want to place text in the boxes describing the link. When I set the padding-top and line - height properties. The text aligns prefect with the graphic. The problem I am having is the padding-top property lowers the graphic placing it below the rest of the table elements. Below is the code for the table cell and the css style. <td height="261" valign="top"><table width="198" height="410" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="198" height="410" valign="top" class="td_1"><a href="#">Home</a> <br /> <a href="neoceram.php">Design</a> <br /> <a href="pyroceram.php">Development</a> <br /> <a href="patterns.php">Management</a> <br /> <a href="drilling.php">Portfolio</a> <br /> <a href="tints.php">Contact Us</a> <br /></td> </tr> .td_1 { background-image:url(nav_bar.gif); background-position:left; background-repeat:no-repeat; background-color: transparent; padding-top: 66px; width: 154; font-size: 12px; font-weight:600; line-height: 21px; position: absolute; font-family:Arial, Helvetica, sans-serif; } Thanks for all your help, mdh2000 I'm a php/css/graphic designer and I'm looking for some small to medium projects to work on. I charge less than most people and I get everything done in a fast,professional manner. You can contact me at ajay@bountyx.net or AIM: stareatceiling. Thank you in advance. |
|||||||