Loading...   Upload Image

probleme bei der darstellung der websiteForum » Webzone » (X)HTML & CSS » probleme bei der darstellung der website

Neues Thema verfassen Neues Thema

  • rapidhunterUser ist offline
    Newbie



    Registriert: 27.01.2012
    Beitraege: 15

    05.02.2012 um 22:43 Uhr

    Hi,

    ich programmiere gerade ein website und ich hab das problem wenn ich das bei mir auf mac anschaue dann stellt es mir die website ordentlich dar (safari) aber wenn ich das über einen windows rechner anschaue dann bleibt zwar der header in der mitte aber alles andere verschiebt sich nach rechts obwohl ich das mittig ausgerichtet habe..

    was stimmt nicht was mach ich falsch? :(

    hier der code: (alles was bei den div elementen unter style steht wird noch in die css datei übertragen)

    index.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <html>
    <head>
    <title>Dj Chelios | Danger is Radioaktiv</title>
    <meta name="robots" content="DJ Chelios,Philipp Schurig,Musik,DJ,Necomer,Crank">
    <meta name="keywords" content="DJ Chelios,Musik,Necomer,Philipp Schurig,Crank">
      
      <link rel="stylesheet" type="text/css" href="css/style.css"/>
        
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<meta http-equiv="imagetoolbar" content="no" />
    	<meta http-equiv="Content-Language" content="de" />
    </head>
    <body style="margin:0;padding:0;" link="#ffffff" alink="black" vlink="#ffffff">
    
    <!-- Header start -->
       <div><center> <?php include ("header.html"); ?> </center></div>
    <!-- Header End -->
    
    <!-- Navi Start -->
       <?php include ("navi.html"); ?>
    <!-- Navi End -->
    
    <!-- Anzeigen Start -->
    <!-- Anzeigen End -->
    
    <!-- Main Start -->
        <div style="margin-left:153px;background-color: black;width: 975px;height:1940px;text-color:white">
    
    <div id="ram">
    <div id="header">
    			<h1>LAST POSTS</h1>
    		</div>
    				
    <div id="content">
    		
    <?php // news.php
    
    include('config.inc.php'); 	// DB-Verbindung einbinden
    include('functions.php'); 	// Funktionen einbinden
    
    // News auslesen
    $abfrage = mysql_query("SELECT id FROM news");
    $total = mysql_num_rows($abfrage); 					// Anzahl aller Zeilen in DB ermitteln
    
    // ---------------------- Seitennavigationsdaten --------------------------------------------------
    
    $per_page = "6";      		// Anzahl der News die Pro Seite ausgegeben werden sollen
    $p = "10";                  // Anzahl der Links die in der Seitenavigation ausgegeben werden
    
    // Blaetterfunktion aufrufen
    list ($start, $ende) = get_navi($_GET['go'], $total, 'index.php?go=', false, $per_page, $p);
    // ---------------------- ENDE Seitennavigationsdaten----------------------------------------------
    
    $abfrage = mysql_query("SELECT id, autor, title, news, DATE_FORMAT(date, '%d.%m.%Y') AS datum FROM news ORDER BY date DESC LIMIT $start,$ende");
    
    // News ausgeben ausgeben
    while($row = mysql_fetch_object($abfrage)){
        
       // Anzahl der Kommentare ermitteln
        $comments = mysql_query("SELECT id FROM comments WHERE news_id='$row->id'"); 
    	$com_num = mysql_num_rows($comments); // Anzahl der Kommentare
    	
        echo "<div class=\"news\">\n"; 
        echo "<h2>".$row->title."\n <small>verfasst von ".$row->autor." am ".$row->datum." | \n";
        echo "<a href=\"comments.php?id=".$row->id."\">Kommentare ".$com_num."</a></small>\n </h2>";
    
    	echo "<p>".bbcode($row->news)."</p>";
        echo "</div>\n";
    } // close while
    
    // -------------------------------------- Seitennavigation ausgeben ----------------------------
    
    get_navi($_GET['go'], $total, 'index.php?go=', true, $per_page, $p);
    
    // -------------------------------------- Seitennavigation ende --------------------------------
    
    ?>
    </div>
    </div>
        </div>
    <!-- Main End -->
    
    <!-- Footer Start -->
         <?php include ("footer.html"); ?>
    <!-- Footer End -->
    </body>
    </html>


    style.css

    a {text-decoration:none}
    a:hover {color: red}
    
    #centeredDiv
    {
    [B]position: absolute;
    width: 975px;
    margin-left: 250px; /* negative Hälfte von width: 500px */
    top: 340px;
    height: 40px;
    margin-top: -170px; /* negative Hälfte von height: 300px */[/B]
    }
    
    #content {
        clear: left;
        float: left;
        width: 550px;
        padding: 0 34px 0 5px;
        margin: 15px 0 15px;
    
    }
    
    .news{
    	width: 500px;
    	border-bottom: 2px solid #E0E0E0;
    	padding: 5px 2px;
    	margin: 0px 0px 10px;
    }
    
    #ram {
    	height: 1100px;
        width: 975px;
        margin: 0px auto;
        color: white;
    }
    
    #header {
    	top: 20px;
        float: left;
        border-bottom: 5px solid #ccc;
        height: 48px;
        width: 500px;
        padding-left: 30px;
    }
    
    p { padding: 5px; margin:0px; }
    
    .pages{
    	border: 1px solid #E0E0E0;
    	padding: 2px 7px;
    	float: right;
    	margin: -3px 0 0;
    }
    
    .current {
    	border: 1px solid #E0E0E0;
    	padding: 4px 7px;
    	color: #ffffff; 
    }
    
    h2{
        font: bold 1em Arial, Sans-Serif;
        margin: 0 0 12px;
    }
    
    	h2 small{
    		display: block;
    		color: #737373;
    		font-weight: normal;
    		font-size: .5.1em;
    	}


    danke schonmal für eure hilfe



  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    06.02.2012 um 09:11 Uhr

    Kann man sich das irgendwo online live und in farbe mal ansehen?

    Bzw. versuch mal das <div id="ram"> unterhalb des body Tags zu beginnen, dann sollte alles mittig ausgerichtet sein ;)



    ... { signatur } ...
  • rapidhunterUser ist offline
    Newbie



    Registriert: 27.01.2012
    Beitraege: 15

    06.02.2012 um 10:57 Uhr

    hier kann man sich das anschauen: www.djchelios.info/index.php



  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    06.02.2012 um 15:52 Uhr

    Hier saemtliche margin angaben entfernen und dann #ram eine Breite von 980px zuweisen, sollte helfen ;)

    <div id="ram">
    <!-- Header start -->
       <div style="margin-left:153px;border:0"><a href="index.php" target="_self"><img src="images/header.gif" border="0" height="300px" width="975px"></a></div>
    <!-- Header End -->
    
    <!-- Navi Start -->
       <div style="margin-left:153px;padding:0;line-height:40px;background-image:url(images/navi.gif);border:0;width:975px;height:40px;background-repeat:no-repeat;">
    &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;<a href="index.php"><font face="arial black" size="+1">HOME</font></a>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                    <a href="biography.php"><font face="arial black" size="+1">BIOGRAPHY</font></a>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="dates.php"><font face="arial black" size="+1">DATES</font></a>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="booking.php"><font face="arial black" size="+1">BOOKING</font></a>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="sets.php"><font face="arial black" size="+1">SETS</font></a>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="videos.php"><font face="arial black" size="+1">VIDEOS</font></a>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="pics.php"><font face="arial black" size="+1">PICS</font></a>&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;
                    <a href="impressum.php"><font face="arial black" size="+1">IMPRESSUM</font></a>
    </div><!-- Navi End -->
    
    <!-- Anzeigen Start -->
    <!-- Anzeigen End -->
    
    <!-- Main Start -->
        <div style="margin-left:153px;background-color: black;width: 975px;height:1940px;text-color:white">
    
    <div id="header">



    ... { signatur } ...
  • rapidhunterUser ist offline
    Newbie



    Registriert: 27.01.2012
    Beitraege: 15

    07.02.2012 um 00:49 Uhr

    DANKE DANKE DANKE..hat super funktioniert.

    leider bleibt 1 probleme..

    1.)im safari zeigt es mir jetzt zwischen header und navi einen zwischenraum an..im firefox ist dieser um das doppelte größer..wenn ich den zwischenraum im safari schließe dann zeigt der mir im firefox nur den die hälfte des abstandes an.

    Was mach ich nun wieder falsch?



    Der Beitrag wurde insgesamt 2 mal editiert, zuletzt 07.02.2012 um 11:17 Uhr ...
  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    07.02.2012 um 13:34 Uhr

    Wenn ich so ne 'Navigation' wie deine da sehe, wird's mir ganz dolle gruselig, aber sowas von ...

    Dein Code ist stellenweise sowas von kraut und rueben maessig,
    sich da durch zu wuehlen ist nicht wirklich angenehm.

    Fang doch zu erst mal damit an, dass du saemtliche CSS Anweisungen in deine CSS Datei verfrachtest, wofuer haste die denn sonst?

    Und anschliessend, wenn der CSS Teil sich auch wirklich in der CSS Datei abspielt,
    aenderst du dein eigenartiges <a> ..</a> - LERZEICHEN LEERZEICHEN [usw.] - Konstrukt von einer Navigation in eine schoene uebersichtliche Listen-Navigation um.

    Wie sowas geht, steht hier => http://de.selfhtml.org/css/layouts/navigationsleisten.htm#horizontal

    Beispiel:

    <ul id="top_navi">
        <li><a href="index.php"> HOME </a></li>
        <li><a href="biography.php"> BIOGRAPHY </a></li>
        <li><a href="dates.php"> DATES </a></li>
        <li><a href="booking.php"> BOOKING </a></li>
        <li><a href="sets.php"> SETS </a></li>
        <li><a href="videos.php"> VIDEOS </a></li>
        <li><a href="pics.php"> PICS </a></li>
        <li><a href="impressum.php">IMPRESSUM</a></li>
    </ul>


    Und dann schauen wir mal, wie wir die Zwischenraeume da weg bekommen ;)



    ... { signatur } ...
  • rapidhunterUser ist offline
    Newbie



    Registriert: 27.01.2012
    Beitraege: 15

    08.02.2012 um 20:56 Uhr

    so bin heut endlich mal dazugekommen die navileiste in eine liste zu stecken.

    leider bleibt das problem weiterhin bestehen mit dem abstand.
    und jetzt gibt es auch noch ein anderes problem..egal was ich versuche mit der liste es bleibt links immer der gleiche rand und alles andere verschiebt sich nach hinten raus..das sieht blöd aus!

    was überseh ich jetzt schon wieder.

    entschuldige das ich solche fragen stelle.aber bis jetzt hab ich nur immer schnell schnell eine website programmiert und nie so richtig auf alles geachtet.jetzt will ich nach langer zeit aber mal wieder ranglotzen damit das diesmal 1000% klappt :)

    hier ist meine css datei:

    a {text-decoration:none}
    a:hover {color: red}
    
    #body {
    	margin: 0;
    	padding: 0; 
      }
      
    /* Navi Start */
        
    #navi {
    	background-color: black;
        font: normal 80% Helvetica, Arial, sans-serif;
    	text-align: left;
    	width:971px;
    	height:38px;
    	background-repeat:no-repeat;
        border-top-width: 2px;
        border-top-style: solid;
        border-top-color: red;
        border-right-width: 2px;
        border-right-style: solid;
        border-right-color: red;
        border-left-width: 2px;
        border-left-style: solid;
        border-left-color: red;
    	
    }
    
    #trennlinie {
    	border-right-width:1px;
    	border-right-style:solid;
    	border-right-color:red;
    	border-right-align: center;
    }
    
    ul#top_navi li {
        list-style: none;
        display: inline;
        margin: 0.4em;
    	padding: 0.7em;
      }
    
    /* Navigation End */
      
    #content {
        clear: left;
        float: left;
        width: 550px;
        height: 1940px;
        padding: 0 34px 0 5px;
        margin: 15px 0 15px;
    
    }
    
    .news{
    	width: 500px;
    	height: 285px;
    	border-bottom: 2px solid #E0E0E0;
    	padding: 5px 2px;
    	margin: 0px 0px 10px;
    }
    
    #ram {
    	height: 2280px;
        width: 975px;
        margin: 0px auto;
        color: white;
    }
    
    #header {
    	top: 20px;
        float: left;
        border-bottom: 5px solid #ccc;
        height: 48px;
        width: 480px;
        padding-left: 30px;
    }
    
    p { padding: 5px; margin:0px; }
    
    .pages{
    	border: 1px solid #E0E0E0;
    	padding: 2px 7px;
    	float: right;
    	margin: -3px 0 0;
    }
    
    .current {
    	border: 1px solid #E0E0E0;
    	padding: 4px 7px;
    	color: #ffffff; 
    }
    
    h2{
        font: bold 1em Arial, Sans-Serif;
        margin: 0 0 12px;
    }
    
    	h2 small{
    		display: block;
    		color: #737373;
    		font-weight: normal;
    		font-size: .5.1em;
    	}


    und hier meine navileiste:

    <div id="navi">
    <ul id="top_navi">
        <li><a href="index.php"> HOME </a></li>
        <li id="trennlinie"></li>
        <li><a href="biography.php"> &nbsp;&nbsp;&nbsp;BIOGRAPHY </a></li>
        <li id="trennlinie"></li>
        <li><a href="dates.php"> &nbsp;&nbsp;&nbsp;DATES </a></li>
        <li id="trennlinie"></li>
        <li><a href="booking.php"> &nbsp;&nbsp;&nbsp;BOOKING </a></li>
        <li id="trennlinie"></li>
        <li><a href="sets.php"> &nbsp;&nbsp;&nbsp;SETS </a></li>
        <li id="trennlinie"></li>
        <li><a href="videos.php"> &nbsp;&nbsp;&nbsp;VIDEOS </a></li>
        <li id="trennlinie"></li>
        <li><a href="pics.php"> &nbsp;&nbsp;&nbsp;PICS </a></li>
        <li id="trennlinie"></li>
        <li><a href="impressum.php"> &nbsp;&nbsp;&nbsp;IMPRESSUM </a></li>
    </ul>
    </div>



    Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 08.02.2012 um 20:59 Uhr ...
  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    09.02.2012 um 11:11 Uhr

    Hatten wir nicht gesagt, du schmeisst saemtliche CSS Angaben auch in die CSS Datei? ...

    Nunja, dein Abstandsproblem liegt nicht an der Navi alleine, da spielen einige Faktoren eine Rolle,
    wie z.B. die Float Angabe von #header, die na nix zu suchen hat ...

    Probiers mal so aus, Abstaende sollten behoben sein...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Dj Chelios | Danger is Radioaktiv</title>
    <meta content="DJ Chelios,Philipp Schurig,Musik,DJ,Necomer,Crank" name="robots" />
    <meta content="DJ Chelios,Musik,Necomer,Philipp Schurig,Crank" name="keywords" />
    
    <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" />
    <meta content="no" http-equiv="imagetoolbar" />
    <meta content="de" http-equiv="Content-Language" />
    
    <style >
    a {
    	text-decoration: none;
    	color: #fff;
    }
    a:hover {
    	color: red;
    }
    #body {
    	margin: 0;
    	padding: 0;
    }
    /* Navi Start _________________________________________________________*/
    ul#top_navi {
    	position: relative;
    	top: -5px;
    	background-color: black;
    	height: 38px;
    	width: 966px;
    	border-top: 2px solid red;
    	border-right: 2px solid red;
    	border-left: 2px solid red;
    	padding: 0 0 0 5px;
    	margin: 0;	
    }
    
    ul#top_navi li {
    	list-style: none;
    	display: inline;
    	margin: 0.4em;
    	padding: 0;
    }
    
    ul#top_navi li a{
    	font: normal 1.2em Helvetica, Arial, sans-serif;
    	color: #fff;
    	line-height: 1.9em;
    }
    
    ul#top_navi li a:hover {
    	color: red;
    }
    
    
    #trennlinie {
    	border-right-width: 1px;
    	border-right-style:solid;
    	border-right-color:red;
    	border-right-align: center;
    	border-right-height: 30px
    }
    
    /* Navigation End ______________________________________________________*/
    #content {
    	height: 1940px;
    	padding: 0 34px 0 5px;
    	margin: 15px 0 15px;
    }
    .news {
    	width: 500px;
    	height: 285px;
    	border-bottom: 2px solid #E0E0E0;
    	padding: 5px 2px;
    	margin: 0px 0px 10px;
    }
    #ram {
    	background: black;
    	height: 2280px;
    	width: 975px;
    	margin: 0px auto;
    	color: white;
    }
    #header {
    	width: 900px;
    }
    
    #footer{
    	width: 100%; 
    	height: 120px; 
    	border-top: 5px solid red; 
    	background-color: black;
    }
    
    p {
    	padding: 5px;
    	margin: 0px;
    }
    .pages {
    	border: 1px solid #E0E0E0;
    	padding: 2px 7px;
    	float: right;
    	margin: -3px 0 0;
    }
    .current {
    	border: 1px solid #E0E0E0;
    	padding: 4px 7px;
    	color: #ffffff;
    }
    
    h1{
    	border-bottom: 5px solid #ccc;
    	padding-left: 30px;
    }
    h2 {
    	font: bold 1em Arial, Sans-Serif;
    	margin: 0 0 12px;
    }
    h2 small {
    	display: block;
    	color: #737373;
    	font-weight: normal;
    	font-size: .5.1em;
    }
    </style>
    </head>
    
    <body id="body">
    
    <div id="ram">
    	<!-- Header start -->
    	<div id="header">
    		<a href="http://www.djchelios.info/index.php" ><img border="0" src="index.php-Dateien/header.gif" /></a><br/>
    
    		<ul id="top_navi">
    			<li><a href="http://www.djchelios.info/index.php">HOME </a></li>
    			<li id="trennlinie"></li>
    			<li><a href="http://www.djchelios.info/biography.php">BIOGRAPHY </a>
    			</li>
    			<li id="trennlinie"></li>
    			<li><a href="http://www.djchelios.info/dates.php">DATES </a></li>
    			<li id="trennlinie"></li>
    			<li><a href="http://www.djchelios.info/booking.php">BOOKING </a>
    			</li>
    			<li id="trennlinie"></li>
    			<li><a href="http://www.djchelios.info/sets.php">SETS </a></li>
    			<li id="trennlinie"></li>
    			<li><a href="http://www.djchelios.info/videos.php">VIDEOS </a></li>
    			<li id="trennlinie"></li>
    			<li><a href="http://www.djchelios.info/pics.php">PICS </a></li>
    			<li id="trennlinie"></li>
    			<li><a href="http://www.djchelios.info/impressum.php">IMPRESSUM </a>
    			</li>
    		</ul>
    	</div>
    
    	<div id="content">
    			<h1>LAST POSTS</h1>
    
    			<div class="news">
    				<h2><a href="http://www.djchelios.info/comments.php?id=25">mfj</a><br />
    				<small>verfasst von admin am 05.02.2012 |
    				<a href="http://www.djchelios.info/comments.php?id=25">Kommentare 
    				0</a></small> </h2>
    				<p></p>
    				<table>
    					<tr>
    						<td>
    						<img \="" alt="" src="index.php-Dateien/151025d1280929005-ihr-hochzeit-dj-von-mobydisc-hydj_button_2.jpg" /></td>
    						<td>hallo du da :) tltklltdkztdztdztdzdztdzdztdzd<br />
    						khxkfxkgfxjgfx<br />
    						hfxkhfxfxkhfxkh</td>
    					</tr>
    				</table>
    				<p></p>
    			</div>
    
    			<div id="navigation">
    				<span class="pages">Seite 1 von 2</span> <span class="current">1</span>
    				<a href="http://www.djchelios.info/index.php?go=2">2</a>
    				<a href="http://www.djchelios.info/index.php?go=2" title="Eine Seite weiter blaettern">»</a> 
    			</div>
    	</div>
    				<br style="clear: left;" />
    
    </div>
    
    <div id="footer"></div>
    
    </body>
    
    </html>




    ... { signatur } ...
  • rapidhunterUser ist offline
    Newbie



    Registriert: 27.01.2012
    Beitraege: 15

    09.02.2012 um 12:43 Uhr

    DANKE DANKE DANKE!!!

    endlich funktioniert es
    ich schreib jetzt alles in die css datei rein ;)

    aber jetzt bleibt der ,,content" mit abstand kann man das machen das der automatisch sich dranfügt oder muss den per margin-top: -xxx;
    an die navileiste dranfügen?



    Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 09.02.2012 um 12:59 Uhr ...
  • AliceUser ist offline
    Admin


    Alice

    Registriert: 14.12.2006
    Beitraege: 1059

    09.02.2012 um 13:42 Uhr

    Haste das genau so uebernommen, wie ich es gepostet hatte?

    Nee, hast nicht - ich seh zumindest bei http://www.djchelios.info/index.php nix davon ...

    Aender das mal so wie ich es gepostet hatte ab und dann mach mal aus margin: 15px 0 15px; bei #content
    margin: 0 0 15px;
    ...



    ... { signatur } ...

[ 1 ] 2 » ... Letzte » Seite 1 von 2


Affiliates:   Blue-Graphics  •   Pat DG  •   Gallery Yuri  •   The Seduction  •   Chibi Graphics  •   Colorful Gfx  •   Design Grafixx  • Show all ...
designenlassen.de - Der Design-Marktplatz für Webdesign, Logo-Design, Flyerdesign u.v.m.        ALL-INKL.COM - Webhosting Server Hosting Domain Provider