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 Bewertung: Bewertung: 12 Stimmen, 5,00 durchschnittlich.
  #1 (permalink)  
Alt 28-09-2010, 23:44
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard CSS Border Gradient / CSS Border Farbverlauf

Mittels folgendem CSS Code habe ich mir eine Inhalts-Box
mit runden Ecken, cross-browser-kompatibel, erstellt.
Wie kann ich nun border-left und border-right mit
einem Farbverlauf versehen?

HTML-Code:
#mainbox {
	background-color: #FFFFFF;
	width: 890px;
	margin: 0 auto 15px auto;
	padding: 30px;
	border-top: 4px solid #8C8C8C;
	border-right: 4px solid #CCCCCC;
	border-bottom: 4px solid #CCCCCC;
	border-left: 4px solid #CCCCCC;

	-moz-border-radius: 25px;
	-webkit-border-radius: 25px;
	border-radius: 25px;
	behavior: url(border-radius.htc);
	
	font-size: 24px;
	font-family: Arial Narrow;
	color: #A6A6A6;
}

// Inhalt der Datei border-radius.htc
--Do not remove this if you are using--
Original Author: Remiz Rahnas
Original Author URL: http://www.htmlremix.com
Published date: 2008/09/24

Changes by Nick Fetchak:
- IE8 standards mode compatibility
- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
Published date : 2009/11/18


<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">

// findPos() borrowed from http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
	var curleft = curtop = 0;

	if (obj.offsetParent) {
		do {
			curleft += obj.offsetLeft;
			curtop += obj.offsetTop;
		} while (obj = obj.offsetParent);
	}

	return({
		'x': curleft,
		'y': curtop
	});
}

function oncontentready(classID) {
  if (this.className.match(classID)) { return(false); }

	if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }

	this.className = this.className.concat(' ', classID);
	var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
	                                this.currentStyle['-webkit-border-radius'] ||
	                                this.currentStyle['border-radius'] ||
	                                this.currentStyle['-khtml-border-radius']) /
	                       Math.min(this.offsetWidth, this.offsetHeight), 1);
	var fillColor = this.currentStyle.backgroundColor;
	var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
	var strokeColor = this.currentStyle.borderColor;
	var strokeWeight = parseInt(this.currentStyle.borderWidth);
	var stroked = 'true';
	if (isNaN(strokeWeight)) {
		strokeWeight = 0;
		strokeColor = fillColor;
		stroked = 'false';
	}

	this.style.background = 'transparent';
	this.style.borderColor = 'transparent';

	// Find which element provides position:relative for the target element (default to BODY)
	var el = this;
	var limit = 100, i = 0;
	while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) {
		el = el.parentElement;
		i++;
		if (i >= limit) { return(false); }
	}
	var el_zindex = parseInt(el.currentStyle.zIndex);
	if (isNaN(el_zindex)) { el_zindex = 0; }
	//alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position);

	var rect_size = {
		'width': this.offsetWidth - strokeWeight,
		'height': this.offsetHeight - strokeWeight
	};
	var el_pos = findPos(el);
	var this_pos = findPos(this);
	this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y;
	this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x;

	var rect = document.createElement('v:roundrect');
	rect.arcsize = arcSize +'px';
	rect.strokecolor = strokeColor;
	rect.strokeWeight = strokeWeight +'px';
	rect.stroked = stroked;
	rect.style.display = 'block';
	rect.style.position = 'absolute';
	rect.style.top = this_pos.y +'px';
	rect.style.left = this_pos.x +'px';
	rect.style.width = rect_size.width +'px';
	rect.style.height = rect_size.height +'px';
	rect.style.antialias = true;
	rect.style.zIndex = el_zindex - 1;

	var fill = document.createElement('v:fill');
	fill.color = fillColor;
	fill.src = fillSrc;
	fill.type = 'tile';

	rect.appendChild(fill);
	el.appendChild(rect);

	var css = el.document.createStyleSheet();
	css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
	css.addRule("v\\:fill", "behavior: url(#default#VML)");

	isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
	// IE6 doesn't support transparent borders, use padding to offset original element
	if (isIE6 && (strokeWeight > 0)) {
		this.style.borderStyle = 'none';
		this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight;
		this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight;
	}

	if (typeof(window.rounded_elements) == 'undefined') {
		window.rounded_elements = new Array();

		if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; }
		window.onresize = window_resize;
	}
	this.element.vml = rect;
	window.rounded_elements.push(this.element);
}

function window_resize() {
	if (typeof(window.rounded_elements) == 'undefined') { return(false); }

	for (var i in window.rounded_elements) {
		var el = window.rounded_elements[i];

		var strokeWeight = parseInt(el.currentStyle.borderWidth);
		if (isNaN(strokeWeight)) { strokeWeight = 0; }

		var parent_pos = findPos(el.vml.parentNode);
		var pos = findPos(el);
		pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y;
		pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x;

		el.vml.style.top = pos.y +'px';
		el.vml.style.left = pos.x +'px';
	}

	if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); }
}
</script>
Mit Zitat antworten
  #2 (permalink)  
Alt 29-09-2010, 01:21
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,

wenn es da nicht für den IE noch so eine behavior-Krücke gibt, geht das gar nicht. Rahmen sind per CSS nicht als Gradienten sondern nur als einzelne Farben definierbar. Eventuell kommst du besser, wenn du mit Hintergrundbildern arbeitest?

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 29-09-2010, 02:34
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Okay, danke
Mit Zitat antworten
  #4 (permalink)  
Alt 01-10-2010, 00:33
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Ich bekomme es einfach nicht hin

Anbei ein Scrennshot der Grafik, die ich in W3C gerechtes Markup
umsetzen möchte, aber einfach keinen Weg finde!
Miniaturansicht angehängter Grafiken
CSS Border Gradient / CSS Border Farbverlauf-nervtoetend.jpg  
Mit Zitat antworten
  #5 (permalink)  
Alt 01-10-2010, 00:38
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

Zu wenig Information.

Ist dieser Rahmen immer gleich groß oder muss er sich der Größe der Inhalts anpassen (schwierig)?

Wo liegt konkret dein aktuelles Problem?

Was meinst du mit W3C-gerechtem Markup? Hast du es bereits hinbekommen, dabei aber die Validität verletzt?
__________________
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 01-10-2010, 00:49
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Als erstes die wichigen Informationen:

1) Rahmen muss sich an wachsenden Text anpassen
2) Border ist mit Farbverlauf, also nicht in einer Farbe
3) Mein konkretes Problem:
Ich finde keine vernünftige, systematische Herangehensweise, wie ich
a) die Ecken
b) den Farbverlauf des Rahmens (Border) und
c) die Box zum Mitwachsen
umsetzen kann.

Wegen W3C-gerechtem Markup:
Ich möchte lediglich betonen, dass es mir wichtig ist,
mich an Standards zu halten, auch wenn es durch die
Informationsvielfalt und/oder Nichtwissen manchmal schwierig ist
Mit Zitat antworten
  #7 (permalink)  
Alt 01-10-2010, 00:59
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

Okay, das ist schwierig und nur mit Abstrichen zu bewältigen:

Der Farbverlauf muss so steil sein, dass er vollständig in die Minimalhöhe des Rahmens passt. Bei größeren Rahmen wird nur die mittlere Farbe auf die übrige Höhe gestreckt. Wenn du dir den Farbverlauf mit Buchstaben vorstellst, sieht das Prinzip so aus (allerdings aus praktischen Gründen horizontal):

ABCDEFGHI (Minimalgröße)
ABCDEEEEE…EEEEEFGHI (große Größe)

Edit: Andere Variante. du benutzt JavaScript, um das aus dem Hintergrundbild ein img-Element zu machen, dass du dann auf die entsprechende Höhe streckst. (Ginge zwar auch direkt im HTML, aber das wäre dann schon wieder eine Vermischung von Inhalt und Layout.)
__________________
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!

Geändert von AmicaNoctis (01-10-2010 um 01:07 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 01-10-2010, 01:17
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Das verstehe ich sehr gut.
Wenn ich also eine Menge M mit n Elementen habe M:=n1,n2,n3,...,ni,...,n-1,n
dann nehme ich mir das ni-te Element, das die Y-Achse trifft, an der
der der Text beginnt, das Layout zu zerstören.

Aber mir fällt keine gute Strukturierung für das Markup ein.

Habe es schon damit versucht, wo ich mir gedacht hatte,
die Ecken links und rechts innerhalb der 'Shell'-Divs mit
zusätzlichen Platzhaltern zu versehen, aber irgendwie
finde ich das selbst nicht logisch. Hiilllfffffe

HTML-Code:
<div id="shellTop" style="background-image: url(top_bg.jpg)">
<div id="platzhalter_ecke_links"> <div id="topbox"></div> <div id="platzhalter_ecke_rechts"></div>
</div>

<-- hier fehlt border links und rechts, wie dort hin??? -->
<div id="shellMiddle"> <div id="mainbox"></div> </div>

<div id="shellBottom" style="background-image: url(bottom_bg.jpg)">
<div id="platzhalter_ecke_links"> <div id="bottombox"></div> <div id="platzhalter_ecke_rechts"></div>
</div>
Add: Zusätzliche Hürde ist noch, dass die gesamte Box mit allen Inhalten in Abhängkeit
des Engerätes (Desktop, Laptop, Tablet, PDA, Smartphone) und dessen Einstellungen interagieren soll.
Soll heißen: Seite wird immer passend aufgelöst, inkl. Logo und Banner Grafiken...

Geändert von kerbstone (01-10-2010 um 01:26 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 01-10-2010, 01:51
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 würde das gar nicht mit Markup machen, das bringt später nur Probleme. Die zusätzlichen Elemente die du brauchst, kannst du alle mit JS einhängen, dann bleibt der HTML-Code sauber strukturiert.
__________________
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 01-10-2010, 02:31
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Könnte ich wohl bitte ein Kick-Off Beispiel bekommen?
Mit Zitat antworten
  #11 (permalink)  
Alt 01-10-2010, 02:41
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 lässt keine Privatnachrichten zu und deine hinterlegte E-Mail-Adresse scheint ungültig zu sein.
__________________
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 01-10-2010, 03:10
kerbstone
 Registrierter Benutzer
Links : Onlinestatus : kerbstone ist offline
Registriert seit: Nov 2004
Beiträge: 412
kerbstone ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Ich habe soeben unter Einstellungen PMs aktiviert.
Mit Zitat antworten
  #13 (permalink)  
Alt 01-10-2010, 03:15
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Schönes neues CSS: border-image
__________________
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
css border image Lennie HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 4 18-06-2006 19:45
[CSS] tr, border-top Realmaker HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 4 15-02-2006 16:55
div und border-bottom Quetschi HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 3 03-02-2006 13:56
border fehlt in FF Deejoy HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 4 24-05-2005 21:59
CSS:Border Problem _sd HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 3 13-12-2003 18:22

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 15:59 Uhr.