Please help me fix this

**stini** · 01-19-2013 10:07 PM

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  |  OUTDOOR MEDIA  |   PRESS</h2>
</div>
</div>
<div>

<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   <span class='class1'>|</span>   LA: 09-870-9245   <span class='class1'>|</span>   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;
}

**polyglot** · 01-20-2013 07:47 PM

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

**stini** · 01-20-2013 11:09 PM

thanks James, here's the link. http://www.test.c-edgemedia.com/
Really appreciate your time.

**polyglot** · 01-21-2013 08:18 PM

Originally Posted by stini

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

**stini** · 01-21-2013 11:37 PM

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

**polyglot** · 01-23-2013 05:04 PM

Please excuse the delay, stini - I have had a medical emergency.

James

**polyglot** · 01-24-2013 12:21 PM

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

**stini** · 01-30-2013 01:09 PM

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

**polyglot** · 01-30-2013 05:46 PM

Originally Posted by stini

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: Please help me fix this

Thread Tools

Display

Please help me fix this

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions