PDA

Zobacz pełną wersję : Pozycjonowanie headera



Romeo
02-10-2010, 16:39
Witam! Mam następujący problemy:
1. Zrobiłem header we flashu, ale jest problem, gdyż nie mogę go wyrównać do prawej strony. Z lewej i od top jest w porządku.
2. Oprócz tego chciałbym go trochę schować pod menu pionowe. Jak przesuwam go do dołu to przykrywa menu pionowe. Jak zrobić, aby był za tym menu.

Podaje link do strony: http://fundacjaludwikamaciaga.pl

oraz plik template.css:



html {
height: 100%;
margin-bottom: 1px;
}

form {
margin: 0;
padding: 0;
}

body {
font-family: Helvetica,Arial,sans-serif;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 12px;
color: #333;
}

a:link, a:visited {
text-decoration: none;
font-weight: normal;
}

a:hover {
text-decoration: underline;
font-weight: normal;
}

input.button { cursor: pointer; }

p { margin-top: 0; margin-bottom: 5px; }

img { border: 0 none; }

/*****************************************/
/*** Template specific layout elements ***/
/*****************************************/
#page_bg {
padding: 10px 0;
margin-bottom: 1px;
}

div.center {
text-align: center;
}

div#wrapper {
margin-left: auto;
margin-right: auto;
}

body.width_medium div#wrapper {
width: 950px;
}

body.width_small div#wrapper {
width: 773px;
}

body.width_fmax div#wrapper {
min-width: 750px;
max-width: 1050px;
}

div#header_l {
position: relative;
}

div#header_r {
height: 100px;
padding-left: 11px;
padding-right: 1px;
padding-top: 8px;
overflow: hidden;
text-align: left;
}

div#logo {
position: absolute;
left: 0;
top: 0;
float: left;
width: 100%;
height: 100px;
background: flash(http://www.fundacjaludwikamaciaga.pl/baner/banner1.swf) 0 0 no-repeat;
margin-left: 1px;
margin-top: 14px;
}

div#flash {
height:100;
width:1000;
margin-left:1px;
margin-right:1px;
}

div#newsflash {
width: auto;
margin-left: auto;
margin-right: 30px;
border: 1px solid #00f;
}

div#tabarea {
background: #f7f7f7 url(../images/mw_header_b.png) 0 0 repeat-x;
margin: 0 11px;

}

div#tabarea_l {
background: url(../images/mw_header_l_b.png) 0 0 no-repeat;
padding-left: 32px;
}

div#tabarea_r {
height: 42px;
background: url(../images/mw_header_r_b.png) 100% 0 no-repeat;
padding-right: 1px;
}

div#footer_r {
padding-top: 10px;
height: 47px;
overflow: hidden;
}

div#footer_r div {
text-align: center;
font-size: .90em;
color: #aaa;
}

div#footer_r a:link, div#footer_r a:visited {
color: #999;
}

div#footerspacer {
height: 10px;
}

#pathway {
padding: 0px 10px 8px;
width: auto;
margin-top: -2px;
margin-right: 250px;
text-align: left;
}

#search {
float: right;
width:320px;
margin-top: -20px;
margin-right: 30px;
height: 40px;
overflow: hidden;
text-align:right;
}

form#searchForm input {
vertical-align: middle;
}

form#searchForm table {
border-collapse: collapse;
}

form#searchForm td {
padding:0;
}

#mod_search_searchword {
padding-left: 3px;
}

#area {
padding: 0;
}

#whitebox {
margin: 0 21px 0px 21px;
background: #fff;
width: auto;
}

#whitebox div {
text-align: left;
}

#whitebox_t {
background: #fff url(../images/mw_content_t.png) 0 0 repeat-x;
}

#whitebox_tl {
background: url(../images/mw_content_t_l.png) 0 0 no-repeat;
}

#whitebox_tr {
height: 10px;
overflow: hidden;
background: url(../images/mw_content_t_r.png) 100% 0 no-repeat;
}

#whitebox_m {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
width: auto;
padding: 1px 8px;
}

#whitebox_b {
margin-top: -5px;
background: url(../images/mw_content_b.png) 0 100% repeat-x;
}

#whitebox_bl {
background: url(../images/mw_content_b_l.png) 0 100% no-repeat;
}

#whitebox_br {
height: 13px;
background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
}

/* horizontal pill menu */
table.pill {
margin-left: auto;
margin-right: auto;
padding: 0;
}

td.pill_l {
background: url(../images/mw_menu_cap_l.png) no-repeat;
width: 20px;
height: 32px;

}

td.pill_m {
background: url(../images/mw_menu_normal_bg.png) repeat-x;
padding: 0;
margin: 0;
width: auto;
}

td.pill_r {
background: url(../images/mw_menu_cap_r.png) no-repeat;
width: 19px;
height: 32px;
}

#pillmenu {
white-space: nowrap;
height: 32px;
float: left;
}

#pillmenu ul {
margin: 0;
padding: 0;
list-style:none;
}

#pillmenu li {
float: left;
background: url(../images/mw_menu_separator.png) top right no-repeat;
margin: 0;
padding: 0;
}

#pillmenu a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
float:left;
display:block;
height: 24px;
line-height: 24px;
padding: 0 20px;
color: #000;
text-decoration: none;
}

#pillmenu a#active_menu-nav {
margin-top:2px;
height: 21px;
line-height: 21px;
background-position: 0 0;
}

#leftcolumn {
padding: 0;
margin: 0;
width: 20%;
float:left;
}

#maincolumn,
#maincolumn_full {
margin-left: 20%;
padding-left: 15px;
width: 75%;
}

#maincolumn_full {
margin-left: 0;
padding: 0;
width: 100%;
}

table.nopad {
width: 100%;
border-collapse: collapse;
padding: 0;
margin: 0;
margin-bottom: 15px;
}

table.nopad td.middle_pad {
width: 20px;
}

/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

div.offline {
background: #fffebb;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 1.2em;
padding: 5px;
}

span.pathway {
display: block;
margin: 0 20px;
height: 16px;
line-height: 16px;
overflow: hidden;
}

/* headers */
div.componentheading {
padding-left: 0px;
}

h1 {
padding: 0;
font-family:Helvetica ,Arial,sans-serif;
font-size: 1.3em;
font-weight: bold;
vertical-align: bottom;
color: #666;
text-align: left;
width: 100%;
}

h2, .contentheading {
padding: 0;
font-family: Arial, Helvetica,sans-serif;
font-size: 1.4em;
font-weight: normal;
vertical-align: bottom;
color: #333;
text-align: left;
width: 100%;
}

table.contentpaneopen h3 {
margin-top: 25px;
}

h4 {
font-family: Arial, Helvetica, sans-serif;
color: #333;
}

h3, .componentheading, table.moduletable th, legend {
margin: 0;
font-weight: bold;
font-family: Helvetica,Arial,sans-serif;
font-size: 1.5em;
padding-left: 0px;
margin-bottom: 10px;
text-align: left;
}

/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }


/** overlib **/

.ol-foreground {
background-color: #f6f6f6;
}

.ol-background {
background-color: #666;
}

.ol-textfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

.ol-captionfont {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #f6f6f6;
font-weight: bold;
}
.ol-captionfont a {
color: #0B55C4;
text-decoration: none;
font-size: 12px;
}

.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
padding-left: 5px;
}

a.mainlevel:hover {

}

a_m
02-10-2010, 16:48
1 - dopisz sobie #header object{display: block;float: right}, 2 - flash musi mieć niższy z-index niż menu / elementy menu

Romeo
05-10-2010, 15:33
A możesz mi podpowiedzieć gdzie dokładnie i jaki kod przenieść?

Odpowiedź na pierwsze pytanie pomogła :)

Robster
05-10-2010, 16:19
Tak poza tematem zapytam - Wam też trzeszczy głośnik przy każdym powtórzeniu animacji tego hedera? Ja za każdym razem słyszę krótki "trzask".

Romeo
05-10-2010, 16:42
Tak, też trzeszczy. Kurcze nie radzę sobie z wypozycjonowaniem tego haedera. O ile menu już znajduje się się tam gdzie trzeba to z headera nie potrafię usunąć przestrzeni między obrazkiem a belką menu oraz po obu stronach tła obrazka zrobiły się tak jakby małe "dziury" prawie na samym dole. Gdzie to można poprawić?

Romeo
15-10-2010, 22:16
Mam jedno pytanie odnośnie headera. Jak pozbyć się tych obrazków (przypominających belki), które są po prawej i lewej stronie headera (w tym przypadku flasha). Przejrzałem cały template.css i nie zauważyłem nigdzie kodu odpowiadającego wstawieniu tych obrazków. Pojawiły się w momencie zwiększenia wysokości headera.


html { height: 100%; margin-bottom: 1px; } form { margin: 0; padding: 0; } body { font-family: Helvetica,Arial,sans-serif; line-height: 1.3em; margin: 0px 0px 0px 0px; font-size: 12px; color: #333; } a:link, a:visited { text-decoration: none; font-weight: normal; } a:hover { text-decoration: underline; font-weight: normal; } input.button { cursor: pointer; } p { margin-top: 0; margin-bottom: 5px; } img { border: 0 none; } /*****************************************/ /*** Template specific layout elements ***/ /*****************************************/ #page_bg { padding: 10px 0; margin-bottom: 1px; } div.center { text-align: center; } div#wrapper { margin-left: auto; margin-right: auto; } body.width_medium div#wrapper { width: 950px; } body.width_small div#wrapper { width: 773px; } body.width_fmax div#wrapper { min-width: 750px; max-width: 1050px; } div#header_l { position: relative; } div#header_r { height: 100px; padding-left: 11px; padding-right: 1px; padding-top: 8px; overflow: hidden; text-align: left; } div#logo { position: absolute; left: 0; top: 0; float: left; width: 100%; height: 100px; background: flash(http://www.fundacjaludwikamaciaga.pl/baner/banner1.swf) 0 0 no-repeat; margin-left: 1px; margin-top: 14px; } div#flash { height:100; width:1000; margin-left:1px; margin-right:1px; } div#newsflash { width: auto; margin-left: auto; margin-right: 30px; border: 1px solid #00f; } div#tabarea { background: #f7f7f7 url(../images/mw_header_b.png) 0 0 repeat-x; margin: 0 11px; } div#tabarea_l { background: url(../images/mw_header_l_b.png) 0 0 no-repeat; padding-left: 32px; } div#tabarea_r { height: 42px; background: url(../images/mw_header_r_b.png) 100% 0 no-repeat; padding-right: 1px; } div#footer_r { padding-top: 10px; height: 47px; overflow: hidden; } div#footer_r div { text-align: center; font-size: .90em; color: #aaa; } div#footer_r a:link, div#footer_r a:visited { color: #999; } div#footerspacer { height: 10px; } #pathway { padding: 0px 10px 8px; width: auto; margin-top: -2px; margin-right: 250px; text-align: left; } #search { float: right; width:320px; margin-top: -20px; margin-right: 30px; height: 40px; overflow: hidden; text-align:right; } form#searchForm input { vertical-align: middle; } form#searchForm table { border-collapse: collapse; } form#searchForm td { padding:0; } #mod_search_searchword { padding-left: 3px; } #area { padding: 0; } #whitebox { margin: 0 21px 0px 21px; background: #fff; width: auto; } #whitebox div { text-align: left; } #whitebox_t { background: #fff url(../images/mw_content_t.png) 0 0 repeat-x; } #whitebox_tl { background: url(../images/mw_content_t_l.png) 0 0 no-repeat; } #whitebox_tr { height: 10px; overflow: hidden; background: url(../images/mw_content_t_r.png) 100% 0 no-repeat; } #whitebox_m { border-left: 1px solid #ccc; border-right: 1px solid #ccc; width: auto; padding: 1px 8px; } #whitebox_b { margin-top: -5px; background: url(../images/mw_content_b.png) 0 100% repeat-x; } #whitebox_bl { background: url(../images/mw_content_b_l.png) 0 100% no-repeat; } #whitebox_br { height: 13px; background: url(../images/mw_content_b_r.png) 100% 100% no-repeat; } /* horizontal pill menu */ table.pill { margin-left: auto; margin-right: auto; padding: 0; } td.pill_l { background: url(../images/mw_menu_cap_l.png) no-repeat; width: 20px; height: 32px; } td.pill_m { background: url(../images/mw_menu_normal_bg.png) repeat-x; padding: 0; margin: 0; width: auto; } td.pill_r { background: url(../images/mw_menu_cap_r.png) no-repeat; width: 19px; height: 32px; } #pillmenu { white-space: nowrap; height: 32px; float: left; } #pillmenu ul { margin: 0; padding: 0; list-style:none; } #pillmenu li { float: left; background: url(../images/mw_menu_separator.png) top right no-repeat; margin: 0; padding: 0; } #pillmenu a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; float:left; display:block; height: 24px; line-height: 24px; padding: 0 20px; color: #000; text-decoration: none; } #pillmenu a#active_menu-nav { margin-top:2px; height: 21px; line-height: 21px; background-position: 0 0; } #leftcolumn { padding: 0; margin: 0; width: 20%; float:left; } #maincolumn, #maincolumn_full { margin-left: 20%; padding-left: 15px; width: 75%; } #maincolumn_full { margin-left: 0; padding: 0; width: 100%; } table.nopad { width: 100%; border-collapse: collapse; padding: 0; margin: 0; margin-bottom: 15px; } table.nopad td.middle_pad { width: 20px; } /*****************************************/ /*** Joomla! specific content elements ***/ /*****************************************/ div.offline { background: #fffebb; width: 100%; position: absolute; top: 0; left: 0; font-size: 1.2em; padding: 5px; } span.pathway { display: block; margin: 0 20px; height: 16px; line-height: 16px; overflow: hidden; } /* headers */ div.componentheading { padding-left: 0px; } h1 { padding: 0; font-family:Helvetica ,Arial,sans-serif; font-size: 1.3em; font-weight: bold; vertical-align: bottom; color: #666; text-align: left; width: 100%; } h2, .contentheading { padding: 0; font-family: Arial, Helvetica,sans-serif; font-size: 1.4em; font-weight: normal; vertical-align: bottom; color: #333; text-align: left; width: 100%; } table.contentpaneopen h3 { margin-top: 25px; } h4 { font-family: Arial, Helvetica, sans-serif; color: #333; } h3, .componentheading, table.moduletable th, legend { margin: 0; font-weight: bold; font-family: Helvetica,Arial,sans-serif; font-size: 1.5em; padding-left: 0px; margin-bottom: 10px; text-align: left; } /* form validation */ .invalid { border-color: #ff0000; } label.invalid { color: #ff0000; } /** overlib **/ .ol-foreground { background-color: #f6f6f6; } .ol-background { background-color: #666; } .ol-textfont { font-family: Arial, Helvetica, sans-serif; font-size: 10px; } .ol-captionfont { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #f6f6f6; font-weight: bold; } .ol-captionfont a { color: #0B55C4; text-decoration: none; font-size: 12px; Podaje link do strony: http://fundacjaludwikamaciaga.pl (http://fundacjaludwikamaciaga.pl/)

a_m
15-10-2010, 22:29
firebug (http://forum.joomla.pl/white_bg.css%20wiersz%2014,%20template.css%20wiers z%20103,%20template.css%20wiersz%20109,%20template .css%20wiersz%20%20wiersz%20114) mówi: white_bg.css wiersz 14, template.css wiersz 103, template.css wiersz 109, template.css wiersz wiersz 114 / to wersja do zlikwidowania czegoś, co przypomina belkę

wasyleque
02-12-2010, 22:05
Wystarczyło zedytować odpowienio 3 pliki PNG (zwiększyć wysokość zdjęcia):


mw_header_t.png
mw_header_t_l.png
mw_header_t_r.png

pozdrawiam, sam męczyłem ten problem ;)