Jump to content

center my web site ?

TheCatapult

By TheCatapult
in CSS

 Share

Recommended Posts

TheCatapult Member

TheCatapult

Posted
Posted

Hello!How to centralize all the content from my web site. I use absolute as positioning. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">	    <title>TCB | Online Streaming | </title>	    <style type="text/css">	    a:link {text-decoration:none;}    /* unvisited link */a:visited {text-decoration:none;} /* visited link */a:hover {text-decoration:none;}   /* mouse over link */a:active {text-decoration:none;}  /* selected link */a:link {color:#999999;}    /* unvisited link */a:visited {color:#999999;} /* visited link */a:hover {color:#000000;}   /* mouse over link */a:active {color:#000000;}  /* selected link */body {background-image:url('background.jpg');}p.{font-family:"Comic Sans MS",Times,serif;}			    #div{	 background-image:url('title-back.jpg');					    width: 450px;	    font-family:"Arial", Times, serif;	    text-align:justify;	    }	   	   #Logo{  width: 768px;  height: 128px;  position: absolute; top: 0px; left: 0px;}#Navigation{  width: 768px;  height: 35px;  position: absolute; top: 128px; left: 0px;}#UStream{  width: 320px;  height: 256px;  position: absolute; top: 163px; left: 450px;}#Slideshow{  width: 450px;  height: 337px;  position: absolute; top: 163px; left: 0px;}#news{a:link {text-decoration:none;}    /* unvisited link */a:visited {text-decoration:none;} /* visited link */a:hover {text-decoration:underline;}   /* mouse over link */a:active {text-decoration:underline;}  /* selected link */  width: 450px;  height: 450px;    background-color: #99ffff;  position: absolute; top: 500px; left: 0px;}#Social{  width: 318px;  height: 76px;  background-color: #99ffff;  position: absolute; top: 420px; left: 450px;			    }#top10{  width: 318px;  height: 152px;  background-color: #99ffff;  position: absolute; top: 496px; left: 450px;}#top10songs{  width: 319px;  height: 240px;  background-image:url('topback.jpg');  position: absolute; top: 648px; left: 450px;  font-family:"Arial Narrow",Times,serif;  font-size:14px;}#dj{  width: 318px;  height: 76px;  position: absolute; top: 496px; left: 450px;</style>			    <script type="text/javascript"><!--var image1=new Image()    image1.src="1-1.jpg"var image2=new Image()    image2.src="1-2.jpg"var image3=new Image()    image3.src="1-3.jpg"var image4=new Image()    image4.src="1-4.jpg"var image5=new Image()    image5.src="1-5.jpg"//--></script>		  </head>			   					    <body><div id="Logo">	    <img border="0" src="logo.png" alt="Programs" width="768" height="128"></div><div id="Navigation">	    <a href="index.html"><img border="0" src="1.png" alt="Programs"></a><a href="programs.html"><img border="0" src="2.png" alt="Programs" ></a><a href="schedule.html"><img border="0" src="3.png" alt="Programs"></a><a href="anchors.html"><img border="0" src="4.png" alt="Programs"></a><a href="contact.html"><img border="0" src="5.png" alt="Programs"></a><a href="advertise.html"><img border="0" src="6.png" alt="Programs"></a></div><div id="Slideshow">	    <img src="1-1.jpg" alt="Programs" name="slide" width="450" height="337"><script type="text/javascript"><!--//variable that will increment through the imagesvar step=1function slideit(){//if browser does not support the image object, exit.if (!document.images)returndocument.images.slide.src=eval("image"+step+".src")if (step<5)step++elsestep=1//call function "slideit()" every 2.5 secondssetTimeout("slideit()",2500)}slideit()//--></script>	    </div><div id="news"><div><img border="0" src="headline.jpg" alt="Programs" width="451" height="82">	    <?$username="";$password="";$database="";mysql_connect("",$username,$password);@mysql_select_db($database) or die( "Unable to select database");$query="SELECT * FROM news  ORDER BY id DESC LIMIT 20";$result=mysql_query($query);$num=mysql_numrows($result);mysql_close();?><?$i=0;while ($i < $num) {$id=mysql_result($result,$i,"id");$title=mysql_result($result,$i,"title");$content=mysql_result($result,$i,"content");$poster=mysql_result($result,$i,"poster");?><div id="div">	  	    <? echo '<a href="http://catapultphpmysql.eu.pn/testwebsite/news.php?id=' . $id . '">' . $title . '</a> <br/>'; ?></div><?$i++;}			    ?></div></div>	   <div id="UStream"><iframe src="http://www.ustream.tv/embed/10214266" width="320" height="180" scrolling="no" frameborder="0"style="border: 0px none transparent;"></iframe><br><img border="0" src="social.jpg"></div>			    <div id="Social"><center><img border="0" src="fb.gif" alt="Programs"><img border="0" src="tweet.gif" alt="Programs"></center></div>			    <div id="top10"><center><img border="0" src="dj.jpg" alt="Programs"><br><img border="0" src="top10.jpg" alt="Programs"></center></div>			    <div id="top10songs"><?php$conn = mysql_connect("", "", "");if (!$conn) {    echo "Unable to connect to DB: " . mysql_error();    exit;} if (!mysql_select_db("")) {    echo "Unable to select mydbname: " . mysql_error();    exit;}$sql = "SELECT id as one, two, three, four, five, six, seven, eight, nine, ten	    FROM   top10	    WHERE  id = 0";$result = mysql_query($sql);if (!$result) {    echo "Could not successfully run query ($sql) from DB: " . mysql_error();    exit;}if (mysql_num_rows($result) == 0) {    echo "No rows found, nothing to print so am exiting";    exit;}// While a row of data exists, put that row in $row as an associative array// Note: If you're expecting just one row, no need to use a loop// Note: If you put extract($row); inside the following loop, you'll//	   then create $userid, $fullname, and $userstatuswhile ($row = mysql_fetch_assoc($result)) {    echo $row["one"];    echo '<br>';    echo $row["two"];    echo '<br>';    echo $row["three"];    echo '<br>';    echo $row["four"];    echo '<br>';    echo $row["five"];    echo '<br>';    echo $row["six"];    echo '<br>';    echo $row["seven"];    echo '<br>';    echo $row["eight"];    echo '<br>';    echo $row["nine"];    echo '<br>';    echo $row["ten"];}mysql_free_result($result);?></div>			    <div id="dj">	    <?$username="";$password="";$database="";mysql_connect("",$username,$password);@mysql_select_db($database) or die( "Unable to select database");$query="SELECT * FROM diskjockey1";$result=mysql_query($query);$num=mysql_numrows($result);mysql_close();$i=0;while ($i < $num) {$jockey=mysql_result($result,$i,"jockey");echo "<b>$jockey";$i++;}?></div></body>	    </html>

Thanks much!

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Position: absolute = fixed left, top positions = fine, if all screens are same size, but! are not! = unhappiness and depressed -> BUT! if had used margins, padding, float instead = centred in all browsers = happiness and contentment.

Link to comment
Share on other sites
niche Devoted Member

niche

Posted
Posted

Per dsonesuk float is the way with margins, padding. If you want to center all you can use a div styled with margin: 0 auto;.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted 
<!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>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">#wrapper {margin: 0 auto; width: 960px;}.ex1, .ex2, .ex3 { overflow:hidden; margin-bottom: 20px; background-color:#CCFFCC;}.left, .right { width: 200px; background-color:#CCFF00; min-height: 400px; }.left { float: left;}.right {float:right;}.content {background-color:#CCCC00;}.ex1 .content {  min-height: 400px;margin-left:210px; }.ex2 .content {  min-height: 400px; margin-right: 210px; }.ex3 .content {  min-height: 400px;margin: 0 210px;}</style></head><body><div id="wrapper"><div class="ex1"><div class="left">Left</div><div class="content"> Content</div></div><div class="ex2"><div class="right">Right</div><div class="content"> Content</div></div><div class="ex3"><div class="left">Left</div><div class="right">Right</div><div class="content"> Content</div></div></div></body></html>

Link to comment
Share on other sites
  • 4 weeks later...
TheCatapult Member

TheCatapult

Posted
  • Author
Posted (edited)

Hello! I want the banner on the very top (the black one) and then the sets of navigation buttons bellow it. Then bellow the buttons, there will be a blue background <div>, i.e. for the news on the left; and a Watch signage on the left then below it another blue background w/ shadow and there the video. Please help me! Thanks!

post-78075-0-02576000-1338989834_thumb.jpg

Edited by MisterCatapult
Link to comment
Share on other sites
divinedesigns1 Dedicated Member

divinedesigns1

Posted
Posted
Hello! I want the banner on the very top (the black one) and then the sets of navigation buttons bellow it. Then bellow the buttons, there will be a blue background <div>, i.e. for the news on the left; and a Watch signage on the left then below it another blue background w/ shadow and there the video. Please help me! Thanks!
send up your divs in the order as the photo display, if you have the menu div above the banner div then the menu will be above the banner, so just swap them
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...