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 16-09-2010, 01:46
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard Extrahierte Sclices aus PS mit DIVs horizontal mittig anordnen

Einleitung:
Ich habe in Photoshop eine Webseite erstellt,
die ich mittels Slices in Fragmente unterteilt habe.
Im Anschluss daran habe ich die Sclices aus
Imageready als JPEGs extrahiert und in DIVs einfügen lassen.
HTML-Code:
<div id="container">
<div id="slice_1"><img ...></div>
<div id="slcie_n"><img ...></div>
</div>
Problem:
Die komplette Webseite wird nicht horizontal zentriert dargestellt.
Ich habe es beim Container mit dem Wert auto bei margin left und right
ausprobiert, dies brachte jedoch leider nicht den gewünschten Erfolg

Hier mein original Code:
HTML-Code:
<style type="text/css">
<!--
#Container {
	position:absolute;
	left:0px;
	top:0px;
	width:954px;
	height:688px;
}

#idelement-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:3px;
	height:688px;
}

#idelement-02_ {
	position:absolute;
	left:3px;
	top:0px;
	width:948px;
	height:35px;
}

#idelement-03_ {
	position:absolute;
	left:951px;
	top:0px;
	width:3px;
	height:688px;
}

#idelement-04_ {
	position:absolute;
	left:3px;
	top:35px;
	width:20px;
	height:29px;
}

(...)
-->
</style>

<div id="Container">
	<div id="idelement-01_">
		<img id="idelement_01" src="images/20100915_01.jpg" width="3" height="688" alt="" />
	</div>
	<div id="idelement-02_">
		<img id="idelement_02" src="images/20100915_02.jpg" width="948" height="35" alt="" />
	</div>
           <div id="idelement-03_">
		<img id="idelement_03" src="images/20100915_03.jpg" width="3" height="688" alt="" />
	</div>
	<div id="idelement-04_">
		<img id="idelement_04" src="images/20100915_04.jpg" width="20" height="29" alt="" />
	</div>

(...)
</div>
Könnt ihr mir bitte sagen, wie ich die Webseite zentriert bekomme?

Vielen Dank im voraus!!!
Mit Zitat antworten
  #2 (permalink)  
Alt 16-09-2010, 09:33
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo,

warum packst du das Stylesheet in einen Kommentar? Wenn die Browser nicht zufällig tolerant damit umgingen, würdest du es damit deaktivieren.

Du schreibst margin left und right, aber wie hattest du es wirklich geschrieben als du es versucht hast? Mit Bindestrich?

Gruß,

Amica
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #3 (permalink)  
Alt 16-09-2010, 10:00
Wyveres
 Registrierter Benutzer
Links : Onlinestatus : Wyveres ist offline
Registriert seit: Dec 2006
Ort: Rügen
Beiträge: 763
Blog-Einträge: 2
Wyveres ist zur Zeit noch ein unbeschriebenes Blatt
Wyveres eine Nachricht über ICQ schicken
Standard

Code:
#Container {
	position:absolute;
	left:0px;
	top:0px;
	width:954px;
	height:688px;
}
Absolut positionierte Elemente Ignorieren in der Regel margin-left und right.

wenn du die Styles dem entsprechend zum Container relativ setzt und den Container Selbst ohne Position und mit margrin left und right auto austattest sollte das eigentlich gehen.
__________________
Bitte Beachten.
Foren-Regeln
Danke
Mit Zitat antworten
  #4 (permalink)  
Alt 16-09-2010, 10:01
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Wyveres Beitrag anzeigen
Absolut positionierte Elemente Ignorieren in der Regel margin-left und right.
Seit wann?
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #5 (permalink)  
Alt 16-09-2010, 10:07
Wyveres
 Registrierter Benutzer
Links : Onlinestatus : Wyveres ist offline
Registriert seit: Dec 2006
Ort: Rügen
Beiträge: 763
Blog-Einträge: 2
Wyveres ist zur Zeit noch ein unbeschriebenes Blatt
Wyveres eine Nachricht über ICQ schicken
Standard

Zitat:
Zitat von AmicaNoctis Beitrag anzeigen
Seit wann?
Seit immer ;D und ich hätte da noch Auto hin schreiben sollen. Wenn man ... auf absolut positionierte Elemente margin-left:auto; und marign-right:auto; versucht.

Wenn man explizit pixelwerte angibt oder prozent dann nicht.

zentiert da left:0; hier durch marin-left:auto; aufgehoben wird.
Code:
#Container {
	position:relative;
	left:0px;
	top:0px;
	width:954px;
	height:688px;
	margin-left:auto;
	margin-right:auto;
	border:1px solid black;
}
pappt am linken rand ...
Code:
#Container {
	position:absolute;
	left:0px;
	top:0px;
	width:954px;
	height:688px;
	margin-left:auto;
	margin-right:auto;
	border:1px solid black;
}
sitzt 100px von links entfernt.
Code:
#Container {
	position:absolute;
	left:0px;
	top:0px;
	width:954px;
	height:688px;
	margin-left:100px;
	margin-right:auto;
	border:1px solid black;
}
__________________
Bitte Beachten.
Foren-Regeln
Danke
Mit Zitat antworten
  #6 (permalink)  
Alt 16-09-2010, 10:13
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Ok, das mit auto stimmt, ich dachte, du meinst, dass es generell nicht geht.

Jedenfalls:
Code:
position: absolute;
top: 0;
left: 50%;
width: /*die Breite, z. B.*/ 200px;
margin-left: /*die halbe negative Breite, z. B.*/ -100px;
funktioniert.
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #7 (permalink)  
Alt 16-09-2010, 10:55
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Danke für die schnelle Hilfe.

@Wyveres: Dein Code wirkt Wunder Es funktioniert!!! Das muss ich jetzt erstmal verstehen.

Geändert von kerbstone (16-09-2010 um 11:05 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 16-09-2010, 11:38
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

Mensch Kinners, lasst diesen position-Kram. Der ist hier überflüssig wie ein Kropf(f).

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #9 (permalink)  
Alt 16-09-2010, 11:54
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Kropff Beitrag anzeigen
Mensch Kinners, lasst diesen position-Kram.
Was hast du denn gegen position? Es lässt sich jedenfalls besser damit arbeiten als mit floats und irgendwelchen zusätzlichen div-Suppen.
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #10 (permalink)  
Alt 16-09-2010, 12:01
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:
Zitat von AmicaNoctis Beitrag anzeigen
Was hast du denn gegen position?
Ist imho viel zu unflexibel.
Zitat:
Zitat von AmicaNoctis Beitrag anzeigen
Es lässt sich jedenfalls besser damit arbeiten als mit floats7
Nö. Spätestens wenn du anfängst, relative und absolute zu kombinieren, bekommst du teilweise riesengroße Probleme mit dem iE 6 und 7. Außerdem sind die float-Probleme im IE 6 und 7 wohlbekannt und es gibt die entsprechenden Fixes.
Zitat:
Zitat von AmicaNoctis Beitrag anzeigen
und irgendwelchen zusätzlichen div-Suppen.
Wenn die Leute alles in divs klatschen, so ist das ihr Problem. Das geht imho auch sehr häufig viel eleganter. Ist allerdings auch immer vom Design anhängig.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #11 (permalink)  
Alt 16-09-2010, 12:05
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von Kropff Beitrag anzeigen
Ist imho viel zu unflexibel.

Nö. Spätestens wenn du anfängst, relative und absolute zu kombinieren, bekommst du teilweise riesengroße Probleme mit dem iE 6 und 7.
Da habe ich (zu beiden Punkten) gegenteilige Erfahrungen gemacht. Aber egal, ich hör mal auf, das hier zu sehr in den OT-Bereich zu ziehen.
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #12 (permalink)  
Alt 16-09-2010, 15:13
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

@Kropff:

Jetzt bin ich aber neugierig geworden.

Was für elegantere Lösungen bestehen denn zur Umsetzung?
Imageready lässt entweder Tabellen oder DIVs zu.

Sprichst Du nun XSL an, das eine weitere Möglichkeit darstellt?
In Form von http://symphony-cms.com ?

Geändert von kerbstone (16-09-2010 um 15:15 Uhr)
Mit Zitat antworten
  #13 (permalink)  
Alt 16-09-2010, 15:33
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Ich denke, Kropff will auf seine geliebten floats hinaus

Mit XSL hat das erstmal nichts zu tun, XSL-FO ist im Webumfeld untypisch und eher (aber nicht ausschließlich) zum Generieren von PDFs genutzt. XSL-T nutze ich zwar auch sehr oft, aber das kommt auch nicht ohne CSS aus, weil man damit nur Dokumente transformiert (in diesem Falle zu HTML).
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #14 (permalink)  
Alt 16-09-2010, 15:37
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:
Zitat von kerbstone Beitrag anzeigen
Was für elegantere Lösungen bestehen denn zur Umsetzung? Imageready lässt entweder Tabellen oder DIVs zu.
Ohne Klickibunti arbeiten. Sondern HTML und CSS lernen.

Peter
__________________
Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
Meine Seite
Mit Zitat antworten
  #15 (permalink)  
Alt 23-09-2010, 20:55
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Nun habe ich das Problem, dass ich nicht weiß, wie ich zwei
absolut getrennte DIVs relativ zueinander positionieren kann.
Anbei ein Screenshot. Folgend der CSS Code, ich habe wirklich keine Ahnung:

HTML-Code:
/* div configurations */
#Tabelle_01 {
	position:relative; /* Main Frame */
	left:0px;
	top:-8px;
	width:954px;
	margin-left:auto;
	margin-right:auto;
}

#id20100923-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:3px;
	height:688px;
}

#id20100923-02_ {
	position:absolute;
	left:3px;
	top:0px;
	width:948px;
	height:56px;
}

#id20100923-03_ {
	position:absolute;
	left:951px;
	top:0px;
	width:3px;
	height:688px;
}

#id20100923-04_ {
	position:absolute;
	left:3px;
	top:56px;
	width:511px;
	height:45px;
}

#id20100923-05_ { /* Logo */
	position:absolute;
	left:514px;
	top:56px;
	width:409px;
	height:45px;
}

#id20100923-06_ {
	position:absolute;
	left:923px;
	top:56px;
	width:28px;
	height:271px;
}

#id20100923-07_ {
	position:absolute;
	left:3px;
	top:101px;
	width:20px;
	height:226px;
}

#id20100923-08_ { /* Banner */
	position:absolute;
	left:23px;
	top:101px;
	width:601px;
	height:182px;
}

#id20100923-09_ { /* 2. Logo */
	position:absolute;
	left:624px;
	top:101px;
	width:299px;
	height:54px;
}

#id20100923-10_ {
	position:absolute;
	left:624px;
	top:155px;
	width:299px;
	height:142px;
}

#id20100923-11_ {
	position:absolute;
	left:23px;
	top:283px;
	width:601px;
	height:14px;
}

#id20100923-12_ { /* Horizontal Header Menu */
	position:absolute;
	left:23px;
	top:297px;
	width:900px;
	height:30px;
	background-image: url(images/20100923_12.jpg);
	color:#5A5A5A;
	text-align:center;
	font-size:24px;
}

#id20100923-13_ {
	position:absolute;
	left:3px;
	top:327px;
	width:948px;
	height:5px;
}

#id20100923-14_ { /* Content Container */
	position:absolute;
	left:3px;
	top:332px;
	width:948px;
	background-image:url(images/20100923_13.jpg);
	background-repeat:y;
}

#contentalignment {
	padding:0px /*top*/ 0px /*right*/ 0px /*bottom*/ 16px /*left*/;	
}

#id20100923-15_ {
	position:absolute;
	left:3px;
	top:628px;
	width:20px;
	height:60px;
}

#id20100923-16_ { /* Horizontal Footer Menu Container */
	position:absolute;
	left:23px;
	top:628px;
	width:900px;
	height:31px;
	background-image: url(images/20100923_16.jpg);
}

#id20100923-17_ {
	position:absolute;
	left:923px;
	top:628px;
	width:28px;
	height:60px;
}

#id20100923-18_ {
	position:absolute;
	left:23px;
	top:659px;
	width:900px;
	height:29px;
}

#idElement-19 { /* Content Headline */
	margin-bottom:20px;
	font-family: Arial Narrow;
	font-size: 24px;
	color:#A6A6A6;
}

#idElement-20 { /* Content Left */
	float: left;
	width: 430px;
	font-family: Arial Narrow;
	font-size: 21px;
	color:#5A5A5A;
	margin-right: 20px;
}

#idElement-21 { /* Content Right */
	font-family: Arial Narrow;
	font-size: 21px;
	color:#5A5A5A;
	margin-right: 20px;
}

#idElement-22 { /* another element */
	float:left;
	margin-top:8px;
	margin-left:12px;
	text-align:left;
}

#idElement-23 { /* Impressum Link */
	margin-top: 0px;
	margin-right:52px;
	color:#5A5A5A;
	text-align:center;
	font-size:24px;
}
Miniaturansicht angehängter Grafiken
Extrahierte Sclices aus PS mit DIVs horizontal mittig anordnen-screenshot.gif  

Geändert von kerbstone (23-09-2010 um 20:57 Uhr)
Mit Zitat antworten
Antwort

Lesezeichen


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

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[IE] UL-Liste horizontal zentriert in DIV hasch HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 8 09-01-2009 21:46
[CSS] position:fixed nur horizontal mrhappiness HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 2 16-01-2007 13:11
select horizontal und vertikal flobee SQL / Datenbanken 0 22-01-2006 12:21
[Variablen] Menu horizontal Jessica PHP Developer Forum 4 10-12-2004 18:32
horizontal summieren cuniculus SQL / Datenbanken 5 04-08-2004 01:32

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 12:52 Uhr.