|
CSS - Trouble With Curved Border Around Content
I've been working on getting a nice look to fit the body of my content in, but I'm having a little difficulty.
Based on some tutorials and things I have read, it seems many people do this technique by applying background images to various tags. I know it has a set width. However, the height may vary depending on how long the body copy is, which is where the problem arises. I have it broken into three images (top, bottom, left_right) It seems to display properly in IE7. However, in Firefox, the top and bottom images do not connect with the left_right image. I've tried setting margins and padding for top/bottom to 0 as I thought that may be the issue, but it didn't fix it. Can view files at: http://www.russellholloway.com/beta/test.html http://www.russellholloway.com/beta/main.css I'm pretty new to working with CSS, so if there are any other errors that may arise from the way I have coded this, please let me know. I intend to position the whole content-wrapper div in a floating layout for the site. Essentially there will be menus / such to the left, logo / stuff above, and this body content area will be in the remaining space. CSS copied below: css Code: Original - css Code .content-wrapper { padding: 0; margin: 0px; position:relative; } .content-wrapper .footer { width: 710px; background:url(content_bottom.jpg) no-repeat bottom; padding: 0; margin: 0px; position:relative; min-height: 34px; } .content-wrapper .heading { margin: 0; background-image: url(content_top.jpg); background-repeat: no-repeat; width: 710px; padding: 0px; height: 35px; position:relative; } .content-wrapper .heading h3 { position: relative; top: 20px; left: 20px; } .body { background-image: url(content_lr.jpg); background-repeat: repeat-y; padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px; width: 670px; position:relative; margin: 0px; }
.content-wrapper {
Similar TutorialsI want to implement a navigation menu as a box with curved corners and a dotted border. What would be the best way to implement this. I have found some methods that achieve a box with the curved corners using just CSS but can't find any method to get them with borders. I am open to suggestions that require learning authoring software. Hey I have a dashed border to the right of my menu, i was wondering how i can make it reach the bottom of my page, without having to fill up all the content example of what it looks like: Navigation | | link | link | link | Example of what i want it to look like Navigation | | link | link | link | | | | | | bottom of page. This is the Css code: DIV#sidebar { LEFT: 0px; WIDTH: 12em; POSITION: absolute; TOP: 0px; HEIGHT: auto; BORDER-RIGHT: black 1px dashed; } I'm totally new to css (just started yesterday) and I'm trying to build a page out of div tags so that the borders of the content (which will be in a block at the center of the page) are images (dropshadows). ag_portfolio.css: Code: @charset "utf-8";
/* CSS Document */
/* general page properties */
body
{
background-color:#CCC;
}
div.main_container /* main container of all content */
{
width:861px;
margin-left: auto ;
margin-right: auto ;
background-color:#FFF;
}
/* end general page properties */
/* borders */
/*top left corner*/
div.top_left
{
background-image:url(images/top_left.png);
background-repeat:no-repeat;
width:31px;
height:31px;
position:relative;
float:left;
}
/*top*/
div.top
{
background-image:url(images/top.png);
background-repeat:repeat-x;
width:800px;
position:relative;
float:left;
}
/*top right corner*/
div.top_right
{
background-image:url(images/top_right.png);
background-repeat:no-repeat;
width:30px;
height:31px;
position:relative;
float:right;
}
/*right*/
div.right
{
background-image:url(images/right.png);
background-repeat:repeat-y;
width:38px;
position:relative;
float:right;
}
/*bottom right corner*/
div.bottom_right
{
background-image:url(images/bottom_right.png);
background-repeat:no-repeat;
width:31px;
height:31px;
position:relative;
float:right;
}
/*bottom*/
div.bottom
{
background-image:url(images/bottom.png);
background-repeat:repeat-x;
height:31px;
position:relative;
}
/*bottom left corner*/
div.bottom_left
{
background-image:url(images/bottom_left.png);
background-repeat:no-repeat;
width:30px;
height:31px;
position:relative;
float:left;
}
/*left*/
div.left
{
background-image:url(images/left.png);
background-repeat:repeat-y;
width:38px;
position:relative;
float:left;
}
/* end borders */
/* header contents */
div.banner
{
background-image:url(images/banner.png);
background-repeat:no-repeat;
position:relative;
background-position:center;
width:785px;
height:200px;
float:left;
z-index:1;
}
div.button
{
}
/*
div.button2
{
}
div.button3
{
}
div.button4
{
}
*/
/* end header contents */
/* main contents */
div.header1
{
position:relative;
left:20px;
background-color:#FFF;
font-family:"Courier New", Courier, monospace;
font-size:300%; /* larger font */
color:#000;
}
div.content
{
position:relative;
left:20px;
background-color:#FFF;
font-family:"Courier New", Courier, monospace;
font-size:100%;
color:#000;
}
/* links */
a:link {color:#666}
a:visited {color:#A5B49A}
a:active {color:#333}
a:hover {color:#000}
/* end links */
div.footer1
{
text-align:center;
background-color:#FFF;
font-family:"Courier New", Courier, monospace;
font-size:100%;
color:#000;
}
/* end main contents */
test.html: Code: <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css test</title>
<link rel="stylesheet" type="text/css" href="ag_portfolio.css" /> <!--link to style sheet-->
<style type="text/css"> <!--specific style-->
</style>
</head>
<body>
<div class="main_container" height=600>
<div><!--top border-->
<div class="top_left">
</div>
<div class="top">
</div>
<div class="top_right">
</div>
</div><!--top border-->
<div><!--banner-->
<div class="left" height="183px">
</div>
<div class="banner">
</div>
<div class="right" height="183px">
</div>
</div><!--banner-->
</div>
</body>
</html>
For some reason the div tags are all over the place. They don't even appear to be in their separate containers. Am I doing something wrong? I'm really lost . Thanks for any help. Code:
<div class="message">
<table>
<tr>
<td>Hello World</td>
</tr>
</table>
</div>
Code:
div.message
{
border: 1px solid #000000;
}
For some reason that does not produce a border around the div. Is there a reason why not? Internet Explorer improperly renders my drop-down menu. The parent list's borders bleed over into the child list, covering its borders and a few pixels of the child list's LIs. The drop-down employs ALA's method for circumventing IE's problems with the :hover psuedoclass. I've tried to resolve this using z-indeces and haven't found anything. I've posted to the CSS mailing list but haven't received a response. I can't determine if this is a bug referenced on positioniseverything.net. I really would appreciate any advice anyone could give me. The HTML file is XHTML 1.0 strict. The CSS file, when run through the validator, produces one erroneous line--this one--but this is essential for proper rendering in Mozilla, and I'm really not certain why it's invalid. Well enough jabber--here are the relevant files: HTML: http://64.232.240.200/remax/index.html CSS: http://64.232.240.200/remax/remax.css javascript: http://64.232.240.200/remax/drop_down.js Any suggestions not pertaining to my problems are also welcome--I'm very interested in making the CSS file in particular as lean as possible. Thanks much! I've been developing a content management system, and one of the final things I have to clean up is a stylesheet problem involving the float property. I'm trying to position two boxes next to each other id: menu and id: content, but until I set the width property on content it would drop beneath menu. I want the content box to fill any remaining space to the right of the menu, with appropriate padding and spacing and such. Can anyone help make suggestions as to the best way of achieving this? Here is some of my css code which is also viewable on the website which is located at: 8< snip >8 Code:
#container
{
margin: 1em 4em 1em 4em;
/* width: 750px; dynamic width */
text-align: left;
background: #FFFFCC;
border: 2px solid black;
}
#menu
{
float: left;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
font-family: Verdana;
font-size: 12px;
width: 150px;
display: inline;
}
#content
{
float: right;
width: 20em;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 0px;
/* margin-left: 170px; */
padding-top: 5px;
padding-left: 20px;
padding-bottom: 20px;
border-left: 2px solid black;
height: 100%;
}
Thanks for trying to help, I've been getting really frustrated trying to get css to work in both ie and firefox. BTW: I've been finding the Web Developer firefox extension very helpful for this kind of work. hi, i have created a simple css layout and its displaying correctly in google chrome, firefox, IE 6 and IE 7. However, IE 8 is covering the 1px border on the left of the containing div section with the image contained within the logo. I tried adding a 1px padding and margin which only served to push the image over the right hand side border in IE 8. Does anyone know whats causing this issue? Here is my code below. Thanks in advance. First, the HTML code:- Code:
<!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>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
<meta http-equiv='Content-Language' content='en-us' />
<link rel='stylesheet' type='text/css' href='css/default.css' />
</head>
<body>
<div id='page'>
<div id='logo'>
<img src='gfx/siteLogo.jpg' alt='Our Website Logo' />
</div>
</div>
</body>
</html>
Now the css file:- Code:
/* page structure definitions */
html
{
font-size: 100%;
}
body
{
margin: 0;
padding: 0;
/* 20px */
padding-top: 1.25em;
padding-bottom: 1.25em;
text-align: center;
font-family: Verdana, sans-serif;
background-color: white;
/* 16px */
font-size: 1em;
}
#page
{
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
/* 900px */
width: 56.25em;
/* 1px */
border: solid black 0.0625em;
background-color: #ABBAD9;
}
#logo
{
margin: 0;
padding: 0;
/* 900px */
width: 56.25em;
/* 150px */
height: 9.375em;
}
#logo img
{
margin: 0;
padding: 0;
/* 900px */
width: 56.25em;
/* 150px */
height: 9.375em;
}
The image in the logo is 900px * 150px. I have a website like shmah: Code:
<div class="wrapper">
<div id="leftframe"><img src="./intro.gif"></div>
<div id="content">
<div id="header"><?php include("header.php"); ?></div>
<div id="content"><?php include("content.php"); ?></div>
<div id="footer"><?php include("footer.php"); ?></div>
</div></div>
And the corresponding css like shmah: Code:
#wrapper {
text-align: center;
}
#content {
width: 700px;
margin: 0 auto;
}
#header {
width: 700px;
margin-bottom: 5px;
}
#content {
width: 700px;
min-height: 400px;
}
#footer {
width: 700px;
margin-bottom: 50px;
}
#leftframe {
position: absolute;
left: 50%;
margin-left: -600px;
}
table.table-in-the-content-area {
width: 100%;
border-collapse: collapse;
border: 0px;
border-spacing: 0px;
}
The issue is that the content div (the table contained therein) appears shoved off to the right in Firefox. When I set Firefox to use the border-box model, it centers correctly with the rest of the divs. IE and chrome don't have this problem. Any ideas where my weird margins may be coming from? Thanks! I'm making a menu with buttons that have curved edges. I can make the edges and everything fine, but how can I make it so if I hover over the whole <li>, it changes the background of the 3 <span> tags underneath it? You'll understand when you see the demo. The menu I'm talking about is the orange bar. It won't work in IE, check it in Firefox, Safari, Opera, or Chrome. Try hovering over the menu items that aren't highlighted, and they don't light up. itsjareds.leadhoster.com/spogg/phoenix.html Sorry about the non-clickable link, user restrictions.. Post if you need any clarification (I know it's not clear). Sorry about the vague description, but I'm wondering how to achieve an effect like the ones on this page: http://www.csszengarden.com/?cssfile=/196/196.css&page=0. I've seen the effect on many other websites, but I can't find them at the moment. On the page the content div grabs your attention effectively because its borders make it pop out from the background. How are the border images and divs setup to achieve this effect? Is there any method for creating drop shadows for curved borders using only CSS? I have been looking at a css drop-shadow method at Phoenity but it makes drop shadows for rectangles. I am trying to achieve a look similar to this: but what I currently am getting is this: Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<style type="text/css">
a.menu_top:link {color: #000000; text-decoration: none;}
a.menu_top:visited {color: #000000; text-decoration: none;}
a.menu_top:hover {color: #000000; text-decoration: none;}
a.menu_top:active {color: #000000; text-decoration: none;}
td.menu_top_passive {
background-color: #777;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #000000 solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
td.menu_top_active {
background-color: #bbb;
border-left: 1px #000000 solid;
border-right: 1px #000000 solid;
border-top: 1px #000000 solid;
border-bottom: 1px #bbb solid;
text-align: center;
cursor:pointer;
font-weight: bold;
padding: 5px 20px 5px 20px;
margin: 0;
}
</style>
<script language="JavaScript">
function change(id, url) {
for (i=1; i<6; i++){
eval("document.getElementById("+i+").className='menu_top_passive'");
}
eval("document.getElementById("+id+").className='menu_top_active'");
}
</script>
</head>
<body style="margin:0; padding:0; background-color:#bbb;">
<br><br>
<center>
1. Load the page.<br>
2. Click Item 4.<br>
3. Click Item 2.<br><br>
Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br>
None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br>
Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br>
If I remove border-collapse, then there is no strange behaviour in Firefox.<br>
Any way to get this working in Firefox without breaking it in IE?
</center>
<br><br><br>
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;">
<tr>
<td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td>
<td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td>
<td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td>
<td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td>
<td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td>
</tr>
</table>
</body>
</html>
I'm a little puzzled by this weird display bug by IE7, this bug doesn't occur in IE6. It had to do with the DIV's CSS's border-style. If you set it to double then you notice some random bugs with it. Some of the time, the border is displayed without a problem. Some of the time, it is displayed with some gaps in the line as if it is not being drawn upon. Some of the other time, it is not displayed at all. I noticed if I switch from one tab to another then back, the border appeared as if nothing had happened. I also noticed that if I open the view source that overlapp the web browser then closed it, the border appeared as if nothing had happened. How do you fix that problem? Thanks... I would like to set up a table with a different border than the cells inside it. Here's my code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
TABLE {border: 1px solid black; border-collapse: collapse; width: 200px}
TD {border: 1px solid #ccc}
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
That's all hunky dory in (gasp!) IE, but good browsers...they only show the lighter gray color. How do I get the table border to be different? Hi, This used to be my solution: Code: <table border=1 bordercolorlight='#CCCCCC' Bordercolordark='#FFFFFF'> But this only works well on IE - not Mozilla Now I want to use CSS: Code:
.results {
border: 1px solid #CCCCCC ;
}
Code: <table class='results'> --------------- The problem is, with CSS, only the TABLE acquires the border property. The cells within it don't. If I specify Code: <td class='results'> for all the cells in the table, this also won't work, because the cell borders overlap each other and some border lines seem thicker than others (because of overlapping). Is there any simple way I can specify the border property for the table - in ONE declaration? I want the table and td borders all to be a simple 1px width ...is that possible in one declaration? Thanks a lot! Hi there, I have a content glider script, but I have added it to a wrapper with a background image. The css is using a white background colour so when a new layer is glided up, it covers the one underneath it. However, I want the background to be transparent to show the background image underneath.... If I remove the white background, they layers become transparent and overlay each other, so you can see all text in the layers on top of each other making it impossible to read. Is there anyway I can make it so it has a transparent background, but so it will not show the content under the new slide? This is my CSS: PHP Code: .glidecontentwrapper{ position: relative; /* Do not change this value */ height: 230px; /* Set height to be able to contain height of largest content shown*/ overflow: hidden; } /* Total wrapper width: 350px+5px+5px=360px Or width of wrapper div itself plus any left and right CSS border and padding Adjust related containers below according to comments */ .glidecontent{ /*style for each glide content DIV within wrapper.*/ position: absolute; /* Do not change this value */ background: white; visibility: hidden; width: 330px; } /* Total glidecontent width: 330px+10px+10px=350px Or width of wrapper div itself (not counting wrapper border/padding) */ .glidecontenttoggler{ /*style for DIV used to contain toggler links. */ width: 360px; margin-top: 6px; text-align: center; /*How to align pagination links: "left", "center", or "right" background: white; /*always declare an explicit background color for fade effect to properly render in IE*/ } Any help would be great! Thanks. How do you create an inner border around a table in css, rather than a "solid" border which creates a border line around the table on the outer half. The border needs to butt up against an image, rather than leaving a pixel space. This is the coder I have so far. Nothing big: Code:
.solid {
border: solid 1px #000000;
}
Thanks. Well I managed to find a partial solution by adding "clear" to the "statusDiv" like so: Code:
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
This kicks sibling divs onto their own line (which is what I wanted) but the spacing between divs is 2 pixels and I can't seem to find any combination of padding, margins etc to get the spacing down to one pixel. Does anyone know of a way to control the inter-div spacing when "clear" is defined? Thanks Ken --------------------------------------------------------------- Original post --------------------------------------------------------------- I'm trying to make a few divs to create the same basic functionality as an outline (with disclosure triangles etc...) and am having alignment problems. The first row renders perfectly but the text of subsequent rows overlaps the text of first row. Here's the html: Code: <div id="contentBlock" class="bodyText"> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">New</div> </div> <div class='statusDiv'> <div class='disclosureCollapsed'></div> <div class="disclosureDivLabel">Open</div> </div> </div> And here's the CSS: Code:
#contentBlock {
position: absolute;
top: 130px;
left: 200px;
height: 101%; /* Hack to force vertical scroll bars */
right: 280px;
min-width: 400px;
visibility: visible;
display: block;
}
.statusDiv {
clear: both
background-image: url(../png/disclosure_triangles/blue_block.png);
height: 20px;
margin-bottom: 1px;
}
.disclosureCollapsed {
background-image: url(../png/disclosure_triangles/blue_collapsed_wide.png);
display: block;
text-align: right;
/*position: absolute;*/
float: left;
top: 0px;
left: 0px;
width: 18px;
height: 20px;
}
.disclosureCollapsed:hover {
cursor: pointer;
}
How would I make the text in each subsequent row (statusDiv) line up? Thanks for any help Ken http://www.hybridillusions.com/wordpress/?m=200712 Still working on it, but something caught me and I'm clueless. See, I'm still learning Tableless CSS, and well... I'm not sure how to have it so that the content doesn't run over the footer like that. As it should be more like... http://www.hybridillusions.com/wordpress/ For CSS reference, here is where the css file is located: http://www.hybridillusions.com/wordpress/wp-content/themes/simplistic/style.css Thanks in advance! |
|||||||