Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    layout - CSS Beginner Question

    Hi.

    There is a time here in Iceland that wee ppl have nothing to do, so i decided
    to learn css php and html coding.

    I do have a website that i am trying to modifie and mess things up to learn

    The thing is that i do not have a clue how to do this.

    There is 1 thing that i can´t figur out is that top boarder of my website has
    a line cross the website and the bottom is not.

    Is there someone who can help me with this.

    Regard´s

    Noaptus

    p.s

    Sorry for my bad English


    Image attach an the css file



    CSS File layout.css

    Code:
    /*
     IE6 PNG FIX ---------------------------*/
    /*img.trans { behavior: url(media/iepngfix.htc); }*/
    /*
    -----------------------------------------------
    Grey Box Method - Layout CSS
    ----------------------------------------------- */
    
    body {
    	background: #bbb;
    	border-top: 10px solid #FFFFFF;
    	color: #000;
    	font-size: 11px;
    	padding: 0 0 40px;
    }
    
    
    /* anchors
    ----------------------------------------------- */
    a {
    	color: #000;
    	font-weight:bold;
    	text-decoration: none;
    }
    a:hover {
      color:#333;
    }
    
    
    /* 960 grid system container background
    ----------------------------------------------- */
    .container_12 {
    	background:#fff
    /*
      url("../img/gridlines_12_col.gif") center top repeat-y
    */
      ;
    }
    
    
    /* headings
    ----------------------------------------------- */
    h1, h2, h3, h4, h5, h6 {line-height:1.2em; margin-bottom:.3em;}
    h2 {margin-top:1em;}
    h5 {font-size:1.2em;}
    h6 {font-size:1em; text-transform:uppercase;}
    
    
    h1 a {
    	font-weight:normal;
    }
    
    
    /* branding
    ----------------------------------------------- */
    h1#branding {
    	font-weight:normal;
    	font-size:3em;
    	text-align:left;
    	background:#aaa;
    	padding:.7em 1em;
    	margin-bottom:0;
    }
    h1#branding a{
    	color: #013A6E;
    }
    
    /* page heading
    ----------------------------------------------- */
    h2#page-heading {
    	font-weight:normal;
    	padding:.5em;
    	margin:0 0 10px 0;
    	border-bottom:1px solid #ccc;
    }
    
    .logo{
    	border: 0;
    	float: left;
    }
    small{
    	font-size: 0.8em;
    }
    /* boxes
    ----------------------------------------------- */
    .box {
    	background:#ddd;
    	margin-bottom:20px;
    	padding:10px 10px 1px 10px;
    }
    .box h2 {
    	font-size:1em;
    	font-weight:normal;
    	text-transform:uppercase;
    	color:#fff;
    	background:#333;
    	margin:-10px -10px 0 -10px;
    	padding:6px 12px;
    }
    .box h2 a,
    .box h2 a.visible {
    	color:#fff;
    	background:#333 url("../img/switch_minus.gif") 96% 50% no-repeat;
    	display:block;
    	padding:6px 12px;
    	margin:-6px -12px;
    	border:none;
    }
    .grid_4 .box h2 a {
      background-position: 97% 50%;
    }
    .grid_5 .box h2 a {
      background-position: 98% 50%;
    }
    .grid_12 .box h2 a {
      background-position: 99% 50%;
    }
    
    
    .box h2 a.hidden,
    .box h2 a.hidden:hover {
    	background-image: url("../img/switch_plus.gif");
    }
    .box h2 a:hover {
    	background-color:#111;
    }
    .block {
    	padding-top:10px;
    }
    .block img{
    	float:left;
    }
    div.menu {
      padding:0;
    }
    div.menu h2 {
      margin:0;
    }
    div.menu .block {
    	padding-top:0;
    }
    
    
    /* paragraphs, quotes and lists
    ----------------------------------------------- */
    p {
      margin-bottom:1em;
    }
    blockquote {
      font-family: Georgia, 'Times New Roman', serif;
      font-size:1.2em;
      padding-left:1em;
      border-left:4px solid #ccc;
    }
    blockquote cite {
      font-size:.9em;
    }
    ul, ol {
      padding-top:0;
    }
    abbr,acronym {
    	border:0; 
    }
    abbr{
    	border-bottom:1px dotted #666;
    	border-color:inherit;
    	cursor:help;
    }
    
    /* menus
    ----------------------------------------------- */
    ul.menu {
      list-style:none;
      border-top:1px solid #bbb;
    }
    ul.menu li {
      margin:0;
    }
    ul.menu li a {
      display:block;
      padding:4px 10px;
      border-bottom:1px solid #bbb;
    }
    ul.menu li a:hover {
      background:#eee;
    }
    ul.menu li a:active {
      background:#ccc;
    }
    
    
    /* submenus
    ----------------------------------------------- */
    ul.menu ul {
      list-style:none;
      margin:0;
    }
    ul.menu ul li a {
      padding-left:30px;
    }
    
    
    /* section menus
    ----------------------------------------------- */
    ul.section {
      border-top:0;
      margin-bottom:0;
    }
    ul.section li {
      text-transform:uppercase;
    }
    ul.section li a {
      background:#bbb;
    }
    ul.section li a:hover {
      background:#aaa;
    }
    ul.section li a:active {
      color:#fff;
      background:#666;
    }
    ul.section li li a {
      background:#ddd;
    }
    ul.section li li a:hover {
      background:#ccc;
    }
    ul.section li li a:active {
      color:#000;
      background:#fff;
    }
    ul.section ul li {
      text-transform:none;
    }
    ul.section li.current a {
      background:#eee;
    }
    ul.section li.current a:hover {
      background:#ddd;
    }
    ul.section li.current a:active {
      background:#fff;
    }
    ul.section li.current > a {
      color:#fff;
      background:#666;
    }
    ul.section li.current > a:hover {
      background:#555;
    }
    ul.section li.current > a:active {
      background:#444;
    }
    ul.section li.current a.active {
      background:#fff;
      cursor:default;
    }
    ul.section li.current > a.active,
    ul.section li.current > a.active:hover {
      color:#fff;
      background:#666;
      cursor:default;
    }
    
    
    /* table
    ----------------------------------------------- */
    table {
      width:100%;
      border:1px solid #bbb;
      margin-bottom:10px;
    }
    col.colC {
      width:8em;
    }
    th, td {
      padding:.2em 1em;
      text-align:left;
    }
    thead th {
      border-bottom:2px solid #888;
      background:#bbb;
      padding:.4em 1em .2em;
    }
    thead th.table-head {
    	font-size:1em;
    	font-weight:normal;
    	text-transform:uppercase;
    	color:#fff;
    	background:#555;
    	border:1px solid #555;
    }
    tbody th,
    tbody td {
      border-top:1px solid #bbb;
      border-bottom:1px solid #bbb;
      background:#eee;
    }
    tbody tr.odd th,
    tbody tr.odd td {
      background:#fff;
    }
    tfoot th,
    tfoot td {
      border-top:2px solid #666;
      background:#eee;
    }
    tfoot tr.total th,
    tfoot tr.total td {
      border-top:6px double #666;
    }
    tfoot tr.total th {
      text-transform:uppercase;
    }
    th.currency,
    td.currency {
      text-align:right;
    }
    
    
    /* forms
    ----------------------------------------------- */
    form {
      overflow:hidden;
    }
    fieldset {
      border:1px solid #bbb;
      padding:10px;
      position:relative;
      background:#e9e9e9;
      margin-bottom:10px;
    }
    legend {
      font-size:1.1em;
      padding:.4em .8em;
      background:#fff;
      border:1px solid #bbb;
    }
    fieldset.login p {
      margin-bottom:1em;
      margin-top:0pt;
    }
    fieldset p label {
      width:98%;
    }
    fieldset p input {
      width:98%;
    }
    fieldset p select {
      width:99%;
    }
    fieldset.login p label {
      float:left;
      line-height:2em;
      margin-right:3%;
      text-align:right;
      width:32%;
    }
    fieldset.login p input {
      width:40%;
    }
    fieldset.login input.button {
      margin-left:35%;
    }
    form p.notice {
      font-weight:bold;
    }
    input.search.text {
      width:66%;
    }
    input.search.button {
      width:28%;
      margin-left:2%;
    }
    textarea{
    	width: 40%;
    }
    
    /* articles
    ----------------------------------------------- */
    .articles {
      padding:0;
    }
    .articles h2 {
      margin:0;
    }
    #articles {
      padding-top:0;
    }
    .article {
      border-top:1px solid #666;
      padding-top:.5em;
    }
    .box .article {
      border-top:3px solid #fff;
      padding:13px 10px 0 10px;
    }
    .article h2 {
    	font-size:2em;
    	font-weight:normal;
    	text-transform:none;
    	color:#333;
    	background:transparent;
    	padding:0;
    	margin:0;
    	border:none;
    }
    .article h3 {
      margin-bottom:.2em;
      font-size:1.6em;
    }
    .box .first {
      border-top:none;
    }
    .article h4 {
      font-size:1.2em;
      text-transform:uppercase;
      margin-bottom:.5em;
    }
    .article a.image {
      float:left; 
      margin:3px 10px 3px 0; 
      padding:4px;
      border:1px solid #bbb;
      background:#fff;
    }
    .article a.image:hover {
      border:1px solid #666;
    }
    .article a.image img {
      float:left; 
    }
    .article p.meta {
      color:#666;
      border-top:1px dotted #999;
      border-bottom:1px dotted #999;
      padding:.3em 0;
      margin-bottom:.8em;
    }
    
    
    /* site information
    ----------------------------------------------- */
    #site_info .box {
      color:#fff;
      background:#666;
      margin-bottom:10px;
      min-height: 40px;
      height:auto !important;
      height:40px;
    }
    #site_info img{
    	float: 
      float: left;
      margin:0;
      padding:0;
    }
    #kwick .kwick {
      display: block;
      cursor: pointer;
      overflow: hidden;
      height: 130px;
      width: 215px;
      padding: 10px;
      background: #fff;
    }
    #kwick .kwick span {
      color:#fff;
    }
    #kwick .one {
      background: #666;
    }
    #kwick .two {
      background: #777;
    }
    #kwick .three {
      background: #888;
    }
    #kwick .four {
      background: #999;
    }
    #kwick img {
    	float: left;
    }
    
    .green {	color: #9EC630; }
    .gray  {	color: #BFBFBF; }
    .orange{ color: #FE9900; }
    .dark-blue{ color: #5A6E8F}
    .scarlet { color: #D62A2A}
    .greenish { color: #83A750} 
    .blue{ color: #0E4FAF}
    .right{ float: right}
    .left{ float: left; }
    
    .lightgray{ color: #DDDDDD;}
    .top_banner{ float: right; padding: 10px;}Kwicks
    ----------------------------------------------- */
    #kwick-box { 
      padding:0;
      overflow:hidden;
    }
    #kwick-box h2 { 
      margin:0;
    }
    #kwick {
      position: relative;
    }
    #kwick .kwicks {
      display: block;
      background: #9right;
    	margin: 0 2px;
    }
    
    /* AJAX sliding shelf
    ----------------------------------------------- */
    #loading {float:right; margin-right:16px;}
    .block {padding-bottom:1px;}
    
    
    /* Accordian
    ----------------------------------------------- */
    .toggler {
    	color: #222;
    	margin: 0;
    	padding: 2px 5px;
    	background: #eee;
    	border-bottom: 1px solid #ddd;
    	border-right: 1px solid #ddd;
    	border-top: 1px solid #f5f5f5;
    	border-left: 1px solid #f5f5f5;
    	font-size:1.1em;
    	font-weight: normal;
    }
    .element h4 {
    	margin: 0;
    	padding:4px;
    	line-height:1.2em;
    }
    .element p {
    	margin: 0;
    	padding: 4px;
    }
    .float-right {
    	padding:10px 20px;
    	float:right;
    }
    
    #accordian-block {
      padding-bottom:10px;
    }
    
    #portfolio div.item{
    	float: left;
    	width: 320px;
    	padding: 5px 10px;
    }
    
    #portfolio img {
    	padding: 2px;
    	border: 1px solid #AAAAAA;
    	/*margin: 5px 15px 5px 5px ;*/
    }
    
    #portfolio a:hover img{
    	border: 1px solid #FE9900;
    }
    #brands{
    	height: 140px;
    }
    #brands img {
    	border: 0;
    	float: left;
    }
    
    #service img {
    	padding: 2px; 	margin: 5px;
    	border: 1px solid #AAAAAA;
    }
    #service a:hover img{
    	border: 1px solid #FE9900;
    }
    /* Mootools 
      overflow:hidden;
    }
    #kwick-box h2 { 
      margin:0;
    }
    #kwick {
      position: relative;
    }
    #kwick .kwicks {
      display: block;
      background: #999;
      height: 150px;
      list-style:none;
      margin:0;
      overflow:hidden;
    }
    #kwick li {Kwicks
    ----------------------------------------------- */
    #kwick-box { 
      padding:0;
      overflow:hidden;
    }
    #kwick-box h2 { 
      margin:0;
    }
    #kwick {
      position: relative;
    }
    #kwick .kwicks {
      display: block;
      background: #999;
      height: 150px;
      list-style:none;
      margin:0;
      overflow:hidden;
    }
    #kwick li {
      float: left;
      margin:0;
      padding:0;
    }
    #kwick .kwick {
      display: block;
      cursor: pointer;
      overflow: hidden;
      height: 130px;
      width: 215px;
      padding: 10px;
      background: #fff;
    }
    #kwick .kwick span {
      color:#fff;
    }
    #kwick .one {
      background: #666;
    }
    #kwick .two {
      background: #777;
    }
    #kwick .three {
      background: #888;
    }
    #kwick .four {
      background: #999;
    }
    #kwick img {
    	float: left;
    }
    
    .green {	color: #9EC630; }
    .gray  {	color: #BFBFBF; }
    .orange{ color: #FE9900; }
    .dark-blue{ color: #5A6E8F}
    .scarlet { color: #D62A2A}
    .greenish { color: #83A750} 
    .blue{ color: #0E4FAF}
    .right{ float: right}
    .left{ flo
      float: left;
      margin:0;
      padding:0;
    }
    #kwick .kwick {
      display: block;
      cursor: pointer;
      overflow: hidden;
      height: 130px;
      width: 215px;
      padding: 10px;
      background: #fff;
    }
    #kwick .kwick span {
      color:#fff;
    }
    #kwick .one {
      background: #666;
    }
    #kwick .two {
      background: #777;
    }
    #kwick .three {
      background: #888;
    }
    #kwick .four {
      background: #999;
    }
    #kwick img {
    	float: left;
    }
    
    .green {	color: #9EC630; }
    .gray  {	color: #BFBFBF; }
    .orange{ color: #FE9900; }
    .dark-blue{ color: #5A6E8F}
    .scarlet { color: #D62A2A}
    .greenish { color: #83A750} 
    .blue{ color: #0E4FAF}
    .right{ float: right}
    .left{ float: left; }
    
    .lightgray{ color: #DDDDDD;}
    .top_banner{ float: right; padding: 10px;}Kwicks
    ----------------------------------------------- */
    #kwick-box { 
      padding:0;
      overflow:hidden;
    }
    #kwick-box h2 { 
      margin:0;
    }
    #kwick {
      position: relative;
    }
    #kwick .kwicks {
      display: block;
      background: #999;
      height: 150px;
      list-style:none;
      margin:0;
      overflow:hidden;
    }
    #kwick li {
      float: left;
      margin:0;
      padding:0;
    }
    #kwick .kwick {
      display: block;
      cursor: pointer;
      overflow: hidden;
      height: 130px;
      width: 215px;
      padding: 10px;
      background: #fff;
    }
    #kwick .kwick span {
      color:#fff;
    }
    #kwick .one {
      background: #666;
    }
    #kwick .two {
      background: #777;
    }
    #kwick .three {
      background: #888;
    }
    #kwick .four {
      background: #999;
    }
    #kwick img {
    	float: left;
    }
    
    .green {	color: #9EC630; }
    .gray  {	color: #BFBFBF; }
    .orange{ color: #FE9900; }
    .dark-blue{ color: #5A6E8F}
    .scarlet { color: #D62A2A}
    .greenish { color: #83A750} 
    .blue{ color: #0E4FAF}
    .right{ float: right}
    .left{ float: left; }
    
    .lightgray{ color: #DDDDDD;}
    .top_banner{ float: right; padding: 10px;}
      overflow:hidden;
    }
    #kwick-box h2 { 
      margin:0;
    }
    #kwick {
      position: relative;
    }
    #kwick .kwicks {
      display: block;
      background: #999;
      height: 150px;
      list-style:none;
      margin:0;
      overflow:hidden;
    }
    #kwick li {
      float: left;
      margin:0;
      padding:0;
    }
    #kwick .kwick {
      display: block;
      cursor: pointer;
      overflow: hidden;
      height: 130px;
      width: 215px;
      padding: 10px;
      background: #fff;
    }
    #kwick .kwick span {
      color:#fff;
    }
    #kwick .one {
      background: #666;
    }
    #kwick .two {
      background: #777;
    }
    #kwick .three {
      background: #888;
    }
    #kwick .four {
      background: #999;
    }
    #kwick img {
    	float: left;
    }
    
    .green {	color: #9EC630; }
    .gray  {	color: #BFBFBF; }
    .orange{ color: #FE9900; }
    .dark-blue{ color: #5A6E8F}
    .scarlet { color: #D62A2A}
    .greenish { color: #83A750} 
    .blue{ color: #0E4FAF}
    .right{ float: right}
    .left{ float: left; }
    
    .lightgray{ color: #DDDDDD;}
    .top_banner{ float: right; padding: 10px;}

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,776
    Thanks
    41
    Thanked 196 Times in 195 Posts
    it is because you are calling it out in your CSS.... look at your body
    you have "border-top:10px solid #FFFFFF;"
    that is saying i want a 10 pixel border (solid) of color #FFFFFF... #FFFFFF is hex for white hence your white border... also border-top signifies only at the top

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ok

    Quote Originally Posted by alykins View Post
    it is because you are calling it out in your CSS.... look at your body
    you have "border-top:10px solid #FFFFFF;"
    that is saying i want a 10 pixel border (solid) of color #FFFFFF... #FFFFFF is hex for white hence your white border... also border-top signifies only at the top

    So you are telling me that if i remove border-top then the white line is gone.

    The thing is i want to have white line but not all the way.

  • #4
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,776
    Thanks
    41
    Thanked 196 Times in 195 Posts
    if you want the white line (let's say on your "header" region) whatever element you do want to have that border, apply that CSS code to it. right now you are setting the entire body of the page to have that border

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •