Jump to content
TheCatapult

center my web site ?

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;.

Share this post


Link to post
Share on other sites
<!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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Agree with everything said above ^^ I found that this code centres absolute divs though.

#divname{position:absolute;left:0;right:0;margin-right:auto;margin-left:auto;}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...