|
CSS - Horizontal Lines And Positioning
Thanks for taking the time to read my question.
I am trying to make a new page layout. I have one main box on the left [float: left;], and 3 stacked smaller boxes on the right [float: right;] I would like 2 lines joining the box on the left to the center box on the right. I'm trying to do this with a container that only has top and bottom borders. I don't know how to get the horizontal lines centered vertically. Also, the page layout works great in FF but not in IE. Not really sure why. Any suggestions on how to do this? oh and the green and red colors are only for development so they stand out. Thanks, Brad HTML: Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="description" content=""> <meta name="keywords" content=""> <meta name="author" content="piercedjunkmail@hotmail.com"> <meta name="generator" content="AceHTML 5 Freeware"> <link href="TestLayoutCSS.css" rel="stylesheet" type="text/css" /> <title>Test Layout 1</title> </head> <body> <div id="HeaderContainer">hi</div> <div id="RightTopContainer">hi</div> <div id="PageTitle">This is the title of the page</div> <div id="MajorLeftMainContainer"> <div id="LeftMainContainer">hi</div> <div id="HorizontalLines"></div></div> <div id="RightCenterContainer">hi</div> <div id="RightBottomContainer">hi</div> </body> </html> CSS: Code: @charset "iso-8859-1";
body {
font-family: Foo, times, serif;
margin: 0px;
background-color: #4F9FC5;
}
#HeaderContainer {
height: 50px;
width: 100%;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
}
#MajorLeftMainContainer {
/*border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;*/
float: left;
margin-top: 90px;
margin-left: 10px;
width: 67%;
height: 310px;
background-color: green;
}
#LeftMainContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: left;
/*margin-top: 90px;
margin-left: 10px;*/
width: 80%;
height: 300px;
background-color: #EAEAEA;
}
#RightTopContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: right;
margin-top: 30px;
margin-right: 10px;
width: 30%;
height: 150px;
background-color: #EAEAEA;
}
#RightCenterContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: right;
margin-top: 50px;
margin-right: 10px;
width: 30%;
height: 150px;
background-color: #EAEAEA;
}
#RightBottomContainer {
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color: #C0C0C0;
border-right-color: #C0C0C0;
border-style: solid;
border-width: 5px;
float: right;
margin-top: 50px;
margin-right: 10px;
width: 30%;
height: 150px;
background-color: #EAEAEA;
}
#PageTitle {
font-size: 25px;
font-family: arial, times, serif;
/*border-color: green;
border-style: solid;
border-width: 2px;*/
width: 340px;
height: 35px;
margin-top: 40px;
margin-left: 25px;
color: black;
font-variant: small-caps;
}
#HorizontalLines {
border-top-size: 2px;
border-top-color: red;
border-top-style: solid;
border-bottom-size: 2px;
border-bottom-color: red;
border-bottom-style: solid;
float: left;
width: 124px;
height: 30px;
vertical-align: middle;
}
Similar TutorialsI've been working on a site and have a problem with the horiztonal positioning of a div. At http://www.alphaworks.co.uk/problems/nicewag1/ I would like the position of the div with the id "page_footer" to move to the leftmost position. Can someone point out the mistake I'm making? Thanks, Geoff I am trying to position two buttons on a line. They should each sit in the middle of one half of the line. Here's my code: Code: <html>
<head>
<style type="text/css">
.clear { /* generic container (i.e. div) for floating buttons */
overflow: hidden;
width: 100%;
}
a.button {
background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_a.gif') no-repeat scroll top right;
color: #33C;
display: block;
float: left;
font: bold 16px arial, sans-serif;
height: 24px;
margin:0 auto;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}
a.button span {
background: transparent url('http://www.oscaralexander.com/tutorials/img/bg_button_span.gif') no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
}
a.button:active {
background-position: bottom right;
color: #22B;
outline: none; /* hide dotted outline in Firefox */
}
a.button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
}
</style>
</head>
<body>
<div>
<div style="float:left; width:50%; background-color:#EEE">
<a class="button" href="#" onclick="this.blur();"><span>Learn More</span></a>
</div>
<div style="float:right; width:50%; background-color:#DDD">
<a class="button" href="#" onclick="this.blur();"><span>Buy Now!</span></a>
</div>
</div>
</body>
</html>
And here's a link to the test page: http://rentalocal.thad.com/test Does anyone know what I've done wrong? Thanks, Thad I am making a horizontal menu with dropdown submenus. It is partly coded using Dreamweaver and partly by hand. The menu works fine under IE but in Firefox it is off by a few pixels. I searched the forums and found that the problem was with the way IE rendered <div> versus the way Firefox does, but I wasn't able to solve the problem. Could somebody also tell me how to switch from Quirk mode to standard? for complete code visit http://www.ithaca.edu/students/sgarg1/website Any help is appreciated **************************************** index.html Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Sustainable Tompkins</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function start()
{
document.getElementById('layer1').style.visibility="hidden";
document.getElementById('layer2').style.visibility="hidden";
document.getElementById('layer3').style.visibility="hidden";
document.getElementById('layer4').style.visibility="hidden";
document.getElementById('layer5').style.visibility="hidden";
}
function changeOver(theNode)
{
theNode.style.background="#ffffff";
theNode.style.color="#666666";
}
function changeOut(theNode)
{
theNode.style.background="#666666";
theNode.style.color="#ffffff";
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v;}
}
//-->
</script>
<style type="text/css">
<!--
.style11 {font-family: "Times New Roman", Times, serif}
.bullet {list-style-type: disc;}
-->
</style>
<!-- InstanceEndEditable -->
<link rel="stylesheet" href="css/mainStyles.css" type="text/css">
</head>
<body onLoad="start();">
<center>
<table width="801" border="1" cellpadding="0" cellspacing="0" onMouseOut="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer3','','hide','Layer4','','hide','Layer 5','','hide')">
<!--DWLayoutTable-->
<tr>
<td height="132" colspan="3" valign="middle"><div align="center"><span class="style3">SUSTAINABLE TOMPKINS</span>
</div>
<div align="center"></div></td>
</tr>
<tr>
<td height="29" colspan="3" valign="top" class="above_menu"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="48" colspan="3" valign="top"><!-- InstanceBeginEditable name="Menu" -->
<table width="800" border="1">
<tr bgcolor="#FFFFFF">
<td width="70" id="mi0" class="menu" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer5','','hide','Layer3','','hide');chang eOut(document.getElementById('mi0'));" onMouseOut="changeOver(document.getElementById('mi0'));">
Home
</td>
<td id="mi1" class="menu" width="89" onMouseOver="MM_showHideLayers('Layer1','','show','Layer2','','hide','Layer5','','hide','Layer3','','hide');chang eOut(document.getElementById('mi1'));" onMouseOut="changeOver(document.getElementById('mi1'));">About St
<div id="Layer1" onMouseOut="MM_showHideLayers('Layer1','','hide')">
<table width="200" border="1" cellpadding="0" cellspacing="0" >
<tr>
<td id="mi1_1" onMouseOver="changeOver(document.getElementById('mi1_1'));" onMouseOut="changeOut(document.getElementById('mi1_1'));">* Mission</td>
</tr>
<tr>
<td id="mi1_2" onMouseOver="changeOver(document.getElementById('mi1_2'));" onMouseOut="changeOut(document.getElementById('mi1_2'));">* Coordinators</td>
</tr>
<tr>
<td id="mi1_3" onMouseOver="changeOver(document.getElementById('mi1_3'));" onMouseOut="changeOut(document.getElementById('mi1_3'));">* Sponsors/Partners</td>
</tr>
<tr>
<td id="mi1_4" onMouseOver="changeOver(document.getElementById('mi1_4'));" onMouseOut="changeOut(document.getElementById('mi1_4'));">* History</td>
</tr>
</table>
</div>
</td>
<td id="mi2" class="menu" width="141" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','show','Layer5','','hide','Layer3','','hide','Layer 4','','hide');changeOut(document.getElementById('mi2'));" onMouseOut="changeOver(document.getElementById('mi2'));">
ST Initiatives
<div id="Layer2" onMouseOut="MM_showHideLayers('Layer2','','hide')">
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td id="mi2_1" onMouseOver="changeOver(document.getElementById('mi2_1'));" onMouseOut="changeOut(document.getElementById('mi2_1'));">Salons</td>
</tr>
<tr>
<td id="mi2_2" onMouseOver="changeOver(document.getElementById('mi2_2'));" onMouseOut="changeOut(document.getElementById('mi2_2'));">Surveys</td>
</tr>
</table>
</div>
</td>
<td id="mi3" class="menu" width="143" onMouseOver="MM_showHideLayers('Layer1','','hide','Layer2','','hide','Layer5','','hide','Layer3','','show','Layer 4','','hide');changeOut(document.getElementById('mi3'));" onMouseOut="changeOver(document.getElementById('mi3'));">
Helpful Links
<div id="Layer3" onMouseOut="MM_showHideLayers('Layer3','','hide')">
<table width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td id="mi3_1" onMouseOver="changeOver(document.getElementById('mi3_1'));" onMouseOut="changeOut(document.getElementById('mi3_1'));">Grouped</td>
</tr>
<tr>
<td id="mi3_2" onMouseOver="changeOver(document.getElementById('mi3_2'));" onMouseOut="changeOut(document.getElementById('mi3_2'));">Annotated</td>
</tr>
</table>
</div>
</td>
// Two More instances of the sub menus.
</tr>
</table>
</tr>
</table>
</center>
</body>
</html>
css file Code:
<!--
.style2 {font-size: x-small; color:#666666}
.above_menu{background-color:#0066CC}
.Common{background-color:#0099FF}
.Variable{background-color:#0099ff}
.background {background-color: #93AA39}
.footer {border-bottom-color:#000000}
.content {background-color:#E6FF80}
.style3 {font-size: 36px}
.style5 {color: #666666}
.style6 {color: #FFFFFF}
.style7 {font-size: 9px}
.style8 {font-size: 14px;color: #FFFFFF;}
.style9 {font-size: 14px}
#Layer1 {position:absolute; width:143px; height:74px; z-index:1; left: 180px; top: 207px;}
#Layer2 {position:absolute; width:143px; height:24px; z-index:2; left: 276px; top: 207px;}
#Layer3 {position:absolute; width:143px; height:36px; z-index:3; left: 423px; top: 207px;}
#Layer4 {position:absolute; width:200px; height:145px; z-index:4; left: 572px; top: 207px;}
#Layer5 {position:absolute; width:143px; height:36px; z-index:3; left:736px; top: 207px;}
#mi1_1 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi1_2 {background-color:#666666; text-align:left;color:#ffffff;margin:0}
#mi1_3 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi1_4 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi2_1 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi2_2 {background-color:#666666; text-align:left; color:#ffffff;margin:0}
#mi3_1 {background-color:#666666; text-align:left; color:#ffffff}
#mi3_2 {background-color:#666666; text-align:left; color:#ffffff}
#mi4_1 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_2 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_3 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_4 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_5 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_6 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_7 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi4_8 {background-color:#666666; text-align:left; color:#ffffff;font-size: 14px}
#mi5_1 {background-color:#666666; text-align:left; color:#ffffff}
#mi5_2 {background-color:#666666; text-align:left; color:#ffffff}
a:hover {color: #666666;text-decoration:none;}
a{text-decoration:none; color:#FFFFFF}
td:hover{color: #666666}
.menu{text-align:center; color: #666666}
websitewebsite Hi all, I'm a newbie on spry coding and was hoping for some help. I tried to search the forum for a similar probem, but couldn't find one. Here's the basic problem: I have a spry horizontal menu bar and my main menu items are displaying just fine when the browser screen is maximized. However, when I make the browser screen smaller on the screen, the last menu item gets pushed down to a second line. Here's what I mean: With maximized browser screen: [Item 1][Item 2][Item 3][Item 4][Item 5] With smaller browser screen: [Item 1][Item 2][Item 3][Item 4] [Item 5] Is there any way that I can use CSS, or any other method you might know, to force the items to stay on the same line, regardless of the screen size? Thanks so much for any info! Hi all! I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to. The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up You can check out the site at: cleopatra.gebodesign.no The files are at: gebodesign.no/cleopatra/menu.php gebodesign.no/cleopatra/stylesheet.css Thanks for any input I have problem with footer DIV in this layout (the order of DIV's in code after <body> should be - content, left, right, right2, header, footer - positioned centraly with fixed values): It needs to be sticked to fit after content of 4 column DIV's like it is in example. http://www.split.info/dev/less-content/ http://www.split.info/dev/more-content/ Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Title of website</title>
<style type="text/css">
<!--
body {margin: 0px 0px 0px 0px; background-image:url(images/bg.jpg); background-position:center; background-repeat:repeat-y;}
#wrapper {width: 1000px; margin: 0 auto; text-align: left; position: relative;}
#contentPane {width: 468px; float: left; position: absolute; margin-left: 3px; padding: 0px 0px 0px 0px; background-color:#0099FF; left: 126px; top: 150px;}
#leftPane {width: 125px; float: left; left: 0px; position: absolute; background-color: #99FFFF; top: 150px;}
#rightPane {width: 173px; float: right; right: 226px; background-color:#999966; position: absolute; top: 150px;}
#rightPane2 {width: 220px; float: right; right: 0px; background-color:#99FF00; top: 150px; position: absolute;}
#headwide {background-image: url(images/head_bg.jpg); background-position: center; background-repeat: no-repeat; width: 100%; height: 142px; position: absolute; top: 0px;}
#header {margin: 0pt auto; width: 1000px; background-color:#CC6600; height: 142px; }
#footer {position: absolute; width: 100%; top: auto; bottom: 0px; background-color: #CCFFCC; height: 50px;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="contentPane">Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
Content area<br>
</div>
<div id="leftPane">Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
Left Pane area<br>
</div>
<div id="rightPane">Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
Right Pane area<br>
</div>
<div id="rightPane2">Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
Right Pane 2 area<br>
</div>
</div>
<div id="headwide">
<div id="header">Header area</div>
</div>
<div id="footer"><strong>Content from above 4 column div's need to push footer DIV below (after them)! </strong>Footer area that is on bottom of div with biggest height (content, left, right or right 2 pane)... foooter follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current state like it is in this document happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So footer can be either moved in code after rightpane2 div after end of wrapper. Pls help. Thx!</div>
</body>
</html>
Content from above 4 column div's need to push footer DIV below (after them)! Foooter need to follow right after end of content from those div's (regular behaviour of next table row below any of those 4 columns). Current issue like it is in this layout happens that if you add more data f.i. in content area (outside one screen), it will go trough footer... So in your resolution footer can be also moved in code after rightpane2 DIV, after end of wrapper. Pls help. Thx! Echo Anyone knows of a method to cause a vertical line to come all the way down ? Currently it stops where the text stops. but i want it to go all the way to the buttom of the document regardless of the text. (right now i use box border on one side) Thanks! I have finished my transparency box backgrounds.. and, thanks to some help here.. have them working in multiple browsers.. Now, I have received a call.. that one person sees "black lines" through the boxes on the transparent boxes on the attractions and info pages.. (user is using IE and 1024x768) -I cannot recreate this problem on any machine.. is there some little strange bug that causes this on certain browsers? http://www.tkwebbiz.com/Gina2 Thanks so much.. *again*.. *Smiles* I was wondering if anyone knows how to get a space between blocks in a list. If you have list that have more that one line in a block it looks better to have gaps greater than the leading to separate them. I can't figure how to accomplish this, does anyone have any ideas. I have a repeating background image, that is very much driving me crazy. There is a line when the image repeats. I cannot figure out what the problem is. Below is an example, the image in the box is slightly shorter which is where you see the line. (URL address blocked: See forum rules) Thanks for any help. Am I commenting lines incorrectly? If I prefix a line with two slashes // in the CSS, firefox will ignore it. IE will recognize it and perform the CSS styling. For instance: Code: table.myTable tr td
{
background-color: red;
//background-image: url('mypic.jpg');
}
The TD element will not have a background in firefox. It WILL have the background image in IE. P.S. I am using IE8 on Win7 RC1 (build 7100). Thank you I had a webpage where there were rows with three boxes on, that all floated left. After the third there was a line break and then the next line also had three boxes, etc. The boxes all have the same width, but different heights (not dramatically different). I am now wanting to allow the number of boxes on the line to vary with the width of the browser window. By removing the break every three lines this would work if all the boxes were the same height. As they are not, the box that should go onto the next line down might go down and a bit to the left before being "stopped" by a taller box. I expected this behaviour, but I'm not sure how to go further and get around it. Thanks for any ideas, Thomas Hi there, I would like to get some opinions on what would be the best way, or even a good way, to display a list of lines from a database, such as product descriptions (a link), prices (text) and buy now links. For example: Segate Hard Drive 250gb $150.00 Buy Now Maxtor Hard Drive 300gb $200.00 Buy Now etc I thought it would be best to have a <ul> with each line being an <li>. Further to this, I tried having each line as a <li> element, with each column (price, buy now etc) an <li> element, displayed inline. This actually worked well, but I had trouble doing an alternate background color thing, which I think was due to my funny css code. I gave each <li> a class selector, so that different formatting could be applied, and I had each <li> float:left; and a width, to give a column style display. Would a table be the best way to display the 3 (or more) columns? I've removed tables from the site layout, and can see how they would make sense for this, as it basically is tabular data, repeated over and over again. Or would having each line as a <p> with say each column having its own <label> possibly be best? Or some variation on of the 3, or something else all together? I realise everyone would have their preferred style and there is no 'best', 'right or wrong' way etc. I'm trying to find a way that I can work with, one that could be considered 'the norm', or 'best practise'. I haven't posted any code, but can if people need more of an idea of what I am trying to do. Cheers Scott Here is my html for my tables Code: <div id="Content">
<p class='instructions'>Click a column header to sort the table.</p>
<div spry:region="jdmba">
<div spry:state="loading" class="loading">Please wait while alumni data loads…</div>
<table width="680px" class="spry" cellspacing="0">
<tr>
<th scope="col" width="113px" class="sortable" spry:sort="last" id="last">Last Name</th>
<th scope="col" width="106px" class="sortable" spry:sort="first" id="first">First Name</th>
<th scope="col" width="257px" class="sortable" spry:sort="account" id="account">Company</th>
<th scope="col" width="66px" class="sortable" spry:sort="state" id="state">State</th>
<th scope="col" width="69px" class="sortable" spry:sort="hls_year" id="hls_year">JD</th>
<th scope="col" width="69px" class="sortable" spry:sort="hbs_year" id="hbs_year">MBA</th>
</tr>
</table>
<div class="Overload">
<table width="680px" class="spry" cellspacing="0">
<tr spry:repeat="jdmba" spry:setrow="jdmba" spry:odd="odd" spry:even="even" spry:hover="hover" >
<td width="113px">{last}</td>
<td width="106px">{first}</td>
<td width="257px">{account}</td>
<td width="66px">{state}</td>
<td width="69px">{hls_year}</td>
<td width="69px">{hbs_year}</td>
</tr>
</table>
</div>
</div>.......
Here is my CSS Code: .Content {
font: 14px/normal Georgia, "Times New Roman", Times, serif;
text-align: justify;
display: block;
padding: 2em 3em 3em;
}
.Overload
{
height: 208px;
overflow: auto;
}
.odd { background-color: #E8E8E8; }
.even { background-color: #E8E8E8;}
.hover { background-color: #FFC;}
table.spry {
font-family: Verdana;
font-size: 12px;
line-height:20px;
cursor: pointer;
}
.instructions {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-bottom:8px;
}
.loading {
font-family: Verdana;
font-weight:bold;
font-size: 12px;
line-height:20px;
cursor: pointer;
margin-top:0px;
margin-bottom:8px;
color:#900;
}
table.spry th {border-left: 1px solid #000000; border-bottom: 1px solid #000000; border-top: 1px solid #000000; font-family:Verdana; }
table.spry td {border-left: 1px solid #000000; border-bottom: 1px solid #000000; font-family:Verdana; }
table.spry th.sortable:hover { cursor: pointer; }
table.spry th.sortable { text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) no-repeat 95% 6px; }
table.spry th.ascending { background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) no-repeat 95% 8px; }
table.spry th.descending { background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) no-repeat 95% 8px; }
I guess I was under the impression if I made them all the same lengths and the table width the same that everything would then lineup just fine. The other thing is that on IE it is not lined up one way and on FF it's not lined up again, but it's different. I would like to upload some images to show my problem. How do I go about putting an image up for you to see what I'm talking about? When I try to insert an image it doesn't give me an option to upload an image from my machine. Thanks! Hi, I am writing a code for form: Code: private name: <input size="10" name="private_name" type="text"> last name: <input size="10" name=last_name" type="text"> I want to increase the space between the two lines I tried to use the css line-height and it did increase the vertical space between the two lines. However only in the part of the words. In the case of the two input boxes instead of more space they become "taller", I can understand the logic behind this, what I don't know is a way to increase the vertical space between the two lines that will work in the case of the input boxes as well. How can I solve this? Thank in advance CSS Validator Two lines of CSS won't validate because they are used to fix a navigation issues in IE. Without those two lines there is a huge height gap between each list element in IE. Anyway I can hide these two lines from the validator? When printing pages from this site http://www.sorensteensen.dk/kvl/ one or two lines disappear when the pages break. I have no idea why. Anyone knows about it? Soren Steensen [EDIT]COME ON GARY AND KRAVVITZ [/EDIT] First off, don't mind my usage of selectors. I will explain. Time to turn the tables and ask some help.. Never thought I would have to ask a CSS question (it's more logic then CSS anyway)but if you look at here you will see a sample quiz on Sitepoint (number 13) in which there are lines connecting the divs. I still have some work to do on the general layout, but all I need in that is more time. I can not edit the HTML in the body section, which is why I am using such selectors. Obviously I have to use borders to achieve this effect but I need a little guidance. Page in question is http://www.devwebsites.com/temp/ Code for the lazy is he Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Organisation Chart</title>
<style type="text/css">
*{margin:0;padding:0;margin:0 auto;}
body{
text-align:center;
overflow-x:hidden;
}
h2{
font-size:12px;
text-align:left;
font-weight:normal;
margin:15px 0 0 20px;
}
ul{
list-style-type:none;
color: #000066;
}
ul li dl dt{
color: #000066;
font-weight:bold;
}
dl{
width:200px;
}
body>dl{
width:150px;
border: 1px solid #000066;
margin-top:25px;
background-color: #DDEEFF;
padding:4px;
}
body>dl>dt{font-weight:bold;}
body>ul+li{
border:1px solid #000066;
position:relative;
left:-22px;
}
body>ul+h2+ul>li>dl>dt{
background-color: #778899;
width:200px;
float:left;
color:white;
}
dt.sub+dd>ul>li{
width:200px;
border:1px solid #000066;
background-color: #DDEEFF;
}
body>ul+h2+ul>li>dl>dt+dd{
background-color: #DDEEFF;
}
body>h1+dl+h2+ul>li{
border:1px solid #000066;
text-align:left;
width:120px;
float:right;
position:relative;
right:30%;
padding:6px;
background-color: #DDEEFF;
}
body>h1+dl+h2+ul>li+li{
left:-47%;
}
body>ul+h2{clear:both;top:20px;position:relative;}
body>ul+h2+ul>li{
float:left;
}
ul>li>dl>dt+dd{
text-align:left;
}
body>ul+h2+ul>li>dl{
border-right:25px solid white;
position:relative;
left:236px;
top:25px;
}
</style>
</head>
<body>
<h1>Organization</h1>
<dl>
<dt>President</dt>
<dd>A. Andrews</dd>
</dl>
<h2>Support Staff</h2>
<ul>
<li>
<dl>
<dt>Vice President</dt>
<dd>B. Burns</dd>
</dl>
</li>
<li>
<dl>
<dt>Secretaries</dt>
<dd>C. Colins</dd>
<dd>D. Dylan</dd>
</dl>
</li>
</ul>
<h2>Divisions</h2>
<ul>
<li>
<dl>
<dt>Economy</dt>
<dd>
<dl>
<dt>Manager</dt>
<dd>E. Ericson</dd>
<dt>Secretary</dt>
<dd>F. Fitzgerald</dd>
<dt>Employees</dt>
<dd>25</dd>
</dl>
</dd>
</dl>
</li>
<li>
<dl>
<dt>Marketing</dt>
<dd>
<dl>
<dt>Manager</dt>
<dd>G. Glockstettner</dd>
<dt>Secretary</dt>
<dd>H. Holmes</dd>
<dt>Employees</dt>
<dd>14</dd>
</dl>
</dd>
</dl>
</li>
<li>
<dl>
<dt>Products</dt>
<dd>
<dl>
<dt>Manager</dt>
<dd>I. Irkwell</dd>
<dt>Secretary</dt>
<dd>J. Jones</dd>
<dt>Employees</dt>
<dd>89</dd>
<dt class="sub">Subdivisions</dt>
<dd>
<ul>
<li>Manufacturing</li>
<li>Quality Assurance</li>
</ul>
</dd>
</dl>
</dd>
</dl>
</li>
</ul>
</body>
</html>
Ok, so I've finally made a design that I think looks OK, and the one last problem that I've come across is that IE(7) is adding some space at the edges of my divs, but it looks just how it should in Firefox: http://chipchamp.awardspace.com/webtemps Look at it in firefox and IE, and you'll see what I mean.. Here is the entire code for the page: Code: <html>
<head>
<style type="text/css">
body {
background-image: url(images/design_5x1.gif);
text-align:left;
}
div {
border-width:0px;
margin:0px;
padding:0px;
}
#main-wrapper {
background-color:transparent;
width:800px;
margin-top:50px;
}
#header {
background-color:transparent;
background-image:url(images/design_3x3.gif);
width:800px;
height:102px;
}
#content {
background-color:#ffffff;
width:100%;
height:700px;
}
#menu {
background-color:#ffffff;
width:33%;
float:left;
}
#content2 {
background-color:#ffffff;
width:60%;
float:right;
}
#footer {
background-color:transparent;
background-image:url(images/design_7x2.gif);
width:100%;
}
#footer-content {
background-color:transparent;
background-image:url(images/design_7x2.gif);
width:680px;
height:40px;
}
img.left {
float:left;
}
img.right {
float:right;
}
</style>
</head>
<body>
<center>
<div id="main-wrapper"><div id="header"><img class="left" src="images/design_3x2.gif">
</img><img class="right" src="images/design_3x6.gif"></img>
<img class="right" src="images/design_3x5.gif"></img>
<img class="right" src="images/design_3x4.gif"></img></div>
<div id="content"><div id="menu"><img class="right" src="images/design_4x2.gif"></img></div>
<div id="content2">hi again</div></div>
<div id="footer"><img class="left" src="images/design_7x1.gif"></img>
<img class="right" src="images/design_7x4.gif"></img><div id="footer-content">Copyright (c) 2008 ChipChamp Studios</div></div></div>
</center>
</body>
</html>
I have found out that if I comment out the background-image lines in #header and #footer, then the ugly white lines on the sides go away -- but so does some of the background image in the middle of the header/footer. So, does anyone have any idea how to fix this? It would be a great help! If you can fix the problem for either the header or the footer, I should be able to fix it for the other, so you don't have to fix both. Thanks! I need some help. I am a relative beginner with CSS and have a problem that is eluding me. Specifically in the right-hand sidebar on this page (FriendsAcrossTheWater.org/blog), you will note that all the links are on separate lines by themselves. I do not want this behavior and I am not sure what is causing it nor what to do to correct it. Can you help? Thanks, Bob Ross |
|||||||