|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
11.02.2012, 13:28 | #1 |
Форумчанин
Регистрация: 13.06.2009
Сообщений: 691
|
Позиция меню по вертикали
Здравствуйте.
Изменил меню в шаблоне электронной книге, никак не могу вывести меню по вертикали на уровень текста. Что только не делал, уходит то в право, то влево, то вниз но на уровне текста не встает. Подскажите где необходимо изменит код в CSS таблице, чтобы изменить вертикальное положение меню. CSS Меню начинается со строки /* Sidebar Left -----------------------------------------------------------------------------*/ PHP код:
Код HTML:
<div class="sidebar" id="sideLeft"> <h1>СОДЕРЖАНИЕ</h1> <ul> <li><a href="1.html">01</a></li> <li><a href="2.html">02</a></li> <li><a href="10" class="notopbrdr0xNone">2</a></li> </ul> </div><!-- .sidebar#sideLeft --> |
11.02.2012, 15:05 | #2 |
Пользователь
Регистрация: 07.02.2012
Сообщений: 95
|
поставь для него float: left;
а вообще хотелось на весь код взглянуть |
11.02.2012, 15:10 | #3 | |
Форумчанин
Регистрация: 13.06.2009
Сообщений: 691
|
Цитата:
Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" /> </head> <body> <div id="wrapper"> <div id="header"> <img src="img/header.jpg" width="900" height="120" /> </div><!-- #header--> <div id="middle"> <div id="container"> <div id="content"> <h1>ГЛАВА 1. Пробуждение.</h1> <p>"But I must expl" <div id="pagiantion"><a href="2.html">Следующая страница</a></div> </div><!-- #content--> </div><!-- #container--> <div class="sidebar" id="sideLeft"> <h1>СОДЕРЖАНИЕ</h1> <ul> <li><a href="1.html">01</a></li> <li><a href="2.html">02</a></li> <li><a href="3.html">03</a></li> <li><a href="4.html">04</a></li> <li><a href="5.html">05</a></li> <li><a href="6.html">06</a></li> <li><a href="7.html">07</a></li> <li><a href="8.html">08</a></li> <li><a href="9.html">09</a></li> <li><a href="10" class="notopbrdr0xNone">10</a></li> </ul> </div><!-- .sidebar#sideLeft --> </div><!-- #middle--> <div id="footer"> <img src="img/footer.jpg" width="900" height="40" /> </div><!-- #footer --> </div><!-- #wrapper --> </body> </html> |
|
11.02.2012, 16:16 | #4 |
Пользователь
Регистрация: 07.02.2012
Сообщений: 95
|
вот тут поковырялся, думаю отличия найдешь
html Код HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta charset="utf-8"/> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" /> </head> <body> <div id="wrapper"> <div id="header"> <img src="img/header.jpg" width="900" height="120" /> </div><!-- #header--> <div id="middle"> <div id="container"> <div id="content"> <h1>ГЛАВА 1. Пробуждение.</h1> <p>"But I must expl" <div id="pagiantion"><a href="2.html">Следующая страница</a></div> <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath of that universal love which bears and sustains us, as it floats around us in an eternity of bliss; and then, my friend, when darkness overspreads my eyes, and heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh, would I could describe these conceptions, could impress upon paper all that is living so full and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite God!</p> <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath of that universal love which bears and sustains us, as it floats around us in an eternity of bliss; and then, my friend, when darkness overspreads my eyes, and heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh, would I could describe these conceptions, could impress upon paper all that is living so full and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite God!</p> <p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own image, and the breath of that universal love which bears and sustains us, as it floats around us in an eternity of bliss; and then, my friend, when darkness overspreads my eyes, and heaven and earth seem to dwell in my soul and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh, would I could describe these conceptions, could impress upon paper all that is living so full and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite God!</p> </div><!-- #content--> <div id="left"> <div class="sidebar" id="sideLeft"> <h1>Содержание</h1> <ul> <li><a href="1.html">01</a></li> <li><a href="2.html">02</a></li> <li><a href="3.html">03</a></li> <li><a href="4.html">04</a></li> <li><a href="5.html">05</a></li> <li><a href="6.html">06</a></li> <li><a href="7.html">07</a></li> <li><a href="8.html">08</a></li> <li><a href="9.html">09</a></li> <li><a href="10" class="notopbrdr0xNone">10</a></li> </ul> </div> </div><!-- .sidebar#sideLeft --> </div><!-- #container--> </div><!-- #middle--> <div id="footer"> <img src="img/footer.jpg" width="900" height="40" /> </div><!-- #footer --> </div><!-- #wrapper --> </body> </html> |
11.02.2012, 16:16 | #5 |
Пользователь
Регистрация: 07.02.2012
Сообщений: 95
|
css
Код HTML:
/* CSS Document */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ol, ul { list-style: none; } blockquote, q { quotes: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } body { font: 12px Verdana, sans-serif; width: 100%; background-color: #f7f5e3; color: #17181A; } a { color: blue; outline: none; text-decoration: underline; } a:hover { text-decoration: none; } p { margin: 0 0 18px } img { border: none; } input { vertical-align: middle; } #start { width: 409px; height: 499px; margin: 25px auto; } #start a { border: none; } #start p { text-align: center; font-family: Verdana; font-size: 11px; color:#333; } #wrapper { width: 900px; margin: 0 auto; border: 1px solid #EDE4A3; background-color: #fff; } /* Header -----------------------------------------------------------------------------*/ #header { height: 120px; background: #FFE680; } /* Middle -----------------------------------------------------------------------------*/ #middle { width: 100%; height: 1%; position: relative; } #middle:after { content: '.'; display: block; clear: both; visibility: hidden; height: 0; } #container { width: 100%; float: left; overflow: hidden; } #content { padding: 0 0 0 270px; } #content h1 { margin: 25px; font-weight: bold; color: #333; margin-left: 20px; font-size: 20px; } #content p { margin: 20px; } /* Sidebar Left -----------------------------------------------------------------------------*/ #left{float: left; position:fixed; top:150px} #sideLeft li { display: inline; } * html #sideLeft a { height: 1px; } #sideLeft ul { list-style: none; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: bold; text-decoration: none; } #sideLeft h1{ font-size: 20px; font-weight: bold; color: #127812; margin: 25px; text-align: center; } #sideLeft { width: 200px; margin: 10px; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #FF0000; border-right-color: #FF0000; border-bottom-color: #FF0000; border-left-color: #FF0000; } #sideLeft li a { text-decoration: none; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-bottom-color: #870000; } #sideLeft .notopbrdr0xNone { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #sideLeft li a:link, #sideLeft li a:visited { color: #870000; display: block; background-color: #F2D6A4; padding-top: 3px; padding-right: 0; padding-bottom: 3px; padding-left: 10px; } #sideLeft li a:hover { color: #FFFFFF; background: #870000; padding-top: 3px; padding-right: 0; padding-bottom: 3px; padding-left: 10px; } /* Footer -----------------------------------------------------------------------------*/ #footer { height: 40px; background: #BFF08E; } #pagiantion { margin: 40px; text-align: center; } #pagiantion a { font-size: 20px; text-decoration: underline; color:#08A9BD; } |
11.02.2012, 16:21 | #6 |
Пользователь
Регистрация: 07.02.2012
Сообщений: 95
|
вот скрин прилепил для визуализации
|
11.02.2012, 17:04 | #7 |
Пользователь
Регистрация: 07.02.2012
Сообщений: 95
|
некоторая поправочка
Код HTML:
#left{float: left; position:absolute; top:0px} |
11.02.2012, 17:49 | #8 |
Форумчанин
Регистрация: 13.06.2009
Сообщений: 691
|
Закрывающий тег <div id="left"> правильно выставлен?
<div id="left"> <div class="sidebar" id="sideLeft"> <h1>СОДЕРЖАНИЕ</h1> <ul> <li><a href="1.html">01</a></li> <li><a href="2.html">02</a></li> <li><a href="3.html">03</a></li> <li><a href="4.html">04</a></li> <li><a href="5.html">05</a></li> <li><a href="6.html">06</a></li> <li><a href="7.html">07</a></li> <li><a href="8.html">08</a></li> <li><a href="9.html">09</a></li> <li><a href="10" class="notopbrdr0xNone">10</a></li> </ul> </div> </div><!-- .sidebar#sideLeft --> |
11.02.2012, 18:01 | #9 |
Пользователь
Регистрация: 07.02.2012
Сообщений: 95
|
конечно правильно, я в этот тег заключил твое меню, на комент не обращай внимания, смотри вот это
</div><!-- .sidebar#sideLeft --> </div> </div><!-- #container--> </div><!-- #middle--> Последний раз редактировалось titan2012; 11.02.2012 в 18:04. |
11.02.2012, 18:06 | #10 |
Форумчанин
Регистрация: 13.06.2009
Сообщений: 691
|
А тогда зачем в тег <div id="container"> заключили меню ?
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Ограничивающие по вертикали линии в RichEdit | artemavd | Общие вопросы Delphi | 5 | 24.08.2010 09:05 |
автофильтр по вертикали | gling | Microsoft Office Excel | 0 | 04.05.2010 23:17 |
Склеить таблицы в книге расположив по вертикали. | MaxxVer | Microsoft Office Excel | 4 | 15.12.2009 09:19 |
Выравнивание текста по вертикали | bowa | HTML и CSS | 8 | 20.09.2009 20:34 |
Как прокрутить ListBox по вертикали? | TwiX | Общие вопросы Delphi | 5 | 29.07.2009 21:23 |