URL: https://www.overclockers.at/coding-stuff/css_stil_anpassen_aber_wie_197469/page_1 - zur Vollversion wechseln!
Ich möchte einen CSS Stil eines cmr so anpassen, dass die Daten wie auf dem Screenshot ausgeworfern werden!
Hier ist der Text aus dem CSS File:
Code: PHP/* ==================================================== Global settings for all pages ==================================================== */ body { background-color: #d8dfe3; border: 0px; color: #000000; font-family: arial unicode ms, arial, helvetica, sans-serif; font-size: 10pt; margin: 20px; padding: 0px; text-align: center; } /* ======================================================== Page settings used in the main site and index page ======================================================== */ #page { background-color: #ffffff; width: 900px; margin: 0px auto; text-align: left; border: 0px solid #B0B0B0; } /* ====================================================== Page settings for the sitemap. ====================================================== */ #content-sitemap ul { margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; } #content-sitemap li { margin-top: 3px; margin-bottom: 3px; padding-top: 0px; padding-bottom: 0px; clear: both; } li.nobullet { list-style-type: none; margin: 0px; padding: 0px; clear: both; } #head { background-color: #333333; } #crunch { background-color: #FFFFFF; font-size: 0.8em; margin: 10px 5px 10px 5px; } #navigation { float: left; width: 210px; font-size: 9pt; } #content { margin-top: 0px; } #float_content { float: right; margin: 0px; padding: 0px; width: 680px; } #wrapper { border-left: 4px solid #dddddd; margin-bottom: 10px; } #wrapper_inner { padding: 3px 10px 5px 10px; } #float_wrapper { margin: 0; padding: 0p } #content-sitemap { font-size: 14px; margin: 10px 0 20px 0; padding: 0px; } #footer { clear: both; margin: 0 auto; padding-top: 2px; text-align: right; width: 900px; } .sitemapicon-comp, .sitemapicon-info { background-color: #FFCC00; float: left; margin-right: 3px; } /* LINK STYLES */ a, a:link, a:visited { text-decoration: none; color: #000000; } a:hover { text-decoration: underline; } .linklist a, .linklist a:link, .linklist a:visited, #content a, #content a:visited, #content-sitemap a, #content-sitemap a:visited { border: none; color: #000000; text-decoration: underline; } .linklist a:hover, .linklist a:active, #content a:hover, #content a:active, #content-sitemap a:hover, #content-sitemap a:active { color: #FFdd00; } /* ======================================================= HEADER STYLES ======================================================= */ div.company { font-size: 15px; font-weight: bold; background-color: #ffdd00; width: 900px; padding: 0px 0px 0px 0; margin: 0px; overflow: hidden; } div.company p { vertical-align: middle; } td.project { font-weight: bold; font-size: 10pt; color: #F5F5F5; vertical-align: middle; padding: 3px 5px 3px 5px; padding-left: 5px; width: 100%; } td.project a, td.project a:visited { color: #F5F5F5; } div.logo_company { padding: 2px 0 2px 0; } div.logo_company img { margin-right: 10px; padding: 3px; } table.metatable { background-color: #333333; width: 900px; vertical-align: middle; margin: 0px; padding: 0px; border: none; height: 25px; } .metatable { border-left: 2px solid #E1EAFB; padding-left: 7px; padding-right: 7px; vertical-align: middle; } td.metatable a, td.metatable a:link, td.metatable a:visited { color: white; vertical-align: middle; font-size: 12px; } /* =================================================== Triplet Navigation classes. =================================================== */ #handbooks { width: 190px; font-size: 8pt; margin: 3px; } #navigation table { padding: 0px; margin: 0px; border: none; } .triplet1, .triplet2, .triplet3 { margin: 0px 0px 10px 0px; } .triplet1 div.triplet_head, .triplet2 div.triplet_head, .triplet3 div.triplet_head { font-weight: bold; padding: 5px; margin-bottom: 5px; } .triplet1 div.triplet_parent, .triplet2 div.triplet_parent, .triplet3 div.triplet_parent, .triplet1 div.triplet_body, .triplet2 div.triplet_body, .triplet3 div.triplet_body { padding: 5px; padding-left: 3px; margin: 3px 0px; } .triplet1 div.triplet_head { background-color: #ffdd00; } .triplet1 div.triplet_parent { background-color: #D5C572; } .triplet1 div.triplet_body { background-color: #EADB9A; color: #8F803F; overflow: hidden; } .triplet2 div.triplet_head { background-color: #D5EB99; } .triplet2 div.triplet_parent { background-color: #D5EB99; } .triplet2 div.triplet_body { background-color: #D5EB99; color: #878A40; overflow: hidden; width: 150px; } .triplet3 div.triplet_head { background-color: #DB9234; } .triplet3 div.triplet_parent { background-color: #DB9E50; } .triplet3 div.triplet_body { background-color: #E5B472; color: #875533; } .triplet_body_table, .triplet_parent_table { width: 200px; overflow: hidden; table-layout: fixed; } .triplet_body_image, .triplet_parent_image { font-size: 11px; vertical-align: top; width: 15px; padding-top: 3px; } .triplet_body_link, .triplet_parent_link { font-size: 11px; letter-spacing: 1px; padding-bottom: 3px; } .triplet_inner { letter-spacing: 1px; font-size: 11px; } #navigation a:hover { color: #000000; border: 0px; border-bottom: 1px solid white; } #headerInCrunch { font-size: 12pt; margin: 0px; padding: 0px; } /* links to handbooks on start page */ .triplet1 .triplet_head a { font-weight: bold; } /* ===================================================== Handbook selection box. ===================================================== */ #navigation div.triplet_select, .handbookSelection { background-color: #ffdd00; text-align: center; margin-bottom: 5px; } #languageSelector { font-size: 8pt; float: right; } .language_selection { padding-right: 4px; vertical-align: middle; } /* ===================================================== Styles used in index page ===================================================== */ #indexcontent { margin-top: 0px; } #indexnav { margin-top: 10px; } .indexhead { font-size: 11px; border-bottom: 2px solid #dddddd; } .indexbody { margin-top: 10px; } #indexcontent .singleentry a, #indexcontent .parententry a, #indexcontent .singleentry a:visited, #indexcontent .parententry a:visited { font-weight: bold; color: #000000; } #indexcontent .singleentry a:hover, #indexcontent .parententry a:hover { text-decoration: none; } #indexcontent tr td.indexlink { padding-left: 16px; } #indexcontent tr.subentry td { padding-left: 8px; } /* ========================================================= Navigation in Indexpage and Startpage ========================================================= */ .componentRootLink { padding: 2px 5px; background-color: #D5EB99; margin-top: 2px; } .componentRootLink1 { padding: 2px 5px; background-color: #D5EB99; margin-top: 2px; } .componentRootLink2 { padding: 2px 5px; background-color: #DB9234; margin-top: 2px; } .componentRootLink3 { padding: 2px 5px; background-color: #DB9234; margin-top: 2px; } /* ==================================================== Indexpage ==================================================== */ .indextable_main { font-size: 12px; } .indextable_main * { margin: 0px; padding: 0px; } .indextable_sub { font-size: 12px; margin: 0px; padding: 0px; } .indexlink { text-decoration: none; font-size: 11px; width: 100%; } .indexHeadLink { font-size: 12px; margin-bottom: 5px; margin-top: 5px; padding-top: 5px; } /* ========================================================== CONTENT STYLES ========================================================== */ p { margin: 8pt 0 0 0; padding: 0; } h1 { font-size: 18pt; line-height: 1.2em; margin: 0; padding: 0; } h2 { font-size: 16pt; line-height: 1.2em; margin: 20pt 0 0 0; padding: 0; } h3 { font-size: 12pt; line-height: 1.2em; margin: 18pt 0 0 0; padding: 0; } strong { font-weight: bold; } em { font-style: italic; } .clearboth { clear: both; } .codeblock { display: block; font-family: courier new, courier, monospace; } .codeblock-first { display: block; font-family: courier new, courier, monospace; margin-top: 8pt; } .subheading { font-weight: bold; font-size: 13pt; letter-spacing: 1px; margin: 20pt 0 0 0; } .subheading_first { font-weight: bold; font-size: 13pt; letter-spacing: 1px; margin: 8pt 0 0 0; } .margin_text { border-bottom: 1px solid gray; font-weight: bold; color: #435CA7; font-size: 8pt; letter-spacing: 1px; line-height: 1.4em; margin: 12pt 0 -6pt 0; padding: 0 2pt 2pt 2pt; width: 230px; } span.footer { font-size: 10px; letter-spacing: 1px; color: #808080; } #indeximage { text-align: center; vertical-align: middle; } hr { height: 1px; background-color: #cccccc; border: none; } /* ==================================================== Images in content ==================================================== */ img { border: none; } #content img { margin: 8pt 0 0 0; border: none; } img.img_original, img.img_fixed_column, img.img_fixed_textarea, img.img_margin, img.img_50, img.img_80 { /* leave all images as is, since stretching and the like is not desired for an image on a web page */ display: block; } .imgtitle { font-style: italic; } /* ======================================================== SAFETY INFORMATION STYLES ======================================================== */ table.safety-table { margin: 8pt 10px 0 0; table-layout: fixed; width: 600px; } td.safety-image { text-align: center; vertical-align: top; width: 140px; } td.safety-box { border: solid 2px #000000; padding: 0px; margin: 0px; vertical-align: top; } .danger-head, .warning-head, .attention-head, .caution-head, .note-head { color: #000000; font-size: 12pt; font-weight: bold; letter-spacing: 1px; padding: 4px 5px 4px 5px; border-bottom: 2px solid black; } .warning-head, .attention-head { background-color: #FB9700; } .caution-head { background-color: #FCFC00; } .danger-head { background-color: #FC0000; } .note-head { background-color: #0033CC; color: #FFFFFF; } .safety-body { background-color: #ffffff; padding: 5px; } .safety-body p.subheading, .safety-body p.subheading_first { font-size: 12pt; letter-spacing: 0; margin-top: 0; } .safety-body p { margin: 8pt 0 0 0; padding: 0; } ul.condition, ul.reaction, ol.action { margin-top: 7pt; } ul.condition li, ul.reaction li, ol.action li { margin-top: 2pt; } ul.condition li { list-style-image: url(../../images/gif/ListIconCondition.gif); } ul.reaction li { list-style-image: url(../../images/gif/ListIconReaction.gif); } ul.safety_intermediate li { list-style-image: url(../../images/gif/ListIconReaction.gif); } /* =========================================================== EMBEDDED SAFETY INSTRUCTIONS =========================================================== */ .embedded_safety, .embedded_safety_word { font-weight: bold; } /* ====================================================== LINKBOX STYLES ====================================================== */ .link0, .link1, .link2, .link3, .link4, .link5, .linkA { font-size: 9pt; margin-top: 10px; } .link0 { border-left: 4px solid #999999; } .link1 { border-left: 4px solid #DFCA5D; } .link2 { border-left: 4px solid #DFCA5D; } .link3 { border-left: 4px solid #E5B472; } .link4 { border-left: 4px solid #DB9234; } .link5 { border-left: 4px solid #3492DB; } .linkA { border-left: 4px solid #EA1232; } .linklist_inner { padding-bottom: 5px; padding-top: 3px; margin-left: 10px; } div.linklist li { margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; } div.linklist ul { margin-top: 0px; margin-bottom: 0px; padding: 0px; margin-left: 25px; } .linklist { margin-top: 10px; margin-bottom: 10px; } .linklist_heading { margin: 0 0 2pt 0; font-size: 9pt; font-weight: bold; letter-spacing: 1px; } /* ========================================================= LIST STYLES ========================================================= */ ul.squarelist { list-style: square; } ul.dotlist { list-style: circle; } li { margin: 5pt 0 0 0; padding: 0; } li p { margin: 0; padding: 0; } ul, ol { margin-top: 3pt; margin-bottom: 0; } li ul { margin-top: 0; margin-bottom: 0; } /* ========================================================= tablestyles in content ========================================================= */ #maintenancetable { border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; padding: 8pt; margin: 8pt 0; } #maintenancetable h3 { margin: 0; padding: 0; line-height: 1em; } table.maintenance td { background-color: #E1EAFB; padding: 2px 25px 2px 5px; vertical-align: top; } table { margin: 8pt 0 0 0; border-color: #000000; font-size: 10pt; } table.noframe, table.noframe_fix { border: 0px; } table.framed, table.framed_fix { border: 1px solid #C2C2C2; border-collapse: collapse; } table.noframe_fix, table.framed_fix { width: 655px; } td { vertical-align: top; } td.framed, th.header, td.header { border: 1px solid #C2C2C2; padding-left: 2px; padding-right: 2px; vertical-align: top; } td.legend { border: 1px solid #C2C2C2; padding-left: 4px; padding-right: 4px; vertical-align: top; } th.framed, th.header { background: #ccc; font-weight: bold; padding: 2px; margin: 0px; } .tablehead_left_first, .tablehead_center_first, .tablehead_right_first { margin: 0px; } .table_left_first, .table_center_first, .table_right_first { margin: 0px; } .table_left, .table_left_first, .tablehead_left, .tablehead_left_first { text-align: left; } .table_center, .table_center_first, .tablehead_center, .tablehead_center_first { text-align: center; } .table_right, .table_right_first, .tablehead_right, .tablehead_right_first { text-align: right; } table.dangertable { border: 1px solid #000; margin: 8pt 0 0 0; table-layout: fixed; } caption.table { font-size: 9pt; font-weight: bold; margin: 8pt 0 -6pt 0; text-align: left; } /* ===================================================== INLINE FORMATS ===================================================== */ strong { font-weight: bold; } em { font-style: italic; } .clearboth { clear: both; } /* table of contents */ .indextable_main p.singleentry { Xbackground-color: yellow; margin-top: 10px; } .indextable_main td.indexlink { Xbackground-color: green; padding-left: 20px; } .indextable_main p.parententry { Xbackground-color: pink; margin-top: 10px; } .indextable_sub p.entry { Xbackground-color: blue; margin-left: 10px; } .indextable_sub td.indexlink { Xbackground-color: beige; padding-left: 30px; } /* =========================================================== WORKFLOW STATE STYLES =========================================================== */ .wf_state_released { color: green; } .wf_state_not_released { color: red; } /* ===================================================== LEXICON REFERENCES / GLOSSARY ===================================================== */ span.LexiconEntryLink { cursor: help; border-bottom: 1px dotted; } .tooltip { display: none; position: absolute; background-color: #FFFFFF; border-color: #000000; font-size: 12px; padding: 2px; border-width: 1px; border-style: solid; width: 300px; } .tooltip .head { color: white; background-color: #006666; padding: 2px; text-align: left; } .tooltip .head table { margin: 2px; padding: 0px 1px 0px 1px; } .tooltip .head table tr td { color: white; padding: 1px 0 1px 0; } .tooltip .content { color: #000086; padding: 2px 4px 2px 4px; } .tooltip .content * { margin: 0; padding: 0; } /* ========================================================= GLOSSARY PAGE ========================================================= */ #content_glossary { font-size: 10pt; margin: 0 10px 0 10px; } .glossary_block { margin-top: 8pt; } .glossary_item { font-weight: bold; } .glossary_entry { margin-left: 30px }
Es würde einfacher gehen wenn du auch die Source der HP posten würdest da man sonst nur raten kann welche Klasse du an welcher Stelle verwendet hast!
Dies ist der Quelltext von der fertigen Seite:
Code: PHP<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><title>Service CD 2008</title><script language="JavaScript" type="text/javascript" src="resources/js /JavaScript.js"> </script><link href="resources/css/Cascading Stylesheet.css" type="text/css" rel="stylesheet" media="screen, projection" xmlns:exsl="http://exslt.org/common" /><link href="resources/css/Cascading Stylesheet (Print).css" type="text/css" rel="stylesheet" media="print" xmlns:exsl="http://exslt.org/common" /></head><body background="images/jpg/background.jpg"><div id="page"><div class="company"> <img src="images/jpg/header.gif" alt="" width="900" height="101" border="0" /></div><table width="100%" border="0" cellpadding="0" cellspacing="0" class="metatable"><tr><td class="project"><a href="index.html">Service CD 2008</a></td><td class="metatable" xmlns:exsl="http://exslt.org/common"><a href="sitemap.html">Sitemap</a> </td><td class="metatable" xmlns:exsl="http://exslt.org/common"><a href="index.html">Home</a></td></tr></table><div id="crunch"><h3 id="headerInCrunch"></h3></div><div id="navigation"><div class="triplet1"><div class="triplet_head"><strong><a href="11548171.html">RM60</a><img src="#" width="0" height="0" style="display: none;" alt="" /></strong></div></div><div class="triplet1"><div class="triplet_head"><strong><a href="11549707.html">RM70</a><img src="#" width="0" height="0" style="display: none;" alt="" /></strong></div></div><div class="triplet1"><div class="triplet_head"><strong><a href="11551243.html">RM80</a><img src="#" width="0" height="0" style="display: none;" alt="" /></strong></div></div><div class="triplet1"><div class="triplet_head"><strong><a href="11552779.html">RM100</a><img src="#" width="0" height="0" style="display: none;" alt="" /></strong></div></div><div class="triplet1"><div class="triplet_head"><strong><a href="11554315.html">CS2500</a><img src="#" width="0" height="0" style="display: none;" alt="" /></strong></div></div><div class="triplet1"><div class="triplet_head"><strong><a href="11555851.html">CS3600</a><img src="#" width="0" height="0" style="display: none;" alt="" /></strong></div></div><div class="triplet1"><div class="triplet_head"><strong><a href="11557387.html">TS3600</a><img src="#" width="0" height="0" style="display: none;" alt="" /></strong></div></div><div class="triplet1"><div class="triplet_head"><strong><a href="11558923.html">OS80</a><img src="#" width="0" height="0" style="display: none;" alt="" /></strong></div></div><div class="triplet1"><div class="triplet_head"><strong><a href="11560459.html">OS80RFB</a><img src="#" width="0" height="0" style="display: none;" alt="" /></strong></div></div><div class="triplet1"><div class="triplet_head"><strong><a href="11561995.html">OS100</a><img src="#" width="0" height="0" style="display: none;" alt="" /></strong></div></div><div class="triplet1"><div class="triplet_head"><strong><a href="11563531.html">OS100RFB</a><img src="#" width="0" height="0" style="display: none;" alt="" /></strong></div></div></div><div id="float_content"><div id="wrapper"><div id="wrapper_inner"><div id="content"><div id="indeximage"><a name="5808139" style="display: none;"><img src="#" width="0" height="0" border="0" alt="" /></a><img src="images/jpg/DefaultImageTitle.jpg" alt="Firmenlogo" title="Firmenlogo" class="" width="400" height="300" /></div></div></div></div></div><br clear="all" /><img src="#" width="0" height="0" alt="" /></div><div id="footer"><span class="footer">generated by - </span><img src="images/gif/CompanyIcon.gif" alt="Company Icon" /><span class="footer"> ST4 DocuManager - 3.7.2008</span></div></body> </html>
folgende veränderungen würd ich vornehmen:
Code:body { background-image: url(background.gif); background-repeat: no-repeat; background-position: top left; //... } .triplet1, .triplet2, .triplet3 { margin: 0px 0px 1px 0px; } .triplet1 div.triplet_head, .triplet2 div.triplet_head, .triplet3 div.triplet_head { // ... margin-bottom: 0px; }
Ich weiß! Der Code wird aus dem cmr generiert...
Das mit den trennlinien hat super geklappt!
nur beim background weiß ich nicht genau wie ichs schreiben soll (den link)
geht ja normalerweise mit ..\.. irgendwas!? iirc
habs im moment so:
Code: PHPbody { background-image: "../de/images/jpg/background.jpg">; background-repeat: no-repeat; background-position: top left; ...
is das ">" nicht fehl am platz da?
Zitatbackground-image: url('../de/images/jpg/background.jpg');
Stimmt!
Danke noch mal an alle! Es hat so geklappt!
overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2025