php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 10-03-2009, 19:41
goth
  Moderator
Links : Onlinestatus : goth ist offline
Registriert seit: Mar 2002
Ort: Erde
Beiträge: 7.272
goth ist zur Zeit noch ein unbeschriebenes Blatt
Standard Warum? und anderes Layer gehampel ...

Folgendes etwas farbenfrohes Beispiel:

Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de" dir="ltr">
	<head>
		<title>Divs</title>
		<style type="text/css">

		body {
			background: yellow;
		}

		div.header {
			position: relative;
			height: 100px;
			background: green;
		}

		div.content {
			position: relative;
			height: 400px;
			background: blue;
			margin: 0px;
		}

		div.footer {
			position: relative;
			height: 100px;
			background: red;
		}

		div.gothiclayer {
			position: relative;
			height: 50px;
			width: 50px;
			background: magenta;
			margin: 20px;
		}

		</style>
	</head>
	<body>
		<div class="header">
		</div>
		<div class="content">
			<div class="gothiclayer">
			</div>
		</div>
		<div class="footer">
		</div>
	</body>
</html>
Aus welchem Grunde verschiebt sich (im Firefox und Opera) die Position den "content" Layers, wenn der "gothiclayer" einen Margin hat ...

Wahsaga hat sicherlich 'ne Erklärung ...
__________________
carpe noctem

Bitte keine Fragen per EMail ... im Forum haben alle was davon ... und ich beantworte EMail-Fragen von Foren-Mitgliedern in der Regel eh nicht!
Hinweis: Ich bin weder Mitglied noch Angestellter von ebiz-consult! Alles was ich hier von mir gebe tue ich in eigener Verantwortung!
Mit Zitat antworten
  #2 (permalink)  
Alt 10-03-2009, 20:02
php_fussel
 Newbie
Links : Onlinestatus : php_fussel ist offline
Registriert seit: Jan 2009
Beiträge: 120
php_fussel ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hallo, gebe dem gothiclayer mal ein position:absolut ...

Gruß php_fussel
Mit Zitat antworten
  #3 (permalink)  
Alt 10-03-2009, 20:18
goth
  Moderator
Links : Onlinestatus : goth ist offline
Registriert seit: Mar 2002
Ort: Erde
Beiträge: 7.272
goth ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Das geht nicht ... im Original gibt es 2 Layer untereinander, die die Höhe des "content" Layers beeinflussen sollen.

Ich könnte sonst auch einfach left und top verwenden.
__________________
carpe noctem

Bitte keine Fragen per EMail ... im Forum haben alle was davon ... und ich beantworte EMail-Fragen von Foren-Mitgliedern in der Regel eh nicht!
Hinweis: Ich bin weder Mitglied noch Angestellter von ebiz-consult! Alles was ich hier von mir gebe tue ich in eigener Verantwortung!
Mit Zitat antworten
  #4 (permalink)  
Alt 10-03-2009, 20:28
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

hat imho überhaupt nichts mit position zu tun. liegt wohl daran, dass content noch keinen inhalt hat. daher kommt es zu diesem ergebnis.

lösung 1:
PHP-Code:
    div.gothiclayer {
      ...
      
margin0 20px;
    } 
lösung zwei
PHP-Code:
    <div class="content">
      
bla blubb
      
<div class="gothiclayer">
      </
div>
    </
div
und zur veranschaulichung
PHP-Code:
    div.content {
      ...
      
border1px solid #000;
    

peter
EDIT:
das position kannst du imho weglassen
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite

Geändert von Kropff (10-03-2009 um 20:31 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 10-03-2009, 20:34
goth
  Moderator
Links : Onlinestatus : goth ist offline
Registriert seit: Mar 2002
Ort: Erde
Beiträge: 7.272
goth ist zur Zeit noch ein unbeschriebenes Blatt
Standard

@Peter: Das ist ja prinzipiell richtig ... aber aus welchem Grunde sollte ich auf meiner Website unbedingt ein "bla blubb" stehen haben wollen?

Was, wenn der Content-Layer einfach nur 2 Layer (mit je "bla" oder "blub") enthalten soll.

Für mich ist das Verhalten von FF und Opera einfach unlogisch. Zumal der Layer durch den Linken Anteil des Margins auch nicht nach rechts verschoben wird ...
__________________
carpe noctem

Bitte keine Fragen per EMail ... im Forum haben alle was davon ... und ich beantworte EMail-Fragen von Foren-Mitgliedern in der Regel eh nicht!
Hinweis: Ich bin weder Mitglied noch Angestellter von ebiz-consult! Alles was ich hier von mir gebe tue ich in eigener Verantwortung!
Mit Zitat antworten
  #6 (permalink)  
Alt 10-03-2009, 20:39
php_fussel
 Newbie
Links : Onlinestatus : php_fussel ist offline
Registriert seit: Jan 2009
Beiträge: 120
php_fussel ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Sobald Text eingegeben wird, dann funzt es zwar, aber das div richtet sich dann auch am Text aus (und wandert weiter nach unten, wenn der Text wächst).
Da Du die Höhe des content-divs mit den anderen beiden divs bestimmen willst, ist float:left auch keine Option (was sonst funzen würde). Komisch ...

Gruß php_fussel
EDIT:
... oder nimm das margin weg und gib dem content-div ein padding:20px ...
EDIT:
... oder lass das margin und gebe dem content-div ein padding:1px ... das funzt auch ...

Geändert von php_fussel (10-03-2009 um 20:57 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 10-03-2009, 20:43
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

hab des rätsels lösung aus meiner internen todo-liste für meinen auftritt. schau dir mal das hier an, dann hast du deine antwort. btw: im safari sieht es genau so aus.

peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #8 (permalink)  
Alt 10-03-2009, 20:56
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

@Kropff: Das "Problem", auf das du hier verlinkst, bezieht sich auf "zusammenfallende", engl. collapsing, margins.

goth' Problem ist aber, dass der äussere Container verschoben wird, wenn der innere ein margin-top bekommt (richtig?)

Die Erklärung findet sich in der CSS 2.1-Spezifikation zwar auch unter der Überschrift Collapsing margins, ist aber eine etwas andere:
Zitat:
The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
Das heisst im konkreten Falle, weil #content kein border-top oder padding-top hat (und #gothiclayer kein "clearance"), wird das margin-top von #gothiclayer an #content "weitergereicht", und dann #content mit Abstand von dem was vor ihm kommt dargestellt.


Zitat:
Original geschrieben von goth
Für mich ist das Verhalten von FF und Opera einfach unlogisch.
Das mag sein :-) - aber es ist gemäß der Spezifikation.
Zitat:
Zumal der Layer durch den Linken Anteil des Margins auch nicht nach rechts verschoben wird ...
Für die horizontalen Margins ist kein derartiges Verhalten definiert, im Gegensatz zu den vertikalen.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.

Geändert von wahsaga (10-03-2009 um 20:58 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 10-03-2009, 20:59
Kropff
  Administrator
Links : Onlinestatus : Kropff ist offline
Registriert seit: Mar 2002
Ort: Köln
Beiträge: 11.722
Kropff befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
@Kropff: Das "Problem", auf das du hier verlinkst, bezieht sich auf "zusammenfallende", engl. collapsing, margins. Die Erklärung findet sich in der CSS 2.1-Spezifikation zwar auch unter der Überschrift Collapsing margins, ist aber eine etwas andere:
auf die habe ich mich bezogen. sorry, vergessen, darauf hinzuweisen. mea culpa.

peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

ADSMAN V3 - Werbe-Manager ansehen ADSMAN V3 - Werbe-Manager

ADSMAN V3 - mehr als nur ein Bannermanager! Banner, Textanzeigen und PagePeel Manager! Mit ADSMAN PRO haben Sie die Marketinglösung für eine effektive und effiziente Werbeschaltung mit messbaren Ergebnissen. Unterstützt werden Bannerformate in beliebi

25.10.2018 virtualsystem | Kategorie: PHP/ Bannerverwaltung
PHP News und Artikel Script V2

News schreiben, verwalten, veröffentlichen. Dies ist jetzt mit dem neuen PHP News & Artikel System von virtualsystem.de noch einfacher. Die integrierte Multi-User-Funktion und der WYSIWYG-Editor (MS-Office ähnliche Bedienung) ermöglichen...

25.10.2018 virtualsystem | Kategorie: PHP/ News
Top-Side Guestbook

Gästebuch auf Textbasis (kein MySQL nötig) mit Smilies, Ip Sperre (Zeit selbst einstellbar), Spamschutz, Captcha (Code-Eingabe), BB-Code, Hitcounter, Löschfunktion, Editierfunktion, Kommentarfunktion, Kürzung langer Wörter, Seiten- bzw. Blätterfunktion, V

22.10.2018 webmaster10 | Kategorie: PHP/ Gaestebuch
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 11:46 Uhr.