probleme bei der darstellung der websiteForum » Webzone » (X)HTML & CSS » probleme bei der darstellung der website
Neues Thema-
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 Hlfte von width: 500px */ top: 340px; height: 40px; margin-top: -170px; /* negative Hlfte 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 fr eure hilfe
-
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 } ... -
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;"> <a href="index.php"><font face="arial black" size="+1">HOME</font></a> <a href="biography.php"><font face="arial black" size="+1">BIOGRAPHY</font></a> <a href="dates.php"><font face="arial black" size="+1">DATES</font></a> <a href="booking.php"><font face="arial black" size="+1">BOOKING</font></a> <a href="sets.php"><font face="arial black" size="+1">SETS</font></a> <a href="videos.php"><font face="arial black" size="+1">VIDEOS</font></a> <a href="pics.php"><font face="arial black" size="+1">PICS</font></a> <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 } ... -
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 } ... -
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 bld 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"> BIOGRAPHY </a></li> <li id="trennlinie"></li> <li><a href="dates.php"> DATES </a></li> <li id="trennlinie"></li> <li><a href="booking.php"> BOOKING </a></li> <li id="trennlinie"></li> <li><a href="sets.php"> SETS </a></li> <li id="trennlinie"></li> <li><a href="videos.php"> VIDEOS </a></li> <li id="trennlinie"></li> <li><a href="pics.php"> PICS </a></li> <li id="trennlinie"></li> <li><a href="impressum.php"> IMPRESSUM </a></li> </ul> </div>
Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 08.02.2012 um 20:59 Uhr ... -
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 dranfgt oder muss den per margin-top: -xxx;
an die navileiste dranfgen?
Der Beitrag wurde insgesamt 1 mal editiert, zuletzt 09.02.2012 um 12:59 Uhr ...
Antworten 
Zitat 
