|
|||
![]()
Moin allerseits,
bin neu hier und habe nur ein wenig kentnisse in html und css. Ich möchte mit SozialEngine (CMS) mehrere Menu balken haben. Meine Website: My Community - Home Page Oben sieht man ja zwar schon den Balken, jedenfalls sind die Menus oben verschoben. Habe jedes Margin oder Padding probiert. Keine Chance :/. Am liebsten wäre mir soetwas mit 3 Menus Balken oben: http://se4templates.modules2buy.com/ Leider bekomme ich das nicht hin. Hier sind die CSS dateien: HTML-Code:
@include "constants.css"; @include "~/application/modules/Core/externals/styles/main.css"; @scan "application/modules" "externals/styles/main.css" "Core"; /* GLOBAL STYLES, FONTS & RESETS */ html { min-height: 100%; margin-bottom: 1px; /* overflow-x: hidden; */ overflow-y: scroll; } body { background-color: #000000; background-image: url(images/ss_bg2.jpg); background-repeat: no-repeat; background-position: center top; overflow-x: hidden; } * { padding: 0; margin: 0; border: none; border-style: solid; border-width: 0px; border-color: $theme_border_color; } table { border-collapse: collapse; } br { clear: both; } ul { list-style-type: none; } a:link, a:visited { color: $theme_link_color; text-decoration: $theme_link_decoration; } a:hover { color: $theme_link_color_hover; text-decoration: $theme_link_decoration_hover; } * { font-family: $theme_font_family; } *[dir="rtl"] { direction: rtl; unicode-bidi: embed; } div, td { font-size: $theme_font_size; color: $theme_font_color; text-align: $theme_text_align; } *[dir="rtl"] div, *[dir="rtl"] td { direction: rtl; unicode-bidi: embed; text-align: right; } h2, h3, h4 { color: $theme_headline_color; } h2 { font-size: $theme_headline_size_large; letter-spacing: -1px; margin-bottom: 10px; } h3 { font-size: $theme_headline_size_medium; letter-spacing: 0px; } h4 { font-weight: bold; border-bottom: 1px solid $theme_border_color; padding: .5em 0px .5em 0px; margin-bottom: 10px; } h4 > span { display: inline-block; position: absolute; background-color: $theme_body_background_color; padding-right: 6px; margin-top: -1px; } h3.sep { display: block; border-bottom: 1px solid $theme_border_color; overflow: hidden; margin-bottom: 1em; height: 1em; } h3.sep > span { display: block; overflow: hidden; position: absolute; padding: 5px 10px 5px 0px; font-weight: bold; } html[dir="rtl"] h3.sep > span { padding: 5px 0px 5px 10px; } /* GENERAL LAYOUT */ .generic_layout_container h3 { margin-bottom: 6px; } .layout_left { float: left; width: $theme_content_columns_left_width; padding: 0px 7px 0px 0px; vertical-align: top; margin-right: 5px; } html[dir="rtl"] .layout_left { float: right; padding: 0px 0px 0px 15px; margin-right: 0px; margin-left: 5px; } .layout_middle { overflow: hidden; padding: 0px 0px 0px 0px; vertical-align: top; } .layout_right { float: right; width: $theme_content_columns_right_width; padding: 0px 0px 10px 12px; vertical-align: top; } html[dir="rtl"] .layout_right { float: left; padding: 0px 15px 10px 0px; margin-left: 0px; margin-right: 5px; } #global_wrapper { text-align: center; padding-top: 20px; } #global_content { width: $theme_content_width; margin: 0px auto 0px auto; overflow: hidden; min-height: 500px; } #global_content_simple { display: inline-block; overflow: hidden; } /* Header */ .layout_page_header { /*background-color: $theme_topbar_background_color;*/ text-align: center; padding: 0px; clear: both; border-bottom: $theme_topbar_border; background-image: url(images/ss_header_bg.png); background-repeat: repeat-x; background-position: center bottom; /*-moz-box-shadow: 0px 3px 3px #ddd;*/ } .layout_page_header .layout_main { width: $theme_topbar_width; text-align: right; margin: 0px auto 0px auto; } /* Footer */ .layout_page_footer { clear: both; text-align: center; overflow: hidden; } .layout_page_footer .layout_main { +rounded; +foreground; width: $theme_footer_width; margin: 20px auto 0px auto; text-align: left; overflow: hidden; margin-top: 40px; padding: 10px; } .layout_page_footer select { font-size: 1em; } .layout_core_menu_footer { font-size: .8em; color: $theme_font_color_light; } /* MAIN MENU WIDGET */ .layout_core_menu_main { width: $theme_topbar_width; margin: 0px auto 0px auto; padding-bottom:10px; text-align: left; overflow: hidden; /*background-color: $theme_topbar_menu_background_color;*/ /*background-image: url(~/application/themes/default/images/topbar_menu_bg.png);*/ /*background-repeat: repeat-x;*/ /*border: $theme_topbar_menu_border;*/ border-left: none; border-right: none; } .layout_core_menu_main ul { width: $theme_topbar_menu_width; margin: 0px auto 0px auto; padding: 0px; white-space: nowrap; overflow: hidden; } .layout_core_menu_main li { float: left; font-size: $theme_topbar_menu_link_size; font-weight: bold; margin-right: 15px; } html[dir="rtl"] .layout_core_menu_main li { float: right; margin-right: 0px; margin-left: 15px; } .layout_core_menu_main li:hover { background: $theme_topbar_menu_background_color_hover; } .layout_core_menu_main ul a { +noselect; outline: none; display: block; padding: .4em 0em .4em 0em; background-color: $theme_topbar_menu_link_background_color; } .layout_core_menu_main ul a:link, .layout_core_menu_main ul a:visited { color: $theme_topbar_menu_link_color; text-decoration: $theme_topbar_menu_link_decoration; } .layout_core_menu_main ul a:hover { color: $theme_topbar_menu_link_hover_color; text-decoration: $theme_topbar_menu_link_hover_decoration; background: $theme_topbar_menu_link_background_color_hover; } /* MINI MENU + SEARCH WIDGET Shows the mini menu and search widget */ .layout_core_menu_mini { background: none repeat scroll 0 0 #060400; height: 45px; position: center; text-align: center; } .layout_core_menu_mini > div > ul { +rounded(4px, true, true, false, false); float: left; width:$theme_content_width; padding: 0em 0px 2em 0px; border-top: none; } html[dir="rtl"] .layout_core_menu_mini > div > ul { float: left; } .layout_core_menu_mini > div > ul > li { float: left; overflow: hidden; } .layout_core_menu_mini > div > ul > li:first-child { margin-left:-8px; } html[dir="rtl"] .layout_core_menu_mini > div > ul > li { float: right; } .layout_core_menu_mini > div > ul > li + li { margin-left: 3px; } html[dir="rtl"] .layout_core_menu_mini > div > ul > li + li { margin-left: 0px; margin-right: 3px; } .layout_core_menu_mini #core_menu_mini_menu { padding: 0px 0px 5px 0px; font-size: $theme_topbar_minimenu_link_size; } html[dir="rtl"] .layout_core_menu_mini #core_menu_mini_menu { padding: 0px 10px 5px 0px; } .layout_core_menu_mini #core_menu_mini_menu > ul > li > a, .layout_core_menu_mini #core_menu_mini_menu > ul > li > span > a { display: block; font-weight: bold; padding: 15px 7px 6px 7px; text-transform: uppercase; } .layout_core_menu_mini #core_menu_mini_menu > ul > li > a:hover { +rounded(6px,true,true,false,false); background: $theme_topbar_minimenu_link_hover_background_color; color: $theme_topbar_minimenu_link_hover_color; text-decoration: $theme_topbar_minimenu_link_hover_decoration; } .layout_core_menu_mini #core_menu_mini_menu_updates { margin: 0px 7px; } #core_menu_mini_menu_update .updates_pulldown_active a#updates_toggle { background-color: $theme_pulldown_background_color_active; color: $theme_pulldown_font_color_active; text-decoration: $theme_topbar_minimenu_link_hover_decoration; } #core_menu_mini_menu #global_search_form { padding: 1px 0px; margin-left: 10px; } #core_menu_mini_menu #global_search_field { width: 170px; font-size: 1.2em; outline: none; } #core_menu_mini_menu .overTxtLabel { padding-top: 1px; padding-left: 2px; font-size: 1.2em; color: $theme_font_color_light; } /* SITE LOGO WIDGET */ .layout_core_menu_logo { width: $theme_topbar_logo_width; font-size: 23pt; font-weight: bold; margin: 0px auto 0px auto; text-align: left; letter-spacing: -2px; overflow: hidden; } .layout_core_menu_logo a { color:$theme_link_alt_color; font-weight:normal; font-family: Gill Sans, arial, helvetica, sans-serif; } /* ACTIVITY FEED */ #activity-feed { +foreground; background-image:url(images/ss_mainforeground_bg.png); } .activity-post-container { margin-bottom:0px; +rounded(6px,false,false,true,true); background-image:url(images/ss_mainforeground_bg.png); } #activity-form { margin:12px; margin-bottom:2px; border:7px solid #397577; padding:0px; background:#152222; +rounded(6px); } .compose-content { border:2px solid #000; border-bottom-color:#101515; padding:5px 8px; } .compose-tray { +foreground; +rounded; padding:8px 15px 8px 15px; margin:15px 15px 7px 15px; border:1px solid #000; } .compose-menu { margin:0px; padding:7px 10px 10px 10px; } .compose-tray .compose-menu { padding-left:0px; border-bottom:1px solid #182727; margin-bottom:8px; } a.feed_item_username:first-child, .comments_author > a { color:$theme_link_alt_color; } a.feed_item_username:first-child { font-size:1.1em; } form.activity .buttonlink { margin-top:2px; } #feed-update { +rounded(6px,false,false,true,true); +foreground; background-image:url(images/ss_mainforeground_bg.png); min-height:10px; } #feed-update .tip { padding:15px 15px 0px 15px; } .activity-post-container + #feed-update { +rounded(0px,true,true,true,true); } ul.feed > li { font-weight:bold; padding:0px; min-height:68px; border:1px solid #000; background:url(images/ss_feed_divider.png) repeat-x top; border-bottom:none; padding-top:12px; } ul.feed > li:first-child { background:none; padding-top:0px; border-top:none; } .feed_item_posted, .feed_item_generated { font-size:1.1em; line-height:1.8em; } .feed_item_photo { position:absolute; padding-top:4px; margin-left:15px; } .feed_item_body > * { display:block; margin-left:80px; padding-right:15px; } ul.feed .feed_item_attachments { padding-left:0px; padding-bottom:10px; } ul.feed span.view_more .view_more_link { background-position:0px center; } div.feed_viewmore { border:none; +foreground; +rounded(6px,true,true,false,false); background-image:url(images/ss_mainforeground_bg.png); padding:30px 15px 15px 10px; border:1px solid #000; border-top:none; } /* GLOBAL NOTICES (OUTSIDE FORMS) Used to show a message or notice with an icon on a page, usually above content, not within a form. */ .tip { overflow: hidden; clear: both; } .tip > span { +rounded; display: inline-block; background-repeat: no-repeat; background-position: 6px 6px; padding: 6px 6px 6px 27px; background-color: #203531; float: left; margin-bottom: 15px; background-image: url(~/application/modules/Core/externals/images/tip.png); } html[dir="rtl"] .tip > span { background-position: 99% 50%; padding: 6px 27px 6px 6px; float: right; } /* GLOBAL FORM RESPONSES Used to show feedback from form submissions, i.e. error/result messages. */ ul.form-errors, ul.form-notices { margin: 0px 0px 20px 0px; overflow: hidden; } * + ul.form-errors, * + ul.form-notices { margin-top: 20px; } ul.form-errors > li, ul.form-notices > li { +rounded; margin: 7px 5px 7px 5px; padding: 5px 15px 5px 32px; background-repeat: no-repeat; background-position: 8px 5px; float: left; clear: left; overflow: hidden; border: 1px solid #000; } html[dir="rtl"] ul.form-errors > li, html[dir="rtl"] ul.form-notices > li { padding: 5px 32px 5px 15px; background-position: 98% 5px; float: right; clear: right; } ul.form-errors > li > b, ul.form-notices > li > b { text-transform: uppercase; font-size: .8em; } ul.form-errors > li > ul > li, ul.form-notices > li > ul > li { font-size: .9em; } ul.form-errors > li { background-image: url(~/application/modules/Core/externals/images/error.png); background-color: #121817; } ul.form-notices > li { background-image: url(~/application/modules/Core/externals/images/notice.png); background-color: #e9faeb; } /* GLOBAL FORM ELEMENTS Used for most forms throughout the site. */ button { +rounded(2px); padding: 6px 5px; font-weight: bold; border: none; background-color: $theme_button_background_color; border: 1px solid $theme_button_border_color; color: $theme_button_font_color; background-image: url(images/ss_button_bg.png); background-repeat: repeat-x; background-position: 0px 1px; } button:hover { background-image:none; background-color: $theme_button_background_color_hover; cursor: pointer; } input[type=text], input[type=password], input.text, textarea { background-color: $theme_input_background_color; color: $theme_input_font_color; border-width: 1px; border-color: $theme_input_border_colors; border-top-width: 2px; padding: 2px; font-size: 10pt; resize: none; } input[type=checkbox], input[type=radio] { border: none; padding: 0px; margin: 2px 5px 0px 0px; width: auto; display: block; float: left; } html[dir="rtl"] input[type=checkbox], html[dir="rtl"] input[type=radio] { margin: 2px 0px 0px 5px; float: right; } input[type=checkbox] + label, input[type=radio] + label { display: block; cursor: pointer; } textarea { width: 300px; resize: none; } textarea.codebox { width: 95%; min-height: 200px; font-family: courier new, courier, serif; } select { background-color: $theme_select_background_color; color: $theme_select_font_color; border-width: 1px; border-color: $theme_select_border_colors; padding: 1px 0px 1px 1px; font-size: 10pt; max-width: 250px; } html[dir="rtl"] select { padding: 1px 1px 1px 0px; } select option { padding: 0px 10px 0px 3px; } html[dir="rtl"] select option { padding: 0px 3px 0px 10px; } a.buttonlink { background-repeat: no-repeat; background-position: 0px center; padding-left: 21px; font-weight: bold; display: inline-block; font-size:.9em; line-height:1.5em; } html[dir="rtl"] a.buttonlink { background-position: top right; padding-left: 0px; padding-right: 21px; } a.buttonlink_right { background-repeat: no-repeat; background-position: top right; padding-right: 19px; font-weight: bold; display: inline-block; } html[dir="rtl"] a.buttonlink_right { background-position: top left; padding-right: 0px; padding-left: 19px; } br.multi-text-separator { margin-bottom: 8px; } /* LARGE BOX FORM These styles are for large forms that are given an exclusive page. They are not intended for smaller forms that are embedded elsewhere. Examples: Signup form, member settings form, etc. */ /* form container */ .global_form { clear: both; overflow: hidden; } /* external form border */ .global_form > div { float: left; overflow: hidden; margin: 0px auto 0px auto; } html[dir="rtl"] .global_form > div { float: right; } /* internal form border */ .global_form > div > div { +rounded(8px); border: none; padding-bottom:10px; +foreground; } .global_form > div > div > h3 { padding:12px; font-size:1.2em; +foreground; background-image:url(images/ss_header_bg.png); background-position:0px bottom; border-bottom:1px solid #243533; } .global_form > div > div > p { padding:0px 12px; } .global_form > div > div > p:before { content: "\00BB"; padding-right:5px; } .global_form .form-elements { padding: 12px 12px 12px 12px; margin-top:12px; } /* form headline */ .global_form div.form-wrapper-heading { font-weight: bold; border-bottom: 1px solid $theme_foreground_border_color_light; height: 1em; margin-bottom: 15px; } .global_form div.form-wrapper-heading > span { display: block; position: absolute; overflow: hidden; padding: 4px 6px 4px 0px; } html[dir="rtl"] .global_form div.form-wrapper-heading > span { padding: 4px 0px 4px 6px; } .global_form div.form-wrapper + div.form-wrapper-heading { margin-top: 10px; } /* form instructions (after title) */ .global_form > div > div > h3 + p { margin-top: 10px; max-width: 550px; } /* add some space above form elements if title/instructions precede */ .global_form > div > div > h3 + div, .global_form > div > div > h3 + p + div { margin-top: 12px; } /* container for form label/element rows */ .global_form > div > div { overflow: hidden; } /* container row for a label (left) and element (right) */ .global_form div.form-wrapper { clear: both; overflow: hidden; } /* left-side element label container */ .global_form div.form-label { width: 150px; text-align: right; padding: 4px 15px 0px 2px; margin-bottom: 10px; overflow: hidden; float: left; clear: left; font-size: .9em; font-weight: bold; color: $theme_form_label_font_color; } html[dir="rtl"] .global_form div.form-label { text-align: left; padding: 4px 2px 0px 15px; float: right; clear: right; } /* right-side form element container */ .global_form div.form-element { min-width: 150px; max-width: 600px; text-align: left; margin-bottom: 10px; overflow: hidden; float: left; clear: none; } html[dir="rtl"] .global_form div.form-element { text-align: right; float: right; } /* all paragraphs of text in the form */ .global_form div > p { max-width: 450px; padding-bottom: 10px; } /* paragraphs of text that come after an input element */ .global_form div > input + p { margin-top: 3px; font-size: 7pt; } /* all text inputs in form */ .global_form input[type=text], .global_form input[type=password] { padding: 2px; font-size: 10pt; width: 200px; } /* only for text inputs that come after other text inputs */ /* i.e. for when there is a vertical list of text inputs */ .global_form input[type=text] + input[type=text] { display: block; margin-top: 5px; } /* all checkboxes and radios in form */ .global_form input[type=checkbox], .global_form input[type=radio] { clear: left; } html[dir="rtl"] .global_form input[type=checkbox], html[dir="rtl"] .global_form input[type=radio] { clear: right; } /* for clickable labels that appear to the right of elements */ /* such as checkboxes or radios */ .global_form input + label { float: left; display: block; margin-top: 0px; margin-left: 2px; } html[dir="rtl"] .global_form input + label { float: right; margin-left: 0px; margin-right: 2px; } /* all select boxes in form */ .global_form select { padding: 1px 0px 1px 1px; font-size: 10pt; max-width: 250px; } html[dir="rtl"] .global_form select { padding: 1px 1px 1px 0px; } /* all textareas in form */ .global_form textarea { padding: 4px; font-size: 10pt; max-width: 300px; min-height: 100px; } .global_form p.description { margin: 3px 0px 10px 0px; padding: 0px; } .global_form #submit-element { margin-bottom: 0px; } .global_form button[type=submit] { margin-right: 3px; } html[dir="rtl"] .global_form button[type=submit] { margin-right: 0px; margin-left: 3px; } /* SMALL BOX FORM These styles are for small box forms, such as the login box found by default on the main index page. Form names and inputs are stacked vertically (not floated) to fit into small-width content areas. */ .global_form_box { +foreground; +rounded; padding: 10px; width: auto; } .global_form_box .form-wrapper + .form-wrapper { margin-top: 5px; } .global_form_box .form-label { padding: 0px; width: auto; float: none; clear: both; margin: 0px; } .global_form_box label { text-align: left; display: block; font-size: .8em; margin-bottom: 2px; } .global_form_box label label { font-size:1em; } html[dir="rtl"] .global_form_box label { text-align: right; } .global_form_box .form-element { overflow: hidden; } /* FILTER FORM These styles are for small, transparent forms that contain search boxes or filter fields. They are usually found on browse pages. */ form.filters { +foreground; +rounded; padding: 10px; } form.filters div.form-label { margin-bottom: 3px; font-size: .8em; } form.filters div.form-element { margin-top: 2px; } form.filters button { margin-top: 4px; } form.filters dt { font-size: .8em; padding-bottom: 2px; } form.filters dd { margin-bottom: 8px; } /* POPUP FORM These are used to style popup (i.e. smoothbox) forms. Also used to style popup response messages, etc. */ #smoothbox_window body { background-image: none; } #TB_iframeContent { margin:0px; margin-bottom:-3px; } #TB_window { border:5px solid #293837; background:none; } .global_form_popup { padding: 10px 10px 10px 13px; overflow: hidden; } html[dir="rtl"] .global_form_popup { padding: 10px 13px 10px 10px; float: right; } .global_form_popup #submit-wrapper, .global_form_popup #cancel-wrapper { float: left; overflow: hidden; } html[dir="rtl"] .global_form_popup #submit-wrapper, html[dir="rtl"] .global_form_popup #cancel-wrapper { float: right; } .global_form_popup #buttons-wrapper { margin-top: 10px; } .global_form_popup #buttons-wrapper button { margin-right: 4px; } html[dir="rtl"] .global_form_popup #buttons-wrapper button { margin-right: 0px; margin-left: 4px; } .global_form_popup_message { display: block; padding: 1em; text-align: center; font-weight: bold; } /* UPLOAD FORM Styles the file upload form. */ #form-upload #submit-wrapper { display: none; } #form-upload #demo-status a.buttonlink { margin-right: 15px; } /* SEARCH PAGE Used to style the main search page. */ #searchform { float: left; clear: right; padding: 5px; } #searchform input[type=text] { width: 300px; } #searchform #query-label { display: none; } #searchform #query-wrapper { float: left; overflow: hidden; padding: 3px; } #searchform #submit-label { display: none; } #searchform #submit-wrapper { float: left; overflow: hidden; margin-left: 1px; } .search_result { overflow: hidden; width: 500px; margin-top: 10px; border-top-width: 1px; padding-top: 10px; } .search_result .search_photo { display: block; float: left; overflow: hidden; margin-right: 7px; } .search_result .search_icon { display: block; float: left; overflow: hidden; width: 48px; margin-right: 7px; } .search_result img { margin: auto; display: block; } .search_result .search_info { display: block; overflow: hidden; } .search_result .search_title { /* font-weight: bold; */ font-size: 1.1em; } .search_result .highlighted-text { font-weight: bold; } /* COMMENTS These styles are used everywhere comments appear. */ .feed_item_date + .comments { margin-top: 5px; } .comments { padding-right:0px; } .ul.feed .comments { border-left:1px solid #0B1111; } .comments, ul.feed .comments { width:auto; margin-left:0px; } .comments > ul { overflow: hidden; background:url(images/ss_comment_bg2.png) repeat-x; background-position:0px 0px; padding-left:12px; margin:1px; padding-bottom:8px; } ul.feed .comments > ul { background-position:0px 19px; padding-left:15px; } /* IE7 hack */ *:first-child+html .comments > ul { background:none; padding-top:10px; } .comments > ul > li { background-image: none; border: none; overflow: hidden; margin-bottom: 1px; line-height:1.4em; font-weight:bold; margin-right:15px; } .comments > ul > li + li { padding-bottom:6px; } .comments > ul > li:first-child { padding-top:6px; padding-bottom:6px; } ul.feed .comments > ul > li:first-child:before { content:url(images/ss_uparrow.png); height:17px; display:block; padding-bottom:8px; margin-left:62px; } .comments .comments_author a { font-weight: bold; margin-right: 2px; } html[dir="rtl"] .comments .comments_author a { margin-right: 0px; margin-left: 2px; } html[dir="rtl"] .comments_author { float: right; } .comments .comments_author_photo { float: left; overflow: hidden; line-height: 0px; font-size: 0px; padding-top:3px; } html[dir="rtl"] .comments .comments_author_photo { float: right; } .comments .comments_author_photo img { display: block; } .comments .comments_options { font-weight: bold; font-size: 1em; color: $theme_font_color_light; margin-bottom: 6px; margin-left:0px; } .comments .comments_comment_options > a { font-size: .8em; font-weight: bold; margin-top: 5px; overflow: hidden; } .comments .comments_info { font-size: .8em; line-height:1.6em; padding-left: 12px; overflow: hidden; } html[dir="rtl"] .comments .comments_info { padding-left: 0px; padding-right: 5px; } .comments .comments_date { font-size: .9em; margin-top: 0px; color: $theme_font_color_light; overflow: hidden; } .comments .comments_likes, .comments .comments_viewall { font-size: .8em; } .comments .comments_likes a, .comments .comments_viewall a { font-weight: bold; color:$theme_link_alt_color; } .comments > form { +foreground; background-image: none; border: none; padding:10px 15px 15px 0px; margin-top:0px; } ul.feed .comments > form { padding:10px 15px 15px 15px; } html[dir="rtl"] .comments > form { padding:10px 15px 15px 15px; } .comments > form > textarea { width: 100%; } .comments > form > button { display: block; margin-top: 7px; } /* HEADLINE Used at the top of most browse pages. Often contains button-style tabs. */ .headline { +rounded; /*background-color:rgba(0,0,0,.4);*/ padding: 7px 0px; overflow: hidden; margin-bottom: 8px; } .headline h2 { float: left; overflow: hidden; margin-right: 25px; margin-bottom: 0px; margin-left: 3px; font-size:1.8em; } html[dir="rtl"] .headline h2 { float: right; margin-right: 3px; margin-left: 25px; } /* TABS (BUTTON STYLE, DEFAULT) */ .tabs { overflow: hidden; +rounded; } .tabs > ul li { float: left; overflow: hidden; } html[dir="rtl"] .tabs > ul li { float: right; } .tabs > ul li > a { +rounded; display: block; padding: .6em .7em .6em .7em; font-weight: bold; text-decoration: none; /*color: $theme_buttontabs_font_color;*/ background:url(images/ss_tab_bg.png); } .tabs > ul li > a:hover { background:url(images/ss_foreground_bg.png); text-decoration: none; color: $theme_buttontabs_font_color_hover; } .tabs > ul li + li { margin-left: 10px; } html[dir="rtl"] .tabs > ul li + li { margin-left: 0px; margin-right: 10px; } .tabs > ul li.active > a { background:url(images/ss_foreground_bg.png); color: $theme_buttontabs_font_color_active; } .tabs > ul li.active > a:hover { text-decoration: none; } /* TABS (TAB STYLE, NON-DEFAULT) */ .tabs_alt { background-color: $theme_tabs_background_color; background-image: none; +rounded(3px, false, false, true, true); margin: 5px 0px 15px 0px; padding-top: 2px; -moz-user-select: none; -webkit-user-select: none; padding-left:12px !important; } .tabs_alt > ul { margin: 0px; text-align: left; font-weight: bold; padding: 2px 0px 3px 0px; } html[dir="rtl"] .tabs_alt > ul { text-align: right; } .tabs_alt > ul > li { display: inline-block; padding: 0px; *display: inline; /* fix for IE7 */ } .tabs_alt > ul > li.tab_active > a, .tabs_alt > ul > li.active > a { +rounded(4px); border:none; background-color: $theme_pulldown_background_color_active; color: $theme_tabs_font_color_active; position: relative; } .tabs_alt > ul > li > a { padding: 6px 8px 6px 8px; text-decoration: none; border-bottom: none; outline: none; } .tabs_alt > ul > li > a span { font-size: .8em; font-weight: normal; margin-left: 4px; border: none; } html[dir="rtl"] .tabs_alt > ul > li > a span { margin-left: 0px; margin-right: 4px; } .tabs_alt > ul > li > a:hover { background: $theme_tabs_background_color_hover; +rounded(4px); border: none; } .tab_container_inactive { display: none; } .tabs_alt > ul > li.tab_closed { } .tabs_alt > ul > li.tab_open > a { +rounded(4px, false, false, true, true); border-bottom: none; background-color: $theme_pulldown_background_color_active; color: $theme_pulldown_font_color_active; position: relative; padding: 6px 8px 6px 8px; } .tab_pulldown_contents_wrapper { display: none; +rounded(4px, true, false, false, false); overflow: hidden; position: absolute; padding: 2px; margin-top: 21px; background-color: $theme_pulldown_border_color; z-index: 99; } .tab_pulldown_contents { overflow: hidden; background: $theme_pulldown_contents_background_color; max-height: 500px; overflow-y: auto; } .tab_pulldown_contents > ul > li { padding: 5px; font-size: .8em; min-width: 100px; max-width: 250px; -moz-user-select: none; -webkit-user-select: none; } .tab_pulldown_contents > ul > li.active { background-color: $theme_pulldown_contents_list_background_color_active; } .tab_pulldown_contents > ul > li + li { border-top: 1px solid $theme_border_color; } .tab_pulldown_contents > ul > li:hover { background-color: $theme_pulldown_contents_list_background_color_hover; cursor: pointer; } .tabs_alt > ul > li.tab_open .tab_pulldown_contents_wrapper { display: block; } /* PULLDOWN SELECT BOX Styles the inline pulldown select popup box that is used as an alternative to regular input select boxes in some places. */ .pulldown > a, .pulldown_active > a { display: inline-block; font-weight: bold; padding: 5px 7px 5px 18px; background-position: 6px 5px; outline: none; font-size: .8em; -moz-user-select: none; -webkit-user-select: none; background-image: url(~/application/modules/Core/externals/images/more.png); background-repeat: no-repeat; } .pulldown > a { +rounded(4px); background-color: $theme_pulldown_background_color; text-decoration: none; border:1px solid #0D1413; } .pulldown > a:hover { background-color: $theme_pulldown_background_color_hover; } .pulldown_active > a { +rounded(4px, false, false, true, true); background-color: $theme_pulldown_background_color_active; color: $theme_pulldown_font_color_active; text-decoration: none; background-image: url(~/application/modules/Core/externals/images/more_active.png); border:1px solid transparent; } .pulldown_contents_wrapper { display: none; +rounded(6px, true, false, false, false); overflow: hidden; position: absolute; min-width: 100px; max-width: 300px; padding: 2px; background-color:$theme_pulldown_border_color; z-index: 99; margin-top: 21px; border:1px solid #1A2D2D; } .pulldown_active .pulldown_contents_wrapper { display: block; } .pulldown_contents { overflow: hidden; background: $theme_pulldown_contents_background_color; max-height: 500px; overflow-y: auto; } .pulldown_contents ul > li { padding: 8px; padding-right: 15px; font-size: .8em; -moz-user-select: none; -webkit-user-select: none; display:block; width:300px; } .pulldown_contents ul > li + li { border-top: 1px solid $theme_border_color; } .pulldown_contents ul > li:hover { background-color: $theme_pulldown_contents_list_background_color_hover; cursor: pointer; } .pulldown_options { padding:10px; +foreground; background-image:url(images/ss_comment_bg.png); } .pulldown_options a { color: $theme_pulldown_font_color_active; font-size: .8em; padding: 3px; margin-right: 3px; } .pulldown_options a:before { content: "\00BB"; padding-right:5px; } /* PULLDOWN SELECT BOX FOR UPDATES Styles the inline pulldown select popup box used for updates that is used as an alternative to regular input select boxes in some places. */ .updates_pulldown > a, .updates_pulldown_active > a { display: block; color: $theme_topbar_minimenu_link_color; font-weight: bold; padding: 15px 7px 6px 7px; text-transform: uppercase; } .updates_pulldown > a { display: block; +rounded(6px,true,true,false,false); font-weight: bold; padding: 6px 7px 6px 7px; text-transform: uppercase; outline: none; +foreground; } .updates_pulldown > a.new_updates { +rounded(6px, true,true,false,false); background: #E55800; color: #fff; } .updates_pulldown > a.new_updates:hover { +rounded(6px,true,true,false,false); background: #E06726; color: #fff; } .updates_pulldown > a:hover { +rounded(6px,true,true,false,false); background: $theme_topbar_minimenu_link_hover_background_color; color: $theme_topbar_minimenu_link_hover_color; text-decoration: $theme_topbar_minimenu_link_hover_decoration; } .updates_pulldown_active > a { background-color: $theme_pulldown_background_color_active; color: $theme_pulldown_font_color_active; text-decoration: $theme_topbar_minimenu_link_hover_decoration; } .updates_pulldown_active .pulldown_contents_wrapper { display: block; margin-top:31px; border:none; background-color:none; padding:4px; +foreground; background-image:url(images/ss_pulldown_bg.png); } /* TAGS Styles lists of tags that are used for message recipients, lists of friend lists, etc. Each tag has its own remove link. */ .tag { +rounded(3px); display: inline-block; background-color: $theme_tag_background_color; font-weight: bold; display: inline-block; float: left; padding: .4em .6em .4em .6em; margin: 0px 10px 5px 0px; font-size: .8em; } html[dir="rtl"] .tag { float: right; margin: 0px 0px 5px 10px; } .tag > a { text-decoration: none; padding-left: 6px; text-transform: uppercase; } html[dir="rtl"] .tag > a { float: left; padding-left: 0px; padding-right: 6px; } .layout_core_menu_main ul a { font-size:13px; padding:.7em .2em; } /* MISC */ div.layout_user_home_photo { margin-bottom:0px; } .layout_user_home_photo > div, .layout_event_profile_photo > div, .layout_group_profile_photo > div { +rounded(6px,false,false,true,true); padding:8px; } .layout_event_profile_photo > div, .layout_group_profile_photo > div { +foreground; } .layout_user_home_links .quicklinks { +rounded(6px,true,true,false,false); } .quicklinks li { padding:8px; } .layout_user_profile_photo { +foreground; +rounded(6px, false,false,true,true); padding:8px; } .layout_user_profile_options { +foreground; +rounded(6px, true,true,false,false); padding:0px 8px 8px 8px; } .layout_core_container_tabs > div { +foreground; +rounded(6px, true,true,false,false); padding:15px; } .layout_core_container_tabs div.layout_activity_feed { background:none; padding:0px; } .layout_core_container_tabs .activity-post-container { +rounded(0px); } .layout_core_container_tabs div.tabs_parent, .album_options { +rounded(6px, false,false,true,true); background-image:url(images/ss_header_bg.png); background-position:0px bottom; margin-bottom:0px; border-bottom:1px solid #1D352F; } .album_options { padding:12px; } #profile_status h2 { font-size:1.8em; } #global_page_video-index-browse .layout_middle, #global_page_video-index-manage .layout_middle, #global_page_video-index-view .layout_middle, .layout_middle > .thumbs, .browsemembers_results, #global_page_classified-index-index .layout_middle, #global_page_classified-index-view .layout_middle, #global_page_album-album-view .layout_middle, #global_page_blog-index-index .layout_middle, #global_page_blog-index-manage .layout_middle, .blogs_gutter, #global_page_blog-index-view .layout_middle, #global_page_album-index-manage .layout_middle, #global_page_album-album-editphotos .layout_middle, #global_page_album-photo-view .layout_middle, div.albums_viewmedia_info, #global_page_classified-index-manage .layout_middle, #global_page_blog-index-list .layout_middle, .forum_categories, .forum_topics, .forum_topic_posts, #global_page_poll-index-browse .layout_middle, #global_page_poll-index-view .layout_middle, #global_page_poll-index-manage .layout_middle, #global_page_event-index-browse .layout_middle, #global_page_event-index-manage .layout_middle, #global_page_music-index-browse .layout_middle, #global_page_music-index-manage .layout_middle, #global_page_group-index-browse .layout_middle, .group_discussions_thread, .group_discussions, .event_discussions_thread, .event_discussions, #global_page_event-photo-view .layout_middle, #global_page_group-photo-view .layout_middle, .messages_list, .message_view, #global_page_user-settings-network .layout_middle, #global_page_core-search-index #global_content, .notifications_layout { +foreground; +rounded; background-image:url(images/ss_mainforeground_bg.png); padding:15px; } .tagger_form, .chat_messages_wrapper, .chat_users > li, ul.networks > li { +foreground; } ul.forum_categories > li > div { background-image:url(images/ss_header_bg.png); +rounded(0px); } #global_page_event-profile-index .layout_middle, #global_page_group-profile-index .layout_middle, #global_page_user-profile-index .layout_middle, #global_page_user-index-home .layout_activity_feed, #global_page_core-index-index .layout_activity_feed { +rounded; } .chat_users_wrapper { background:url(images/ss_comment_bg2.png) repeat-x; border:1px solid #000; border-left:none; height:452px; } ul.forum_topics > li.forum_nth_0 { background:url(images/ss_header_bg.png) repeat-x transparent; } #global_page_album-album-view .thumbs { background:none; padding:0px; } #global_page_album-album-view .layout_middle { +rounded(6px,true,true,false,false); } ul.thumbs .thumbs_photo { background-color:#000; padding:0px; } .browseclassifieds_criteria { padding:0px; background:none; } #global_page_core-index-index .layout_core_menu_mini li:first-child { +foreground; +rounded(6px, true,true,false,false); } #global_search_form_container { padding-top:9px; float:right; } .notifications_unread { background-color:#162626; } #filter_form select { max-width:170px; } div.albums_viewmedia_info { border:1px solid #070A0A; } .browse-separator-wrapper { border-color:$theme_foreground_border_color; } #demo-list { border-color:#000 !important; background-image:url(images/ss_mainforeground_bg.png) !important; } #demo-list li.file { background-color:transparent !important; } .chat_main { border:1px solid #000; background:none; } .chat_input_wrapper { background:#0D0F0F; border:2px solid #000; border-bottom-width:1px; } .chat_messages_wrapper { overflow-y:auto; } .chat_users > li { border:none; } .chat_header_title h3 { font-size:1.4em; } ul.forum_topic_posts { border-top:none; } .polls_view .comments { background-position: 0px 29px; } .layout_event_profile_options, .layout_group_profile_options { +foreground; +rounded(6px,true,true,false,false); } #profile_options li { padding:8px; } div.comments_comment_likes_tips { +foreground; +rounded(6px); } .video_thumb_wrapper { background:#1A302F !important; } .video_thumb_wrapper:hover { background:#2D4B4A !important; } .layout_core_container_tabs .layout_activity_feed #feed-update { +rounded(0px); } .profile_friends_lists li { padding-right:5px !important; } .profile_friends_lists li.friend_list_joined, .profile_friends_lists li.friend_list_unjoined { background-color:transparent; background-position:0px center; } .profile_friends_lists li.friend_list_joined:hover, .profile_friends_lists li.friend_list_unjoined:hover { background-color:inherit; } .music_player { background-color:transparent; +foreground; background-image:url(images/ss_pulldown_bg.png); border:4px solid #1A302F; } .playlist_short_player { border:4px solid #1A302F; } .playlist_short_player .music_player_button_play { margin:5px 10px 5px 8px; } .music_player_button_prev, .music_player_button_play, .music_player_button_pause, .music_player_button_next, .music_player_button_launch { background-color:#1B302F; border:none; +rounded(3px); } .music_player_button_prev:hover, .music_player_button_play:hover, .music_player_button_next:hover, .music_player_button_launch:hover { background-color:#244644; border:none; } .music_player_trackname { margin-top:10px; } .music_player_scrub { background-color:#1B302F; border:1px solid #000; height:10px; margin-top:5px; } .music_player_scrub_cursor { height:10px; margin-top:0px; } .music_player_tracks { border-color:#1B312F; } .music_player_tracks > li { background-color:#142322; } .music_player_tracks > li:hover, .music_player_tracks > li.song_playing { background-color:#244644; } .layout_activity_feed > .tip { +foreground; +rounded(6px,true,true,false,false); padding:15px 15px 0px 15px; } .group_discussions_thread_options, .event_discussions_thread_options { +foreground; +rounded; padding:10px; margin-top:5px; } .forum_categories > li > ul { padding-top:5px; } ul.forum_categories .forum_topics, ul.forum_categories .forum_post { width:50px; } ul.group_discussions_thread > li, ul.event_discussions_thread > li { background:none; margin-top:15px; } .group_discussions_list .group_discussions, .event_discussions_list .event_discussions { background:none; padding:10px 0px; } ul.group_discussions_thread > li, ul.event_discussions_thread > li { margin-top:0px; border-top:none; } ul.group_discussions_thread > li+li, ul.event_discussions_thread > li+li { border-top:3px solid #090D0C; padding-top:5px; } ul.event_discussions_thread .event_discussions_thread_details { border-color:#1E2C28; } ul.event_discussions_thread .event_discussions_thread_body blockquote { border:1px dashed #171717;; } .event_discussions_options a { margin-right:15px; } .layout_poll_profile_polls > div { overflow:hidden; } .layout_user_profile_info { margin-bottom:15px; } .autocompleter_selected { background-color: #385050; } ul.notifications > li { margin-bottom:0px; padding-bottom:10px; padding-top:10px; } HTML-Code:
/* $Id: constants.css 8875 2011-04-13 18:31:45Z bryan $ */ /* DEFAULT STYLES FOR THIS THEME */ @constants { /* NOTE TO SELVES --------------------------------------------------------------- Also add constants to application/settings/constants.xml END NOTE --------------------------------------------------------------------- */ /* PAGE WIDTHS & BACKGROUND COLOR Specify the top bar wrapper width (which contains the mini menu, logo, and main menu by default), the footer width, and the width of left & right-side columns. */ theme_topbar_width: 100%; theme_topbar_minimenu_width: 950px; theme_topbar_logo_width: 950px; theme_topbar_menu_width: 950px; theme_footer_width: 930px; theme_content_width: 950px; theme_content_columns_left_width: 190px; theme_content_columns_right_width: 190px; theme_body_background_color: #192121; /* HEADER AND FOOTER COLORS These values are only used to style the site-wide header and footer. */ theme_topbar_background_color: #e9f4fa; theme_topbar_menu_background_color: #1A3D3B; theme_topbar_menu_background_color_hover: transparent; theme_topbar_menu_link_color: #fff; theme_topbar_menu_link_decoration: none; theme_topbar_menu_link_hover_color: #fff; theme_topbar_menu_link_hover_decoration: underline; theme_topbar_menu_link_size: 1.3em; theme_topbar_menu_link_background_color: transparent; theme_topbar_menu_link_background_color_hover: transparent; theme_topbar_menu_border: 1px solid #89a4b3; theme_topbar_minimenu_background_color: #fff; theme_topbar_minimenu_border: 2px solid #d7e7f0; theme_topbar_minimenu_link_size: .7em; theme_topbar_minimenu_link_color: #999; theme_topbar_minimenu_link_hover_color: #FFF; theme_topbar_minimenu_link_hover_decoration: none; theme_topbar_minimenu_link_hover_background_color: #233B3B; theme_topbar_border: 0px solid transparent; /* TEXT & LINKS These values affect the size and colors of your text and links throughout your layout. */ theme_font_family: arial, helvetica, sans-serif; theme_font_size: 10pt; theme_font_color: #c4c4c4; theme_font_color_light: #8D8D8D; theme_text_align: left; theme_link_color: #5ab2b5; theme_link_color_hover: #FFFFFF; theme_link_decoration: none; theme_link_decoration_hover: none; theme_link_alt_color: #ed6321; theme_headline_color: #FFFFFF; theme_headline_size_large: 1.5em; theme_headline_size_medium: 1.1em; /* BORDER COLORS These colors are mostly applied to borders that separate items in lists of content. */ theme_border_color: #21322D; theme_border_medium_color: #171717; theme_border_dark_color: #262626; /* WIDGET BOX BORDER COLORS These colors are applied to borders around or within boxes that have a background color, like widgets. */ theme_foreground_border_color: #1E2C28; theme_foreground_border_color_light: #212E2B; theme_foreground_background_color: transparent; /* INPUT FIELDS AND BUTTONS These values style input fields and buttons that appear throughout the layout. */ theme_input_background_color: #0C1211; theme_select_background_color: #1E2D2A; theme_input_font_color: #c4c4c4; theme_select_font_color: #DFDFDF; theme_input_border_colors: #000 #18221F #20312C #18221F; theme_select_border_colors: #283832 #000 #000 #18221F; theme_button_background_color: #f26522; theme_button_background_color_hover: #F6651C; theme_button_font_color: #fff; theme_button_border_color: #ee6321; /* PHOTO BORDERS These colors are applied to the borders drawn around most images and thumbnails. */ theme_photo_border_color: transparent; theme_photo_border_color_hover: #233934; /* FORMS These colors are applied to most forms throughout the layout. */ theme_form_border_color: #000; theme_form_background_color: #f4f9fb; theme_form_label_font_color: #777; /* TABS (BUTTON-STYLE) These colors are applied to the button-style tab menus which are often shown on browse pages. */ theme_buttontabs_font_color: #777; theme_buttontabs_font_color_hover: #fff; theme_buttontabs_font_color_active: #fff; theme_buttontabs_background_color: rgba(0,0,0,.35); theme_buttontabs_background_color_hover: #132E2C; theme_buttontabs_background_color_active: rgba(0,0,0,.45); /* TABS These colors are applied to tab menus (as seen on several pages, including the member profile page). */ theme_tabs_background_color: #e9f4fa; theme_tabs_border_color: #cad9e1; theme_tabs_border_color_hover: #cad9e1; theme_tabs_font_color: #838e9a; theme_tabs_font_color_active: #fff; theme_tabs_background_color_active: #263836; theme_tabs_background_color_hover: #263836; /* LISTS These colors are applied to some lists, especially in pull-down menus. */ theme_list_background_color: #17302B; theme_list_background_color_alt: #142825; theme_list_background_color_hover: #172D2A; /* TAGS These colors are applied to tags, which appear on blogs, messages, etc. */ theme_tag_background_color: #1B312E; /* INLINE PULLDOWN MENUS These colors style the inline pulldown menus that appear throughout the layout. */ theme_pulldown_background_color: #142321; theme_pulldown_background_color_hover: #233B3B; theme_pulldown_background_color_active: #233B3B; theme_pulldown_font_color_active: #fff; theme_pulldown_border_color: #162925; theme_pulldown_contents_background_color: transparent; theme_pulldown_contents_list_background_color_hover: #121F1F; theme_pulldown_contents_list_background_color_active: #1C3232; } /* Global member photos and icons */ img.main { max-width: 720px; max-height: 720px; } img.thumb_normal { max-width: 140px; max-height: 160px; } img.thumb_profile { max-width: 200px; max-height: 400px; } img.thumb_icon { width: 48px; height: 48px; } img.main, img.thumb_normal, img.thumb_profile, img.thumb_icon { border: none; } /* GLOBAL MIXINS These groups of styles called "mixins" are included in other classes throughout the stylesheet. */ /* Gives an element a background and/or border */ =foreground { background-color: $theme_foreground_background_color; background-image: url(images/ss_foreground_bg.png); background-repeat: repeat; } /* Gives an element a drop shadow */ =shadow($offset_x = 0, $offset_y = 0, $blur_radius = 0, $spread_radius = 0, $shadow_color = "#aaa") { -moz-box-shadow: $offset_x $offset_y $blur_radius $spread_radius $shadow_color; -webkit-box-shadow: $offset_x $offset_y $blur_radius $spread_radius $shadow_color; box-shadow: $offset_x $offset_y $blur_radius $spread_radius $shadow_color; } /* Gives an element rounded corners. */ =rounded($radius = 6px, $hidecorner1 = false, $hidecorner2 = false, $hidecorner3 = false, $hidecorner4 = false) { -moz-border-radius: $radius; -webkit-border-radius: $radius; border-radius: $radius; @if($hidecorner1 == true) { -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; border-radius-topleft: 0px; } @if($hidecorner2 == true) { -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border-radius-topright: 0px; } @if($hidecorner3 == true) { -moz-border-radius-bottomright: 0px; -webkit-border-bottom-right-radius: 0px; border-radius-bottomright: 0px; } @if($hidecorner4 == true) { -moz-border-radius-bottomleft: 0px; -webkit-border-bottom-left-radius: 0px; border-radius-bottomleft: 0px; } } /* Prevents users from selecting contents */ =noselect { -moz-user-select: none; -webkit-user-select: none; } ![]() |
Sponsored Links |
Sponsored Links |
|
|||
![]() Zitat:
Nun, ich muss der Menu im Schwarzen Balken doch 950px geben. Wenn ich dem generellen schwarzen balken eine gebe, dann ist er nur 950 breit. ich möchte aber dass links und rechts vom schwarzen Balken bis zu 1920px breit ist, je nach auflösung also (auto?). Und das Menü wie gesagt soll 950px haben. Die Frage ist, wo und wie schreib ich das rein?! Ich habe echt viel probiert .. und ich weiss nicht was ich reinschreiben soll "auto" oder überhaupt welches element "maring?,padding?" ![]() |
|
||||
![]()
Ich habe nicht geschrieben, dass du dem schwarzen Balken eine Breite geben sollst. Übrigens ist die Anweisung die du suchst um die Breite an den Viewport anzupassen width:100%;
Desweiteren könntest du das bestimmt auch mit padding oder margin lösen ![]() Die Grundlagen von CSS solltest du dir aber aneignen, denn diese Sprache kann man nicht raten. Eine gute Reihe dazu ist Little Boxes, deren ersten Teil es auch online zum Lesen gibt.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade! |
![]() |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Horinzonales CSS Menü mit nach oben ausgeklappten Untermenues | wschwaig | CSS | 4 | 30.10.2006 09:50 |
CSS Tips & Tricks | Webnauts | Ressourcen | 0 | 26.08.2006 00:04 |
CMS - interaktive Box Modell Themes | Sentinel | CSS | 8 | 09.12.2005 00:08 |
CSS Darstellung mit IE und CMS | ly654 | CSS | 2 | 29.11.2005 16:44 |
CMS das mit CSS harmonisiert | Philippp | CSS | 10 | 27.09.2004 22:28 |