85 users online (0 members and 85 guests)  


  Results 1 to 3 of 3

Related

  1. coloured borders    Forum: CSS Forum
    Replies: 2
  2. Color Picture Borders?    Forum: Graphics Forum
    Replies: 5
  3. Table borders    Forum: HTML Forum
    Replies: 2
  4. Frame Help With Borders    Forum: HTML Forum
    Replies: 3
  5. Tables and Borders    Forum: HTML Forum
    Replies: 8
  1. #1
    przemeklach's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2004
    Posts
    8

    Borders Lining Up

    Ok I've had this problem for a while and I cannot see what I'm doing wrong. Please go to www.polcantek.com/lachtronix

    As you will notice the right side of the center column doesn't flush with the left hand side of the news column like it does with the menu on the left. I have gone through the options for both the menu and news sides and I've been unable to see how they are different, as far as I can see they're both the same. To see the css please go to URL www.polcantek.com/lachtronix/lachtronix.css
    Thanks in advance.

  2. #2
    dlongnecker's Avatar
    Tired Student...(Z_z)

    Status
    Offline
    Join Date
    Aug 2004
    Location
    Wichita, KS
    Posts
    86

    Hmm...

    Okay, I might not be reading this right, so feel free to jump in and let me know... or draw a picture (^_^).

    On my browser, the left side of the center column doesn't look flush with the left navigation column. (O_o)?

    By flush, do you mean that your black border merges into the black on the sides?

    If so, I just changed your content's left and right's to start (105px) right where your left and right columns end. Please note, I changed the 3px margins to 5px just to numbers pretty even and on my printer here (HP 8150 with PCL drivers), anything less than 5px gets cut offf on the laser printers. Just habit. The numbers (102px compared to 105px can easily be changed).

    Anyway, here's the full CSS:

    Code:
    .Header {
    	border: thin solid #000000;
    	padding: 3px;
    	position: absolute;
    	top: 5px;
    	left: 5px;
    	right: 5px;
    	width: 100%;
    }
    .navRight {
    	border: thin solid #000000;
    	background-color: #000000;
    	z-index: 1;
    	position: absolute;
    	width: 100px;
    	height: 400px;
    	padding: 10px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	font-size: 10px;
    	top: 68px;
    	margin: 0px;
    	right: 5px;
    }
    .content {
    	font-style: normal;
    	line-height: normal;
    	border: thin solid #000000;
    	position: absolute;
    	padding: 10px;
    	z-index: 5;
    	voice-family: "\")\"";
    	voice-family:inherit;
    	width: auto;
    	left: 105px;
    	top: 68px;
    	height: auto;
    	right: 105px;
    	margin: 0px;
    }
    .picture_comment {
    	background-color: #000000;
    	position: relative;
    	color: #FFFFFF;
    	z-index: 2;
    	width: 200px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	border: none #000000;
    	padding: 10px;
    	left: 0px;
    	top: 0px;
    	right: 0px;
    	bottom: 0px;
    }
    .large_picture {
    	border: none #000000;
    	position: absolute;
    	height: auto;
    	width: auto;
    	z-index: 1;
    	background-color: #000000;
    	padding: 20px;
    	margin: 0px;
    	left: 30px;
    	top: 30px;
    	visibility: visible;
    }
    p {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-style: normal;
    	line-height: normal;
    	font-weight: normal;
    	color: #000000;
    	text-align: left;
    	text-indent: 20pt;
    }
    
    .buttonscontainer {
    	width: 100px;
    	background-color: #000000;
    	margin: 0px;
    	height: 400px;
    	padding-top: 10px;
    	padding-left: 3px;
    	position: absolute;
    	z-index: 2;
    	left: 5px;
    	top: 68px;
    	border: thin solid #000000;
    	padding-right: 3px;
    	padding-bottom: 3px;
    }
    
    .buttons a {color: #FFFFFF;
    border: 1px solid #000000;
    background-color: #000000;
    padding: 2px 2px 2px 3px;
    font: bold 10px Verdana, sans-serif;
    text-decoration: none;
    display: block;
    margin: 0px;
    text-align: left;}
    
    .buttons a:hover {border: 1px solid #000000;
    padding-left: 4px;
    padding-top: 3px;
    padding-bottom: 1px;
    padding-right: 1px;
    background-color: #FFFFFF;
    color: #000000;
    text-decoration: none;}
    li {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    .sub_menu {
    	background-color: #000000;
    }
    .gallery_heading {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 18px;
    	color: #000000;
    	background-color: #FFFFFF;
    	font-weight: bolder;
    	top: 2px;
    	position: relative;
    	width: auto;
    	padding: 2px;
    	text-decoration: underline;
    	text-transform: uppercase;
    }
    .lastupdated {
    	font-style: normal;
    	font-weight: normal;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	text-align: right;
    }
    This gives me:

    http://webtest.doesntexist.com/lax1.png

    Now... if you just meant for them to be EVEN on both sides (since the right side has a bigger whitespace gap than the left, I changed the CSS to be:

    Code:
    .Header {
    	border: thin solid #000000;
    	padding: 3px;
    	position: absolute;
    	top: 5px;
    	left: 5px;
    	right: 5px;
    	width: 100%;
    }
    .navRight {
    	border: thin solid #000000;
    	background-color: #000000;
    	z-index: 1;
    	position: absolute;
    	width: 100px;
    	height: 400px;
    	padding: 10px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	color: #FFFFFF;
    	font-size: 10px;
    	top: 68px;
    	margin: 0px;
    	right: 5px;
    }
    .content {
    	font-style: normal;
    	line-height: normal;
    	border: thin solid #000000;
    	position: absolute;
    	padding: 10px;
    	z-index: 5;
    	voice-family: "\")\"";
    	voice-family:inherit;
    	width: auto;
    	left: 120px;
    	top: 68px;
    	height: auto;
    	right: 115px;
    	margin: 0px;
    }
    .picture_comment {
    	background-color: #000000;
    	position: relative;
    	color: #FFFFFF;
    	z-index: 2;
    	width: 200px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	border: none #000000;
    	padding: 10px;
    	left: 0px;
    	top: 0px;
    	right: 0px;
    	bottom: 0px;
    }
    .large_picture {
    	border: none #000000;
    	position: absolute;
    	height: auto;
    	width: auto;
    	z-index: 1;
    	background-color: #000000;
    	padding: 20px;
    	margin: 0px;
    	left: 30px;
    	top: 30px;
    	visibility: visible;
    }
    p {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-style: normal;
    	line-height: normal;
    	font-weight: normal;
    	color: #000000;
    	text-align: left;
    	text-indent: 20pt;
    }
    
    .buttonscontainer {
    	width: 100px;
    	background-color: #000000;
    	margin: 0px;
    	height: 400px;
    	padding-top: 10px;
    	padding-left: 3px;
    	position: absolute;
    	z-index: 2;
    	left: 5px;
    	top: 68px;
    	border: thin solid #000000;
    	padding-right: 3px;
    	padding-bottom: 3px;
    }
    
    .buttons a {color: #FFFFFF;
    border: 1px solid #000000;
    background-color: #000000;
    padding: 2px 2px 2px 3px;
    font: bold 10px Verdana, sans-serif;
    text-decoration: none;
    display: block;
    margin: 0px;
    text-align: left;}
    
    .buttons a:hover {border: 1px solid #000000;
    padding-left: 4px;
    padding-top: 3px;
    padding-bottom: 1px;
    padding-right: 1px;
    background-color: #FFFFFF;
    color: #000000;
    text-decoration: none;}
    li {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    }
    .sub_menu {
    	background-color: #000000;
    }
    .gallery_heading {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 18px;
    	color: #000000;
    	background-color: #FFFFFF;
    	font-weight: bolder;
    	top: 2px;
    	position: relative;
    	width: auto;
    	padding: 2px;
    	text-decoration: underline;
    	text-transform: uppercase;
    }
    .lastupdated {
    	font-style: normal;
    	font-weight: normal;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	text-align: right;
    }
    You'll notice that the content's right and lefts are different. The only justification I can come up with without changing all of the paddings, is that the right has 6px of padding, the left has 10px of padding. Not sure though...

    That gives me a nice even whitespace padding:

    http://webtest.doesntexist.com/lax2.png

    Hope this helps a bit... If I'm wayyy off the mark, lemme know and we'll keep hammering it out.

    -David
    Last edited by HTML; 03-09-2012 at 09:37 PM.

  3. #3
    przemeklach's Avatar
    New User

    Status
    Offline
    Join Date
    Jun 2004
    Posts
    8
    Sorry I haven't responded right away but I solved the problem by giving the center box margins. To explain what was actually happening the right side of the center column was not the same distance as on the left side. The gap between the center and far right column was to big. If you want to see the CSS, for anyone having the same problem, go to www.polcantek.com/lachtronix/lachtronix.css

    If anyone has any questions about this please e-mail me email removed and I'll be happy to help; I'll no longer be checking this thread and I'm closing it. Tks.



Tags for this Thread