navigation menu

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
thalassa
Δημοσιεύσεις: 1
Εγγραφή: 01 Ιουν 2010 22:04

navigation menu

Δημοσίευση από thalassa » 01 Ιουν 2010 22:19

χρειαζομαι βοηθεια. πως μπορω το υπάρχον μενού να το επεκτείνω καθ ύψος; εννοω να προσθέσω και άλλα links σε αυτο;

http://thalassa-karadeniz.mylivepage.com/

σας στελνω
1. το υπαρχον μενου:
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav_bg">
<tr>
<td class="nav_top">@MLP_NAVIGATION_MENU_TITLE@</td>
</tr>
<tr>
<td class="nav_bottom">
<div class="nav_first">
<MLP_NAVIGATION_MENU_ITEM_START>
<div class="navigation_item">
@MLP_NAVIGATION_MENU_ITEM_CONTENT@
</div>
</MLP_NAVIGATION_MENU_ITEM_END>
</div>
</td>
</tr>
</table>
2.την ιστοσελίδα CSS

#main_content td {
font-size: 12px;
}
.clearfx:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.clearfx {
zoom: 1;
}
.body_bg {
background: #000000 url(@MLP_COMMON_PATH@style47/body_bg_left.gif) no-repeat top left;
}
/*.body_d {
position: relative;
z-index: 1;
background: #000 url(@MLP_COMMON_PATH@style47/body_bg_left.gif) no-repeat top left;
}*/
.body_bg_right {
background: url(@MLP_COMMON_PATH@style47/body_bg_right.gif) no-repeat top right;
}
/*.body_bg_space {
padding: 71px 20px 20px 20px;
}*/
.top_bg {
background: url(@MLP_COMMON_PATH@style47/top_bg.jpg) repeat-x top left;
}
.top_bg_left {
background:url(@MLP_COMMON_PATH@style47/top_bg_left.jpg) top left no-repeat;
}
.top_bg_right {
height: 199px;
background: url no-repeat top right;
margin-top: 0px;
padding-top: 0px;
}
.top_bunner {
width: 300px;
text-align: center;
vertical-align: middle;
margin: 0px;
padding: 0px;
}
.up_add_friend {
font-size: 12px;
margin: 0px;
padding-left: 18px;
color: #ff0000;
}
.up_add_friend:hover {
text-decoration: underline;
}
.main_cont {
margin-top: 20px;
}
.space_top {
height: 26px !important;
}
*:first-child+html .space_top {
height: 71px !important;
}
*|html .space_top {
height: 71px !important;
}
* html .space_top {
height: 91px !important;
}
.space_side {
width: 20px;
}
.bottom {
margin-left: 300px;
padding: 20px 0px;
text-align: center;
}
.bottom a {
color: #fff;
}
.block_head {
margin-bottom: 15px;
}
span.window_minimize {
display: block;
margin-left: 3px;
margin-top: 0px;
}
span.window_minimize font {
display: block;
}
span.window_close {
display: block;
margin-left: 3px;
margin-top: 0px;
}
span.window_close font {
display: block;
}
span.window_edit {
display: block;
margin-left: 3px;
margin-top: 0px;
}
span.window_edit font {
display: block;
}
ul.mlp_tab_block {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li.mlp_tab {
float: left;
margin-right: 2px !important;
}
li.mlp_tab_active {
float: left;
margin-right: 2px !important;
}
ul.mlp_tab_block {
height: 27px;
width: 100%;
background: url('@MLP_COMMON_PATH@style47/tab_bg.gif') bottom left repeat-x;
}
li.mlp_tab {
display: block;
line-height: 27px;
background: url('@MLP_COMMON_PATH@style47/tab_l.gif') no-repeat top left;
}
li.mlp_tab a {
color: #555555;
display: block;
line-height: 27px;
background: url('@MLP_COMMON_PATH@style47/tab_r.gif') no-repeat top right;
padding: 0px 12px;
}
li.mlp_tab_active {
display: block;
line-height: 27px;
background: url('@MLP_COMMON_PATH@style47/tab_active_l.gif') no-repeat top left;
}
li.mlp_tab_active a {
color: #aaaaaa;
display: block;
line-height: 27px;
background: url('@MLP_COMMON_PATH@style47/tab_active_r.gif') no-repeat top right;
padding: 0px 12px;
}
li.mlp_tab a, li.mlp_tab_active a {
text-decoration: none;
white-space: nowrap;
}
span.top_menu_block {
position: relative;
z-index: 100;
left: 0px;
display: block;
width: 100%;
margin-bottom: -27px;
}
*:first-child+html span.top_menu_block {
position: relative;
z-index: 100;
left: 0px;
top: 47px;
display: block;
width: 100%;
margin-bottom: -27px;
}
* html span.top_menu_block {
position: relative;
z-index: 100;
left: 0px;
display: block;
width: 100%;
top: 47px;
margin-bottom: -27px;
}
span.top_menu_block_inner {
display: block;
/*height: 71px;*/
margin-left: 20px;
}
span.top_menu { }
span.top_menu#top_menu_active {
margin-top: 0px;
background: url('@MLP_COMMON_PATH@style47/topmenu_active_right.gif') no-repeat top right;
}
span.top_menu, span.top_menu#top_menu_active {
float: left;
display: block;
padding-right: 15px;
}
span.top_menu a { }
span.top_menu#top_menu_active a {
background: url('@MLP_COMMON_PATH@style47/topmenu_active_left.gif') no-repeat top left;
}
span.top_menu a, span.top_menu#top_menu_active a {
font-size: 11px;
text-decoration: underline;
height: 35px;
padding: 10px 0px 0px 15px;
display: block;
float: left;
}
span.top_menu a {
color: #fff;
}
span.top_menu#top_menu_active a {
color: #6a6a6a;
}
span.top_menu a:hover {
color: #6a6a6a;
}
span.top_menu, span.top_menu a, span.top_menu#top_menu_active, span.top_menu#top_menu_active a {
white-space: nowrap;
}
span.top_menu_block, span.top_menu_block_inner {
display: block;
}
form {
margin: 0px;
padding: 0px;
}
h1 { font-size: @H1_FONT_SIZE@; }
h2 { font-size: @H2_FONT_SIZE@; }
h3 { font-size: @H3_FONT_SIZE@; }
h4 { font-size: @H4_FONT_SIZE@; }
h5 { font-size: @H5_FONT_SIZE@; }
h6 { font-size: @H6_FONT_SIZE@; }
h1 { color: @H1_COLOR@; }
h2, h3, h4, h5, h6 { color: @H2_COLOR@; }
.window_head {
width: 100%;
font-size: @WINDOW_HEAD_FONT_SIZE@;
font-weight: bold;
color: @WINDOW_HEAD_FONT_COLOR@;
}
.top_center_text {
color: #fff;
}
.top_center_actions a {
color: #ff0000;
font-size: 12px;
}
.top_center_head {
font-size: @TOP_CENTER_HEAD_FONT_SIZE@;
color: #fff;
}
.window_control {
vertical-align: top;
}
.content_title {
font-size: 19px;
}
.pg {
padding: 2px;
border-right: 1px solid #555555;
cursor: pointer;
color: @LINKS_COLOR@;
}
.pg_h {
background-color: #555555;
padding: 2px;
border-right: 1px solid #555555;
cursor: pointer;
color: @LINKS_COLOR@;
}
#mlp_work_place_1 { width: 260px; }
#mlp_work_place_2 { margin-left: 40px; }
#mlp_work_place_3 { margin: 0px 20px; }

#mlp_work_place_4 { padding-right: 20px; }
#mlp_work_place_4 .mlp_work_place_4_cont { width: 260px; }

#area_0 { padding-right: 10px; }
#area_1 { padding-left: 10px; }
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
/* background-color: @BODY_BG_COLOR@;*/
background-color: #000;
font-family: @BODY_FONT_FAMILY@;
color: @BODY_COLOR@;
}
body, td {
font-size: @BODY_FONT_SIZE@pt;
}
a {
color: @LINKS_COLOR@;
}
tr.OneLine { background-color: @ONE_LINE_BG_COLOR@; }
tr.OverLine { background-color: @OVER_LINE_BG_COLOR@; }
tr.TwoLine { background-color: @TWO_LINE_BG_COLOR@; }
#quote, #QUOTE, .quote, .QUOTE { color: @QUOTE_COLOR@; background-color: @QUOTE_BG_COLOR@; border: @QUOTE_BORDER@; padding: 4px; }
blockquote {
color: @QUOTE_COLOR@;
background: @QUOTE_BG_COLOR@;
border: @QUOTE_BORDER@;
margin: 3px 3px 3px 5px;
padding: 0 0 0 10px;
}
#preview_text { margin: 5px; padding: 5px; background: #000000; }
.nav_bg { background:url('@MLP_COMMON_PATH@style47/nav_bg.jpg') top left repeat-y; }
.nav_top { font-size:16px; font-weight:bold; color:#fff; padding-left:20px; height:41px; background:url('@MLP_COMMON_PATH@style47/nav_top.jpg') top left no-repeat; }
.nav_first { padding:20px 0px 25px 0px; background:url('@MLP_COMMON_PATH@style47/nav_first.jpg') top left no-repeat; }
.nav_bottom { background:url('@MLP_COMMON_PATH@style47/nav_bottom.jpg') bottom left no-repeat; }

.navigation { font-size:@NAVIGATION_LINKS_FONT_SIZE@; color:@NAVIGATION_COLOR@; font-weight:bold; text-decoration:none; margin-left:23px; padding:0px 10px 0px 14px; background:url('@MLP_COMMON_PATH@style47/nav_bullet.gif') center left no-repeat; }
.navigation_item { padding:4px 0px; }


/* ----- windows ----- */

.w_bottom { margin-top:20px; }
.w_inner { padding:10px 10px 15px 10px; }
/* regular */
.w_top { background:url('@MLP_COMMON_PATH@style47/w_border.gif') top left repeat-x; }
.w_border_left { background:url('@MLP_COMMON_PATH@style47/w_border.gif') top left repeat-y; }
.w_border_right { background:url('@MLP_COMMON_PATH@style47/w_border.gif') top right repeat-y; }
.w_top_left { background:url('@MLP_COMMON_PATH@style47/w_top_left.gif') top left no-repeat; }
.w_top_right { background:url('@MLP_COMMON_PATH@style47/w_top_right.gif') top right no-repeat; }
.w_bottom_left { background:url('@MLP_COMMON_PATH@style47/w_bottom_left.gif') bottom left no-repeat; }
.w_bottom_right { background:url('@MLP_COMMON_PATH@style47/w_bottom_right.gif') bottom right no-repeat; }
.w_bottom { background:#000 url('@MLP_COMMON_PATH@style47/w_bottom.gif') bottom left repeat-x; }
/* leftcol */
#mlp_work_place_4 .w_top { background:url('@MLP_COMMON_PATH@style47/wl_border.gif') top left repeat-x; }
#mlp_work_place_4 .w_border_left { background:url('@MLP_COMMON_PATH@style47/wl_border.gif') top left repeat-y; }
#mlp_work_place_4 .w_border_right { background:url('@MLP_COMMON_PATH@style47/wl_border.gif') top right repeat-y; }
#mlp_work_place_4 .w_top_left { background:url('@MLP_COMMON_PATH@style47/wl_top_left.gif') top left no-repeat; }
#mlp_work_place_4 .w_top_right { background:url('@MLP_COMMON_PATH@style47/wl_top_right.gif') top right no-repeat; }
#mlp_work_place_4 .w_bottom_left { background:url('@MLP_COMMON_PATH@style47/wl_bottom_left.gif') bottom left no-repeat; }
#mlp_work_place_4 .w_bottom_right { background:url('@MLP_COMMON_PATH@style47/wl_bottom_right.gif') bottom right no-repeat; }
#mlp_work_place_4 .w_bottom { background:#000 url('@MLP_COMMON_PATH@style47/wl_bottom.gif') bottom left repeat-x; }



/* ----- left place ----- */
.a_inner { padding:20px 20px 155px 20px; }
.a_top { background:url('@MLP_COMMON_PATH@style47/a_border.gif') top left repeat-x; }
.a_border_left { background:url('@MLP_COMMON_PATH@style47/a_border.gif') top left repeat-y; }
.a_border_right { background:url('@MLP_COMMON_PATH@style47/a_border.gif') top right repeat-y; }
.a_top_left { background:url('@MLP_COMMON_PATH@style47/a_top_left.gif') top left no-repeat; }
.a_top_right { background:url('@MLP_COMMON_PATH@style47/a_top_right.gif') top right no-repeat; }
.a_bottom_left { background:url('@MLP_COMMON_PATH@style47/a_bottom_left.gif') bottom left no-repeat; }
.a_bottom_right { background:url('@MLP_COMMON_PATH@style47/a_bottom_right.jpg') bottom right no-repeat; }
.a_bottom { background:#000 url('@MLP_COMMON_PATH@style47/a_bottom.gif') bottom left repeat-x; }

.my_msg{color:#c2e088;padding-bottom:10px}
.me_msg{color:#889be0;padding-bottom:10px}

.bbord_brd{background-color:#333333}
.bbord_bg{background-color:#000000}
.bbord, .bbord td{border-bottom:1px solid #333333}

img.avatar, td.avatar
{
border:1px solid #333333;
vertical-align:middle;
}
td.img_border { border: 2px solid @LINKS_COLOR@}

table.profile_ind {border-top: 1px solid #282828;border-bottom: 1px solid #282828;}
td.profile_full { background: #282828;}
td.profile_empty { background: #070707;}
.fixedbox
{
position: fixed;
top: 0px;
}

/* common classes */
*.nowrap { white-space: nowrap; }
*.bold { font-weight: bold; }
*.n-bold { font-weight: normal; }
*.italic { font-style: italic; }
*.underline { text-decoration: underline; }
*.uppercase { text-transform: uppercase; }
*.inline { display: inline; }
*.fright { float: right; }
*.fleft { float: left; }
*.block { display: block;}
*.display { display: '';}
*.n-display { display: none;}
*.clear { clear: both; }
*.hidden { visibility: hidden; }
*.visible { visibility: visible !important; }
*.absolute { position: absolute; }
*.relative { position: relative; }
*.hand { cursor: pointer;
//cursor: hand !important;
}

/* style-dependent classes */
.error { color: red; }
.small { font-size: 85%; }
.smaller { font-size: 92%; }
.x-small { font-size: 80%; }
.normal { font-size: 100%; line-height: 100%; }
.medium { font-size: 120%; }
.large { font-size: 130%; }
.x-large { font-size: 140%; }
.great { font-size:200% !important; }
.important { color: @H1_COLOR@; }


/* DropDown List */
.mlp_ddl { }
.mlp_ddl * { font-size: 13px; line-height: 13px; }

.mlp_ddl_top {
border: 1px solid #FFFFFF;
}

.mlp_ddl span {
border-right:1px solid #FFFFFF;
cursor:pointer;
//cursor: hand;
display:block;
padding:4px 2px 4px 6px;
white-space:nowrap;
}

.mlp_ddl_over {
border-color: #E0E0E0 #9F9F9F #F0F0F0 #9F9F9F;
border-style: solid;
border-width: 1px;
}

.mlp_ddl_over span {
border-right:1px solid #F0F0F0;
}

.mlp_ddl_opener {
border:0 none;
display:inline;
float: right;
margin:0;
margin-left:4px;
background: #9F9F9F url(@MLP_COMMON_PATH@style47/ddl_opener.gif) scroll no-repeat 0px 0px;
width: 18px; height: 15px;
}

.mlp_ddl_over .mlp_ddl_opener {
background-color: @LINKS_COLOR@;
background-position: 0px 0px;
}

.mlp_ddl_items {
display:block;
margin: 0pt 0pt 30px 0px;
padding: 10px 5px 5px 15px;
border-color: #E0E0E0 #9F9F9F #9F9F9F #E0E0E0;
border-style: solid;
border-width: 1px;
}

div.mlp_controls { }
span.mlp_control { display:block; padding: 3px; margin: 1px 0; position: relative; z-index:49; }
span.mlp_control_handler { display: block; padding: 3px; border: 1px solid transparent; }
span.mlp_control .mlp_control_data {
display: block;
padding: 3px;
margin: 0 2%;
border-width: 1px;
border-style: solid;
border-color: transparent;
position: relative;
top: -1px;
z-index: 50;
width: 94%;
overflow: hidden;
}
span.mlp_control_hover .mlp_control_handler { border: 1px #c0c0c0 solid; background: @OVER_LINE_BG_COLOR@; }
span.mlp_control_hover .mlp_control_data { border-color: #ffffff #c0c0c0 #c0c0c0 #c0c0c0; }
div.mlp_control_action { display:block; border: 1px solid #555555; background: @OVER_LINE_BG_COLOR@; padding: 5px; position: absolute; z-index: 100; white-space: nowrap; }
div.mlp_control_action a { text-decoration: none; }

/* pop up filter */
.mlp_control_filter_variants .mlp_control_handler { border: 1px #555555 solid; padding: 5px 15px; }
.mlp_control_filter_variants .mlp_control_action div { white-space:nowrap !important; margin: 4px 0; }
.mlp_control_filter_variants div.mlp_control_filter_extra { font-style: italic; }
.mlp_control_filter_variants div.mlp_control_filter_spacer { margin-top: 20px; border-bottom: 1px dashed #555555; }

.banner_top_panel {
margin-left: 20px;
margin-bottom: 32px;
}


3.την διαταξη του ιστοχώρου(εδω μονο copy επιτρεπει. τιποτε αλλο δεν πιανει)
<div class="body_bg">
<div class="body_bg_right">
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="position: relative; z-index: 1; top: 0px; left: 0px;">
<tr>
<td class="space_top"></td>
</tr>
<tr>
<td width="100%" style="padding-left: 20px; padding-right: 20px;">
<div class="top_bg">
<div class="top_bg_left">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="" class="top_bg_right">
<tr>
<td align="middle">
@MLP_WORK_PLACE_1@
</td>
<td width="100%">
@MLP_WORK_PLACE_2@
</td>
<td align="middle">
@MLP_WORK_PLACE_3@
</td>
</tr>
</table>
</div>
</div>
<table cellspacing="0" cellpadding="0" border="0" width="100%" class="main_cont">
<tr>
<td valign="top">
@MLP_WORK_PLACE_4@
</td>
<td width="100%" valign="top">

@MLP_WORK_PLACE_5@

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
@MLP_WORK_PLACE_6@
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
και υπαρχουν και τa banner οπου θα μπορουσα να βαλω μια extra πλοηγηση.

το σαιτ ειναι στο livepage οπου η τεχνικη υποστηριξη ειναι ανυπαρκτη.



καμια ιδεα για βοηθεια;

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

navigation menu

Δημοσίευση από Basilakis » 02 Ιουν 2010 00:18

3 λεπτά scrol σε ένα αχανές Kώδικα... καθάρισε λίγο, τι χρειάζεται και τι όχι για να το δουλέψουμε και εμείς! :)

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες