dcsimg
www.webdeveloper.com
Results 1 to 9 of 9

Thread: Please help me fix this

Hybrid View

  1. #1
    Join Date
    Jun 2008
    Location
    *****
    Posts
    58

    Please help me fix this

    Hello people. Still trying my hands on pure css without tables. Can somebody please show me how I can vertically center the divs in a stacking flow and all to be inside the "mainWrapper div"?

    below is the codes am using

    <body>
    <div id="MainWrapper">
    <div id="holder">
    <div id="LogoHolder">
    <div id="HorseLogo">
    <img src="images/HomePage/GrapLogoBig.png" width="120" height="120" alt="CavLogo" />
    </div>
    </div>
    <div id="Holder1">
    <h1>MY GUYS</h1>
    <div id="Line"><img src="images/HomePage/LogoLine.png" width="375" height="3" /></div>
    <div id="CommandHolder">
    <h2>HAULAGE &nbsp;|&nbsp; OUTDOOR MEDIA &nbsp;|&nbsp;&nbsp; PRESS</h2>
    </div>
    </div><!-- end of Holder1-->
    <div><!-- end of holder -->

    <div id="HomeSlide"></div>
    <div id="BPRbtn"><img src="Images/HomePage/BPRButton.png" name="Image11" width="220" height="67" /></div>
    <div id="ComBtn"><img src="Images/HomePage/ComButton.png" name="BPRbtn" width="220" height="67" /></div>

    <div id="Contact">
    <p class="class2"> NY: 01-472-8710 &nbsp; <span class='class1'>|</span> &nbsp;&nbsp;LA: 09-870-9245 &nbsp;&nbsp;<span class='class1'>|</span>&nbsp;&nbsp;&nbsp;VT: 0707-030-3030</p>
    </div>

    <div id="Contact2">
    <p class="class2"><span class="tracking2">media<img src="Images/HomePage/at.png" alt="@" width="14" height="16" align="texttop" />grapro.com</span></p></div>

    <div id="Contact3">
    <p class="class2"><span class="tracking2">press<img src="images/HomePage/at.png" alt="@" width="14" height="16" align="texttop" />grapro.com</span></p></div>

    <div id="Contact4">
    <p class="class2"><span class="tracking2">haulage<img src="Images/HomePage/at.png" alt="@" width="14" height="16" align="texttop" />grapro.com</span></p></div>
    </div>
    </div>

    </div>
    </body>


    CSS

    body {
    background-color: #FFF;
    margin: 20px auto;
    padding: 0;
    background-image: url(images/HomePage/MainBG.png);
    background-repeat: repeat-x;
    }

    #MainWrapper {
    margin:0 auto;
    width:650px;
    height:auto;
    background-color:#CCC;
    }

    #holder {
    width: 500px;
    margin: auto;
    height:200px;
    text-align:center;
    background-color:#090;
    }

    #Holder1 {
    margin: auto;
    z-index:3;
    font-family: Arial, Sans-serif, sans;

    #LogoHolder {
    height:130px;
    z-index:4;
    }

    #HorseLogo {
    width:200px;
    margin:0 auto;
    height:115px;
    }

    #HomeSlide {
    width: 600px;
    height:350px;
    margin:auto;
    border:1px solid #999;
    }


    #CommandHolder {
    font-family: "Times New Roman", Times, serif;
    text-align:center;
    color: #000;
    }
    #Line {
    width:375px;
    height:8px;
    margin:auto;
    z-index:13;
    }

    h1 {
    font: 1em "Times New Roman";
    margin: 0;
    padding: 0;
    letter-spacing: .6px;
    font-size: 26px;
    margin: 0;
    }

    h2 {
    font: 1em "Times New Roman", Times, serif;
    margin: 0;
    padding: 0;
    letter-spacing: 1px;
    color:#0089cf;
    margin: 0;
    }

    h1, h2, h3 {
    font-weight:normal;
    text-align: center;
    }

    .tracking {
    letter-spacing: -0.05em;
    }

    .tracking2 {
    letter-spacing: .8px;
    }


    .class1 {text-decoration: none; color: #C00}
    .class2 {
    text-decoration: none;
    color: #000;
    float:left;
    }

    .style5 {font-family: "Helvetica Neue", Helvetica; font-size: 12px; }
    a:link {
    text-decoration: none;
    color: #000;
    }
    a:visited {
    text-decoration: none;
    color: #000;
    }
    a:hover {
    text-decoration: none;
    color: #C00;
    }
    a:active {
    text-decoration: none;
    font-family: Arial, Sans-serif, sans;
    color: #FFF;
    }
    a img {
    border: none;
    }

    #BPRbtn {
    width:226px;
    height:76px;
    color: #999;
    font-size: 36px;
    text-align: center;
    }
    #ComBtn {
    width:226px;
    height:76px;
    font-size: 36px;
    color: #999;
    text-align: center;
    }

    #ComBtn2 {
    width:226px;
    height:76px;
    font-size: 36px;
    color: #999;
    text-align: center;
    }

    #Contact {
    width:598px;
    height:44px;
    color: #C00;
    font-size: 16px;
    font-family: Arial, Sans-serif, sans;
    }

    #Contact2, #Contact3, #Contact4 {float:left; text-align:}
    #Contact2 {
    display:block;
    height:52px;
    z-index:4;
    color: #C00;
    font-size: 16px;
    font-family: Arial, Sans-serif, sans;
    }
    #Contact3 {
    width:146px;
    height:41px;
    z-index:4;
    color: #C00;
    font-size: 16px;
    font-family: Arial, Sans-serif, sans;
    }
    #Contact4 {
    height:39px;
    display:block;
    z-index:4;
    color: #C00;
    font-size: 16px;
    font-family: Arial, Sans-serif, sans;
    }
    .class3 A:link {text-decoration: none; color: #000}
    .class3 A:visited {text-decoration: none; color: #000}
    .class3 A:active {text-decoration: none;}
    .class3 A:hover {text-decoration: none; color: #C00;}
    .class3 {
    text-decoration: none;
    color: #000
    }
    .tracking2 {
    letter-spacing: .8px;
    }

    #HOLDER #Holder1 #apDiv2 a {
    color: #FFF;
    }
    .classI A:link {text-decoration: none; color: #FFF;}
    .classI A:visited {text-decoration: none; color: #FFF;}
    .classI A:active {text-decoration: none; color:#FFF;}
    .classI A:hover {text-decoration: none; color: #FFF;}
    .classI {
    text-decoration: none;
    color: #FFF;
    font-family: Arial, Sans-serif, sans;
    font-size: 40px;
    }
    Attached Images Attached Images

  2. #2
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    Could you provide the URL to your page, stini? I find it so much easier to work from the actual document. My Web Developer Tool Kit page (link in sig. below) is table free if you wish to check it out.

    James
    Last edited by polyglot; 01-20-2013 at 08:52 PM. Reason: added info

  3. #3
    Join Date
    Jun 2008
    Location
    *****
    Posts
    58
    thanks James, here's the link. http://www.test.c-edgemedia.com/
    Really appreciate your time.

  4. #4
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    Quote Originally Posted by stini View Post
    thanks James, here's the link. http://www.test.c-edgemedia.com/
    Really appreciate your time.
    I see you are using an XHTML 1.0 (transitional) Doctype (you should use a strict Doctype) and are attempting to style vertical image placement using align="texttop" which violates the xhtml rules for using the align element that expects the attributes "top", "middle", "bottom", "left", "right". You are also missing the "alt" (text) attribute for some images. Your stylesheet will not effect the image placements I believe you are seeking. Are you attempting to align images vertically similar to those depicted here: http://jp29.org/cgau.htm (ignore the content)?

    I can re-write your markup and stylesheet if you wish once I determine what you are trying to achieve.

    James
    Last edited by polyglot; 01-21-2013 at 09:22 PM. Reason: corrected spelling

  5. #5
    Join Date
    Jun 2008
    Location
    *****
    Posts
    58
    Hi James.
    Exactly what am trying to achieve. The vertical alignment of all the div element. Please go ahead and write a better markup and stylesheet. Am also taking note of the corrections you pointed out.
    Thank you so much

  6. #6
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    Please excuse the delay, stini - I have had a medical emergency.

    James

  7. #7
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    Hi Stini - sorry for the delay.

    I found your Markup coding to be very confusing and complicated - sorry. Your use of the height attribute is not appropriate for what you are trying to achieve. I composed a quick snippet of XHTML 1.0 (strict) and CSS3 coding that I believe will produce what I think you are after -- it is quite brief and bare bones, but it may form a foundation for you to build on. It is not very elegant coding, but I used your structure as a basis. I loaded the result of my efforts on to my server to provide a live view and facilitate validation:

    http://jp29.org/stini.htm

    You should always use a strict Doctype to preclude deprecated elements/attributes and to avoid serving the document in quirks mode.

    The following validation results include the Markup and style sheet coding:


    W3C Markup Validation

    W3C CSS Validation

    Questions?

    James

  8. #8
    Join Date
    Jun 2008
    Location
    *****
    Posts
    58
    Hi James, right on the mark. Thanks so much for this foundation. I really appreciate it and am building on it. Sorry I didnt get in touch earlier than this, my internet was cut off and I hope you sorted out the medical emergency.

    Will keep you posted on the final output of my project and I hope I can always tap you if I run into any challenge. thanks a million.

    St

  9. #9
    Join Date
    Aug 2012
    Location
    Tucson
    Posts
    45
    Quote Originally Posted by stini View Post
    Hi James, right on the mark. Thanks so much for this foundation. I really appreciate it and am building on it. Sorry I didnt get in touch earlier than this, my internet was cut off and I hope you sorted out the medical emergency.

    Will keep you posted on the final output of my project and I hope I can always tap you if I run into any challenge. thanks a million.

    St
    You are most welcome St.

    James

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles