|
CSS - Product List Borders
I want to make a product list, like this one:
link BUT the site should have relative (100%) width, and the "product boxes" will have fixed size. That means, that how many boxes there will be on one row will depend on the screen resolution. Sometimes there will be 3 boxes in a row, and another time there will be more. What I'm looking for is the border design. I want it like this: Code: product (border) product (border) product There should be no border in the beginning and in the end. If I knew what box would be the last, I could just: Code: border-right: none; But the floating design makes it impossible to decide what box will be the last. Any ideas how to solve this? Similar TutorialsHere's the link: http://www.EarthArmy.com/index.php I'm trying to center the tshirts/products in the header, but to no avail, they keep aligning to the left. Any ideas? Thanks. We sell wedding invitations in 2 currencies, dollars and pesos. We have hundreds of invitations priced at intervals like USD $.97, $1.50, $1.97, $2.50, $2.97, $3.50, $3.97, $4.50, and $4.97. Sometimes when the currency exchange rates change significantly, we need to change our prices. However, it takes hours to do that manually. So, I'm wondering if we can change all the prices together by controlling them from the CSS? If so, how should I code it? Thank you, Greg Seems like most people use unordered lists for menus. Code: <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> </ul> Others use definition lists. They claim it is less buggy with IE. Code: <dl> <dt>menu1</dt> <dt>menu2</dt> <dt>menu3</dt> </dl> Any thoughts on whether unordered lists or definition lists are best? Also, I sometimes see the menu text surrounded by a SPAN tag. I believe this has to do with only being able to assign one attribute to an element, but am uncertain. Can anyone help explain? Also, if I want a single HTML to work with various CSS, is it a good idea to always include the SPAN tag? Code: <ul> <li><span>menu1</span></li> <li><span>menu2</span></li> <li><span>menu3</span></li> </ul> Thanks I have a list that I've created with the list-style-type being an image. For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly? Below is the code. The cell that these lists sit in has has an id of 'cellid'. Code:
#cellid {
margin: 0 0;
padding: 0 0;
}
#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}
#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}
The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space? Thanks, Brian Hi guys, I am using the following css to style a content box: Code:
/*---------------- Start of Testimonies Content Box ---------*/
#testimonies {
WIDTH: 175px;
MARGIN: -85px 0px 0px;
POSITION: right;
height: 60px;
float:right;
BORDER-RIGHT: #d9ddb9 1px solid;
BORDER-LEFT: #d9ddb9 1px solid;
BORDER-BOTTOM: #d9ddb9 1px solid;
BORDER-TOP: #d9ddb9 1px solid;
PADDING-TOP: 10px;
PADDING-RIGHT: 10px;
PADDING-BOTTOM: 20px;
PADDING-LEFT: 10px; FLOAT: right;
BACKGROUND-IMAGE: url(images/bg-down-right.gif);
BACKGROUND-POSITION: 50% bottom;
BACKGROUND-REPEAT: repeat-x;
BACKGROUND-COLOR: #fafceb;
}
.testimonies-h2 {
PADDING-RIGHT: 3px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #fafceb
}
#testimonies H2 {
PADDING-RIGHT: 0px; BACKGROUND-POSITION: 2px 3px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 100%; BACKGROUND-IMAGE: url(images/bg-h2.gif); PADDING-BOTTOM: 2px; TEXT-TRANSFORM: uppercase; COLOR: #8fa300; PADDING-TOP: 2px; BACKGROUND-REPEAT: repeat-x
}
/*---------------- End of Testimonies Content Box ---------*/
I want to add an inline frame inside the 'testimonies' div in my html but it keeps using the border styling of the css above. I tried using this to cancel it out (placing my inline frame in a span, but it did nothing) Code:
#testimonials {
border-left:none;
border-right: none;
border-bottom:none;
border-top:none;
}
HTML CODE: Code: <div id="testimonies"> <h2><span class="testimonies-h2">Testimonials</span></h2> <span class="testimonials"> <!-- ========== V-NewsTicker v2.2 (Freeware) ============= --> <script type="text/javascript" src="v_newsticker_1.js"></script> <!-- ======================= --> </span> </div> Hi All, I am trying to set a style in my CSS that will show a border-bottom for an entire row. So far I can only get it to work on a per cell (<td>) basis. I am using Dreamweaver MX 2004 and when I select an entire row and assign it a style, it just add's it to the <tr> tags at the top of those rows. Code:
<!-- This is a Row that is at the top of the table -->
<table width="100%" border="0" class="fullwidth">
<tr>
<td class="head">This is a header </td>
</tr>
</table>
<!-- This is where I want the border-bottom attribute to show up -->
<table width="100%" border="0" cellpadding="2" cellspacing="1" class="list">
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="list">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Here is the CSS: Code:
table.fullwidth
{width: 100%;
background-color: #FFFFFF;
border: 0px;
border-collapse: collapse;
border-spacing: 0px;}
tr.list
{background-color: #EFEFEF;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #000000;
border-bottom: 1px dotted #000000;}
Hello, I can't for the life of me figure out how to get these thin white borders like on this website: http://www.viceland.com/index_us.php Is this done with a style sheet? I can't find any reference to a border. How is this done? Can any one suggest a better CSS script for having a border in IE So far I have the following: PHP Code: border: 1px solid #0099CC; The problem is that when ran in IE, the top border does not show. However it works fine in firefox. Also I get warnings on my script when I run my CSS validation tool. Can any one help. Thge URL is http://pfwd.org.uk/sfd/update_test3.php Is it possible to have more than one border in CSS? I want to have a grey and green border around an area of text, something like this. So is it possible to have two or more borders in CSS and if so, how? Hi I have a vertical menu containing main and subcategories. subcats are hidden, when a main cat is clicked then subcats are displayed, all is done with css no javascript. here is the structure, Code:
<ul id="nav">
<li class="level item-1 nav-clothes active parent">
<a href="/clothes.html"><span>Clothes</span></a>
<ol class="level item-1">
<li class="level1 nav-clothes-shirts">
<a href="/clothes/shirts.html"><span>Shirts</span></a>
</li>
<li class="level1 nav-clothes-tanks">
<a href="/clothes/tanks.html"><span>Tanks</span></a>
</li>
<li class="level1 nav-clothes-raincoats">
<a href="/clothes/raincoats.html"><span>Raincoats</span></a>
</li>
<li class="level1 nav-clothes-dresses">
<a href="/clothes/dresses.html"><span>Dresses</span></a>
</li>
<li class="level1 nav-clothes-swimsuits">
<a href="/clothes/swimsuits.html"><span>Swimsuits</span></a>
</li>
<li class="level1 nav-clothes-outerwear last">
<a href="/outerwear.html"><span>Outerwear</span></a>
</li>
</ol></li>
<li class="level item-2 nav-beds parent">
<a href="/beds.html"><span>Beds</span></a>
here is my all related css, external css file, Code:
#nav { font-size:13.5px; color:#000; padding:0 0 0 0; margin:-20px 0 0 0; width:100%;}
/* All Levels */
#nav li { text-align:left; }
#nav li.over { z-index:999; }
#nav a,
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
#nav li li.parent {}
/* 0 Level */
#nav li { clear:both; position:relative; display:block; }
#nav li.active a { color:#000; text-decoration:underline; }
#nav a { float:left; padding:2px 14px 11px 0px; color:#000; font-weight:bold; }
#nav li.over a,
#nav a:hover { color:#000; text-decoration:underline; }
#nav .item-1 ul a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616;}
#nav .item-2 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-3 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-4 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-5 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-6 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-7 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-8 ul a {padding:0 0 0 0; color:#1A1616;}
#nav .item-9 ul a {padding:0 0 0 0; color:#1A1616;}
#nav ul li a { padding:0 0 0 0;}
#nav ul li a:hover { padding:0 0 0 0; text-decoration:none;}
/* 1st Level */
#nav ul li,
#nav ul li.active { float:none; margin:0; padding:6px 0 0 29px; background:#FFFFFF; border-left:1px solid #E8E7E7; border-right:1px solid #E8E7E7; }
#nav ul li.over {}
#nav ul li.last { background:#FFFFFF; padding-bottom:15px; }
#nav ul a,
#nav ul a:hover { float:none; padding:0;}
#nav ul li a { font-weight:normal !important; }
/* 2nd level */
#nav ul { position:absolute; width:199px; top:23px; left:-10000px; background:url(../images/bg_sub_menu.gif) 0 0 no-repeat; padding:23px 0 0 0; border-bottom:1px solid #E8E7E7; margin-left:100px; }
/* 3rd+ Level */
#nav ul ul { top:5px; background:none; padding-top:0; border-top:1px solid #E8E7E7; }
/* Show Menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }
#nav ul li a { background:url(../images/arr_sub_menu.gif) 0 9px no-repeat; padding:0 0 0 0; color:#1A1616; }
#nav ul li a:hover { color:#1A1616 !important; }
#nav ul span,
#nav ul li.last li span { padding:3px 15px 4px 15px; }
#nav li ul { display:none; }
#nav li:hover ul{display: block; }
#nav ol { margin-left:5px; margin-bottom:10px; }
#nav ol li { padding-left:15px; background-image:url(../images/ol_bg_lines.gif); font-size:12px; font-weight:normal; }
#nav ol li.last { background-image:url(../images/ol_bg_lines_last.gif); }
inline css code to overwrite the default behavior for target page Code:
ul#nav {margin : 0 10px; margin-bottom:0px;}
ul#nav li {height : 14px; margin-top : 5px;}
ul#nav li a, ul#nav li a:hover {}
ul#nav ul {margin-top : -8px; background : url(/images/drop-ul-bgr.gif) no-repeat; }
ul#nav ul li {height : auto; margin-top : auto;}
ul#nav ol li a { padding:0px; }
ul#nav ol li { margin:0px; padding:5px 0 5px 15px; }
ul#nav ol { border:#ccc 1px solid; padding-bottom:30px; }
I am attaching a screenshot to explain the problem, i have given border to the OL to explain the problem. In the screenshot the pink arrow is pointing the place, BEFORE BEDS, where i want to give more space but the child list keeps overlapping rather than pushing the parent list downwards. any help is much appreciated I am really stuck with this. Hi, Have an unordered list which I use as a menu. I have set the list-style-type property to none because I don't want any bullets or anything. When I look at the menu within a bordered div, it seems like there is a margin to the left of the <ul>. Eventhough there are no bullets in the <ul>, the <li> are still placed at the same location from the left. How can I left adjust the unordered list so that there are no visible margin at the left side? /Hubba Bubba q) In CSS or html, how can make my buttons and borders around a screen section ( created with css) have roundish borders and regular not corners q) How can i get the colors of such buttons to be a bit more exciting eg go from ligh to dark blue instead 1 uniform color? Hi, Im not sure what the problem is with my code, but it gives me full borders when I ask for only top and bottom. Here is my CSS. css Code: Original - css Code .logo{ width: 100%; border: 1px solid #FFFFFF; font-size: 32px; } .menu{ width: 150px; height: 320px; border: 1px solid #FFFFFF; text-align: left; } a.menu{ border-top: 1px solid #FFFFFF; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; width: 100%; }
.logo{
Here is my html of that part. html Code: Original - html Code <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br /> <span style="float: left"> <div class="menu"> <a href="" class="menu">asdf</a><br /> <a href="" class="menu">asdf</a><br /> Here is what it outputs. http://blacknine.net/test.html how can i use: css Code: Original - css Code .t {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:80%; left:50%; margin:20px; } .b {background: url(../images/dot.gif) 0 100% repeat-x} .l {background: url(../images/dot.gif) 0 0 repeat-y} .r {background: url(../images/dot.gif) 100% 0 repeat-y} .bl {background: url(../images/bl.gif) 0 100% no-repeat} .br {background: url(../images/br.gif) 100% 100% no-repeat} .tl {background: url(../images/tl.gif) 0 0 no-repeat} .tr {background: url(../images/tr.gif) 100% 0 no-repeat; padding:5px; } .t-exif {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:200px; right:0px;} .b-exif {background: url(../images/dot.gif) 0 100% repeat-x} .l-exif {background: url(../images/dot.gif) 0 0 repeat-y} .r-exif {background: url(../images/dot.gif) 100% 0 repeat-y} .bl-exif {background: url(../images/bl.gif) 0 100% no-repeat} .br-exif {background: url(../images/br.gif) 100% 100% no-repeat} .tl-exif {background: url(../images/tl.gif) 0 0 no-repeat} .tr-exif {background: url(../images/tr.gif) 100% 0 no-repeat; padding:10px; }
.t {background: url(../images/dot.gif) 0 0 repeat-x; width: 20em; width:80%; left:50%; margin:20px; }
to make my exif info box appear on the right of the image? i have tried using right:0px but it doesn't work, any ideas? current display page Hi I am trying to setup a left border on my tabs here, no matter what combination I try I cannot get a left border exactly like the others without giving the wholebox a full border (dont want this!!) Look at the example below.. Code: /* TESTING TABBED BROWSERS*/
}
.tabbed-box {
width: 100%;
background: #fff url(tabbed-body-bg.jpg) repeat-x bottom;
/*border: 1px solid #ddd;
border-bottom:none;
border-left:none;
border-right:none;}
*/}
.tabbed-box .tabs li {
list-style: none;
float: left; }
.tabbed-box .tabs li a {
display: block;
width: 100px;
padding: 5px 0;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #888;
background: #fff url(tabbed-tab-bg.jpg) repeat-x bottom;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;}
.tabbed-box .tabs li:first-child a {
border-left: 1px solid #ddd; }
.tabbed-box .tabs li a:hover {
color: #333; }
.tabbed-box .tabs li a:focus {
outline: none; }
.tabbed-box .tabs li a.active {
background: #fff;
color: #333;
border-bottom: 1px solid #fff;
border-left: 1px solid #ddd;
margin-left: 5px; }
.tabbed-content {
padding: 3em 1em 1em 1em;
display: none; }
Screen Shot Here (not aloud to post URLS) --- >freeimagehosting.net/uploads/4e9d9acdf7.jpg Any help much appreciated!! I am learning CSS and wish to put a border around selected tables using the following code: table.sidebar { border: 2px black; padding: 50px } Something similar to this code was working OK earlier today, but now it won't. The cell padding command works, but other tags like border, width, etc., are not. I have tried disabling all other table styles in the CSS. Any ideas? I am using MS FrontPage 2002. Also, whys is it that when I apply a style to a table, like the one above, FrontPage puts in the following HTML code: <table class="sidebar" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0"> If I go to remove it to <table class="sidebar"> all of the formatting is lost. Seems like this is defeating the whole purpose of CSS Thanks, Keith Hey, searched so don't give me crap. I have 2 images, searchleft.jpg (looks like { ) and searchright.jpg (looks like } ) I only posted the Doc type just incase, I validated my webpage(www.gameyin.com) and nothing that could hurt this has happened. Anyway I want the rounded borders on the left center, for searchleft.jpg and a roundedborder for searchright.jpg on the right center. I hope I have been very clear. All the searches need 4 images...anyway... PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> html { height: 100%; overflow: scroll; } body { font-family: tahoma, arial, sans-serif; font-size: 11px; background: #DEDEBA; margin: 0px 0px 0px 0px; color: #DEDEBA; } input, option, select, textarea { font-family: verdana, tahoma, arial, sans-serif; font-size: 11px; } .search { margin: 0px; padding: 5px 5px 5px 7px; width: 366px; height: 24px; float: right; } .input-search { width: 259px; margin: 0px 5px 0px 0px; padding: 5px; background: #DEDEBA; border-color: #666666; float: left; text-shadow: 808080; color: #808080; } </style> <script type="text/javascript" src="webfunctions.js"></script> </head> <body> <div class="search"> <form action="search.php" method="post" style="display:inline;"> <div> <input type="text" name="search" class="input-search" value="Enter your Search Query" onblur="if(this.value=='') this.value='Enter your Search Query';" onfocus="if(this.value=='Enter your Search Query') this.value='';" /> <input type="image" src="images/search.gif" /></div> </form> </div> if someone would, check out my testing grounds website... jon.endysis.org there are 3px #fff double borders going along each side of the layout (you can see them on either side of the space shuttle background) that are supposed to extend all the way down the layout, but only go until the end of the shuttle. I've learned that if I just have html br /'s after the the shuttle part they extend down for those, but for some reason don't extend down for my div class="contentleft" and my div class="contentright". if anyone wants to check my source, div id="racingstripes" is the layer that has the stripes, and it has ONLY the stripes. my css is: #racingstripes{ border-right:3px #fff double; border-left:3px #fff double; } any ideas please? i can't figure it out. thanks for any help! Hi I'm currently testing my code within the firefox browser and have found that no borders appear whatsoever. I was using the dotted border however changed it to solid to see if that made a difference however this did not help. The css I use for the <div> is as follows: Code:
.div_surround {
width:185px;
min-height:200px;
float:left;
margin-top:5px;
margin-right:5px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
border-left-style: solid;
border-left-color: #CCCCCC;
border:1px;
}
I know a lot of people dont like the width to be specific pixels however unless this makes a difference to my situation, please ignore this for the time being. I am looking to change it in the future. By the way this code works fine in IE where I see a box with a bottom and left border. Thanks in advance for any help. Billabang! hi all, hoping someone could help me with an issue i'm having in css involving borders (sort of). hopefully this is the appropriate place for this question, as it does involve some html. i have a page divided into three vertical frames (i know, i know...frames are not ideal. but i would like to keep the page in this format for specific reasons). the border is set to "0" in each frame, but on the left and right frames i use a bit of css code to create a colored border on the right hand side for the left frame, and on the left hand side for the right frame (it creates a kind of vertical outline for the middle frame). hopefully this makes sense. after completely finishing the website and uploading it to my ftp, i found that it works perfectly, except when opened in firefox or navigator. when opened with either of these browsers, the content and most of the design loads fine, but the colored borders in the outer frames are offset from their sides maybe a quarter of an inch. i can't figure out what's causing it, but i know it has something to do with the border code. as i would like this site to be as compatible as possible with most popular browsers, i'd like to try and fix this somehow. i've posted my code following this message in hopes that someone could offer suggestions. any advice would be greatly appreciated. frames created in index.htm: Code: <frameset cols = "25%, 50%, 25%" border = "0"> <frame name = "side1" src = "blankleft.htm" scrolling = "no"> <frame name = "middle" src = "main.htm"> <frame name = "side2" src = "blankright.htm" scrolling = "no"> </frameset> colored border for the left frame (side1): Code: <style type = "text/css">
body
{
border-left: 0px solid #607046;
border-right: 2px solid #607046;
border-top: 0px solid #607046;
border-bottom: 0px solid #607046;
}
</style>
colored border for the right frame (side2): Code: <style type = "text/css">
body
{
border-left: 2px solid #607046;
border-right: 0px solid #607046;
border-top: 0px solid #607046;
border-bottom: 0px solid #607046;
}
</style>
|
|||||||