Office Forum
www.Office-Loesung.de
Access :: Excel :: Outlook :: PowerPoint :: Word :: Office :: Wieder Online ---> provisorisches Office Forum <-
Verschiedene Monitore, versch. Darstellung, CSS statt Frames
Gehe zu Seite 1, 2, 3  Weiter
zurück: Excel-Tabelle in html einbinden weiter: Probleme mit ToolTips Unbeantwortete Beiträge anzeigen
Neues Thema eröffnen   Neue Antwort erstellen     Status: Antwort Facebook-Likes Diese Seite Freunden empfehlen
Zu Browser-Favoriten hinzufügen
Autor Nachricht
Tom2002
Der einzig Wahre Leuchtturm - Pilsum


Verfasst am:
19. März 2007, 23:49
Rufname:
Wohnort: Düsseldorf

Verschiedene Monitore, versch. Darstellung, CSS statt Frames - Verschiedene Monitore, versch. Darstellung, CSS statt Frames

Nach oben
       

Moin,

so ich geb zu, dass ich mich gerade zwangsweise durch das Thema CSS gewühlt habe, da ich eine Webseite dringend von den Frames befreien wollte.

Also habe ich eine index.html mittels CSS und PHP aufgebaut, die 4 Abschnitte unterteilt ist.
Code:
--------------------------------------------------------------
                  Header
--------------------------------------------------------------
        +
        +
        +
Menu +             inhalt
        +
        +
        +
--------------------------------------------------------------
                 Fußbereich
--------------------------------------------------------------
1) Menu

Auf einem 17'' Monitor erscheint im Menu ein Scrollballken, weil ein Eintrag zu breit.

Wie kann ich das besser darstellen? Den CSS-Style, würde ich bei Interesse gerne hier einstellen.

EDIT: Hab gerade festgestellt, dass ich im Menu mit px anstatt % gearbeitet habe. Aber die Umstellung auf % würde doch mein Problem auch nicht lösen, oder?

2)Im Header besteht bereits eine Hintergrund Grafik(Hintergrundfarbverlauf). Darauf möchte ich gerne jeweils rechts und links jeweile eine weitere Grafik plazieren und in der Mitte einen zentrierten Text.
Code:
+Bild +            +Text+               + Bild+
-------------------------------------------------
Wie kann ich es realisieren, dass die Bilder jeweils an den Rändern plaziert werden, egal welcher Monitor diese Seite gerade anzeigt?

Kann ich den Hintergrundfarbverlauf auch mit PHP nachbauen?

Hoffe, ich hab jetzt keinen vergrault, erwarte auch keinen fertigen Code, sondern einfach praxisbezogene Hilfestellung.

Ciao

Tom

_________________
Win7, Win2008 R2, Office 2010 Prof

Wer mit Fortuna Düsseldorf groß geworden ist, der fürchtet sich auch vor Access nicht.
Die Nutzlosigkeit des Daseins anzuerkennen heisst, Fortuna-Fan zu sein.
Vielgelesen
Gast


Verfasst am:
20. März 2007, 08:38
Rufname:


AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

Hallo Tom,
Zitat:
Wie kann ich das besser darstellen? Den CSS-Style, würde ich bei Interesse gerne hier einstellen.

EDIT: Hab gerade festgestellt, dass ich im Menu mit px anstatt % gearbeitet habe. Aber die Umstellung auf % würde doch mein Problem auch nicht lösen, oder?
ohne Quelltext, einschließlich CSS, kann man wirklich nicht helfen.

Zitat:
Wie kann ich es realisieren, dass die Bilder jeweils an den Rändern plaziert werden, egal welcher Monitor diese Seite gerade anzeigt?
Eine Grafik läßt du als Hintergrundgrafik, die andere richtes du nach Rechts aus.

Zitat:
Kann ich den Hintergrundfarbverlauf auch mit PHP nachbauen?
Warum sollte es nicht gehen?

Zuletzt bearbeitet von Vielgelesen am 20. März 2007, 11:08, insgesamt einmal bearbeitet
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
20. März 2007, 10:35
Rufname:
Wohnort: Aachen

AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

Hallo Tom,

zunächst kann ich mich nur Vielgelesen anschliessen, ohne Code wird es ein Fischen im Trüben. Im Übrigen ist es auch egal welche Zollgröße der Monitor hat, sondern die eingestellte Auflösung ist maßgeblich. Du kannst auch einen 20'' Monitor nehmen und eine geringe Aulösung einstellen, dann hast auch ein Problem (als Entwickler). Menschen mit Sehbehinderungen dürften das wohl häufiger machen.

Zitat:
EDIT: Hab gerade festgestellt, dass ich im Menu mit px anstatt % gearbeitet habe. Aber die Umstellung auf % würde doch mein Problem auch nicht lösen, oder?
Nicht wirklich, denn wenn du Text hast nimmt dieser einfach eine bestimmte Breite und Höhe ein, ebenso Bilder. Da kannst vielleicht noch was über padding, font-size oder line-height steuern, aber irgendwann kommst du an die Grenze der Lesbarkeit. Ich würde dem Menü eine, entsprechend dem längsten Eintrag, feste Breite geben und den Inhaltsbereich variabel halten.

Zitat:
Auf einem 17'' Monitor erscheint im Menu ein Scrollballken, weil ein Eintrag zu breit.
Wundert mich eigentlich, wenn du nur CSS nutzt. Dann müsste der Inhalt überlaufen und sich in den Inhaltsbereich schieben. Siehst du, hier kommen die Grenzen, wenn kein Quelltext da ist.

Zitat:
Kann ich den Hintergrundfarbverlauf auch mit PHP nachbauen?
Möglich, halte ich aber für unsinnig. Ich würde eher einen 2 Pixel breite Grafik ausspielen und sie als Hintergrundgrafik in X- oder Y-Richtung (je nach Verlauf) kacheln. Die Grafik dürfte nur 1 maximal 2Kb groß sein und damit kleiner als jeder Code.

Das Positionieren der Grafiken im Header kann man unterschiedlich angehen. Entweder über div's, die nebeneinander gelegt werden oder über eine Liste, die horizontal ausgerichtet ist.

Als Tipp am Rande: Zum Testen von CSS Seiten kann ich den Firefox mit dem Web Developer Plug-In sehr empfehlen. Damit kannst u.a. Block Level Elemente farbig umranden lassen und sehr schön sehen, wie sie positioniert sind. Möglich, dass es sowas auch für den IE gibt.

Gruß

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
waldwuffel
Hardware & OS, Sicherheit


Verfasst am:
20. März 2007, 11:16
Rufname:
Wohnort: Bergisch Gladbach

AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

Hallo, Tom Very Happy

Als Ergänzung zu maninwebs Antwort:

Design-Elemente sind ansich nicht die Aufgabe von PHP - da muss CSS ran. Mit PHP kannst du allerdings wunderbar serverseitig Scripts (z.B. zum Zugriff auf Datenbanken, zum Steuern eines Datei-Uploads oder Auswertung eines Formulars) ablaufen lassen.

Für den Firefox würde ich Dir (ergänzend oder alternativ) die Extension Firebug empfehlen. Mit Firebug kannst Du "on-the-fly" Veränderungen im Stylesheet testen, ohne diese direkt "hart" in das Dokument speichern zu müssen. Desweiteren kannst Du mit Firebug nachvollziehen, aus welchen CSS-Klassen ein Element seine Formatierung bezieht (Vererbungshierarchie !!!).

Ich möchte Firebug sowohl auf der Arbeit als auch privat nicht mehr missen.

Gruß,
wuffel

_________________
Dein Feedback ist mein täglich' Brot - lass mich nicht verhungern ...
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
20. März 2007, 11:30
Rufname:
Wohnort: Aachen


AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

Hallo waldwuffel,

Zitat:
Als Ergänzung zu maninwebs Antwort:
Du Schmeichler! Smile
Ich bin aber, wie man so schön sagt, die "bessere" Hälfte.

Die von dir empfohlene Extension werde ich mir auf jeden Fall mal näher anschauen. Hört sich interessant an.

Gruß,

womaninweb

Nachtrag: Das Teil ist ja super cool! Gefällt mir. Danke für den Tipp!

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
waldwuffel
Hardware & OS, Sicherheit


Verfasst am:
20. März 2007, 12:01
Rufname:
Wohnort: Bergisch Gladbach

AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

Hallo womaninweb Laughing

Ich, Tollpatsch, ich. Hatte nur flüchtig das grüne Logo gesehen und ...inweb als Autor beim Runterscrollen mitbekommen. So eine Nachlässigkeit werde ich zukünftig vermeiden. Very Happy

Gruß und Entschuldigung,
wuffel

_________________
Dein Feedback ist mein täglich' Brot - lass mich nicht verhungern ...
Tom2002
Der einzig Wahre Leuchtturm - Pilsum


Verfasst am:
20. März 2007, 12:49
Rufname:
Wohnort: Düsseldorf

AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

Moin zusammen,

danke für die zahlreichen Antworten. Die Tools werde ich mir auch nachher anschauen.

Zu dem Header Problem komm ich später noch mal zurück, dass wird zu viel, glaube ich.

MENU:

Der CSS-Style im seperaten doc:
Code:
html, body{
height:            100%;
width:            100%;
margin:            0;
padding:           0;
}

#header {
z-index:          1;
position:         fixed;
top:            0;
left:            0;
width:            100%;
height:            15%;
margin:            0;
padding:           0;
border-bottom:      3px solid #0033CC;
background-image:    url(Farbverlauf.gif);
background-repeat:    no-repeat;float:right;
background-position: 100%
}

#menu {
position:         absolute;
overflow:             auto;
top:              15%;
left:              0%;
height:            82%;
width:            15%;
margin:               0;
padding:                 0;
background-color:     #FFFF99;
border-right:           3px solid #0033CC;
}

#submenu{
float:            left;
width:                100px;
}

#submenu ul{
margin:              0px;
padding:                0 30px 0 10px;
list-style:             none;
}

#submenu li{
padding:                0 0 4px 0;
margin:              0;
}

#submenu a{
color:               #0033CC;
background:            transparent;
font-family:          verdana, sans-serif;
font-weight:        bold;
font-size:          14px;
text-decoration:   none;
}

#submenu a:hover{
color:             blue;text-decoration:underline;
}

#submenu p{
font-family:        verdana, sans-serif;
font-weight:       bold;
font-size:        12px;
padding:            20px 0 10px 4px;
margin:          0;

}
#footer{
position:         fixed;
bottom:            0;
left:            0;
width:            100%;
height:            3%;
margin:            0;
padding:           0;
background-image:    url(farbverlauf_back.gif);
background-repeat:    no-repeat;float:right;
background-position: 100%
border-top:         3px solid #0033CC;
}
Und der Code im menu.php:
Code:
<?php setlocale(LC_TIME, 'de_DE');
?>   
<div id="submenu">
<p><?php print(strftime('%A,'))?><br>
<?php print(strftime('%d.%B %G'))?></p><br><br>

<ul>
   <li>&raquo;&nbsp;<a href="index.php">Willkommen</a></li>
   <li>&raquo;&nbsp;<a href="index.php?section=unternehmen">Unternehmen</a></li>
   <li>&raquo;&nbsp;<a href="index.php?section=auftragsannahme">Auftragsannahme</a></li>
   <li>&raquo;&nbsp;<a href="index.php?section=preisliste">Preisliste</a></li>
   <li>&raquo;&nbsp;<a href="index.php?section=ortsverzeichnis">Ortsverzeichnis</a></li>
   <li>&raquo;&nbsp;<a href="index.php?section=abholgebiete">Abholgebiete</a></li>
   <li>&raquo;&nbsp;<a href="index.php?section=kontakt">Kontakt</a></li>
   <li>&raquo;&nbsp;<a href="index.php?section=downloads">Downloads</a></li>
   <li>&raquo;&nbsp;<a href="index.php?section=impressum">Impressum</a></li>
</ul>
</div>
so sieht die index.php aus, mit den einzelnen Bereichen:
Code:
<?php
error_reporting(E_ALL);
    include "config.php"; // die Konfigurationsdateien lesen.

    echo "        <div id=\"root\">\n"; // ganz oberer Div-Holder
    echo "            <div id=\"header\">\n"; // header
    echo "            </div>\n";
    echo "            <div id=\"menu\">\n"; // linkes Menu
                   include "menu.php";
    echo "            </div>\n";
    echo "            <div id=\"content\">\n"; // In der Mitte der Inhalt
                   include "inhalt.php";
    echo "            </div>\n";
    echo "            <div id=\"footer\">\n"; // Fußbereich
    echo "            </div>\n";
    echo "            <br style=\"clear:both;\" />\n"; // css-float beenden
?>
    echo "       </div>\n";
</body>
Der Eintrag Anftragsannahme verursacht den Scrollballken. Kann ich denn anstatt die font-size in px, auch in % angeben? Leider fehlt mir hier der Bezug 14 px = ?%.

@womaninweb
Zitat:
Ich würde dem Menü eine, entsprechend dem längsten Eintrag, feste Breite geben und den Inhaltsbereich variabel halten.
Genau das ist mein Ziel, nur bei der Umsetzung haperts. Mit padding hab ich auch schon experimentiert, aber das Ergebnis, war nicht wirklich dolle.

@waldwuffel
Zitat:
Mit PHP kannst du allerdings wunderbar serverseitig Scripts (z.B. zum Zugriff auf Datenbanken, zum Steuern eines Datei-Uploads oder Auswertung eines Formulars) ablaufen lassen.
Yepp, das ist mir als alter Accessler bekannt Smile

Hoffe, dass es dazu Tipps und Verbesserungsvorschläge gibt.

Ciao

Tom

_________________
Win7, Win2008 R2, Office 2010 Prof

Wer mit Fortuna Düsseldorf groß geworden ist, der fürchtet sich auch vor Access nicht.
Die Nutzlosigkeit des Daseins anzuerkennen heisst, Fortuna-Fan zu sein.
Vielgelesen
Gast


Verfasst am:
20. März 2007, 13:30
Rufname:

AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

Hallo Tom,
Zitat:
Der Eintrag Anftragsannahme verursacht den Scrollballken.

teste es mal wie Nachfolgend dargestellt.
Code:
#menu {
float: left;
top: 15%;
left: 0%;
height: 82%;
width: 15%;
margin: 0;
padding: 0;
background-color: #FFFF99;
border-right: 3px solid #0033CC;
}
Tom2002
Der einzig Wahre Leuchtturm - Pilsum


Verfasst am:
20. März 2007, 13:41
Rufname:
Wohnort: Düsseldorf

AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

Moin,

dank dir.

Dann verschiebt er mir das Menu in den Header hinein.

Ciao

Tom

_________________
Win7, Win2008 R2, Office 2010 Prof

Wer mit Fortuna Düsseldorf groß geworden ist, der fürchtet sich auch vor Access nicht.
Die Nutzlosigkeit des Daseins anzuerkennen heisst, Fortuna-Fan zu sein.
Vielgelesen
Gast


Verfasst am:
20. März 2007, 13:47
Rufname:

AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

hallo Tom,
bei mir sieht es gut aus. Hast du das:
Code:
#menu {
position:         absolute;
overflow:             auto;
bei dir auch gelöscht?
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
20. März 2007, 13:49
Rufname:
Wohnort: Aachen

AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

Hi Tom,

in welche Richtung scrollt es denn? Horizontal oder vertikal?

Gruß

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Tom2002
Der einzig Wahre Leuchtturm - Pilsum


Verfasst am:
20. März 2007, 13:50
Rufname:
Wohnort: Düsseldorf

AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

Hi,

Horizontal, in Richtung "Inhalt".

Ciao

Tom

_________________
Win7, Win2008 R2, Office 2010 Prof

Wer mit Fortuna Düsseldorf groß geworden ist, der fürchtet sich auch vor Access nicht.
Die Nutzlosigkeit des Daseins anzuerkennen heisst, Fortuna-Fan zu sein.
Vielgelesen
Gast


Verfasst am:
20. März 2007, 13:52
Rufname:

AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

Denk ans Löschen!
womaninweb
(X)HTML und CSS Junkie


Verfasst am:
20. März 2007, 13:53
Rufname:
Wohnort: Aachen

AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

Okay, dann kann man erstmal in der Höhe fixen und die Weite in Prozent halten. Gib deinem Header mal eine fixe Höhe (in Pixel) und positioniere das Menü mit top: Anzahl Pixelhöhe Header; fix unter den header.

Gruß

_________________
Der Vorteil der Klugheit besteht darin, dass man sich dumm stellen kann. Das Gegenteil ist schon schwieriger.
Kurt Tucholsky
Tom2002
Der einzig Wahre Leuchtturm - Pilsum


Verfasst am:
20. März 2007, 13:53
Rufname:
Wohnort: Düsseldorf


AW: Verschiedene Monitore, versch. Darstellung - AW: Verschiedene Monitore, versch. Darstellung

Nach oben
       

löschen?
_________________
Win7, Win2008 R2, Office 2010 Prof

Wer mit Fortuna Düsseldorf groß geworden ist, der fürchtet sich auch vor Access nicht.
Die Nutzlosigkeit des Daseins anzuerkennen heisst, Fortuna-Fan zu sein.
Neues Thema eröffnen   Neue Antwort erstellen Alle Zeiten sind
GMT + 1 Stunde

Gehe zu Seite 1, 2, 3  Weiter
Diese Seite Freunden empfehlen

Seite 1 von 3
Gehe zu:  
Du kannst Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum antworten.
Du kannst deine Beiträge in diesem Forum nicht bearbeiten.
Du kannst deine Beiträge in diesem Forum nicht löschen.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
Du kannst Dateien in diesem Forum nicht posten
Du kannst Dateien in diesem Forum herunterladen

Verwandte Themen
Forum / Themen   Antworten   Autor   Aufrufe   Letzter Beitrag 
Keine neuen Beiträge Wichtig: HTML & CSS Forum: Tutorial - HTML, XHTML und CSS 3 maninweb 10905 30. März 2007, 12:42
waldwuffel Tutorial - HTML, XHTML und CSS
Keine neuen Beiträge HTML & CSS Forum: Bilder ausrichten mit CSS 3 Voeman 1686 09. Jul 2012, 22:39
Larata Bilder ausrichten mit CSS
Keine neuen Beiträge Frontpage Forum: Lightbox CSS .lb-dataContainer bg 2 kesart 2172 28. Mai 2012, 10:39
kesart Lightbox CSS .lb-dataContainer bg
Keine neuen Beiträge HTML & CSS Forum: CSS Problem mit Wrapper 1 dibuslaa 1275 29. März 2012, 10:47
womaninweb CSS Problem mit Wrapper
Keine neuen Beiträge HTML & CSS Forum: über css div feste position geben 1 SleepWalker86 2445 28. Jan 2011, 20:35
MartinPent über css div feste position geben
Keine neuen Beiträge HTML & CSS Forum: wie zentriere ich die komplette webseite mit css??? 2 Linkifan 1736 03. Dez 2010, 11:56
Gast wie zentriere ich die komplette webseite mit css???
Keine neuen Beiträge Frontpage Forum: Frames werden in Google Chrome und Safari falsch dargestellt 16 charismat7 8393 30. Okt 2010, 22:54
DancerVlt69 Frames werden in Google Chrome und Safari falsch dargestellt
Keine neuen Beiträge HTML & CSS Forum: css Standartbreite 80% aber min 600px 1 Gast 2356 30. Apr 2010, 12:47
womaninweb css Standartbreite 80% aber min 600px
Keine neuen Beiträge HTML & CSS Forum: 1und1 CSS und HTML daten hochladen 1 jan r. 4692 04. März 2010, 11:04
alexander912 1und1 CSS und HTML daten hochladen
Keine neuen Beiträge HTML Editoren Forum: Homepage ohne Frames mit Tabellen 7 Gast 8747 16. Sep 2009, 10:55
womaninweb Homepage ohne Frames mit Tabellen
Keine neuen Beiträge MS Expression Web Forum: css Validität 10 sashnow 1639 18. Apr 2009, 17:58
sashnow css Validität
Keine neuen Beiträge HTML Editoren Forum: Mal was Lustiges / Hintersinniges zum Thema Frames und Co... 0 NorbertF 1822 11. Jul 2008, 16:26
NorbertF Mal was Lustiges / Hintersinniges zum Thema Frames und Co...
 

----> Diese Seite Freunden empfehlen <------ Impressum - Besuchen Sie auch: PHP JavaScript