|
CSS - Beginner Css Border Question
Hi,
beginner question. How do I achive this Code: <TABLE BORDER="1" CELLPADDING="5"> in my CSS? Thank you for your help? Similar TutorialsI'm an HTML+CSS beginner and I'm creating a website from a template. The style sheet of the website defines stuff like headers as suited to the general look and feel off the website. Good. But the website allows me to post articles and the articles (which are written with an HTML editor so they use standard HTML elements) pick up those styles and they look terrible. I think the easiest solution is for me to create some new styles in my CSS specifically for articles. Then, when I post a new article, I would add something to the article's HTML instructing it to use those new article styles instead of the general styles. So, I tried adding this to my CSS file: #article h1 { color:#ffffff; } And I surrounded the HTML of my article with this: <div class="article"> ....the article's HTML </div> But this didn't have any effect on how the <h1> within the article is displayed. What am I doing wrong? I'm having a problem with my links becoming deactive within some nested elements. I followed some instruction on creating rounded corner boxes via a tutorial by Andy Budd. Anyway, it all works great except when I wrap link tags around a few pieces of copy. I'm a bit of a beginner still so maybe this is a simple fix but I've spent over a days worth of time now trying to figure it out on my own and can't seem to get it. Just to clear this up, the links work everywhere on the page outside of the "box" element I'll list below and I've double and triple checked that the link within the "box" element is written correctly and it is. The CSS even finds the link and styles it correctly, however, the mouse function seems to be disabled. Does this all make sense? Below is the CSS, any help would be greatly appreciated... This is the code that creates the box and it works correctly... Code: .box {
width:831px;
background:url(../imgs/box-spacer.gif) repeat-y;
}
.box h1 {
background:url(../imgs/box-top.gif) no-repeat left top;
padding-top:40px;
font-weight: normal;
}
.box .last {
background:url(../imgs/box-bottom.gif) no-repeat left bottom;
padding-bottom:60px;
}
.box h1, .box p {
padding-left:60px;
padding-right:60px;
}
And this is the code I used to test that the page is seeing it as a link... Code: .box h1 a:link {
color:#00CCFF;
}
.box h1 a:hover {
color: #FF0066;
}
It changes the color correctly but the hover doesn't work and if you click, it doesn't link you anywhere. Again, the link is written correctly on the page. Can anyone help please? I appreciate it. I am using a border-left that is 25px, instead of a solid color, i would like to use a repeated image that is 25px in width, right now i have this: border-left: 25px solid #000; I tried to change it to something like this: border-left: 25px url("image.jpg"); it doesn't change it to an image, and i'm guessing that it's not allowed in CSS. Am I doing something wrong? is it really not possible to do this? I need the element to dynamically change size along with the item that it is bordering, so making it a seperate div won't work. any thoughts? Hi I have img tags in my html with border="0". I am replacing the html stylings with CSS and want to know what the equivelant would be? Is it Code: border-width: none; Or does the img tag really need the border="0" in it at all? Thanks in advance!! 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... 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! 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? 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. So here is my current code: Code: body {
color: gold;
background-color: black;
}
#main {
align: center;
}
#header {
width: 600px;
height: 150px;
border: 1px solid;
background-image: url('http://localhost/web/css/images/header.jpg');
}
#links {
width: 600px;
}
#links ul {
vertical-align: center;
}
#links ul li {
padding-left: 10%;
display: inline;
}
#content {
border: 1px solid;
text-align: center;
width: 600px;
}
As the title said, I am a complete beginner to CSS, so any criticism on my code is always welcome. The HTML to go along with this: Code: <html> <head> <title>Test Corp Site</title> <link rel="stylesheet" type="text/css" href="corp.css" /> </head> <body> <div align="center"> <div id="header"></div> <div id="links"> <ul> <li>Home</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul> <div id="content"> <h1>Testing</h1> <p>This is just a test to see if I can actually design the corp website!</p> </div> </div> </body> </html> Screenshot That's essentially what it creates. My question is this: If you look at where the supposable links are supposed to go, you'll see that they are slightly crooked, more off to the right. Well I want them to be exactly centered. As you can see the div layer is defined as being only 600px wide, so I want the links to be centered inside that 600px box and retain their padding at the same time. I have tried using things like vertical-align but I can't seem to get it to center correctly. What am I doing wrong? Hello, I just started trying to learn about css and html layouts by following this tutorial he hxxp://www . subcide.com/tutorials/csslayout/page2.aspx This is my webpage: (link removed as issued is resolved) but I'm having issues making the navigation look correct (not repeat and be about 50 px down) Can someone give me a little hand. ? cheers. ps....errrr...I see nothing that I am doing wrong in the forum rules about the urls...... Hello all, this is my first post! I hope I will be able to learn and contribute. first off, im a programmer, and I want to start making web sites! My websites will be simple, so what I am looking for is: ***important note: I am only looking for a simple 3 column + header + footer layout. The most versatile layout - whether it is pure css, or minimal tables - the layout that will work with the maximum possible amount browsers new and old, the most or at least most popular resolutions, whether it is liquid or fixed. A resource or means by which I can test layouts on the available platforms, e.g, IE, mozzila, opera, mac etc. - is there a site you can submit your code to and do this? Thankyou very much for your time, TheLove - youll get some of it! Hi all, Does anyone have any good suggestions for a CSS book? I'd like to buy an all in one, that will teach me CSS. Thanks for any help Well, I've started diving into CSS and I'm pretty intimidated by it. A lot of it seems to go counter the intuition that I could rely on as long as I worked with tables in a WYSIWYG editor, lol... I'm trying to do something with CSS that looks darn simple, but I just can't get it to work! I can't post hyperlinks, it seems. So you'll have to paste this URL of an explanatory picture into the address line yourself img262.imageshack.us/img262/1278/layoutro9.jpg Basically what I need is a two-column design: - column on the left is fixed-width and contains some seperate containers lined up vertically; these should resize (vertically) when content requires - column on the right is supposed to be the widest and also contains seperate containers lined up vertically; initially, the middle one of them is a picture that is resized to fit the browser window. Now it comes: I use javascript to expand the image to full-size when the user clicks it. What I want is that the column on the left is completely unaffected by this, that the picture expands to the RIGHT (going beyond browser window and can be viewed entirely by scrolling with the scrollbars), and that the container below the picture moves down with it and doesn't move below the left column. I've been trying a couple of things but always end up with issues, most probably because I haven't given it enough time. But I'm getting frustrated quickly because this looks SO simple!! Just to be clear: all I need is a CSS layout that arranges the 7 or 8 "boxes" correctly for this purpose. I would be very thankful if someone could show some working code. JoH I've been working in CSS, man, is it tiresome for a beginner! After much trail and error, I've come up with my first CSS page. Where I'm stuck, is in the area where all the text is. When I put more text into that page, none of the surrounding styles/boxes[?] adjust to the text format (also shown in a link below), and I can't seem to figure out how to center the entire page itself. Sorry, for the stupid questions, I'm a total novice, and can barely understand most of the CSS postings in this forum. Text extending instead of expanding layout: http://rafia.info/css/layers.bad.htm Thanks sincerely, rups27 Nevermind: solved hi there, i am new to css and creating a gallery. What i want to do is create a medium size pop up when you rollover the thumbnail and have a full size image displayed when the thumbnail is clicked. I have to use lightbox javascript to display full size images, which works ok, but the problem has come trying to get both this and the roll over to work. At the moment i have both elements working, although it produces two thumbnail images. How can i use this code whilst making only one thumbnail appear? <a href="images/cramps/full size/c1.jpg" rel="lightbox" title="Here is the image caption"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> </a> <a class="thumbnail" href="#thumb"> <img src="images/cramps/thumbnails/ct1.jpg" border="0" /> <span><img src="images/cramps/medium size/cm1.jpg" /><br /> </span></a> sorry if this is vague, i will answer any questions the best i can, all help appreciated! Hey on my website: http://www.chamillionairechat.com I want there to be a border around the mainmenu and to look something like this: And this is the css i'm using for the mainmenu: Code: .mainmenu { background-color:#FFFFFF; padding-bottom:5px; border:1px border-color:#21511F; }
So does anyone know what i'm doing wrong Thanks Hi guys. Can I change a table row border style like below?? Code: <tr style="border-bottom: solid 1px #DBDBDC";> Hi, I am using blueBox class that makes a border. code: Code: <div class="blueBox" <table bgcolor="#FF3300"><tr><td> <div id="my_title" style="position: relative; width: 200px; height: 20px;" ></div> </td></tr> <tr><td>... My problem is that <div id="my_title" is causing right border of <div class="blueBox" disappear. When I change <div id="my_title" style="position: relative; to <div id="my_title" style="position: absolute; border is right where it should be. I do not want to use absolute positioning. What can I do about it? What is the problem? I can see that red background of the <table bgcolor="#FF3300"> does not even reach half of <div class="blueBox" Something is obviously pushing or covering right border of <div class="blueBox" |
|||||||