Joomla Template per CSS bearbeiten
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auto
blocken
button
code
cursor
display
form
image
input
list
login
message
modul
pointer
position
span
system
text
transparent url
url
-
Hallo
könnt Ihr mir helfen ?
und zwar möchte ich mein Template anpassen, dass Module im Template statt untereinander , nebeneinander sind ( css->newsflash)
hier mal der code:
.newsflash { height:115px; width:920px; padding:10px 20px; margin:0 0 10px; text-align:justify; overflow:hidden; background: transparent url(../images/news_bg.png) no-repeat top center; } .newsflash h3 { width:920px; height:17px; color:#e11e26; overflow:hidden; line-height:17px; margin:0 0 2px 0; padding:0; text-align:left; } .newsflash table tr td { color:#6e6d6d; height:68px; text-align:justify; } .newsflash a { color:#6e6d6d; font-weight:700; text-decoration:none; } .newsflash div.module { background:none; width:920px; height:52px; margin:0 auto; overflow:hidden; } .newsflash div.module div { background:none; padding:0; } .newsflash table.contentpaneopen { margin:0; } .newsflash div.module_menu div div div, .newsflash div.module div div div, .newsflash div.module_text div div div { margin:0; padding:0;
Wenn Ihr auf meine Seite geht ist oben ein Modul: Wer ist Online und ein Schlagzeilen Modul, ich würde gerne in dieses Newsflash so anpassen, dass die module nebeneinander sind , 3 stück ( links, Mitte, rechts )
http://www.prinzessin-serenity.de/cgi-bin/v2.0/
Beitrag zuletzt geändert: 12.4.2010 13:24:10 von miley -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
miley schrieb:
und zwar möchte ich mein Template anpassen, dass Module im Template statt untereinander , nebeneinander sind ( css->newsflash)
Erstens gebe mal den Modulen ein fload:left und veringere die Breite. Wenn die über 900px breit sind, haben sie ja keine andere Möglichkeit als untereinander zu stehen.
Und auf den Mosulpositionen kannst Du alles anzeigen, vorausgesetzt die CSS dafür ist flexiebel genug geschrieben.
Gruß Tom -
Wie genau: was muss ich ersetzten ! ich kenne mich mit CSS überhaupt nicht aus !
und : was muss ich ändern um die Breite zu vergrößern ! Danke !
hier mal den ganzen code:
body { font-family: Tahoma, Verdana, Arial, sans-serif; line-height: 1.3em; margin: 0; padding: 0; font-size: 11px; color: #666666; background: #fff; } body.contentpane { background: #fff; } form { margin: 0; padding: 0; } img,table { border: none; } p { margin: 5px 0; text-align: justify; } a { color: #e60e0e; outline: none; text-decoration: none; font-weight: 400; } a:link { font-weight: 400; } a:visited { font-weight: 400; color: #999; } a:hover { text-decoration: underline; font-weight: 400; } input { color: #ccc; outline: none; margin: 0; } input:focus { outline: none; } button { color: #fff; font-size: 11px; border: none; background: #696969; cursor: pointer; } #modlgn_remember.inputbox { background: none; border: none; width: auto; vertical-align:middle; } input.button, .validate { color: #fff; font-size: 11px; cursor: pointer; font-weight: 700; border: none; height:20px; line-height:19px; padding: 2px 4px 4px; margin:6px 0 0 0; } /*****************************************/ /*** Template specific layout elements ***/ /*****************************************/ #page_bg { background: #fff url(../images/page_bg.png) repeat-x top left; } #wrapper { margin:0 auto; background: transparent url(../images/wrapper.png) no-repeat top center; } #holder { width:960px; margin:0 auto; padding:0 0 40px 0; } #header { position:relative; height:309px; width:960px; background: transparent url(../images/headerimg.jpg) no-repeat top center; } #pillmenu { float:left; height:20px; width:960px; padding:10px 0 0 0; overflow:hidden; } #pillmenu ul { padding:0; margin:0; list-style: none; } #pillmenu li { float: left; } #pillmenu li a { float:left; color: #8e8d8d; text-decoration: none; font-weight: 700; line-height:19px; padding: 0 12px; margin:0; cursor:pointer; } #pillmenu li a:hover, #pillmenu li a#active_menu-nav { color:#fff; height:20px; background: transparent url(../images/t_menu_hover.png) repeat-x top left; } .logo { position:absolute; bottom:20px; left:0; width:940px; padding:0 10px; height:26px; overflow:hidden; } .logo h1 { text-align:center; color:#3f8d13; line-height:normal; margin:0; padding:0; text-transform:uppercase; } .logo a, .logo a:link, .logo a:visited { color:#3f8d13; font-size:22px; font-weight:700; text-decoration:none; } .logo a:hover { text-decoration:none; font-weight:700; } .newsflash { height:115px; width:920px; padding:10px 20px; margin:0 0 10px; text-align:justify; overflow:hidden; background: transparent url(../images/news_bg.png) no-repeat top center; } .newsflash h3 { width:920px; height:17px; color:#e11e26; overflow:hidden; line-height:17px; margin:0 0 2px 0; padding:0; text-align:left; } .newsflash table tr td { color:#6e6d6d; height:68px; text-align:justify; } .newsflash a { color:#6e6d6d; font-weight:700; text-decoration:none; } .newsflash div.module { background:none; width:920px; height:52px; margin:0 auto; overflow:hidden; } .newsflash div.module div { background:none; padding:0; } .newsflash table.contentpaneopen { margin:0; } .newsflash div.module_menu div div div, .newsflash div.module div div div, .newsflash div.module_text div div div { margin:0; padding:0; } .cpathway { position:absolute; bottom:6px; left:230px; height:20px; line-height:19px; width:730px; overflow:hidden; } .cpathway img { float:left; padding:6px 6px 0 0; } span.breadcrumbs.pathway { float:left; padding:0; color:#e60e0e; margin:0; } span.breadcrumbs.pathway a.pathway { float:left; margin:0; padding:0 6px 0 0; color: #516519; font-weight:400; text-decoration: none; } span.breadcrumbs.pathway a.pathway:hover { text-decoration: underline; } #search { float:right; padding:52px 0 0 0; } .search { float:left; height:20px; padding:0 0 0 6px; background: transparent url(../images/inputbox.png) no-repeat top left; } .search .inputbox { float:left; border: none; color: #fff; font-size:11px; line-height:14px; height:15px; width:144px; padding:3px 6px 2px 0; margin:0 2px 0 0; background:none; } .search .button { float:left; margin:0; padding:0; border:none; color:#de1e25; background:none; height:20px; line-height:20px; padding:1px 0 3px; } .search .button:hover { color:#3f8d13; } #content_hold { width:960px; padding:10px 0 0 0; background: #dadada url(../images/content.png) no-repeat top center; } .middle {background: transparent url(../images/content_m.png) repeat-y top center;} .top { padding:10px 0 0 0; margin:0 0 20px 0; background: transparent url(../images/content_t.png) no-repeat top center;} .bottom {background: transparent url(../images/content_b.png) no-repeat bottom center;} .middle_left {background: transparent url(../images/content_m_l.png) repeat-y top center;} .top_left { padding:10px 0 0 0; margin:0 0 20px 0; background: transparent url(../images/content_t_l.png) no-repeat top center;} .bottom_left {background: transparent url(../images/content_b_l.png) no-repeat bottom center;} .middle_right {background: transparent url(../images/content_m_r.png) repeat-y top center;} .top_right { padding:10px 0 0 0; margin:0 0 20px 0; background: transparent url(../images/content_t_r.png) no-repeat top center;} .bottom_right {background: transparent url(../images/content_b_r.png) no-repeat bottom center;} .middle_full {background: transparent url(../images/content_m_full.png) repeat-y top center;} .top_full { padding:10px 0 0 0; margin:0 0 20px 0; background: transparent url(../images/content_t_full.png) no-repeat top center;} .bottom_full {background: transparent url(../images/content_b_full.png) no-repeat bottom center;} #leftcolumn, #rightcolumn { float: left; width: 220px; padding:0; margin:0 10px 10px 0; } #rightcolumn { float: right; margin:0 0 10px 10px; } div#maincolumn { float: left; width:476px; padding:10px; margin:0 0 10px 0; } div#maincolumn_left, div#maincolumn_right { float: left; width:698px; padding:10px 20px 10px 10px; margin:0 0 10px 0; } div#maincolumn_right { padding:10px 10px 10px 20px; width:698px; } div#maincolumn_full { width:920px; padding:10px 20px; } div.nopad { overflow: hidden; } div.nopad ul { clear: both; } td.middle_pad { width: 20px; } #footer { width:920px; height:26px; line-height:26px; text-align:center; padding:0 20px; margin:0 auto; color: #fff; overflow:hidden; background: transparent url(../images/footer.png) no-repeat top center; } #footer a { color: #fff; font-weight:400; text-decoration: none; } #footer a:hover { text-decoration:underline; } a.footer123:link, a.footer123:visited { color: #000; font-family: Tahoma, Arial, sans-serif; text-decoration: underline; } #f123 { text-align: right; width: 100%; margin: 0 auto; font-family: Tahoma, Arial, sans-serif; } .f123 { text-align: right; font-family: Tahoma, Arial, sans-serif; text-decoration: none; } .f123_bg { background:url(../images/123_bg.png); width:134px; height:30px; text-align:center; padding: 0 3px; } .f123_1 { display: block; font-size: 10px; font-family: Tahoma, Arial, sans-serif; color: #666; text-align: left; padding: 0 0 2px 4px; } a.link_123:link, a.link_123:visited { font-size: 15px; font-family: Tahoma, Verdana,Arial,Helvetica,sans-serif; color: #797979; text-decoration:none; font-weight: 700; } a.link_123:hover { font-size: 15px; font-family: Tahoma, Verdana,Arial,Helvetica,sans-serif; color: #797979; text-decoration:none; font-weight: 700; } /*****************************************/ /*** Joomla! specific content elements ***/ /*****************************************/ div.offline { background: #fffebb; width: 100%; position: absolute; top: 0; left: 0; font-size: 1.2em; padding: 5px; } /* headers */ div.componentheading { height: 22px; margin:0; color: #3f8d13; } table.blog { } h1 { padding: 0; font-family: Tahoma, Arial, sans-serif; font-size: 1.3em; line-height:19px; font-weight: 700; vertical-align: bottom; color: #000; text-align: left; width: 100%; } h2, .contentheading { padding: 0; font-family: Tahoma, Verdana, Arial, sans-serif; font-size: 11px; vertical-align: middle; color: #e60e0e; text-align: left; font-weight: 700; } h2, a.contentheading { background: none; border: none; margin:6px 0; } table.contentpaneopen h3 { margin-top: 25px; color:#585858; } h4 { font-family: Tahoma, Arial, sans-serif; color: #333; } h3, .componentheading, table.moduletable th, legend { margin:6px 0; font-family: Tahoma, Arial, sans-serif; font-size: 11px; font-weight:700; text-align: left; text-transform:uppercase; color: #333; padding: 0; } /* small text */ .small { font-size: 10px; color: #666666; font-weight: 700; text-align: left; } .modifydate { height: 20px; vertical-align: bottom; font-size: 10px; color: #666666; text-align: right; } .createdate { vertical-align: top; font-size: 11px; color: #999; padding-bottom: 8px; } a.readon { float: right; line-height: normal; font-size: 11px; padding: 0 0 0 14px; color: #666666; text-transform: lowercase; text-decoration: none; } a.readon:hover { text-decoration: underline; } /* form validation */ .invalid { border-color: #ff0000; } label.invalid { color: #ff0000; } /** overlib **/ .ol-foreground { background-color: #f1f1f1; color: #333; } .ol-background { background-color: #f1f1f1; color: #333; } .ol-textfont { font-family: Tahoma, Arial, sans-serif; font-size: 10px; } .ol-captionfont { font-family: Tahoma, Arial, sans-serif; font-size: 12px; color: #fbfbfb; font-weight: 700; } .ol-captionfont a { background-color: #f1f1f1; color: #333; text-decoration: none; font-size: 12px; } .ol-closefont {} /* menu links */ a.mainlevel:link, a.mainlevel:visited { padding-left: 5px; } a.mainlevel:hover { } /* spacers */ span.article_separator { display: block; height: 20px; } .article_column { } .column_separator { } td.buttonheading { text-align: right; width: 0; } .clr { clear: both; font-size:0; } table.blog span.article_separator { display: block; height: 20px; } /* table of contents */ table.contenttoc { margin: 5px; padding: 5px; background: none; } table.contenttoc td { padding: 0 5px; } /* content tables */ td.sectiontableheader { color: #fff; font-weight: 700; padding: 4px; } tr.sectiontableentry1 td { padding: 4px; } tr.sectiontableentry1 { background:#ebf8e3; } tr.sectiontableentry0 td, tr.sectiontableentry2 td { padding: 4px; } td.sectiontableentry0, td.sectiontableentry1, td.sectiontableentry2 { padding: 3px; font-size: 11px; } /* content styles */ .contentpaneopen, table.contentpane { margin: 0; padding: 0; } table.contentpane td{ text-align: left; } table.contentpane td.contentdescription { width: 100%; } table.contentpane { text-align: left; float: left; width: 100%; } table.contentpane ul li a .category { color: #FF8800; } table.contentpane ul li { color: #666; } table.contentpaneopen { border-collapse: collapse; padding: 0; margin:0 6px; } table.contentpaneopen li { margin-bottom: 5px; } table.contentpaneopen fieldset { border: 0; border-top: 1px solid #669933; } table.contentpaneopen h3 { margin-top: 25px; } table.contentpaneopen h4 { font-family: Tahoma, Arial, sans-serif; color: #000; } .highlight { background-color: #fffebb; } ul.latestnews, ul.mostread { list-style:none; padding:0; margin:0; text-align:left; } /* module control elements */ table.user1user2 div.moduletable { margin-bottom: 0px; } div.moduletable, div.module { margin-bottom: 25px; } div.module_menu, div.module, div.module_text{ margin:0 0 20px 0; padding: 0; } div.module_menu div, div.module div, div.module_text div { margin:0; } div.module_menu div, div.module div, div.module_text div { } div.module_menu div div, div.module div div, div.module_text div div { text-align: center; margin:0; } div.module_menu div div div, div.module div div div, div.module_text div div div { padding:0; margin:0; color:#3f8d13; } div.module div div div div { width: 160px; color:#3f8d13; } div.module_menu div div div div, div.module div div div div, div.module_text div div div div { background: none; margin:0 auto; padding:0; color:#3f8d13; } div.module_text div div div div { text-align: left; } div.module_text div div div div.bannergroup_text { padding: 10px 10px 10px 20px; width: 174px; } div.module_text div div div div.bannergroup_text div { color:#3f8d13; width: auto; padding: 0 0 4px; } div.module div div div form { margin:0 auto; padding:0 0 6px 20px; text-align:left; width:180px; } div.module_menu ul { list-style: none; padding: 0; } div.module_menu ul#mainlevel { margin: 0 auto; text-align: center; } div.module_menu ul li{ margin: 0; padding: 0; } div.module_menu ul li a:link, div.module_menu ul li a:visited { font-weight: 700; padding: 2px 0; line-height: 24px; background: transparent url(../images/blue/bullet2.jpg) top left no-repeat; } #leftcolumn div.module table ,#rightcolumn div.module table { padding: 0 0 6px 0; } #leftcolumn div.module table td ,#rightcolumn div.module table td { margin:0; padding: 0 6px 0 0; height:20px; color:#3f8d13; text-align:left; line-height:13px; vertical-align: middle; } #leftcolumn div.module table.poll { } #leftcolumn div.module table.poll td { text-align: left; } /* LEFT COL H3 */ #leftcolumn h3, #rightcolumn h3 { width:199px; height:26px; line-height:26px; margin:0 0 6px 0; padding: 9px 10px 0 11px; font-size: 11px; color: #fff; text-align: left; text-transform:none; font-weight: 700; overflow:hidden; background: transparent url(../images/box_h3.png) no-repeat top center; } #rightcolumn h3 { padding: 9px 11px 0 10px; background: transparent url(../images/box_h3_r.png) no-repeat top center; } .moduletable_menu, .moduletable, .moduletable_text { margin: 0 0 16px 0; padding: 0 0 8px 0; } #leftcolumn ul.menu, #rightcolumn ul.menu { list-style: none; text-align: left; margin:0; padding:0; padding:0 0 0 20px; width:190px; } #rightcolumn ul.menu { } #leftcolumn ul.menu li, #rightcolumn ul.menu li { margin:0 0 1px 0; } #leftcolumn ul.menu li:hover, #rightcolumn ul.menu li:hover { } #leftcolumn ul.menu li ul li, #rightcolumn ul.menu li ul li { } /*LEFT COL LINK*/ #leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link, #rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link { display:block; font-weight: 400; font-size: 11px; line-height: 19px; padding:0 0 0 22px; text-decoration: none; color: #de1e25; background: transparent url(../images/menu_arrow.gif) no-repeat left top; } #leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover { color: #4e8d67; } /*LEFT COL CURRENT LINK*/ #leftcolumn ul.menu li#current, #rightcolumn ul.menu li#current { } #leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link, #rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link { display:block; color: #4e8d67; } #leftcolumn ul.menu li#current { } #leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover { display:block; color: #4e8d67; } /*LEFT COL SUB LINK*/ #leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link, #rightcolumn ul.menu li#current ul li a, #rightcolumn ul.menu li#current ul li a:link { font-weight: 400; text-decoration: none; color: #de1e25; line-height:19px; padding:0 0 0 22px; background: none; } #leftcolumn ul.menu li#current ul li a:hover, #rightcolumn ul.menu li#current ul li a:hover { color: #4e8d67; background: none; } #leftcolumn ul.menu li ul li#current, #rightcolumn ul.menu li ul li#current { } #leftcolumn ul.menu li.parent ul li, #rightcolumn ul.menu li.parent ul li { } #leftcolumn ul.menu li.parent ul li a, #rightcolumn ul.menu li.parent ul li a { line-height:19px; font-size: 11px; font-weight: 400; text-decoration: none; color: #ff0537; padding:0 0 0 22px; background: none; } #leftcolumn ul.menu li.parent ul li a:hover { color: #4e8d67; background: none; } /*SUBMENU POSITION*/ #leftcolumn ul.menu li#current ul { margin: 0; padding: 0; } #leftcolumn ul.menu li#current ul li { margin: 0; padding: 0; } /*CURRENT SUBMENU POSITION*/ #leftcolumn ul.menu li ul { margin: 0; padding: 0; } #leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul { list-style: none; margin:0; } /* forms */ #leftcolumn .moduletable ul, #rightcolumn .moduletable ul { margin: 6px 0; padding: 0; list-style: none; } #leftcolumn .moduletable ul li, #rightcolumn .moduletable ul li { margin: 0; padding: 0 2px; } table.adminform textarea { width: 540px; height: 400px; font-size: 1em; color: #000099; } form#form-login fieldset { border: 0 none; padding: 0; margin:0; color:#3f8d13; text-align: left; } form#form-login ul { padding: 0; list-style: none; text-align: left; margin: 10px auto 0; } form#form-login ul li { padding: 0; } form#form-login ul li a { text-align: left; padding: 0; font-size: 11px; color: #3f8d13; text-decoration: none; } form#form-login ul li a:hover { text-decoration: underline; } #form-login input { border:none; color:#6e6d6d; font-size:11px; height:14px; line-height:14px; padding:2px 4px; background:#dadada; } input#modlgn_passwd, input#modlgn_username { width:142px; } input.button, #form-login input.button { height:20px; border:none; font-weight:700; color:#fff; line-height:15px; padding:2px 6px 3px; background:transparent url(../images/but.gif) repeat-x top left; } input.button:hover, #form-login input.button:hover { color:#74cb44; } /* thumbnails */ div.mosimage { margin: 5px; } div.mosimage_caption { font-size: .90em; color: #333; } div.caption { padding: 0 10px 0 10px; } div.caption img { border: 1px solid #CCC; } div.caption p { font-size: .90em; color: #333; text-align: center; } /* Parameter Table */ table.paramlist { margin-top: 5px; } table.paramlist td.paramlist_key { width: 128px; text-align: left; height: 30px; } table.paramlist td.paramlist_value { } div.message { font-family: Tahoma, Arial, sans-serif; font-weight: 700; font-size : 14px; color : #c30; text-align: center; width: auto; background-color: #f9f9f9; border: solid 1px #d5d5d5; margin: 3px 0px 10px; padding: 3px 20px; } /* Banners module */ /* Default skyscraper style */ .bannergroup { } .banneritem { } /* Text advert style */ .banneritem_text { padding: 4px; font-size: 11px; } .banneritem_text a { font-weight:700; color:#eb032e; } .bannerfooter_text { padding: 4px; font-size: 11px; text-align: right; } /* System Messages */ /* see system general.css */ .pagination span { padding: 2px; } .pagination a { padding: 2px; } /* Polls */ .pollstableborder td { text-align: left; } /* Frontend Editing*/ fieldset { border: 1px solid #ccc; margin-top: 15px; padding: 4px; } legend { margin: 0; padding: 0 10px; } td.key { border-bottom:1px solid #eee; color: #333; } /* Tooltips */ .tool-tip { float: left; background: #ffc; border: 1px solid #D4D5AA; padding: 5px; max-width: 200px; } .tool-title { padding: 0; margin: 0; font-size: 100%; font-weight: 700; margin-top: -15px; padding-top: 15px; padding-bottom: 5px; background: url(../../system/images/selector-arrow.png) no-repeat; } .tool-text { font-size: 100%; margin: 0; } /* System Standard Messages */ #system-message dd.message ul { padding: 0; margin: 0; background: none; border: none; } /* System Error Messages */ #system-message dd.error ul { color: #c00; background: none; border: none; padding: 0; margin: 0; } /* System Notice Messages */ #system-message dd.notice ul { color: #c00; background: none; border: none; padding: 0; margin: 0; } #system-message dd { text-indent: 0; } #system-message dd ul { list-style-type: none; color: #c00; background: none; border: none; } #system-message { margin-top: 5px; }
Beitrag zuletzt geändert: 12.4.2010 13:48:13 von miley -
miley schrieb:
Wie genau: was muss ich ersetzten ! ich kenne mich mit CSS überhaupt nicht aus !
Danke !
Du hast den passenden Code schon gepostet und dort steht width:920px;. Reduziere mal die Breite. http://css4you.de ist in dem Fall Dein bester Freund und Du hast endlich Grund und die Möglichkeit, Dich in die Materie einarbeiten zu können.
Gruß Tom -
Ok, danke, ich probiers mal !
PS: wollte eigentlich oben schreiben: Breite des Gesamten Templates !
MFG -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage