to cool for IE

hagbard86 · 16.09.2005

kann mir mal einer helfen

ich möchte gern das hier haben

ich möchte es so haben wie hier

Fun Bilder / Pics, lustige Videos / Clips, Flash Games und lustige Ebay - Auktionen auf bildschirmarbeiter.com

also unten rechts

da ich ja rapidweaver hab ist meine frage wie muss ich das in das css file reinmachen

einfach ganz unten
1. a#tooCool {
2. position: fixed;
3. right: 0;
4. bottom: 0;
5. display: block;
6. height: 80px;
7. width: 80px;
8. background: url(/path/to/image/too_cool.png) bottom right no-repeat;
9. text-indent: -999em;
10. text-decoration: none;
11. }

das rein? die zahlen gehören wohl weg?! oder?
wär das alles?

simusch · 16.09.2005

es ist ja haargenau erklärt, wie dus machen musst?!

mkoessling · 16.09.2005

Das müßte so gehen, die Zahlen müssen natürlich weg.

freso · 16.09.2005

so müßte es ungefähr aussehen... der code

<head>

<style>
a#tooCool {
position: fixed;
right: 0;
bottom: 0;
display: block;
height: 80px;
width: 80px;
background: url(/path/to/image/too_cool.png) bottom right no-repeat;
text-indent: -999em;
text-decoration: none;
}</style>

</head>

<a id="tooCool" href="http://www.w3junkies.com/toocool/">Too Cool for Internet Explorer</a>

<body>
</body>
</html>

natürlich muß der pfad zum bild richtig sein

hagbard86 · 16.09.2005

Code:

/*<group=General Styles>*/

body {
	font: 11px   'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
	background: transparent repeat url(images/rice_paper.jpg);
	margin: 0px 5px 0px 5px;
	text-align: center;
	color: #333333;
	border-color: black;
}

p { 
}

b, strong {
	font-weight: bold;
}

a:link {
	color: #bf2e00;
	text-decoration: none;
}

a:visited {
	color: #d33400;
	text-decoration: none;
}

a:hover, a:active {
	color: #000000;
}

img {
	border-style: none;
}

.image-left {
	margin: 3px;
	padding: 3px;
	float: left;
}

.image-right {
	margin: 3px;
	padding: 3px;
	float: right;
}




/*</group>*/

/*<group=Layout>*/

#container {
	background: right url(images/rice_paper.jpg) repeat-y transparent; /* This Is The BG Color Of The Main Div */
	width: 780px;
	margin: 0px auto; /* Right And Left Margin Widths To Auto */
	text-align: left; /* Hack To Keep IE5 Windows Happy */
	color: #3e3e3e;
	padding-bottom: 20px;
	font-family: 'Lucida Grande', LucidaGrande, Lucida, Helvetica, Arial, sans-serif;
	color: #333333;
	border-left-style: ridge;
	border-left-color: #bf2e00;
	border-right-style: groove;
	border-right-color: #bf2e00;
	border-bottom-style: groove;
	border-bottom-color: #bf2e00;
}

#pageHeader {
	width: 780px;
	text-align: left;
	list-style: none;
	height: 111px;
	background: transparent url(images/header_bg.jpg) repeat-x;
	display: inherit;
	border: transparent;
	border-bottom-style: groove;
	border-bottom-color: #bf2e00;
}

#pageHeader img {
	display: inline;
	float: right;
	margin-top: 30px;
	margin-right: 40px;
}

#pageHeader h1 {
	color: #66ff66;
	margin: 0px;
	font-weight: bold;
	font-size: 26px;
	padding: 30px 20px 0px 40px;
}

#pageHeader h2 {
	color: #ffffff;
	margin: 0px;
	font-size: 12px;
	font-weight: normal;
	padding-right: 20px;
	padding-left: 40px;
}

#contentContainer {
	width: 590px;
	float: left;
	text-align: left;
	padding-top: 30px;
	background: url(images/rice_paper.jpg) repeat transparent;
	border-right-color: #bf2e00;
}

#contentContainer #content {
	line-height: 2.0em;
	padding-right: 30px;
	padding-left: 40px;
	width: 520px;
}

#sidebarContainer {
	width: 190px;
	float: right;
	text-align: left;
	padding-top: 27px;
	border-left-color: #bf2e00;
}

#sidebarContainer .sidebar {
	padding: 10px;
	line-height: 2.0em;
}

#footer {
	width: 780px;
	margin: 0px auto; /* Right And Left Margin Widths To Auto */
	text-align: center; /* Hack To Keep IE5 Windows Happy */;
	height: 3px;
	height: 31px;
	background: transparent none repeat-x;
	color: #bf2e00;
}

#footer p {
	margin: 0px;
	padding: 10px 0px 0px 0px;
}

#footer a {
	color: #0741bc;
	text-decoration: none;
}

#footer a:hover {
	color: #bf2e00;
	text-decoration: none;
}
	
/*</group>*/

/*<group=Bread-crumb>*/

#breadcrumbcontainer {
	text-align: center;
	width: inherit;
	padding: 0px;
	margin-top: 10px;
	float: left;
}

#breadcrumbcontainer ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	display: inline;
}

#breadcrumbcontainer li {
	padding: 0px;
	display: inline;
}

#breadcrumbcontainer a {
	display: inline;
}

#breadcrumbcontainer a:hover {
	display: inline;
}
	
/*</group>*/

/*<group=Toolbar>*/

/* Toolbar Styles */

#navcontainer {
	line-height: 2.0em;
	padding-top: 0px;
}

#navcontainer #current {
	font-weight: bold;
	color: #bf2e00;
}

/* Parent - Level 0 */

#navcontainer ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	margin-left: 10px;
}

#navcontainer li { 
}

#navcontainer a {
	display: block;
	color: #bf2e00;
	text-decoration: none;
	height: 20px;
}

#navcontainer a:hover {
	color: #d33434;
	font-weight: bold;
}

/* Child - Level 1 */

#navcontainer ul ul {
	padding: 0px;
	margin: 0px;
	margin-left: 10px;
}

#navcontainer ul ul li { 
}

#navcontainer ul ul a {
	display: block;
	text-decoration: none;
	font-size: 90%;
	height: 20px;
}

#navcontainer ul ul a:hover {
	background: transparent;
}

/* Child - Level 2 */

#navcontainer ul ul ul {
	padding: 0px;
	color: #808080;
	margin-left: 15px;
}

#navcontainer ul ul ul li { 
}

#navcontainer ul ul ul a {
	display: block;
	text-decoration: none;
	font-size: 90%;
	padding-left: 0px;
	height: 20px;
}

#navcontainer ul ul ul a:hover {
	background: transparent;
}

/* Child - Level 3 */

#navcontainer ul ul ul ul {
	padding: 0px;
	color: #999999;
	margin-left: 20px;
}

#navcontainer ul ul ul ul li { 
}

#navcontainer ul ul ul ul a {
	display: block;
	text-decoration: none;
	font-size: 90%;
}

#navcontainer ul ul ul ul a:hover {
	background: transparent;
}

/* Child - Level 4 */

#navcontainer ul ul ul ul ul {
	padding: 0px;
	margin: 0px 0px 0px 15px;
	color: #b3b3b3;
}

#navcontainer ul ul ul ul ul li { 
}

#navcontainer ul ul ul ul ul a {
	display: block;
	text-decoration: none;
	font-size: 90%;
	padding-left: 0px;
}

#navcontainer ul ul ul ul ul a:hover {
	background: transparent;
}

/* Child - Level 5 */

#navcontainer ul ul ul ul ul ul {
	padding: 0px;
	margin: 0px 0px 0px 15px;
	color: #cccccc;
}

#navcontainer ul ul ul ul ul ul li { 
}

#navcontainer ul ul ul ul ul ul a {
	display: block;
	text-decoration: none;
	font-size: 90%;
	padding-left: 0px;
}

#navcontainer ul ul ul ul ul ul a:hover {
	background: transparent;
}
	
/*</group>*/

/*<group=Global Classes>*/

.standout, blockquote {
	background: #066aca;
	padding: 10px;
	color: #ffffff;
	font-size: 13px;
	font-style: italic;
	font-weight: bold;
}

h1 {
	color: #066fd4;
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 3px;
}

h2 {
	color: #066fd4;
	font-size: 22px;
	font-weight: normal;
	margin-bottom: 3px;
}

h3 {
	color: #066fd4;
	font-size: 20px;
	font-weight: normal;
	margin-bottom: 3px;
}

h4 {
	color: #066fd4;
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 3px;
}

h5 {
	color: #066fd4;
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 3px;
}

.imageStyle {
}
	
/*</group>*/

/*<group=Blog>*/

/*<group=Archive Page>*/

.blog-archive-background {
	color: #000000;
	text-align: center; /* To Make Content Centered */
	font: 12px 'Lucida Grande', Geneva, Arial, Verdana, sans-serif;
	background: #ffffff;
}

.blog-archive-headings-wrapper {
	text-align: left;
	width: 590px;
	padding: 10px;
}

.blog-archive-entries-wrapper {
	text-align: left;
	width: 590px;
	padding: 10px;
}

.blog-archive-month {
	color: #066fd4;
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 3px;
}

.blog-archive-link { 
}

	
/*</group>*/

.blog-entry {
}

.blog-entry-title {
	color: #bf2e00;
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 3px;
}

.blog-entry-date {
	margin-bottom: 10px;
	margin-top: 5px;
}

.blog-entry-body {
	margin-bottom: 45px;
}

.blog-entry-comments {
	
}
	
/*</group>*/

/*<group=File Sharing>*/

.filesharing-description {
	margin-bottom: 20px;
}

.filesharing-item {
	
}

.filesharing-item-title {
	color: #066fd4;
	font-size: 14px;
	font-weight: normal;
}

.filesharing-item-description {
	margin-bottom: 10px;
}

/*</group>*/

/*<group=Photo Album>*/

/*<group=Index Page (Thumbnail view)>*/

.album-title {
	color: #bf2e00;
	font-size: 24px;
	font-weight: normal;
	margin-bottom: 3px;
}

.album-description {
}

.thumbnail-frame {
	margin: 0px;
	padding: 0px;
}

.thumbnail-frame a {
}

.thumbnail-frame a:hover {
	height: 30px;
}

.thumbnail-frame img {
	border-style: none;
}

.thumbnail-caption {
	margin-top: -2px;
	font-size: 0.8em;
}
	
/*</group>*/

/*<group=Single Page (Photo view)>*/

.photo-background {
	text-align: center;
	margin: 10px;
}

.photo-navigation {
	padding: 10px;
	background: #ffffff;
	margin-bottom: 10px;
}

.photo-navigation a {
}

.photo-navigation a:hover {
}

.photo-frame{
	margin: 0px;
	border: 5px solid #ffffff;
}

.photo-links {
}

.photo-title {
	color: #bf2e00;
	font-size: 18px;
	font-weight: normal;
	margin: 0px 0px 5px 0px;
}

.photo-caption {
	font-size: 13px;
	margin: 0px;
	color: #bf2e00;
}

/*</group>*/
	
/*</group>*/

/*<group=Quicktime Page>*/

.movie-description {
	text-align: center;
}
	
/*</group>*/

/*<group=Quicktime Album>*/

/*<group=Index Page (Movie Thumbnail view)>*/

.movie-page-title {
	color: #066fd4;
	font-size: 24px;
	font-weight: normal;
}

.movie-page-description {
	margin-bottom: 5px;
}

.movie-thumbnail-frame {
	float: left;
	display: inline;
	margin-bottom: 10px;
	margin-right: 10px;
	text-align: center;
	width: 131px;
}


.movie-thumbnail-caption {
	text-align: center;
}
	
/*</group>*/

/*<group=Single Page (Movie View)>*/

.movie-background {
	background: #ffffff;
	margin-top: 5px;
}

.movie-title {
	color: #066fd4;
	font-size: 14px;
	font-weight: normal;
	text-align: center;
}

.movie-frame {
	text-align: center;
	margin-bottom: 10px;
}
	
/*</group>*/


/*</group>*/

/*<group=Contact Form>*/
.message-text { } 

.required-text {
	color: #bf2e00;
} 

.form-input-field {
	color: #bf2e00;
} 

.form-input-button {
	color: #bf2e00;
} 
/*</group>*/-decoration: none;
   }

das ist das aktuelle css file also

das neue sieht jetzt am ende so aus

Code:

.form-input-button {
	color: #bf2e00;
} 
/*</group>*/-decoration: none;
   }

a#tooCool {
	position: fixed;
	right: 0;
	bottom: 0;
	display: block;
	height: 80px;
	width: 80px;
	background: url(images/too_cool.psd) bottom right no-repeat;
	text-indent: -999em;
	text-decoration: none;
	}

also richtig oder? aber nix gehen

hagbard86 · 16.09.2005

freso schrieb:
so müßte es ungefähr aussehen... der code

<head>

<style>
a#tooCool {
position: fixed;
right: 0;
bottom: 0;
display: block;
height: 80px;
width: 80px;
background: url(/path/to/image/too_cool.png) bottom right no-repeat;
text-indent: -999em;
text-decoration: none;
}</style>

</head>

<a id="tooCool" href="http://www.w3junkies.com/toocool/">Too Cool for Internet Explorer</a>

<body>
</body>
</html>

natürlich muß der pfad zum bild richtig sein

wsio kommt jetzt bei dir html auch noch ins spiel brauch ich beides das konfigurierte css file und den html code?

freso · 16.09.2005

das

kommt in den html code

und den css style kannst du entweder in eine seperate css-datei schmeißen oder in den head des html dokuments schreiben.

freso · 16.09.2005

das bild sollte auch kein psd sein, sondern ein gif, jpg oder png

hagbard86 · 16.09.2005

krass es funzt jetzt

ich werd mal ne anleitung schreiben wies genau geht also schritt für schritt

hagbard86 · 16.09.2005

freso schrieb:
das bild sollte auch kein psd sein, sondern ein gif, jpg oder png

liegt es daran das nur safarie des bei mir darstellen kann? weils noch nen psd ist?

mkoessling · 16.09.2005

Auf welcher Seite soll das erscheinen, bin gerade auf deine Homepage, aber das Logo ist nicht zu finden.

mkoessling · 16.09.2005

hagbard86 schrieb:
liegt es daran das nur safarie des bei mir darstellen kann? weils noch nen psd ist?

Wandel das mal in JPG oder GIF um, ist besser.

freso · 16.09.2005

psd wir glaube ich nur von wenigen browsern unterstützt und ist eigentlich auch kein web-format. zudem ist die datei viel zu groß und somit hat die seite ne ewige ladezeit.

RETRAX · 16.09.2005

Die Seite lädt sich unter DSL 3000 einen ab....die armen Modem User...

admartinator · 16.09.2005

mkoessling schrieb:
Wandel das mal in JPG oder GIF um, ist besser.

Ich würde es in PNG machen. Was heisst 'würde' - ich hab....

Nickless · 16.09.2005

Hab mich schon gefragt, wann ich hier die ersten Amateur-Sites mit dieser peinlichen Mode finde... Ging ja schneller als erwartet

Ich empfehle als Bild-Format übrigens BMP

admartinator · 16.09.2005

Nickless schrieb:
Hab mich schon gefragt, wann ich hier die ersten Amateur-Sites mit dieser peinlichen Mode finde... Ging ja schneller als erwartet Ich empfehle als Bild-Format übrigens BMP

Tja, als Amateur kann man sich das halt noch erlauben.

Nickless · 16.09.2005

admartinator schrieb:
Tja, als Amateur kann man sich das halt noch erlauben.

Ich wollte eigentlich erst »Privat-Sites« schreiben, dachte mir dann aber, dass ich den anderen damit Unrecht tue. Die Eigenschaft, den IE immer gleich zu verteufeln oder sich als cool zu bezeichnen, weil man erkannt hat dass der IE unsagbar schlecht ist, als amateurhaft zu bezeichnen, trifft es glaube ich doch eher. Sag mir doch mal, warum der IE so schlecht ist...

admartinator · 16.09.2005

Nickless schrieb:
Sag mir doch mal, warum der IE so schlecht ist...

Muss ich dich als Profi auf die unzähligen Sicherheitslücken hinweisen?

Mal ganz davon abgesehen - wir sind hier ja schließlich in einem Mac-Forum - nutzt doch wohl kaum einer von uns auf dem Mac diesen grauseligen IE, oder etwa doch?

xenayoo · 16.09.2005

Nickless schrieb:
...Sag mir doch mal, warum der IE so schlecht ist...

Bitte, wenn du willst: Weil dieser geldgierige M$-Laden immer versucht, seine eigenen Standards durchzusetzen. Es ist nur eine Frage der Zeit, wann man nur noch Seiten, die mit M$-Tools erstellt wurden, vernünftig auf diesem Dreckbrowser darstellen kann, der im übrigen für Mac nicht mehr weiterentwickelt und supportet wird. Schon jetzt gibt es reine HTML-Seiten, die auf jedem Browser einwandfrei dargestellt werden - nur im IE nicht! Und du willst sicher nicht behaupten, dass das gut ist....

to cool for IE

hagbard86

Aktives Mitglied

simusch

Aktives Mitglied

mkoessling

Aktives Mitglied

freso

Aktives Mitglied

hagbard86

Aktives Mitglied

hagbard86

Aktives Mitglied

freso

Aktives Mitglied

freso

Aktives Mitglied

hagbard86

Aktives Mitglied

hagbard86

Aktives Mitglied

mkoessling

Aktives Mitglied

mkoessling

Aktives Mitglied

freso

Aktives Mitglied

RETRAX

admartinator

Aktives Mitglied

Nickless

admartinator

Aktives Mitglied

Nickless

admartinator

Aktives Mitglied

xenayoo

Aktives Mitglied