Please help me fix this

Printable View

01-19-2013, 10:07 PM
stini

1 Attachment(s)

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  |  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;
}
01-20-2013, 07:47 PM
polyglot

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
01-20-2013, 11:09 PM
stini

thanks James, here's the link. http://www.test.c-edgemedia.com/
Really appreciate your time.
01-21-2013, 08:18 PM
polyglot

Quote:

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
01-21-2013, 11:37 PM
stini

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
01-23-2013, 05:04 PM
polyglot

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

James
01-24-2013, 12:21 PM
polyglot

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
01-30-2013, 01:09 PM
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
01-30-2013, 05:46 PM
polyglot

Quote:

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