Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

HTML Forum


You are currently viewing our HTML Forum as a guest. Please register to participate.
Login


Tycoon Talk > Web Development and Programming Support > HTML Forum > Trying to center the main content of this...Having trouble.

Post a Project »

Find a Professional HTML Freelancer!

Find a Freelancer to help you with your HTML projects

FREE Outsourcing eBook!

Reply
Trying to center the main content of this...Having trouble.
Old 03-03-2011, 04:40 PM Trying to center the main content of this...Having trouble.
Brian07002's Avatar
Defies a Status

Posts: 2,162
Name: ...
Location: ...
Trades: 0
Talkupation: Brian07002 will become famous soon enoughBrian07002 will become famous soon enough
I want to center align the main content on this page, but having a problem. It's probably because of the gradient background, but I'd appreciate someone 's help on this.

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Cross Browser Gradient Box</title>

<style type="text/css">

body {
	width: 1010px;
        height: 555px;
	text-align: center;
        text-valign: center;
	margin-top: 0.25%;
        margin-bottom: 0.25%;
        margin-left: .65%;
        margin-right: 0.25%;
        padding: 0px;
        border-style: solid;
        border-width: 1px;
        background-color: #b2d2e3;
}


.gradient {
	width: 100%;
	height: 100%;

background: #c5deea; /* old browsers */

background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* ie */
</style>

<style type="text/css">

#container {

    float:left;
    width: 100%;
    height: 100%;
}

#cs1 {

    
    float:left;
    color: red;
    height:3%;
    background:white;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin-left: 28%;

}

#cs2 {

    
    float:left;
    color: red;
    height:2%;
    background:white;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin-left: 28%;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;

}

#botcol {

    float:right;
    width:20%;
    height:1.5%;
    background:white;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin-left: 5px;
    margin-right: 5px;
        
}


</style>

</head>

<body>
<div class="gradient">
<div align="center">
<div id="container"></div>
<p />

<div id="cs1" align="center"> Coming Soon...A Brand New Trend In Website Advertising!</div>

<p />
<br />
<br />

<div align="center">Choose your <b><i><u>preferred</b></i></u> browsing resolution: <b>Default</b>: <a href="#">1024x768</a> 
<p />
<a href="#">1280 x 600</a> | <a href="#">1280 x 720</a> | <a href="#">1280 x 768</a> | <a href="#">1280 x 800</></a> | <a href="#">1280 x 1024</a> | <a href="#">1366 x 768</a>

<div align="center">This page is <b><u><i>Best Viewed</b></i></u> at 1024 x 768 Resolution!</div>

<div align="center"><img src="images/logo.png" alt="Reunite My Site Logo" title="Reunite My Site Logo"></div>
<p />

<div id="cs2" align="center"> Website is currently under construction, please be patient!</div>

<p />
<br />
<br />

<div id="botcol" align="center" valign="bottom">Reunite My Site &copy; 2011</div>

</div>
</body>
</html>
Thanks!
-Brian
__________________
Made2Own

Please login or register to view this content. Registration is FREE
Brian07002 is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 03-03-2011, 06:08 PM Re: Trying to center the main content of this...Having trouble.
chrishirst's Avatar
Missing! presumed drunk.

Latest Blog Post:
A Simple DHTML Tabbed Interface
Posts: 42,380
Name: Chris Hirst
Location: Blackpool. UK
Trades: 0
Talkupation: chrishirst has a reputation beyond reputechrishirst has a reputation beyond reputechrishirst has a reputation beyond reputechrishirst has a reputation beyond reputechrishirst has a reputation beyond reputechrishirst has a reputation beyond reputechrishirst has a reputation beyond reputechrishirst has a reputation beyond reputechrishirst has a reputation beyond reputechrishirst has a reputation beyond reputechrishirst has a reputation beyond repute
text-valign property does not exist

http://www.candsdesign.co.uk/referen...ertical-align/

http://www.modtalk.co.uk/_site/code/...ay-table-cell/
__________________
Chris. ->>
Please login or register to view this content. Registration is FREE
 <<-
A foolish consistency is the hobgoblin of little minds
Thought for today:- Is SEO the only industry where all the cowboys are Indians?
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 03-04-2011, 06:23 AM Re: Trying to center the main content of this...Having trouble.
cbeaudin's Avatar
Extreme Talker

Posts: 158
Name: cbeaudin
Location: Proud to be Canadian
Trades: 1
Talkupation: cbeaudin is on a distinguished road
I'm not sure exactly what you are trying to center, i assumed div.gradient.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Cross Browser Gradient Box</title>
<style type="text/css">
body {
 text-align: center;
        text-valign: center;
 margin-top: 0.25%;
        margin-bottom: 0.25%;
        margin-left: .65%;
        margin-right: 0.25%;
        padding: 0px;
        background-color: #b2d2e3;
}

.gradient {
  /* NEW SECTION */
 width: 1010px;
    height: 555px;
 border-style: solid;
    border-width: 1px;
 margin: 0px auto;
 /* END OF NEW SECTION */
background: #c5deea; /* old browsers */
background: -moz-linear-gradient(top, #c5deea 0%, #8abbd7 31%, #066dab 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5deea), color-stop(31%,#8abbd7), color-stop(100%,#066dab)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5deea', endColorstr='#066dab',GradientType=0 ); /* ie */
</style>
<style type="text/css">
#container {
    float:left;
    width: 100%;
    height: 100%;
}
#cs1 {
    
    float:left;
    color: red;
    height:3%;
    background:white;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin-left: 28%;
}
#cs2 {
    
    float:left;
    color: red;
    height:2%;
    background:white;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin-left: 28%;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}
#botcol {
    float:right;
    width:20%;
    height:1.5%;
    background:white;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin-left: 5px;
    margin-right: 5px;
        
}

</style>
</head>
<body>
<div class="gradient">
<div align="center">
<div id="container"></div>
<p />
<div id="cs1" align="center"> Coming Soon...A Brand New Trend In Website Advertising!</div>
<p />
<br />
<br />
<div align="center">Choose your <b><i><u>preferred</b></i></u> browsing resolution: <b>Default</b>: <a href="#">1024x768</a> 
<p />
<a href="#">1280 x 600</a> | <a href="#">1280 x 720</a> | <a href="#">1280 x 768</a> | <a href="#">1280 x 800</></a> | <a href="#">1280 x 1024</a> | <a href="#">1366 x 768</a>
<div align="center">This page is <b><u><i>Best Viewed</b></i></u> at 1024 x 768 Resolution!</div>
<div align="center"><img src="images/logo.png" alt="Reunite My Site Logo" title="Reunite My Site Logo"></div>
<p />
<div id="cs2" align="center"> Website is currently under construction, please be patient!</div>
<p />
<br />
<br />
<div id="botcol" align="center" valign="bottom">Reunite My Site &copy; 2011</div>
</div>
</body>
</html>
__________________
- cbeaudin
Last edited by cbeaudin; 03-04-2011 at 06:25 AM..
cbeaudin is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Trying to center the main content of this...Having trouble.
 
Previous Thread | Next Thread Tycoon Talk > Web Development and Programming Support > HTML Forum > Trying to center the main content of this...Having trouble.

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.22204 seconds with 12 queries