Design an Auflösung anpassen @ tutorials.de: Tutorials, Forum & Hilfe

tadlos · 14.03.07 19:49

Hallo,

ich bin gerade dabei meine Homepage wieder auf den neusten Stand zu bringen.
Habe dazu jedoch eine Frage.
Ist es möglich das Layout über die ganze Browserfläche anzeigen zu lassen?
Wenn ja, kann ich das den auch so machen, dass das auch bei jeder Auflösung passiert?

Schöne Grüße Stefan

Hroudtwolf · 14.03.07 19:54

Je nach dem ob du mit Tabellen oder rein mit CSS arbeitest kannst du jeweils für die Hauptbereiche eine Breite von 100% angeben und die Unterbereiche jeweils relativ dazu unter prozentualer Grössenangabe arrangieren.
Dazu bedarf es keiner Java scripte.

tadlos · 14.03.07 20:09

Kann du oder irgendein anderer sagen wie das in Macromedia Dreamweaver geht?
Ich arbeite mit Tabellen.

musmus · 14.03.07 20:13

einfügen -> tabelle -> tabellenbreite: 100%

tadlos · 14.03.07 20:40

Mhh ich bekomme das nicht hin..
Bei mir sind an dauernt zwischenräume und alles verteilt sich auf mehrere Zeilen.

Hroudtwolf · 17.03.07 17:14

Zeig uns doch einfach schnell das Script.
Das würde uns besser helfen dir helfen zu können anstatt eine Raterunde zu machen.

tadlos · 17.03.07 19:36

Hallo,

ja stimmt.

Der Code der Index.php:

Code :

<HTML>
 
<HEAD>
 
<TITLE>index</TITLE>
 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
 
</HEAD>
 
<BODY BGCOLOR=#FFFFFF>
 
<link href="_stylesheet.css" rel="stylesheet" type="text/css">
 
<!-- ImageReady Slices (index.psd) -->
 
<div id="Layer1" style="position:absolute; width:209px; height:130px; z-index:1; top: 0px; left: 1px;">
 
<TABLE WIDTH=1024 BORDER=0 CELLPADDING=0 CELLSPACING=0>
 
    <TR>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=1 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=246 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=13 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=12 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=89 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=100 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=58 HEIGHT=1></TD>
 
    </TR>
 
    <TR>
 
        <TD COLSPAN=12>
 
            <IMG SRC="http://www.tutorials.de/forum/images/index_01.gif" WIDTH=1024 HEIGHT=178></TD>
 
    </TR>
 
    <TR>
 
        <TD COLSPAN=3>
 
            <IMG SRC="http://www.tutorials.de/forum/images/index_02.gif" WIDTH=260 HEIGHT=43></TD>
 
        <TD>
 
            <a href="?content=news"><IMG SRC="http://www.tutorials.de/forum/images/index_03.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>
 
        <TD>
 
            <a href="?content=me"><IMG SRC="http://www.tutorials.de/forum/images/index_04.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>
 
        <TD>
 
            <a href="?content=works"><IMG SRC="http://www.tutorials.de/forum/images/index_05.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>
 
        <TD>
 
            <a href="?content=friends"><IMG SRC="http://www.tutorials.de/forum/images/index_06.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>
 
        <TD>
 
            <a href="?content=pictures"><IMG SRC="http://www.tutorials.de/forum/images/index_07.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>
 
        <TD COLSPAN=2>
 
            <a href="?content=guestbook"><IMG SRC="http://www.tutorials.de/forum/images/index_08.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>
 
        <TD>
 
            <a href="mailto:stefan@tadlos-im.net"><IMG SRC="http://www.tutorials.de/forum/images/index_09.gif" WIDTH=100 HEIGHT=43 border="0"></a></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/index_10.gif" WIDTH=58 HEIGHT=43></TD>
 
    </TR>
 
    <TR>
 
        <TD COLSPAN=12>
 
            <IMG SRC="http://www.tutorials.de/forum/images/index_11.gif" WIDTH=1024 HEIGHT=101></TD>
 
    </TR>
 
    <TR>
 
        <TD WIDTH=247 HEIGHT=394 COLSPAN=2 align="left" valign="top" background="http://www.tutorials.de/forum/images/index_12.gif"></TD>
 
        <TD WIDTH=530 HEIGHT=394 COLSPAN=7 align="left" valign="top" background="http://www.tutorials.de/forum/images/index_13.gif"><?php
 
        $content = $content;
 
        if(!isset($content))
 
        $content    = "news";
 
        $endung     = ".php";
 
        $file       = $content.$endung;
 
        $error      = "error".$endung;
 
        if(file_exists($file))
 
            include($file);
 
        else
 
            include($error);
 
        ?></TD>
 
        <TD WIDTH=247 HEIGHT=394 COLSPAN=3 align="left" valign="top" background="http://www.tutorials.de/forum/images/index_14.gif">&nbsp;      </TD>
 
    </TR>
 
    <TR>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/index_15.gif" WIDTH=1 HEIGHT=52></TD>
 
        <TD COLSPAN=11 background="http://www.tutorials.de/forum/images/index_16.gif" WIDTH=1023 HEIGHT=52></TD>
 
    </TR>
 
</TABLE>
 
</div>
 
<!-- End ImageReady Slices -->
 
</BODY>
 
</HTML>

Hoffe ihr könnt mir helfen.

SG Stefan

Hroudtwolf · 17.03.07 23:09

Fast der komplette HTML-Code ist falsch bzw teilweise total unstrukturiert und Werte stehen ungequotet obwohl sie mehr als reine Zahl sind.
Das scheint ein Editor-Output zu sein. Leider kein sehr guter.

Weil ich das nicht alles verbessern möchte kann ich dir nur raten die Tabelle auf 100% Width zu setzen und relativ dazu die Spalten prozentual anzupassen.

Maik · 17.03.07 23:43

Hi,

mir ist da neben den fixen Breitenangaben eine weitere Unstimmigkeit in deinem Konzept aufgefallen: du zwängst die Tabelle mit einer Breite von 1024px und einer Höhe von 768px in ein DIV, das nur 209x130px messen soll.

tadlos · 18.03.07 16:04

Mhh ich denke dann mach ich das nochmal von vorne.

Also so ist der Code wenn ich die .html Datei von Photoshop in eine .php Datei umgewandelt habe.

Code :

<HTML>
 
<HEAD>
 
<TITLE>index</TITLE>
 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
 
</HEAD>
 
<BODY BGCOLOR=#FFFFFF>
 
<link href="_stylesheet.css" rel="stylesheet" type="text/css">
 
<!-- ImageReady Slices (index.psd) -->
 
<div id="Layer1" style="position:absolute; width:209px; height:130px; z-index:1; top: 0px; left: 1px;">
 
<TABLE WIDTH=1024 BORDER=0 CELLPADDING=0 CELLSPACING=0>
 
    <TR>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=1 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=246 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=13 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=12 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=89 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=100 HEIGHT=1></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/Abstandhalter.gif" WIDTH=58 HEIGHT=1></TD>
 
    </TR>
 
    <TR>
 
        <TD COLSPAN=12>
 
            <IMG SRC="http://www.tutorials.de/forum/images/index_01.gif" WIDTH=1024 HEIGHT=178></TD>
 
    </TR>
 
    <TR>
 
        <TD COLSPAN=3>
 
            <IMG SRC="http://www.tutorials.de/forum/images/index_02.gif" WIDTH=260 HEIGHT=43></TD>
 
        <TD>
 
            <a href="?content=news"><IMG SRC="http://www.tutorials.de/forum/images/index_03.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>
 
        <TD>
 
            <a href="?content=me"><IMG SRC="http://www.tutorials.de/forum/images/index_04.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>
 
        <TD>
 
            <a href="?content=works"><IMG SRC="http://www.tutorials.de/forum/images/index_05.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>
 
        <TD>
 
            <a href="?content=friends"><IMG SRC="http://www.tutorials.de/forum/images/index_06.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>
 
        <TD>
 
            <a href="?content=pictures"><IMG SRC="http://www.tutorials.de/forum/images/index_07.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>
 
        <TD COLSPAN=2>
 
            <a href="?content=guestbook"><IMG SRC="http://www.tutorials.de/forum/images/index_08.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>
 
        <TD>
 
            <a href="mailto:stefan@tadlos-im.net"><IMG SRC="http://www.tutorials.de/forum/images/index_09.gif" WIDTH=100 HEIGHT=43 border="0"></a></TD>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/index_10.gif" WIDTH=58 HEIGHT=43></TD>
 
    </TR>
 
    <TR>
 
        <TD COLSPAN=12>
 
            <IMG SRC="http://www.tutorials.de/forum/images/index_11.gif" WIDTH=1024 HEIGHT=101></TD>
 
    </TR>
 
    <TR>
 
        <TD WIDTH=247 HEIGHT=394 COLSPAN=2 align="left" valign="top" background="http://www.tutorials.de/forum/images/index_12.gif"></TD>
 
        <TD WIDTH=530 HEIGHT=394 COLSPAN=7 align="left" valign="top" background="http://www.tutorials.de/forum/images/index_13.gif">&nbsp;</TD>
 
        <TD WIDTH=247 HEIGHT=394 COLSPAN=3 align="left" valign="top" background="http://www.tutorials.de/forum/images/index_14.gif">&nbsp;      </TD>
 
    </TR>
 
    <TR>
 
        <TD>
 
            <IMG SRC="http://www.tutorials.de/forum/images/index_15.gif" WIDTH=1 HEIGHT=52></TD>
 
        <TD COLSPAN=11 background="http://www.tutorials.de/forum/images/index_16.gif" WIDTH=1023 HEIGHT=52></TD>
 
    </TR>
 
</TABLE>
 
</div>
 
<!-- End ImageReady Slices -->
 
</BODY>
 
</HTML>

Soweit ist doch noch alles richtig oder?

SG Stefan

GiFt-ZwErG · 18.03.07 16:10

Nein ist es nicht.
Du gibts die Größen der Tabellen fest an ( px ) aber wenn du es dynamisch haben möchtest, musst du diese in % angeben... 100% vom Bildschirm bzw vom Browser ist was anderes wie 1024px...
Bei einer Auflösung von 1024x768 ist beides gleich aber bei 1280x? passt sich das 100% Design an aber das 1024px bleibt einfach 1024px gross...

MFG
Sandro

tadlos · 18.03.07 16:24

Aber woher weiss ich den welche prozentwerte ich einsetzten soll?

oder muss ich einfach nur statt:

<TABLE WIDTH=1024 BORDER=0 CELLPADDING=0 CELLSPACING=0>

das hier eingeben:

<TABLE WIDTH=100% BORDER=0 CELLPADDING=0 CELLSPACING=0>

Edit: Hat sich erledigt, habe es gerade ausprobiert

GiFt-ZwErG · 18.03.07 16:30

Die äusserste Tabelle mit 100% und die anderen "inneren" Tabellen in der Größe wie man sie haben möchte.. zb. 60% und daneben eine Spalte mit 40%.. oder eine mit 20% und daneben eine mit 10%...

Nur nicht mehr wie 100% auf der kompletten Breite..

MFG
Sandro

tadlos · 18.03.07 17:01

Wäre das so richtig?

PHP-Code:


<HTML>



<HEAD>



<TITLE>index</TITLE>



<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">



</HEAD>



<BODY BGCOLOR=#FFFFFF>



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



<!-- ImageReady Slices (index.psd) -->



<div id="Layer1" style="position:absolute; width:209px; height:130px; z-index:1; top: 0px; left: 1px;">



<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>



    <TR>



        <TD>



            <IMG SRC="images/Abstandhalter.gif" WIDTH=1 HEIGHT=1></TD>



        <TD>



            <IMG SRC="images/Abstandhalter.gif" WIDTH=246 HEIGHT=1></TD>



        <TD>



            <IMG SRC="images/Abstandhalter.gif" WIDTH=13 HEIGHT=1></TD>



        <TD>



            <IMG SRC="images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>



        <TD>



            <IMG SRC="images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>



        <TD>



            <IMG SRC="images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>



        <TD>



            <IMG SRC="images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>



        <TD>



            <IMG SRC="images/Abstandhalter.gif" WIDTH=101 HEIGHT=1></TD>



        <TD>



            <IMG SRC="images/Abstandhalter.gif" WIDTH=12 HEIGHT=1></TD>



        <TD>



            <IMG SRC="images/Abstandhalter.gif" WIDTH=89 HEIGHT=1></TD>



        <TD>



            <IMG SRC="images/Abstandhalter.gif" WIDTH=100 HEIGHT=1></TD>



        <TD>



            <IMG SRC="images/Abstandhalter.gif" WIDTH=58 HEIGHT=1></TD>

    </TR>



    <TR>



        <TD COLSPAN=12><img src="images/index_01.gif" width=100% height=178></TD>

    </TR>



    <TR>



        <TD COLSPAN=3><img src="images/index_02.gif" width=100% height=43></TD>



        <TD>



            <a href="?content=news"><IMG SRC="images/index_03.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>



        <TD>



            <a href="?content=me"><IMG SRC="images/index_04.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>



        <TD>



            <a href="?content=works"><IMG SRC="images/index_05.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>



        <TD>



            <a href="?content=friends"><IMG SRC="images/index_06.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>



        <TD>



            <a href="?content=pictures"><IMG SRC="images/index_07.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>



        <TD COLSPAN=2>



            <a href="?content=guestbook"><IMG SRC="images/index_08.gif" WIDTH=101 HEIGHT=43 border="0"></a></TD>



        <TD>



            <a href="mailto:stefan@tadlos-im.net"><IMG SRC="images/index_09.gif" WIDTH=100 HEIGHT=43 border="0"></a></TD>



        <TD>



            <IMG SRC="images/index_10.gif" WIDTH=58 HEIGHT=43></TD>

    </TR>



    <TR>



        <TD COLSPAN=12>



            <IMG SRC="images/index_11.gif" WIDTH=100% HEIGHT=101></TD>

    </TR>



    <TR>



        <TD WIDTH=25$ HEIGHT=394 COLSPAN=2 align="left" valign="top" background="images/index_12.gif"></TD>



        <TD WIDTH=50% HEIGHT=394 COLSPAN=7 align="left" valign="top" background="images/index_13.gif"><?php



        $content = $content;



        if(!isset($content))



        $content    = "news";



        $endung        = ".php";



        $file         = $content.$endung;



        $error        = "error".$endung;



        if(file_exists($file))



            include($file);



        else



            include($error);



        ?></TD>



        <TD WIDTH=25% HEIGHT=394 COLSPAN=3 align="left" valign="top" background="images/index_14.gif">&nbsp;      </TD>

    </TR>



    <TR>



        <TD>



            <IMG SRC="images/index_15.gif" WIDTH=1 HEIGHT=52></TD>



        <TD COLSPAN=11 "images/index_16.gif" WIDTH=100% HEIGHT=52></TD>

    </TR>

</TABLE>



</div>



<!-- End ImageReady Slices -->



</BODY>



</HTML>

tadlos · 20.03.07 22:27

Hallo,

ich denke ich bekomme das jetzt hin.
Habe das noch mal ausprobiert.. So nach und nach sollte das klappen.
Ich muss nur noch in PS neu slicen glaube ich.

Danke schonmal.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Auflösung individuell anpassen

HP der Auflösung anpassen

Design der Auflösung und dem Browser anpassen

Background an Auflösung anpassen

Seite an die Auflösung anpassen

E-Mail:

Abonnieren Abbestellen