|
CSS - Border Under Heading Tag, But Not All The Width
Hi, I am trying to add a 8px border under my headings, but I only want it to go as far as the word. At the moment, it is going the whole width of my div container.
This is what I have at the moment: PHP Code: #sidebar h2, #sidebar h3 { color: #444; font-size: 20px; font-weight: normal; margin: 0px 0 5px 0; padding: 0px 0 0px 0; border-bottom: 8px solid #FE9023; } Any help would be great. Thanks Similar TutorialsI'm trying to make 2 boxes next to each other at the right of the screen. I have them aligned OK but I'm having trouble with the width of the borders. With the CSS as is I get a thick border in IE6 and a thin border with Firefox. When I use the bold part instead I get a thin border in IE6 and NO border in Firefox My aim is to have a thin border. What is the correct way to do it? Is there a way that will render the same in IE6 and Firefox? Code: div.container {
overflow: hidden;
width: 100%;
}
div.side {
float:right;
width:150px;
/*border-style: solid;
border:1px;*/
border: thin solid;
margin:5px;
}
html Code: Original - html Code <DIV CLASS="container"> <DIV CLASS="side"> E05050439 </DIV> <DIV CLASS="side"> <H2>Reference Number</H2> <P>Please quote this number on all correspondence</P> </DIV> </DIV> <DIV CLASS="container"> <DIV CLASS="side"> E05050439 </DIV> <DIV CLASS="side"> <H2>Reference Number</H2> <P>Please quote this number on all correspondence</P> </DIV> </DIV> New guy on the scene - I need a little help. Seems basic, but I can't figure it out. html and body tags set to a width of 100%. I have a div that I want to be 100% with a border. If I set it to a width of 100% and a border of "1px solid #000" the div actually expands 2 pixels beyond the right edge of the page in FF. Haven't tried it in IE yet. In any case, anyone know how to solve this? If not, any creative work-arounds? Thanks. Hi there, Is it possible to set a border's width? when I say width I mean it's horizontal width not height. Many thanks dear all, some simple divs of mine seem to be rendering differently in IE6 and IE7. for example, the following style works fine in IE6... Code:
#calHourNow {
background-color: #FFFF66;
margin:0px;
padding:0px;
width:50px;
height: 120px;
border-top:1px solid #999999;
border-right:1px solid #999999;
color:#000000;
font-weight:bold;
font-size:14px;
text-align:right;
font-family:"Times New Roman", Times, serif;
}
... I am left with a 12o x 50 px box (which is repeasted down the page) but in IE7 it seems the 1px border is added to the width and height, leaving me with a div that is actually 121 x 51 px. It is completely vital for my project (an outlook style calendar) that the dimensions of these divs are exactly the same on both browsers, is there a way round this? Many thanks, Mark Hi guys. The strangest thing happened to me a few minutes ago. I tried centering the heading for my webpage using css in dreamweaver. When I looked it up on the browser to see whether it checked out right, to my horror, I discovered that the heading had disappeared. Could someone tell me what went wrong? thanx kaz. I'm trying to put together a CSS layout for a blog, and unfortunately my meager skills have crapped out on me. The page currently looks like this: http://prestonandtread.com/test/ I want it to be a full screen header while the footer is fixed and the width of the content. I thought I had it pieced together ok enough from different tutorials, but the top and left sides of the screen show background and the content isn't parking itself on the page correctly. Help me get this to where it should be! Code: <style type="text/css">
html,
body {
margin:0;
padding:0;
height:100%; /* 100 % height */
}
#header {
width: 100%;
height: 150px;
}
html>body #header {
position:fixed;
z-index:10; /* Prevent certain problems with form controls */
}
html>body #wrap {height:100%;} /* 100 % height */
#wrap {
width:479px;
margin:0 auto;
}
html>body #content-wrap {height:100%;} /* 100 % height */
html>body #content {padding:10px 10px 10px 10px;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
#footer {
width:479px;
height:160px;
}
html>body #footer {
position:fixed;
bottom:0;
z-index:10;
}
html,
body {
background-color: #99CCFF;
}
#header {
text-align: center;
background-image: url(background.jpg);
background-position: top left;
background-repeat: repeat-x;
background-color: #99CCFF;
}
#footer {
text-align: center;
background-image: url(eyes.jpg);
background-color: #99CCFF;
}
#content-wrap,
#content {
background-color: #FFFFFF;
}
#footer a {color:#111;}
</style>
H all, I have a horizontal navigation bar which basically looks like this: Thing0 | Thing1 | Thing2 | Thing34 What I want to do is when I select a link to a new page, I'd like (using CSS) to have that link highlighted so that the user can see which page he is on. It's either that or hardcoding the name to each page...but since it's already in the Nav bar, I thought highlighting the link on the nav bar serves as a heading as well... Possible? Is there a way I can have the checkbox to the right of the heading without stretching out the actual heading? It works fine when it is floated to the left http://www.iankovi.com/html_.html http://www.iankovi.com/css_.css Hi everybody. I am developing a site for classic games, and I am having trouble putting a navigation list on the left of my page and aligning a heading on the right with the top of the list border. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Choose a Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* <![CDATA[ */
body {
font-family: arial;
font-size: 12pt;
margin: 0;
padding: 0;
}
h1, h2 {
text-align: center;
}
ul {
margin: 0;
width: 25%;
height: 20em;
padding: 0;
border: .5em solid #00f;
list-style-type: none;
list-style-position: outside;
}
li {
background-color: #0ff;
padding: .5em 0 .5em;
}
li a {
background-color: #0f0;
height: 1em;
padding-left: .5em;
display: block;
font-weight: bold;
}
/* ]]> */
</style>
</head>
<body>
<h1>Game Index</h1>
<ul>
<li><a>Home</a></li>
<li><a href="dir.html" title="View the Directions">Directions</a></li>
<li><a href="gbc.html" title="View GameBoy/GameBoy Color games">GameBoy/GB Color</a></li>
<li><a href="gba.html" title="View GameBoy Advance games">GameBoy Advance</a></li>
<li><a href="nes.html" title="View Nintendo/Famicom games">NES/Famicom</a></li>
<li><a href="snes.html" title="View Super NES/Super Famicom games">SNES/Super Famicom</a></li>
<li><a href="ggear.html" title="View Game Gear games">Game Gear</a></li>
<li><a href="genesis.html" title="View Genesis MegaDrive games">Genesis/MegaDrive</a></li>
<li><a href="32x.html" title="View 32X games">32X</a></li>
<li><a href="psx.html" title="View PlayStation games">PlayStation</a></li>
</ul>
<h2>Select a page</h2>
<div id="pgdesc">Please make a selection from the list above</div>
<h3>Note: This page does not host ANY emulators. You have come to the wrong place if you are looking for an emulation site.</h3>
<div id="img">
<img id="atari" src="atari2600.jpg" alt="Atari 2600">
</div>
</body>
</html>
I realize that a list and a heading are both block-level elements, but I'm wondering... I'd rather not use absolute positioning since it doesn't work well with different resolutions. I'm just wanting it to work with 800x600 and 1024x768 resolutions. Can anybody help? I have 3 images that I would like to go togather to form a heading with rounded corners. I want to use 3 div tag to accomplish this. I am unable to get all 3 to lign up Code:
.rounded_STYLE{
background-color: #fff;
border: 1px solid BORDER_COLOR;
position: relative;
}
.rounded_STYLE{background:url('/images/chg.gif') repeat-x; }
.rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br{
width: 6px;
height: 24px;
position: absolute;
}
.rounded_STYLE > .tl{
background: url(/images/clg.gif) top left no-repeat;
}
.rounded_STYLE > .tr{
background: url(/images/crg.gif) top right no-repeat;
}
.rounded_STYLE > .tc{
background: url(/images/chg.gif) top right no-repeat;
}
.rounded_STYLE > .bl{
background: url(/images/bl.png) bottom left no-repeat;
}
.rounded_STYLE > .br{
background: url(/images/br.png) bottom right no-repeat;
}
Code: <div class="rounded_STYLE rounded"> <div class="tl"></div> <div class="tc"><table class="h"><tr><td class="l"></td><td>dddddddddd</td><td class="r">ssssssss</td></tr></table></div> <div class="tr"></div> ... contents of the block go here ... <div class="bl"></div><div class="br"></div> </div> Again I am new to CSS so bear with me here...I did search this forum before posting this... I am using a 3 column template, I am having some problems between the "#columns" with the heading <h*> of these columns. as long as each column has a differnt heading size all is well but if two columns have the same size heading I can't seem to be able to make them different colors I'm trying to figure out how to do something like this: Code: <h6>Lorem Ipsum Dolor <span>jan 10 2006</span></h6> And make the heading line up to the left side and the span on the right. It's close. It's lining up on the right but on the next line down rather than the same line. Take a look. Any bright ideas on why this is happening or how to fix it? Thanks. This is probably something extremely simple, but I'm the slow kid today... I have a right-hand sidebar with a heading that is not behaving the way I want it to. After each word, it creates a new line, then the next word.... Any suggestions, as always, are appreciated. Here's the page: http://www.websimage.com/pcqtest/index.html Thanks guys/gals :) 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>
Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... i ve been playing with my page and been trying to modify the width of the page (divs) according to the browswer's width. The problem is i want the navigation menu on left to be fixed width (say 200px) and the center div and the right column to be variable width. Also, i want to set a minimum width , so that the floating divs dont roll below the navigation menu. here s the link to the page. try reducing ur browser windows size . the content div rolls down under theleft nav menu. http://ccc.1asphost.com/pacemakerpr...r/cicuitlab.htm Also , i get wierd result in netscape navigator. please help I have an absolutely positioned <div> containing a block of text. I have not specified a width for this <div>. This <div> is nested within another <div> for which I have specified a width of 200px. So something like: html4strict Code: Original - html4strict Code <div style="position: relative; width: 200px;"> <div style="position: absolute; top: 10px; left: 20px; z-index: 100;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur eu purus a tellus mollis consequat. Phasellus aliquam sapien quis mauris. </div> </div> <div style="position: relative; width: 200px;"> Since the absolutely positioned <div> is not part of the page's normal flow, I would expect that its width would expand according to its contents (and the browser window's boundries). Instead, in Firefox only, the width of the absolutely positioned <div> expands only to the width of its parent - in this case 200px. Am I doing something wrong? or is there a workaround for this? I have seen a design which I find pretty interesting where in the main site is aligned left and fixed width at say 700px wide. Yet the footer seems to span the entire screen. The header also seems to use the entire screen width but that is beign accomplished with the background image, but this footer goes all the way to end of the screen and naturally adjusts itself under all the content. Is there a way to get this effect? 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'm at the very very very begaining of a table-less design (my first, actually). The problem is, since I have decided to have a non-fixed width, when the browser is minimized, at a certain point the design breaks. See it here (please don't make fun! it's just the start): SiliconSatan.com/test.php I'd like to set a minimum width, probably on the container <div>, so at a certain point it sort of becomes like a fixed width? No smaller than a set width? [EDIT] Also, I have a question about background color mismatch, but it was not quite OT for the CSS forum: http://forums.devshed.com/web-desig...e7t-403266.html |
|||||||