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 13-07-2011, 19:51
medium22
 Registrierter Benutzer
Links : Onlinestatus : medium22 ist offline
Registriert seit: Mar 2006
Beiträge: 308
medium22 zeigte ein beschämendes Verhalten in der Vergangenheit
Standard CSS: Grafik / Hintergrundlinie wiederholen

Hallo,


Ich hab da grade so meine lieben Probleme mit CSS.

Es wird eine Art 'Box' dargestellt, die sowohl als Rand als auch im Inhalt eine Grafik als Hintergrund besitzt. Für beides habe ich kleine Grafiken die sich dementsprechend beliebig oft wiederholen und der Grösse des Inhalts anpassen lassen können sollten.

Auszug aus der HTML-Datei:
HTML-Code:
  <div class="content-main">
    <div class="content-left"></div>
    <div class="content-middle">
	inhalt.. <br /><br /><br /><img src="grafiken/hr.gif"><br />inhalt..<br />
	inhalt.. <br /><br /><br /><img src="grafiken/hr.gif"><br />inhalt..<br />
    </div>
    <div class="content-right"></div>
  </div>
Auszug aus der CSS-Datei:
Code:
#content-main {
  clear: left; 
  min-width: 600px;
}
.content-middle {
	padding-top:15px;
	padding-bottom:15px;
	width: 598px;
	height: auto;
	background-color: #E3C7F4; 
  	background-image:url(../grafiken/headline_whiteline.gif);
  	background-repeat:no-repeat;
  	background-position:top;
	float: left;
}
.content-left {
	min-height: 64px; 
	width: 1px;
	background-image: url(../grafiken/box_vborder.gif);
	background-repeat: repeat-y;
	float: left; 
}
.content-right {
	width: 1px;
	min-height: 64px;
	background-image:url(../grafiken/box_vborder.gif);
	background-repeat: repeat-y;
	float: left;
}
Das Problem ist nun, dass die beiden Grafiken links und rechts (content-left / right) nicht so lange wiederholt werden wie der Inhalt (content-middle) lang ist. Die Breite ist fix 600px, aber die Höhe richtet sich nach dem Inhalt.
Mein Gedanke ist nun, dass die (beim Aufbau der Seite) noch nicht wissen wieviel Inhalt kommt und dementsprechend auch nicht (oder nicht oft genug) wiederholt werden. Ich wüsste nun aber auch keine Möglichkeit denen das beizubringen bzw. woran es sonst liegen könnte.
Der Inhalt selbst wird dynamisch erzeugt, ist also an keine fixe Höhe gebunden.


Vorschläge, Ideen, Anregungen?


Gruss & Danke
Mit Zitat antworten
  #2 (permalink)  
Alt 13-07-2011, 20: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

Hallo Raffi,

vermutlich liegt das am float. Dadurch passt sich das Elternelement nicht an die Größe der Kinder an. Du kannst das aber erzwingen, indem du einen neuen block formatting context erzeugst. Das geschieht, wenn du den Elemente mit float: left eine der overflow-Eigenschaft hidden oder auto zuweist und den entsprechenden margin-left setzt.

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 13-07-2011, 21:45
medium22
 Registrierter Benutzer
Links : Onlinestatus : medium22 ist offline
Registriert seit: Mar 2006
Beiträge: 308
medium22 zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

Hallo Amica,


Leider bewirkt das nichts, dh. es verändert sich nichts.
Den margin-left-Wert musste ich auf 0px setzen, ist er höher als 0, verschiebt sich alles kreuz & quer. Auch das hinzufügen von overflow (auto o. hidden) veränderte nichts.

Den Teilscreenshot als Hilfe, wie es aktuell aussieht..
Miniaturansicht angehängter Grafiken
CSS: Grafik / Hintergrundlinie wiederholen-php-resource_css-rahmen.png  
Mit Zitat antworten
  #4 (permalink)  
Alt 13-07-2011, 22:57
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

Das hilft leider nichts. Da würde sich ein Onlinebeispiel besser machen.
__________________
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 14-07-2011, 00: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

Hinweis für Dritte: Diese Antwort bezieht sich auf ein per PM gesendetes Onlinebeispiel.

Floats sind keine Tabellen. Dass .content-main sich seinen Kindern der Höhe nach anpassen kann, wenn man einen BFC eröffnet, weißt du ja jetzt. Das heißt aber nicht, dass alle Kinder (also auch .content-left) sich dann wiederum auf die Größe des Elternelements erweitern.

Das Problem ist, dass ich deinen Ansatz für diese Box für falsch halte. Wenn links und rechts ja doch nur ein 1px breiter Rahmen ist, warum nimmst du dann nicht gleich border? Und wenn die Breite sowieso festgelegt ist, muss man nicht alles in 100 Bilder zerlegen, sondern kann auch beide oberen und beide unteren Rundungen zu je einem Bild zusammenfassen, oder auch vertikale Sliding Doors verwenden.
__________________
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
  #6 (permalink)  
Alt 14-07-2011, 00:27
medium22
 Registrierter Benutzer
Links : Onlinestatus : medium22 ist offline
Registriert seit: Mar 2006
Beiträge: 308
medium22 zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

Oh! An Border habe ich bisher gar nicht gedacht - habe mich zu sehr auf diese Grafiken versteift.

Nun habe ich sowohl content-left als auch right komplett entfernt, dem content-middle ein paar border-Werte geschenkt und schon sieht es so aus wie ich es gerne hätte.

Code:
.content-middle {
	padding-top:15px;
	padding-bottom:15px;
	width: 600px;
	height: auto;
	background-color: #E3C7F4;
	border-left: 1px;
	border-left-style: solid; 
	border-left-color: #FFFFFF;
	border-right: 1px;
	border-right-style: solid; 
	border-right-color: #FFFFFF;
	border-top: 1px;
	border-top-style: solid; 
	border-top-color: #FFFFFF;
}

Danke für diesen Denkanstoss - die bei dir wie immer Gold wert sind!
Mit Zitat antworten
  #7 (permalink)  
Alt 14-07-2011, 17:13
medium22
 Registrierter Benutzer
Links : Onlinestatus : medium22 ist offline
Registriert seit: Mar 2006
Beiträge: 308
medium22 zeigte ein beschämendes Verhalten in der Vergangenheit
Standard li-Elemente inline darstellen

Hallo,


da ich noch am selben Projekt sitze und erneut auf CSS-Proble stosse, mache ich in diesem Thread einfach weiter.

In den obigen Content werden nun Inhalt eingefügt - jeweils 3 'Boxen' pro Zeile. Nun habe ich versucht diese Boxen mit einer Liste (ul/li/....) zu realisieren was an und für sich auch sehr hübsch aussieht. Problem ist aber, dass ich diese 3 (bzw. zu Testzwecken erstmal zwei) 'Boxen' nur untereinander hinbekomme und nicht nebeneinander. Sowohl display: inline; (bzw. inline-block) als auch float: left (was ich beides sehr häufig über die Google-Suche gefunden habe) führen nicht zum gewünschten Ergebnis.

Auszug html:
HTML-Code:
<div class="content-middle">
  input-feld.. <br /><img src="s/hr.gif"><br />
  <span id="sm_box">
    <ul>
    <a href="#"><li><img src="s/a.gif" border="0"> <br /><br />Beschreibung A<br /></li></a>
    <a href="#"><li><img src="s/b.gif" border="0"> <br /><br />Beschreibung B<br /></li></a>
    </ul>
  </span>		
  <img src="s/hr.gif"><br />
</div>
Auszug CSS:

Code:
#sm_box {
  height: 80px;
  width: 150px;
  max-height: 80px;
  max-width: 150px;
  color: #000000;
  text-decoration: none;
  border: 0px;
  margin: 1px;
  display: inline-block;
}
#sm_box ul, #sm_box li {
  height: 80px;
  width: 150px;
  list-style-type: none;
  padding: 2px;
  margin: 1px;
  color: #000000;
  text-decoration: none;
}
#sm_box a:hover li {
  background-color: #EAD9F7;
  height: 80px;
  width: 150px;
  max-height: 80px;
  max-width: 150px;
  padding-top: 2px;
  color: #000000;
  text-decoration: none;
  border: 0px;
}
Gibt es einen bessere Weg um das zu realisieren? Oder noch besser.., sieht jemand wo hier der Hund liegen könnte?
Mit Zitat antworten
  #8 (permalink)  
Alt 14-07-2011, 17:21
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von medium22 Beitrag anzeigen
Oder noch besser.., sieht jemand wo hier der Hund liegen könnte?
Im fehlerhaften HTML-Code.

Bitte validiere diesen, bevor du fragst.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #9 (permalink)  
Alt 14-07-2011, 22:41
medium22
 Registrierter Benutzer
Links : Onlinestatus : medium22 ist offline
Registriert seit: Mar 2006
Beiträge: 308
medium22 zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

Entschuldige, dass wir nicht so allwissend sind wie du!
Mit Zitat antworten
  #10 (permalink)  
Alt 14-07-2011, 22:44
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 medium22 Beitrag anzeigen
Entschuldige, dass wir nicht so allwissend sind wie du!
Bitte nicht sarkastisch werden. Bei CSS-Problemen muss immer erst sichergestellt werden, dass der HTML-Code valide ist und das ist er bei dir nicht. Es gibt also keinen Grund, sich über Wahsagas Antwort zu beklagen.
__________________
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
  #11 (permalink)  
Alt 15-07-2011, 00:57
medium22
 Registrierter Benutzer
Links : Onlinestatus : medium22 ist offline
Registriert seit: Mar 2006
Beiträge: 308
medium22 zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

Okay!

Also nochmal anders..

HTML-Code:
<div id="sm_box2">
  <div><img src="s/a.gif"> Beschreibung A<br /></div>
  <div><img src="s/b.gif"> Beschreibung B<br /></div>
  <div><img src="s/c.gif"> Beschreibung C<br /></div>
</div>
Code:
#sm_box2 {
  float: left;
  height: 80px;
  width: 150px;
  max-height: 80px;
  max-width: 150px;
  color: #000000;
  text-decoration: none;
  border: 0px;
  margin: 1px;
  display: inline-block;
  position: relative;
  bottom: 0px;
}
#sm_box2 div:hover {
  background-color: #EAD9F7;
  height: 80px;
  width: 150px;
  max-height: 80px;
  max-width: 150px;
  min-height: 80px;
  min-width: 150px;
  padding-top: 2px;
  color: #000000;
  text-decoration: none
  border: 0px;
}
Wird trotz floating, display, ... untereinander angezeigt. Ebenso bekomme ich den Inhalt (die Grafik und den Text) nicht positioniert (bottom).
Mit Zitat antworten
  #12 (permalink)  
Alt 15-07-2011, 01:07
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

Du hast sm_box gefloatet, nicht aber die divs darin. Der Selektor zum Stylen dieser inneren divs fehlt, zumindest wenn sie nicht gerade gehovert werden.

Code:
#sm_box div { /* allgemeine Angaben für die inneren divs */ }
#sm_box div:hover { /* Änderungen zu oben für den gehoverten Zustand */ }
__________________
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
  #13 (permalink)  
Alt 15-07-2011, 07:41
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von medium22 Beitrag anzeigen
Okay!

Also nochmal anders..
Niemand hat gesagt, dass du schlechteres HTML schreiben sollst (Stichwort DIV-Suppe) - sondern nur die Fehler ausbessern ...
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #14 (permalink)  
Alt 15-07-2011, 11:58
medium22
 Registrierter Benutzer
Links : Onlinestatus : medium22 ist offline
Registriert seit: Mar 2006
Beiträge: 308
medium22 zeigte ein beschämendes Verhalten in der Vergangenheit
Standard

Danke für den Hinweis Amica.

HTML-Code:
<div id="sm_box2">
  <div><p><img src="s/a.gif" border="0"> Beschreibung A</p></div>
  <div><p><img src="s/b.gif" border="0"> Beschreibung B</p></div>
  <div><p><img src="s/c.gif" border="0"> Beschreibung C</p></div>
</div>
Code:
#sm_box2 {
  height: 80px;
  width: 456px;
  max-height: 80px;
  max-width: 456px;
  color: #000000;
  text-decoration: none;
  border: 0px;
  margin: 1px;
}
#sm_box2 div {
  float: left;
  height: 80px;
  width: 150px;
  max-height: 80px;
  max-width: 150px;
  color: #000000;
  border: 0px;
  margin: 1px;
  position: relative; 
  bottom: 0;
  vertical-align:middle;
}
#sm_box2 div:hover {
  float: left;
  background-color: #EAD9F7;
}
#sm_box2 div p {
  position: absolute; 
  bottom: 0;
  left: auto;
}
#sm_box2 div p p {
  vertical-align:middle;
}
Das letzte Problem war noch, dass ich nicht gleichzeitig position:absolut mit bottom und middle benutzen konnte. Daher noch das div p p ... Das seltsame an der Sache ist, wie ich finde, dass das 'p p' komplett richtig dargestellt wurde obwohl im HTML selbst kein zweites p vorkommt.

Kann mir jemand erklären warum das so ist?


Zum Design selbst ist nun alles geregelt, es sieht sowohl im IE als auch im FF (andere noch nicht getestet) gleich aus.

Danke!


Edit: Herrlich! Ich bin auf einem absteigenden Ast.. Da kann ich mir ein herzhaftes Lachen echt nicht mehr verkneifen.

Geändert von medium22 (15-07-2011 um 12:01 Uhr)
Mit Zitat antworten
  #15 (permalink)  
Alt 15-07-2011, 19:21
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von medium22 Beitrag anzeigen
Daher noch das div p p ...
Diese Regel kann gar nicht wirksam werden, weil du keinen Absatz in einem Absatz hast.

Und wenn du einen hättest, wäre es wiederum ungültiges HTML.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
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
Termine wiederholen smartmusic SQL / Datenbanken 2 15-07-2009 15:24
Formular oder Grafik beliebig automatisch wiederholen CosmoPhobia PHP Developer Forum 11 26-03-2008 18:44
Passwort wiederholen janrichter PHP Developer Forum 1 26-05-2006 22:00
hintergrundfarbe wiederholen SOB22 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 7 08-10-2004 11:58
bereich wiederholen glitzer HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 6 22-05-2004 13:44

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

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 21:31 Uhr.