simple problem got complicated [long code!]

simple problem got complicated [long code!]

Post by Chase01 on Wed Apr 24, 2013 12:46 pm
([msg=75314]see simple problem got complicated [long code!][/msg])

[WARNING IM USING SKELETON it should always be in this order]

ok im trying to make everything dead center but the stupid margin will not move [so you know I erased all the CSS of margin and there is some CSS codes that are unnecessary or do nothing al be deleting those at the end once I finish with the website I just wanna fix all the problems before erasing all the useless code]

Image

HTML
Code: Select all
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>

   <!-- Basic Page Needs
  ================================================== -->
   <meta charset="utf-8">
   <title>Contacts</title>
   <meta name="description" content="xxx">
   <meta name="author" content="xxxx">

   <!-- Mobile Specific Metas
  ================================================== -->
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

   <!-- CSS
  ================================================== -->
   <link rel="stylesheet" href="bas.css">
   <link rel="stylesheet" href="skeleton.css">
   <link rel="stylesheet" href="layout.css">

   <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->

   <!-- Favicons
   ================================================== -->
   <link rel="shortcut icon" href="images/favicon.ico">
   <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
   <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
   <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

</head>
<body>



   <!-- Primary Page Layout
   ================================================== -->
<center>
<div class="container">


   <div class="seven columns offset-by-four">
      <header class="remove-bottom">
         <span id="bar">
            <!Links>
            <a href="intro.html"id="zip">Home</a>  |
            <a href="portfolio.html"id="zip">Portfolio</a>  |
            <a href="contacts.html"id="zip">Contacts</a>
         </span>
      </header>
   </div>



   <div class="seven columns offset-by-four poo paddb">
      <!contacts>
      <a href="xxxx" target="_blank"class="block"><img src="facebookban.png" id="zi"/></a>
      <a href="xxxxx" target="_blank" class="block"><img src="twitterban.png" id=""/></a>
      <a href="xxxx" class="block"><img src="outlookban.png"id="ki"/></a>
   </div>


   <span class="seven columns offset-by-four poo paddb" id="topborder">
      xxxxxxxxxxxxx<br>
      xxxxxxxxxxxxx<br>
      xxxxxxxxxxxxx
   </span>
</div>
</center>
<!-- End Document
================================================== -->
</body>
</html>


Skeleton

Code: Select all
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Base 960 Grid
================================================== */

    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 220px; }
    .container .five.columns                    { width: 280px; }
    .container .six.columns                     { width: 340px; }
    .container .seven.columns                   { width: 400px; }
    .container .eight.columns                   { width: 460px; }
    .container .nine.columns                    { width: 520px; }
    .container .ten.columns                     { width: 580px; }
    .container .eleven.columns                  { width: 640px; }
    .container .twelve.columns                  { width: 700px; }
    .container .thirteen.columns                { width: 760px; }
    .container .fourteen.columns                { width: 820px; }
    .container .fifteen.columns                 { width: 880px; }
    .container .sixteen.columns                 { width: 940px; }

    .container .one-third.column                { width: 300px; }
    .container .two-thirds.column               { width: 620px; }

    /* Offsets */
    .container .offset-by-one                   { padding-left: 60px;  }
    .container .offset-by-two                   { padding-left: 120px; }
    .container .offset-by-three                 { padding-left: 180px; }
    .container .offset-by-four                  { padding-left: 240px; }
    .container .offset-by-five                  { padding-left: 300px; }
    .container .offset-by-six                   { padding-left: 360px; }
    .container .offset-by-seven                 { padding-left: 420px; }
    .container .offset-by-eight                 { padding-left: 480px; }
    .container .offset-by-nine                  { padding-left: 540px; }
    .container .offset-by-ten                   { padding-left: 600px; }
    .container .offset-by-eleven                { padding-left: 660px; }
    .container .offset-by-twelve                { padding-left: 720px; }
    .container .offset-by-thirteen              { padding-left: 780px; }
    .container .offset-by-fourteen              { padding-left: 840px; }
    .container .offset-by-fifteen               { padding-left: 900px; }



/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
        .container .column,
        .container .columns                         { margin-left: 10px; margin-right: 10px;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
        .alpha.omega                                { margin-left: 0; margin-right: 0; }

        .container .one.column,
        .container .one.columns                     { width: 28px; }
        .container .two.columns                     { width: 76px; }
        .container .three.columns                   { width: 124px; }
        .container .four.columns                    { width: 172px; }
        .container .five.columns                    { width: 220px; }
        .container .six.columns                     { width: 268px; }
        .container .seven.columns                   { width: 316px; }
        .container .eight.columns                   { width: 364px; }
        .container .nine.columns                    { width: 412px; }
        .container .ten.columns                     { width: 460px; }
        .container .eleven.columns                  { width: 508px; }
        .container .twelve.columns                  { width: 556px; }
        .container .thirteen.columns                { width: 604px; }
        .container .fourteen.columns                { width: 652px; }
        .container .fifteen.columns                 { width: 700px; }
        .container .sixteen.columns                 { width: 748px; }

        .container .one-third.column                { width: 236px; }
        .container .two-thirds.column               { width: 492px; }

        /* Offsets */
        .container .offset-by-one                   { padding-left: 48px; }
        .container .offset-by-two                   { padding-left: 96px; }
        .container .offset-by-three                 { padding-left: 144px; }
        .container .offset-by-four                  { padding-left: 192px; }
        .container .offset-by-five                  { padding-left: 240px; }
        .container .offset-by-six                   { padding-left: 288px; }
        .container .offset-by-seven                 { padding-left: 336px; }
        .container .offset-by-eight                 { padding-left: 384px; }
        .container .offset-by-nine                  { padding-left: 432px; }
        .container .offset-by-ten                   { padding-left: 480px; }
        .container .offset-by-eleven                { padding-left: 528px; }
        .container .offset-by-twelve                { padding-left: 576px; }
        .container .offset-by-thirteen              { padding-left: 624px; }
        .container .offset-by-fourteen              { padding-left: 672px; }
        .container .offset-by-fifteen               { padding-left: 720px; }
    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 300px; }

        /* Offsets */
        .container .offset-by-one,
        .container .offset-by-two,
        .container .offset-by-three,
        .container .offset-by-four,
        .container .offset-by-five,
        .container .offset-by-six,
        .container .offset-by-seven,
        .container .offset-by-eight,
        .container .offset-by-nine,
        .container .offset-by-ten,
        .container .offset-by-eleven,
        .container .offset-by-twelve,
        .container .offset-by-thirteen,
        .container .offset-by-fourteen,
        .container .offset-by-fifteen { padding-left: 0; }

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 420px; }
    }


/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }



Layout

Code: Select all
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
   #Site Styles
   #Page Styles
   #Media Queries
   #Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

   /* Smaller than standard 960 (devices and browsers) */
   @media only screen and (max-width: 959px) {}

   /* Tablet Portrait size to standard 960 (devices and browsers) */
   @media only screen and (min-width: 768px) and (max-width: 959px) {}

   /* All Mobile Sizes (devices and browser) */
   @media only screen and (max-width: 767px) {}

   /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
   @media only screen and (min-width: 480px) and (max-width: 767px) {}

   /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
   @media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/*    This is the proper syntax for an @font-face file
      Just create a "fonts" folder at the root,
      copy your FontName into code below and remove
      comment brackets */

/*   @font-face {
       font-family: 'FontName';
       src: url('../fonts/FontName.eot');
       src: url('../fonts/FontName.eot?iefix') format('eot'),
            url('../fonts/FontName.woff') format('woff'),
            url('../fonts/FontName.ttf') format('truetype'),
            url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
       font-weight: normal;
       font-style: normal; }
*/

/*wallpaper*/
   body
   {
   background-color:#000000;
   background-image:url('wpneon2.jpg');
   background-repeat:no-repeat;
   background-size:100%;
   margin-top: 100px;
   }

#dam{background-color: #E13759; padding-bottom: 10px; padding-top: 10px;}
.poo{background-color: #00BFFF;}
/*links*/
a#zip
{
   padding-left: 20px;
   padding-right: 20px;
   font-size:17px;
}
a:link
{
   text-decoration:none;
   color:black;
}
a:hover
{
   text-decoration:none;
   color:black;
   text-decoration:underline;
}
a:visited
{
   text-decoration:none;
   color:black;
}
a:active
{
   text-decoration:none;
   color:black;
}

#mf{
   text-align:center;
}

#topborder
{
   border-top-style:dashed;
   border-top-color:#E13759;
   opacity:1;
}
/*"bio"*/
#bar {
   vertical-align: inline;
   background-color: #E13759;
   padding-top: 12px;
   padding-bottom: 12px;
   padding-left: 90px;
   padding-right: 83px;

}

  #homebord {
       border-style: none;
       position: relative;
       top: 18px;
}

.info
{
   position: relative;
   bottom: 25px;
   margin-left: 200px;
   margin-right: 400px;
}
#pimg
{
   float:left;
}

.block
{
   display: block;
}

.paddb
{
   position:relative;
   top:11px;
   padding-right: 81px;
}
Chase01
New User
New User
 
Posts: 3
Joined: Wed Apr 24, 2013 12:33 pm
Blog: View Blog (0)


Re: simple problem got complicated [long code!]

Post by sordidarchetype on Wed Apr 24, 2013 2:29 pm
([msg=75319]see Re: simple problem got complicated [long code!][/msg])

I think the first thing to point out here is that you actually have your priorities reversed.

I just wanna fix all the problems before erasing all the useless code


It's a good thing that you acknowledge the superfluous code should be removed. However, I would recommend you make this your first order of business.

You see, systems with greater complexity tend to cultivate greater problems. The easiest way to cut down on the surface for bugs and security issues is to make your system simpler. Keeping modular, efficient, and succinct code are three very popular and successful ways to do just this.

CSS is an unyielding beast by itself. By keeping extraneous code, you may actually be inadvertently applying properties to DOM objects in ways that you don't intend, and that (in turn) can cause to to have to make ugly counter-properties to compensate for the effects.

Let's say that you go through all of this, get it working with compensated CSS, and in the end you remove the extraneous CSS. Now, your code will be compensating for CSS which no longer exists, and your page breaks once again. If you take the time to rid yourself of what you don't need from the get-go, you can rid yourself of some awful headaches down the road.


All of that being said, I think what you are specifically after for your code would be to use the "margin: auto" property to try and center-align objects. This will only work on block objects, and you may need to nest them to get the desired effect.
User avatar
sordidarchetype
New User
New User
 
Posts: 47
Joined: Wed Dec 22, 2010 12:46 pm
Blog: View Blog (0)


Re: simple problem got complicated [long code!]

Post by Chase01 on Thu Apr 25, 2013 11:14 am
([msg=75357]see Re: simple problem got complicated [long code!][/msg])

ok I erased all the useless code and such and re-organized the whole web page tried margin:auto; still nothing; I tried making the whole last box into absolute and it just feels like everything in the box is just hovering over it which I do not want. I do not want to change the class to three columns I wan't it to be seven columns I do not understand why the first box came out perfect [the navigation bar] and the second one has this invisible square at the left and I don't know how to eliminate it. I tried rewriting everything but the results came unsatisfactory it's like there is something at the left of all those links and such inside the box but in reality there is nothing in there.
Chase01
New User
New User
 
Posts: 3
Joined: Wed Apr 24, 2013 12:33 pm
Blog: View Blog (0)


Re: simple problem got complicated [long code!]

Post by sordidarchetype on Thu Apr 25, 2013 12:01 pm
([msg=75360]see Re: simple problem got complicated [long code!][/msg])

Can you post a pastebin or something to the new code in its entirety?
Or even better, do you have a link to a url where this page exists?
User avatar
sordidarchetype
New User
New User
 
Posts: 47
Joined: Wed Dec 22, 2010 12:46 pm
Blog: View Blog (0)


Re: simple problem got complicated [long code!]

Post by Chase01 on Thu Apr 25, 2013 1:34 pm
([msg=75372]see Re: simple problem got complicated [long code!][/msg])

sorry I haven't published the website yet. Also I put it back to the way I wanted like I said I din't want everything to be absolute I just din't like it but I did kept some of the changes also play around with the layout and the class called ".left". For me what I think the problem has to do with the skeleton, but I don't wanna discard it.

html
http://pastebin.com/Qx20De1C


Skeleton
http://pastebin.com/WftYC9RH

Layout
http://pastebin.com/aHPNCu4J
Chase01
New User
New User
 
Posts: 3
Joined: Wed Apr 24, 2013 12:33 pm
Blog: View Blog (0)


Re: simple problem got complicated [long code!]

Post by sordidarchetype on Thu Apr 25, 2013 2:26 pm
([msg=75376]see Re: simple problem got complicated [long code!][/msg])

Ok, there's a bunch wrong with this thing. Let's just keep it simple though...

First off, you should avoid using center tag at all costs. It's a relic of the days before CSS. As a rule of thumb, you don't want to put in ANY formatting into your HTML. Use CSS exclusively for that. It will leave things much cleaner.

Your div.container object is actually great. That's the object that is supposed to contain and center the content, which it DOES do.

Inside the div.container, however, is a bit of a mess. It looks like you are trying to center the menu, but then cascade some bad CSS so you try to counter it by using a left float on the content. That's just all wrong. If you have to create a float to put content back to where it should be, you should start over with your css.

padding-left: 240px; needs to come out of ".container .offset-by-four", that's a really bad way to position the menu.

Also, DO NOT use padding to try and set the size of your #bar object, that's just wrong. You should make is a display as a block object and set it's height and width that way. And while you're at it, that code probably shouldn't go inside a <header> tag. You should avoid using that as well. It's an HTML5 specific tag that is not meant for what you are doing here. (you should never use it to define a menu).

If you can successfully clean up that bunch, the rest of the issues should slowly become more obvious and easier to deal with.

Honestly, it might be easier for you to start with a new, blank, CSS file and try to create the whole thing from scratch again. You should only ever need to make small changes to position an item on a page, and you should NOT need to compensate (esp other objects) for the changes you make. If you find that you do, then you should consider using an alternative property to achieve your desired effect.
User avatar
sordidarchetype
New User
New User
 
Posts: 47
Joined: Wed Dec 22, 2010 12:46 pm
Blog: View Blog (0)



Return to Web Design

Who is online

Users browsing this forum: No registered users and 0 guests