to cool for IE

Diskutiere mit über: to cool for IE im Web-Editoren Forum

  1. hagbard86

    hagbard86 Thread Starter MacUser Mitglied

    Beiträge:
    3.947
    Zustimmungen:
    42
    Registriert seit:
    30.03.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?
     
  2. simusch

    simusch MacUser Mitglied

    Beiträge:
    2.221
    Zustimmungen:
    186
    Registriert seit:
    27.09.2004
    es ist ja haargenau erklärt, wie dus machen musst?!
     
  3. mkoessling

    mkoessling MacUser Mitglied

    Beiträge:
    1.487
    Zustimmungen:
    0
    Registriert seit:
    02.02.2005
    Das müßte so gehen, die Zahlen müssen natürlich weg.
     
  4. freso

    freso MacUser Mitglied

    Beiträge:
    1.279
    Zustimmungen:
    24
    Registriert seit:
    27.09.2002
    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
     
  5. hagbard86

    hagbard86 Thread Starter MacUser Mitglied

    Beiträge:
    3.947
    Zustimmungen:
    42
    Registriert seit:
    30.03.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
     
  6. hagbard86

    hagbard86 Thread Starter MacUser Mitglied

    Beiträge:
    3.947
    Zustimmungen:
    42
    Registriert seit:
    30.03.2005
    wsio kommt jetzt bei dir html auch noch ins spiel brauch ich beides das konfigurierte css file und den html code?
     
  7. freso

    freso MacUser Mitglied

    Beiträge:
    1.279
    Zustimmungen:
    24
    Registriert seit:
    27.09.2002
    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.
     
  8. freso

    freso MacUser Mitglied

    Beiträge:
    1.279
    Zustimmungen:
    24
    Registriert seit:
    27.09.2002
    das bild sollte auch kein psd sein, sondern ein gif, jpg oder png
     
  9. hagbard86

    hagbard86 Thread Starter MacUser Mitglied

    Beiträge:
    3.947
    Zustimmungen:
    42
    Registriert seit:
    30.03.2005
    krass es funzt jetzt :)

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

    hagbard86 Thread Starter MacUser Mitglied

    Beiträge:
    3.947
    Zustimmungen:
    42
    Registriert seit:
    30.03.2005
    liegt es daran das nur safarie des bei mir darstellen kann? weils noch nen psd ist?
     

Diese Seite empfehlen

Benutzerdefinierte Suche