• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

positionierung

P

patrick1988

Gesperrt
hallo zusammen. ich habe folgendes Problem. ich möchte diese seite hier :Freihofbar - Home. mit CSS gestalten, ich habe sie in Photoshop gemacht, und der macht ja das ganze mit tabellen was veraltet ist. ich möchte die seite genau so aussehen lassen nur möchte ich die einzelnen bilder mit CSS positionieren.

so nun zu meinen Problem, die einzige Positionierungs mehtode die für das in frage kommt ist meiner meinung nach die absolute Positionierung und damit habe ich nun auch das ganze angefangen. jetzt habe ich allerdings das problem das der Internetexplorer mir das auch wunderbar anzeigt wie ich das gerne hätte. aber firefox und google chrome können offenbar garnichts damit anfangen. Sie listen die bilder ganz normal untereinander.

woran liegt den das?

oder gibt es bessere methoden um dieses design zu possitionieren?
(ich habe das buch html und css von kopf bis fuss gelesen, deshalb kenne ich auch die grundlagen, aber ich weis einfach nicht woran es liegt)

vielen dank für eure hilfe

MFG Patrick
 
vitus37 schrieb:
Absolute Positionierung ist hier nicht angebracht. Nutze lieber static. Hier die Unterschiede: position: Positionsart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Ich würde sagen du fängst falsch herum an. Ich empfehle dir erst den HTML-Teil, also das logische Auszeichnen des Inhalts, fertigzustellen und erst dann die Gestaltung mit CSS.
Zum Vergrößern anklicken....

ach so ist das, über static steht nichts in diesem buch, vielen dank.
ja ich weiss das ich eigenlich falsch rum beginne aber ich hab mir gedacht das es einfacher ist erst mal das design zuhaben und dann reinzuschreiben. mfg pratick
 
wie muss ich das denn statisch positionieren? wen man nicht mit left top right und bottom arbeiten kann? bei mir sieht es jetzt aus als hätte ich garnichts gemacht.. MFG patrick
 
HTML: 
<html>
<head>
<title>homepage1probe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
 <div id="1">  <img src="Bilder/homepage1probe_01.gif" alt="design" /> </div>
  <div id="2">  <img src="Bilder/homepage1probe_02.gif" alt="design" /> </div>
<div id="3">  <img src="Bilder/homepage1probe_03.gif" alt="design" /> </div>
<div id="4">  <img src="Bilder/homepage1probe_04.gif" alt="design" /> </div>
<div id="5">  <img src="Bilder/homepage1probe_05.gif" alt="design" /> </div>
<div id="6">  <img src="Bilder/homepage1probe_06.gif" alt="design" /> </div>
<div id="7">  <img src="Bilder/homepage1probe_07.gif" alt="design" /> </div>
<div id="8">  <img src="Bilder/homepage1probe_08.gif" alt="design" /> </div>
<div id="9">  <img src="Bilder/homepage1probe_09.gif" alt="design" /> </div>
          <div id="10">  <img src="Bilder/homepage1probe_10.gif" alt="design" /> </div>
           <div id="11">  <img src="Bilder/homepage1probe_11.gif" alt="design" /> </div>
            <div id="12">  <img src="Bilder/homepage1probe_12.gif" alt="design" /> </div>
             <div id="13">  <img src="Bilder/homepage1probe_13.gif" alt="design" /> </div>
              <div id="14">  <img src="Bilder/homepage1probe_14.gif" alt="design" /> </div>
               <div id="15">  <img src="Bilder/homepage1probe_15.gif" alt="design" /> </div>
                <div id="16">  <img src="Bilder/homepage1probe_16.gif" alt="design" /> </div>
                 <div id="17">  <img src="Bilder/homepage1probe_17.gif" alt="design" /> </div>
                  <div id="18">  <img src="Bilder/homepage1probe_18.gif" alt="design" /> </div>
                   <div id="19">  <img src="Bilder/homepage1probe_19.gif" alt="design" /> </div>
                    <div id="20">  <img src="Bilder/homepage1probe_20.gif" alt="design" /> </div>
 
 
</body>
</html>
HTML: 
#1 {
  position:   static;
}
#2 {
  position:   static;
}
#3 {
  position:   static;
}
#4 {
  position:   static;
}
#5 {
  position:   static;
}
 
patrick1988 schrieb:
das probier ich ja aber wie mache ich das bei einer statischen positinonierung? wie es mit absoluter geht weis ich aber das ist angeblich falsch hat vitus37 gesagt. MFG
Zum Vergrößern anklicken....

Ja ,
das versteh ich auch nicht.
Wenn left,top,right und botton bei static unwirkssam sind ,
kannst du auch nicht left,top,right, und bottom anwenden.
Ich würde es nochmal mit absolute versuchen.

 
selfhtml.org schrieb:
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung)
Zum Vergrößern anklicken....
Hm, das einzige position-tag, daß ich verwende, ist fixed. Aber sollte ich das richtig interpretieren, ist static nichts weiter als die Normalstellung. Ergo solltest Du das auch weglassen und normal positionieren können.
Den ganzen "Position-Krempel" muss man sich vermutlich mehrmals durchlesen und einige Nächte unter´s Kopfkissen legen, um es wirklich zu verinnerlichen. Die "Try-and-Error"-Variante hat hier keinen Wert.

Deshalb: auch wenn es auf Deine Variante "interessanter" zu sein scheint, halte Dich an Vitus´ Aussage und schreibe erst den Content & Co., dann fange mit der Positionung/Anordnung an. Alles andere bringt Dir nur Probleme und/oder mehrfache Arbeit (bzw. vorzeitige Alterserscheinungen).

CSS ist eigentlich nicht schwierig, man muss sich nur drauf einlassen und einige Sachen begreifen. Die Vererbung sollte man dabei immer im Hinterkopf haben.

Grüsse
low
 
Du solltest dich mit den Grundlagen beschäftigen. Was ist HTML? wie wird es eingesetzt? Welche Elemente gibt es? Wozu dienen diese? Was ist CSS? Wo wird es eingesetzt? Welche Eigenschaften existieren? Welche Auswirkungen haben diese?

Es geht nicht so einfach wie du dir das vorstellst. Zumal an dem Versuch ein Tabellenlayout 1:1 in eines ohne Tabellen umzusetzen schon viele vor dir gescheitert sind. Die Technik HTML/CSS ist dazu entwickelt worden, Inhalte auf möglichst vielen Plattformen anzuzeigen, d.h. der Inhalt soll sich an die Umgebung anpassen. Photoshop hat eine völlig andere Funktion und ist daher nicht sonderlich brauchbar eine HTML Seite umzusetzen, dazu ist immer noch Handarbeit nötig.
 
struppi schrieb:
Du solltest dich mit den Grundlagen beschäftigen. Was ist HTML? wie wird es eingesetzt? Welche Elemente gibt es? Wozu dienen diese? Was ist CSS? Wo wird es eingesetzt? Welche Eigenschaften existieren? Welche Auswirkungen haben diese?

Es geht nicht so einfach wie du dir das vorstellst. Zumal an dem Versuch ein Tabellenlayout 1:1 in eines ohne Tabellen umzusetzen schon viele vor dir gescheitert sind. Die Technik HTML/CSS ist dazu entwickelt worden, Inhalte auf möglichst vielen Plattformen anzuzeigen, d.h. der Inhalt soll sich an die Umgebung anpassen. Photoshop hat eine völlig andere Funktion und ist daher nicht sonderlich brauchbar eine HTML Seite umzusetzen, dazu ist immer noch Handarbeit nötig.
Zum Vergrößern anklicken....

ja ich will es ja lehrnen ich schlage mich mit 2 büchern drum und keines der beiden gibt mir eine lösung, die relative ist für das nicht brauchbar die fixe sowieso nicht, schwebend ebenso nicht, also bleibt doh nur noch die absolute oder die statische, vitus meite es sollte mit der statschischen gehen, aber ich kann nicht nachvollziehen warum weil diese mit dem textfluss geht, ich hab schon versucht allles ich leere kästen zu stecken und mit hintergründen das layout hin zukriegen. ich bin wirklich am ende mit meinen ideeen wie ich das hinbekommen soll. MFG
 
patrick1988 schrieb:
ja aber mit der absoluten positionierung klappt alles wunderbar, leider halt nur im IE, vielen dank für deine antwort
Zum Vergrößern anklicken....
Na gut, dann sag halt jedem Besucher Deiner Seite, er möchte bitte den IE verwenden (möglichst noch die Version nennen, die tatsächlich funktioniert).

Oder Du verwendest die bessere Alternative und setzt Dich mit den Grundlagen auseinander. Der IE hat seine Eigenheiten, ebenso wie einige andere Browser auch.
 
Hallo, habe eine Radtour gemacht, deshalb antworte ich erst jetzt...

Also, ja statische Positionierung ist idR Standard. Positionieren, so wie du es gerne machen würdest, ist damit nicht möglich.
Man kann ein Design nur auf korrektem HTML-Code aufbauen, ohne ihn nutzt einem auch CSS nichts. Also fange am Besten nocheinmal von vorne an, und diesmal mit dem Inhalt -> HTML.

Gruß
 
vitus37 schrieb:
Hallo, habe eine Radtour gemacht...
Zum Vergrößern anklicken....
War´s schön 8-) ?

vitus37 schrieb:
Also, ja statische Positionierung ist idR Standard. Positionieren, so wie du es gerne machen würdest, ist damit nicht möglich.
Man kann ein Design nur auf korrektem HTML-Code aufbauen, ohne ihn nutzt einem auch CSS nichts. Also fange am Besten nocheinmal von vorne an, und diesmal mit dem Inhalt -> HTML.
Zum Vergrößern anklicken....
struppi schrieb:
Ja, verzichte auf ein Layout das Tabellen benötigt.
Zum Vergrößern anklicken....
...und neben dem semantisch korrekten Code ohne Tabellen auch noch auf feste Breiten-/Längenangaben verzichten, dann wird´s bestimmt was.
Ich hab´ mir die Site mal eben auf 800x600 und 1600x1200 angesehen. Bei kleinerem Viewport kommen horizontale Scrollbalken (die habe ich allerdings auch schon bei 1024x768 !), bei letzterem klebt der Inhalt als "kleines Etwas" in der linken oberen Ecke. Das geht gar nicht. Google & Co. haben imho Schwierigkeiten, Tabellen zu crawlen, das ist bei einer kommerziellen Site der erste Grund, auf ein solches Layout zu verzichten (ggogle mal nach "SEO" oder "Suchmaschinenoptimierung", da findest Du noch mehr Infos).

Ich habe vor ein paar Monaten ähnliche Antworten für meine damals schon länger bestehende Site bekommen (framebasiert), da hieß es nur "abreißen & neu bauen". Hat im ersten Moment weh getan, war ein nettes Stück Arbeit, aber mit HTML, CSS und PHP ist schon was draus geworden (zumindest nach meiner unmaßgeblichen Meinung).

Es gibt wohl nur 2 Möglichkeiten: bleib bei dem, was Du hast, baue die Seite aus und fang in ein paar Monaten, wenn alles fertig ist, von vorne an. Oder mach es jetzt gleich richtig, hab ein paar Tage Arbeit und freue Dich nachher am guten Ergebnis. Ich denke, jeder hier im Forum wird Dich bei letztgenanntem Vorhaben unterstützen.

Grüsse
low
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben