XHTMLforum - CSS Problem Design auf anderen Rechnern verschoben

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - CSS Problem Design auf anderen Rechnern verschoben (http://xhtmlforum.de/showthread.php?t=54019)

CSS Problem Design auf anderen Rechnern verschoben

Hallo,

ich doctor nun schon lange an meiner Homepage rum und bin quasi ein CSS Einsteiger. Ich hoffe nun auf Hilfe von euch....

ich habe mein CSS soweit zusammengesetzt und habe alles Dynamisch gehalten indem ich nur mit Prozentangaben gearbeitet habe. Auf meinem lokalen Rechner sieht das soweit auch echt super aus, wenn ich nun aber über meinen Laptop drauf zugreife, oder einen Kollegen drauf zugreifen lasse siehts aus wie Wurst....

Das ist meine Arbeit.

Die Farben sind absichtlich so gewählt.

Und nun noch der zugehörige Code:
Die index.htm

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Informatik Studium Online *** Herzlich Willkommen</title>

<link rel = "stylesheet" href="Design.css" type = "text/css"> 

</head>

<body>



<pre>

        <div id = "maincell">

                <div id = "top" style="margin-left:20%; margin-right:20%; margin-top:0%;"><img src="GFX/banner.jpg;" align="absmiddle">        </div>

                        <div id = "content" style="margin-right:20%; margin-left:20%; overflow:auto;"> 

                                <center> 

                                        <p>cada</p>

                                        <p>cada</p>

                                        <p>cada</p>

                                        <p>cada</p>

                                        <p>cada</p>

                                        <p>cada</p>

                                        <p>cada</p>

                                        <p>cada</p>

                                        <p>cada</p>

                                        <p>cada</p>

                                        <p>cada</p>

                                </center>

                </div>

        </div>

        <div id = "navigation" style="margin-left:10%; margin-top:45%;">

                <center>

                        <p>oiewqhgfoqwitj</p>

                </center>

        </div>

</pre>

</body>

</html>

Und das CSS:

Code:

/* CSS Document */

body{

        font-family: Arial,sans-serif;

        color: #333333;

        line-height: 1.166;        

        margin: 0px;

        padding: 0px;

        background-color:#000000;

}



#maincell{

        position: absolute;

        background-color: #0099FF;

        margin-right: 10%;

        margin-left: 10%;

        margin-bottom: 10%;

        top:0%;

        min-width:80%;

        min-height: 80%;

}



#top{

        background-image: url(GFX/banner.jpg) no-repeat;

        min-width:728px;

        min-height:90px;

        }



#content{

        position:absolute;

        background-color: #CCCCCC;

        min-width: 60%;

        min-height: 60%;

        max-height: 60%;

         }

         

#navigation{

        position: absolute;

        background-color: #0099FF;

        min-width: 80%;

        min-height: 10%;

        }

Wo liegt mein Fehler???

Desweiteren habe ich folgendes Problem. Da ich die Navigation mittels PHP einbinden will, habe ich mir XAMPP installiert, wenn ich die HP nun über den localhost aufrufe, wird mir die TOP Grafik nicht mehr angezeigt.

Ich hoffe ihr könnt mir helfen.

Grüße,

MALPI

Hallo MALPI,

also das erste das mich etwas verwundert hat, ist, wieso du in html Positionierungen vornimmst. Das macht man eigentlich mit CSS.
Also z. B. das hier

Code:

<div id = "top" style="margin-left:20%; margin-right:20%; margin-top:0%;"><img src="GFX/banner.jpg;" align="absmiddle">        </div>

                        <div id = "content" style="margin-right:20%; margin-left:20%; overflow:auto;">

Setze das mal mit CSS um, das könnte helfen, aber ist glaube ich für dein Problem keine Gesamtlösung. Denn du hast in deinem Sheet noch einige Sachen drin die dir Probleme machen können.

Zu dem Problem mit deinem Bild: Hast du denn auch den Pfad richtig angegeben?

Ich schlage dir einfach mal vor dich in aller Ruhe mit "Layouten" zu befassen.
Dazu kann dir helfen:

css4you und dann auch noch das hier und zu guter letzt noch dieser hier .

Solltest du noch mehr Fragen haben, immer her damit.:lol:

Moin,

Zitat:

Zitat von MALPI (Beitrag 405804)

ich habe mein CSS soweit zusammengesetzt und habe alles Dynamisch gehalten indem ich nur mit Prozentangaben gearbeitet habe.

mit position:absolute und festen Höhen wird dein Layout dynamisch wie ein Amboß und flexibel wie ne Eisenbahnschiene. :p

Nein im Ernst, CSS-mäßig ist da fast alles ziemlich "schräg". :)

Meiner Meinung nach solltest du dir zunächst mal eine solide CSS-Grundlage aneignen, bevor du selbstständig eine HP gestaltest.

Little Boxes ist dazu sehr gut geeignet. ;)

Moin moin,

ooook, das waren nun nicht die Antworten mit denen ich gerechnet hatte :D. Aber nun gut dann fange ich mal an zu lesen und verschaffe mir ne ordentliche Grundlage...

Danke für die Infos.

MfG

MALPI