|
CSS - Css Fluid Boxes With Graphic Images In Two Corners
I'm trying to create a 'fluid' (i.e. easily resizeable) box that has a image in the top left corner, and a different image in the top right corner.
----CSS------ .display { background-color:transparent; margin:20px 10px 40px 10px; width:45%; } .displayTopLeft { background-image:url('../images/document_logo.gif'); background-repeat:no-repeat; background-position:top left; border-left: solid 2px #0099CC; padding-left:40px; height:27px; float:left; } .displayHdr { float:left; border-top: solid 2px #0099CC; padding-top:7px; font-weight:bold; background-color:#fff; } .displayTopRight { background-image:url('../images/document_corner.gif'); background-repeat:no-repeat; background-position:top right; height:27px; width:27px; float:right; } .content { padding:5px 12px 5px 12px; background-color:#fff; border-right:solid 2px #0099CC; border-left:solid 2px #0099CC; border-bottom:solid 2px #0099CC; } ----HTML----- <div class="display"> <div class="displayTopLeft" ></div> <div class="displayHdr">Ethos</div> <div class="displayTopRight"></div> <div class="clear"></div> <div class="content"> <p> Lorem ipsum dolor sit amet, consetetur sadipscing etc etc </p> </div> </div> It almost works the way I want,except the border of the 'DisplayHdr' div only covers the text 'Ethos', and I need it to cover all the space between the 'DisplayTopLeft' div and the 'DisplayTopRight' div. (It's not possible to put a border on the 'DisplayTopRight' div since it's meant to represent a folded corner) Is what I'm trying to do possible? Or am I missing something incredibly simple? Similar TutorialsHello. I created my own rounded corners fluid site from scratch using CSS and images in the same way you would do it with a table, using the 3x3 format (topleft, topcenter, topright, midleft, midcenter, midright, botleft, botcenter, botright). The problem: The top section works great, but its the middle right section that doesnt justify properly. What you see: For the left and right middle, I have a background repeat on the y-axis. The left background is fine, as well as the middle, but a div inside the middle center is pushing right background to an area below (as shown in this image). http://clients.activemd.net/images/css-problem-screen1.jpg You will notice theres only whitespace on the right, and the background I'm trying to repeat is below it on the right. Heres my CSS: Code: /* CSS Document */ body { margin: 20px auto; /* Had to add margin-top 20px to topleft and top right corners to compensate. */ font-family: Verdana, Geneva, sans-serif; } #main { margin: 20px auto; width: 100%; height: 100%; z-index: 0; } .clear { clear: both; } h1 { margin: 0px 0px 0px 50px; } ul { margin: 0px; padding: 0px; } /* Top Layout */ #top { height: 146px; margin: 0px; padding: 0px; } #top_left { margin-top: 20px; background: url(../images/top-left-bg.png) no-repeat; height: 146px; width: 30px; position: absolute; top: 0px; left: 0px; } #top_right { margin-top: 20px; background: url(../images/top-right-bg.png) no-repeat; height: 146px; width: 30px; position: absolute; top: 0px; right: 0px; } #top_center { margin: 0px 30px; } #top_center_bg { background: url(../images/top-mid-bg.png) repeat-x; width: 100%; height: 30px; } #top_center_bar { background: url(../images/top-mid-bar-bg.png) repeat-x; width: 100%; height: 90px; } /* Middle Layout */ #middle { min-height: 500px; margin: 0px; padding: 0px; } #middle_left { background: url(../images/middle-left-bg.png) repeat-y; height: 100%; width: 30px; position: absolute; left: 0px; } #middle_right { background: url(../images/middle-right-bg.png) repeat-y; height: 100%; width: 30px; position: absolute; right: 0px; } #middle_center { min-height: 100px; } /* Bottom Layout */ #bottom { background: #eee; min-height: 100px; } /* Left box Layout */ #left_box { width: 156px; position: absolute; left: 0px; min-height: 90px; z-index: 100; margin: 0px; padding: 0px; } #left_box_top { background: url(../images/left-box-top.png) no-repeat; width: 156px; height: 30px; position: relative; top: 0px; margin: 0px; padding: 0px; } #left_box_mid { background: url(../images/left-box-mid.png) repeat-y; position: relative; right: 0px; height: 100%; margin: 0px; padding: 0px; } #left_box_bottom { background: url(../images/left-box-bottom.png) no-repeat; width: 156px; height: 30px; position: relative; bottom: 0px; } #left_box_content { color: #FFF; margin-left: 20px; margin-right: 5px; font-size: 0.8em; } #left_box_content a { color: #FFF; } /* Content Area Styling */ #report { height: 100%; min-height: 400px; border: 1px solid #999; margin-left: 160px; margin-right: 30px; } #report_data { float: left; width: 775px; height: 100%; max-height: 400px; overflow: scroll; border: 1px dotted #ccc; margin: 10px; min-height: 100px; } /* Login Info box */ #login_info { background: url(../images/login-bar-bg.png) repeat-x; position: absolute; top: 79px; left: 40px; border: 1px solid #FFF; min-width: 250px; height: 44px; line-height: 44px; color: #FFF; }
and here's the HTML of the site. Code: <body> <div id="main"> <div id="top"> <div id="top_left"></div> <div id="top_center"> <div id="top_center_bg"> <div id="login_info">Logged in as: ricktest <a href="http://clients.activemd.net?action=logout">Log Out</a></div> <div id="top_nav"> <ul class="tabContainer"> <li> <a href="#" class="blue"> <span class="left"></span> <span class="mid">Inquiries</span> <span class="right"></span> </a> </li> <li> <a href="#" class="blue">Engage <span class="left"></span> <span class="right"></span> </a> </li> <li> <a href="#" class="blue">Manage <span class="left"></span> <span class="right"></span> </a> </li> </ul> </div> <div id="sub_nav"><a href="javascript:getdata('#middle_center', 'main/index.php');">Home</a> | <a href="javascript:getdata('#middle_center', 'forms/index.php');">Forms</a> </div> </div> <div class="clear"></div><div id="top_center_bar"></div></div> <div id="top_right"></div> </div> <div class="clear"></div> <div id="middle"><!--Here begins the first layer of dynamic content --> <div id="middle_left"></div> <div id="middle_center"></div> <div id="middle_right"></div> </div><!--Here ends the first layer of dynamic content --> <div class="clear"></div> <div id="bottom"> <div id="bottom_left"></div> <div id="bottom_center">Bottom</div> <div id="bottom_right"></div> </div> </div> </body>
The site is dynamic PHP, so I cant just throw a link in here. I hope this is enough information. If anyone can help me with this, I would appreciate it. Thanks. Rick Hi, I'm attempting to apply a left and right image to a tab when hovered. The images aren't simply curved corners, but rather curved inwards corners at the top and outwards at the bottom. The tabs are all of different widths and I'd like to avoid using a class for each tab obviously. here's an image depicting what I mean: So the issue is essentially that I need the a:hover class to apply two background images - one on the left, one on the right - as one image can't deal with different sized tabs. I know that won't be possible until CSS3, but I know there must be a way to do this with today's standards. The image is of the tab on hover. Without hover, it's just the plain gray background to the left and right of it. There's probably a method for these sort of issues on A List Apart or something, but I can't find one. Anybody have anything on hand, or any suggestions? Your help is appreciated. Thanks in advance! I have searched on the internet and forums to solve this perdicament however every solution using images. Is it possible to round corners on <div> element for example with just code? (W3Compliant) From the looks it I think the answer is no. It cannont be done. I would just like clarification. If possible, how? Thanks - mike Link he rpisolution dot com/test/ Ok, the fixed-fluid-fixed part of the layout seems to work ok in the latest firefox and IE7 but it's broken in IE6 and possibly other versions. Could you guys take a look at the css? rpisolution dot com/test/css/style.css and see if you see what is breaking it in IE6, i thought I had put a hack that was supposed to fix the issues. btw, i know the CSS is probably ugly. sorry about that. thanks I'm trying to construct a complex 3-column CSS layout. I would like the center column to be fixed-width, and the outer columns to split the remainder of the document's width. All 3 columns should be able to contain centered or floated block elements and accept mouse events. Currently, I have approached this problem two nearly-successful ways. The first was to float the outer columns, but then I have no way to make them fill out. The second was to float the outer columns, then set them both to 50% with the appropriate margin set to half the width of the center column, but then I lose mouse event support in the center column because of the margins. The relevant CSS follows: Code: html { height: 100%; width: 100%; }
body { margin: 0; height: 100%; width: 100%; }
#left {
float: left;
height: 100%;
/* 2nd attempt
width: 50%;
margin-right: 305px; */
}
#right {
float: right;
height: 100%;
/* 2nd attempt
width: 50%;
margin-left: 305px; */
}
#center {
margin: auto;
height: 100%;
width: 610px;
}
HTML-wise, the div order is #left, #right, #center. Does anyone know of a way to work around this? Im trying to replicate the vertical navigation style that is used on the Mozilla Firefox Website (as seen to the left). I have sucessfully done this useing images, with the exclusion of a space problem between the items and the end images in FireFox. I am using the strict.dtd and am frustrated with this problem. Iff anyone can help me create a nav with this style that would be wonderful. Here is the css im using: Code:
.cssnavend {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
display: block;
width: 209px;
height: 9px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.cssnav {
position:relative;
font-family: arial, verdana, helvetica, sans-serif;
background-image: url(images/but-over.jpg);
background-repeat: no-repeat;
display: block;
width: 209px;
height: 31px;
margin: 0;
margin-bottom:0px;
padding: 0;
}
.cssnav a {
display:block;
font-size: 11px;
width: 209px;
height: 31px;
display: block;
float: left;
margin: 0;
padding: 0;
color: #096CCE;
text-decoration: none;
}
.cssnav img {
width: 100%;
height: 100%;
border: 0;
}
.cssnav a:hover{
color: #000;
}
* html a:hover {
visibility:visible
}
.cssnav a:hover img{
visibility:hidden
}
.cssnav span {
position:absolute;
left:7px;
top:7px;
margin:0;
cursor: pointer;
}
#box {
margin-top: 10px;
padding: 0;
width: 209px;
display: block;
}
#boxtop {
width: 209px;
height: 11px;
}
#boxcontent {
width: 209px;
background: #DFE5EB;
}
#boxbottom {
width: 209px;
height: 11px;
}
#boxtext {
width: 209px;
background: #DFE5EB;
padding: 2px;
}
The following code is me testing my css. The first group is useing the cssnav styles. The 2nd group is using the box styles. The 3rd group is a try at making a content box with rounded corners that is a spacific width. Unfortunatly, the content of the box will not wrap to the width of the box, instead it continues on 1 line and outside the box. Code: <div class="cssnavend"><img src="images/but-top.jpg"></div> <div class="cssnav"><a href="index.php"><img src="images/but-up.jpg" /><span>Home</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div> <div class="cssnav"><a href="phpbb/index.php" target=_blank><img src="images/but-up.jpg" /><span>Forum</span></a></div> <div class="cssnavend"><img src="images/but-bot.jpg"></div> <br><br> <div class="box"> <div class="boxtop"><img src=images/but-top.jpg></div> <div content="boxcontent"> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Home</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>This is a test</span></a></div> <div class="cssnav"><a href="#"><img src="images/but-up.jpg" /><span>Forum</span></a></div> </div> <div class="boxbottom"><img src=images/but-bot.jpg></div> </div> <br><br> <div class="box"> <div class="boxtop"><img src=images/box-top.jpg></div> <div class="boxcontent"> <div class="boxtext">This is some text inside of the box. This text should wrap and be padded.</div> </div> <div class="boxbottom"><img src=images/box-bot.jpg></div> </div> Thank you all who help. 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 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, 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 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 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 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>
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. 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 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! 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. 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! |
|||||||