html - Centering af Design - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

<< < 1 2 3 > >>

Bruger #12020 @ 04.07.07 17:45

Hej er igang med et design.. og i Firefox blir det centeret.. men i Internet explore gør det ikke?.. ved i hvorfor
her er min kode:

INDEX.HTML

Kode

<?php
ob_start();
session_start();

include_once("mysql_connection.inc.php");
?>
<!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=iso-8859-1" />
<title>test</title>
<link href="css/css.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>



<div class="ramme">

  <div id="top"><div class="banner"><img src="images/bannercopy.jpg" width="468" height="60" /></div>
  </div>
	<div id="login"><?php 
function form()
{

}
if(isset($_SESSION['username']) && isset($_SESSION['password']) && isset($_SESSION['email_address'])) 
{
	include_once("login_menu.php");
		   
} else {
?>
<form action='?page=login' method='post' />
<?php
	echo "
		  <span style='font-size:11px;'>Login ||</span> 
	
Brugernavn:
<input type='text' name='username' class='input' size='10' />
Kodeord:
<input type='password' name='password' class='input' size='10' />
<input type='submit' name='login' class='input' value='Log ind' />

<a href='?page=register' class='links'>Opret Bruger</a>
";
	
}
?>
</form>
  </div>
	
	<div class="contenleft">

	  <div class="venstremenu">

<div id="menuimage">Generelt</div>

</div>
		<table width="100" border="0">
          <tr>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
          </tr>
        </table>
		<br />
	  <div class="venstremenu">
			<div id="menuimage">News Kategorier</div>
            
		    <table width="100" border="0">
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
              </tr>
            </table>
	    <br />

	  </div>
	</div>

  <div id="middle">
    <p><?php
if($_GET['page'] =="") {
	$fil = "home.php";
	} else {
	$fil = "$_GET[page].php";
}
if(file_exists($fil)) {
	print "<br />";
	include "$fil";
	print "<br /><br />";
	} else {
	print "Siden <strong>$_GET[page].php</strong> kunne ikke findes på";
	$_SERVER['HTTP_HOST'];
	print "<br /><br />";
}

?><br />
      <br />
    </p>
  </div>


	<div class="contenright">
	  <div class="højremenu">
		  <div id="menuimage">Seneste indlæg</div>

		  
		  <br />
		  <?php
		  $get = mysql_query("SELECT * FROM forum_indlaeg ORDER BY DATO DESC limit 5");
		  $result = mysql_fetch_array($get); 
		  
		 echo "".$result[emne]."";		 ?>
	  </div>
	</div><br />
<br /><br />
<br /><br />


<div class="contenright">
		<div id="menuimage">Nyeste Brugere</div>
		<?php
		$out = mysql_query("SELECT * FROM users ORDER BY user_id DESC limit 5");
		while($users = mysql_fetch_array($out)) {
		
		echo "<a href='?page=show_profile&id=".$users[user_id]."&username=".$users[username]."' class='links'>".$users[username]."</a> <br />";
		}
		?>
  </div>
</div>
</div>

</body>
</html>
<?php
ob_flush();
?>

CSS.CSS

Kode

html, body {
      margin:0px;
      padding:0px;
      height:100%;
      display: block;
   }
body {
	background-image:url('../images/bg.jpg');
	background-repeat:repeat;
	
	font-family:Verdana;
	font-size:11px;
}
.ramme, td {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
}


.ramme {
	margin-right:auto;
	margin-top:0px;
	margin-left:auto;
	margin-bottom:0px;
	width:800px;
	background-color:#FFF;
	height:100%;
	display: block;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #5d5d5d;
	border-left-color: #5d5d5d;	
}

#top {
	width:800px;
	height:160px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/logo.jpg);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #23627f;
}

.contenleft {
	width:auto;
	height:auto;
	float:left;
	margin-left:5px;
}

.contenright {
	width:96px;
	height:auto;
	margin-right:5px;
	padding:0;
	float:right;
	border:1px solid #23627f;
}

.venstremenu {
	font-family:Tahoma;
	font-size:11px;
	color:#000;
	width: 96px;

}

.højremenu {
	font-family:Tahoma;
	font-size:11px;
	color:#000;
	width: 96px;
}

.menu_white {
	background-color:#FFFFFF;
	height:auto;
}

#menuimage {
	background-image:url('../images/menu_image.jpg');
	background-repeat:no-repeat;
	font-family:Impact;
	font-size:13px;
	color:#FFF;
	text-decoration:none;
	width: 96px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #23627F;
}

#middle {
	float:left;
	width:545px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 25px;
	padding: 0px;
	background-color:#FFFFFF;
}
#login {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #006699;
	float: none;
	height: 20px;
	width: 800px;
	margin-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #23627F;
	padding-top: 5px;
}

.input {
	background-color:#EAEAEA;
	color:#000000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	border:1px solid #CCCCCC;
}

.banner {
	width:468px;
	border:0px;
	height:60px;
	position:absolute;
	top: 50px;
}

a.links {
	text-decoration:none;
	color:#006699;
}

a:active.links {
	color:#000000;
}

a:hover.links {
	text-decoration:underline;
	color:#000000;
}

a.admin {
	text-decoration:underline;
	color:#000000;
}

a:active.admin {
	text-decoration:none;
	color:#000000;
}

a:hover.admin {
	text-decoration:underline;
	color: #006699;
}

29 svar postet i denne tråd vises herunder
3 indlæg har modtaget i alt 7 karma

Sorter efter stemmer Sorter efter dato

Bruger #7826 @ 05.07.07 19:10

Har fjernet alt php fra din html fil, det kan du selv prøve at sætte ind igen, når vi har fået det til at virke...

men prøv med denne html kode:

Kode

<!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=iso-8859-1" />
<title>test</title>
<link href="css/css.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>



<div class="ramme">

  <div id="top"><div class="banner"><img src="images/bannercopy.jpg" width="468" height="60" /></div>
  </div>
	<div id="login">
<form action='?page=login' method='post' />
<span style='font-size:11px;'>Login ||</span> 
	
Brugernavn:
<input type='text' name='username' class='input' size='10' />
Kodeord:
<input type='password' name='password' class='input' size='10' />
<input type='submit' name='login' class='input' value='Log ind' />

<a href='?page=register' class='links'>Opret Bruger</a>
</form>
  </div>
	
	<div class="contenleft">

	  <div class="venstremenu">

<div id="menuimage">Generelt</div>

</div>
		<table width="100" border="0">
          <tr>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
          </tr>
          <tr>
            <td> </td>
          </tr>
        </table>
		<br />
	  <div class="venstremenu">
			<div id="menuimage">News Kategorier</div>
            
		    <table width="100" border="0">
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
              </tr>
              <tr>
                <td> </td>
              </tr>
            </table>
	    <br />

	  </div>
	</div>

  <div id="middle">
    <p><br />
      <br />
    </p>
  </div>


	<div class="contenright">
	  <div class="højremenu">
		  <div id="menuimage">Seneste indlæg</div>

		  
		  <br />
		  
	  </div>
	</div><br />
<br /><br />
<br /><br />


<div class="contenright">
		<div id="menuimage">Nyeste Brugere</div>
		
  </div>
</div>
</div>

</body>
</html>

og dette som css

Kode

html, body {
      margin:0px;
      padding:0px;
      height:100%;
      display: block;
   }
body {
	background-image:url('../images/bg.jpg');
	background-repeat:repeat;
	
	font-family:Verdana;
	font-size:11px;
}
.ramme, td {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCCCCC;
}


.ramme{
	position: absolute;
	text-align: left;
	left: 50%;
	margin-left: -401px;
	height: auto;
	width: 800px;
	background-color:#FFF;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #5d5d5d;
	border-left-color: #5d5d5d;	
	}

#top {
	width:800px;
	height:160px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../images/logo.jpg);
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #23627f;
}

.contenleft {
	width:auto;
	height:auto;
	float:left;
	margin-left:5px;
}

.contenright {
	width:96px;
	height:auto;
	margin-right:5px;
	padding:0;
	float:right;
	border:1px solid #23627f;
}

.venstremenu {
	font-family:Tahoma;
	font-size:11px;
	color:#000;
	width: 96px;

}

.højremenu {
	font-family:Tahoma;
	font-size:11px;
	color:#000;
	width: 96px;
}

.menu_white {
	background-color:#FFFFFF;
	height:auto;
}

#menuimage {
	background-image:url('../images/menu_image.jpg');
	background-repeat:no-repeat;
	font-family:Impact;
	font-size:13px;
	color:#FFF;
	text-decoration:none;
	width: 96px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #23627F;
}

#middle {
	float:left;
	width:545px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 25px;
	padding: 0px;
	background-color:#FFFFFF;
}
#login {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9px;
	color: #006699;
	float: none;
	height: 20px;
	width: 800px;
	margin-bottom: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #23627F;
	padding-top: 5px;
}

.input {
	background-color:#EAEAEA;
	color:#000000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	border:1px solid #CCCCCC;
}

.banner {
	width:468px;
	border:0px;
	height:60px;
	position:absolute;
	top: 50px;
}

a.links {
	text-decoration:none;
	color:#006699;
}

a:active.links {
	color:#000000;
}

a:hover.links {
	text-decoration:underline;
	color:#000000;
}

a.admin {
	text-decoration:underline;
	color:#000000;
}

a:active.admin {
	text-decoration:none;
	color:#000000;
}

a:hover.admin {
	text-decoration:underline;
	color: #006699;
}

Ved mig virker dette i hvert fald...

Bruger #12072 @ 06.07.07 07:53

Svaret er simpelt, for at lave en centeret side gør du følgende

Kode

body {
text-align:center;
}
.rammeud {
text-align:left;
width:800px;
margin: 0 auto; /* sættes til auto så den automatisk hopper ind på midten af siden */
}

De 2 forskellige mest brugtet metoder kan du finde her:
http://bluerobot.com/web/css/center1.html
http://bluerobot.com/web/css/center2.html

hvor center1 metoden klart er den bedste

Bruger #3143 @ 04.07.07 22:28

1.965

Prøv at sætte en padding på ".ramme". (gæt)

Siden har større problemer end centrering end layoutet. Der en del PHP-kode, som bliver skrevet ud på siden.

Bruger #3143 @ 04.07.07 18:31

1.965

Lad være med at poste koden i forum. Giv et link til siden i stedet for.

Bruger #12020 @ 04.07.07 19:06

Har den ikke på nettet.. kun på localhost

Bruger #3143 @ 04.07.07 19:26

1.965

Der findes tons vis at gratis webhosts du kan uploade den på. Og du kan bare slette den igen når dit spørgsmål er blevet besvaret.

Bruger #12020 @ 04.07.07 19:29

www.ziimx.zeekoo.dk/ug

Bruger #12020 @ 04.07.07 23:03

ved det er fordi der ik er php på den hjemmeside den ligger på..

Bruger #12020 @ 04.07.07 23:05

Padding har da ik noget a gøre med centering.. padding er jo det som er inde i boxen ..

Bruger #7826 @ 05.07.07 00:42

Prøv at ændre din "ramme" til dette:

Kode

.rammeud{
	position: absolute;
	text-align: left;
	left: 50%;
	margin-left: -401px;
	height: auto;
	width: fx 800px;
	background-color:#FFF;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #5d5d5d;
	border-left-color: #5d5d5d;	
	}

Dette skulle meget gerne gør det

Indlæg senest redigeret d. 05.07.2007 18:03 af Bruger #7826

<< < 1 2 3 > >>

Centering af Design

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler