Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Помогите мне с версткой разобраться

Обсуждение темы Помогите мне с версткой разобраться в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Создаю новую тему, т к возникло куча проблем и вопросов, долго не верстал, забыл то малое что знал. Сейчас главная проблема с меню. ...


Закрытая тема
 
Опции темы
Старый 01.10.2009, 05:55   #1
Создаю новую тему, т к возникло куча проблем и вопросов, долго не верстал, забыл то малое что знал.
Сейчас главная проблема с меню. думал решил проблему, но как оказалось в осле все отображается неверно. Подскажите как решить это. Прикрепляю пример как выглядит в опере и в осле. код тоже. если допускаю ошибки грубые тоже скажите )

Код:
 css 

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#maincontainer{
	width: 1000px; /*Ширина Сайта*/
	margin: 0 auto; /*Center container on page*/
	background-color: #f5f6f6;
}


#gmenu{
	width: 1000px;
	height: 68px;
	background-color: #FF0000;
	background-image: url(../images/02.gif);
}
#poisk{
	padding-left: 750px;
}

#topsection h1{ /*удалить*/
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
	margin-left: 200px; /*Set left margin to LeftColumnWidth*/
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
}

#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
margin-left: -1000px; /*Set left margin to -(MainContainerWidth)*/
background: #f5f6f6;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
#content{
	margin-top: 20px;
}

/*Стиль меню */

#leftmenu {
	background-color: #f5f6f6;
	width: 170px;	
	
}
	#leftmenu h3{
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-style: inherit;
	font-weight: lighter;
	padding-left: 25px;
	color: #f58415;
	margin-top: 30px;
	margin-bottom: -15px;
}

#leftmenu ul {
	padding: 0 0 0 25px;
	*padding-right: 22px;
 	
}
#leftmenu li{
	background-image: url(../images/03.gif);
	background-repeat: no-repeat;
	background-position: -10px 12px;
	list-style-type: none;
}



#leftmenu  a:link, #leftmenu a:visited, #leftmenu a:active{
	color: #183cc2;
	text-decoration: underline;
	font-family: Arial;
	font-style: normal;
	font-size: 12px;
	line-height: normal;
	text-decoration: none;
	font-weight: normal;
	
    }
	 #leftmenu a:hover, #leftmenu a:hover{
	color: #54bceb;
	line-height: normal;
	text-decoration: none;	
	}
,

Код:
index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>
<body>
<div id="maincontainer">
<div id="shap"><img src="templates/<?php echo $this->template ?>/images/01.gif" alt="" title="" /></div>
<div id="gmenu">3<div id="poisk"><jdoc:include type="modules" name="user1" style="" />
</div></div>
<div id="topsection"></div>

<div id="contentwrapper">
<div id="contentcolumn">
 <div id="content"><jdoc:include type="component" /></div>
</div>
</div>

<div id="leftcolumn"><div id="leftmenu">
<jdoc:include type="modules" name="left" style="xhtml" />

</div></div>

<div id="footer">подвал</div>

</div>
</body>
</html>
,

если что то надо еще все пришлю)

(cms Joomla)
Изображения
Тип файла: jpg верст.jpg (128.8 Кб, 16 просмотров)
 
Старый 01.10.2009, 05:55
Ссылки
Старый 01.10.2009, 12:22   #2
проблему вроде как решил
 
Старый 01.10.2009, 12:23   #3
Scorp, всегда приятно поговорить с умным человеком, правда?
можно закрывать?
 
Старый 01.10.2009, 12:35   #4
проблема другая ) как расстояние между ссылками в осле сделать меньше ?
Изображения
Тип файла: jpg верст2.jpg (94.5 Кб, 7 просмотров)
 
Старый 01.10.2009, 12:44   #5
Цитата:
Сообщение от Nine Moons Посмотреть сообщение
Scorp, всегда приятно поговорить с умным человеком, правда?
можно закрывать?
та не то слово ))) , закрывать не надо, буду сюда отписывать след проблемы, думаю они будут ) а как смайлы тут вставлять ?
 
Старый 01.10.2009, 12:47   #6
Scorp, шучу я
 
Старый 01.10.2009, 14:44   #7
В мозиле немного отступ больше, как для мозилы прописать стиль?

Код:
  /*Стиль меню */

#leftmenu  a:link, #leftmenu a:visited, #leftmenu a:active{
color: #183cc2;
text-decoration: underline;
font-family: Arial;
font-style: normal;
font-size: 12px;
text-decoration: none;
font-weight: normal;

    }
  #leftmenu a:hover, #leftmenu a:hover{
color: #54bceb;
line-height: 18px;
text-decoration: none; 
}

#leftmenu h3{
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
font-style: inherit;
font-weight: lighter;
color: #f58415;
margin: 0;
}

 #leftmenu li{
	background-image: url(../images/03.gif);
	background-repeat: no-repeat;
	background-position: -10px 15px;
	list-style-type: none;
	font-style: normal;
	margin: 0;
	padding: 0;
    line-height: 18px;
	
	
}

.menu {
padding: 0;
padding-bottom: 30px;
margin: 0; 
}

#leftmenu {
padding: 22px 0 0 25px;
}
Хотелось бы вот этот кусок подправить

#leftmenu li{
background-image: url(../images/03.gif);
background-repeat: no-repeat;
background-position: -10px 15px;
list-style-type: none;
font-style: normal;
margin: 0;
padding: 0;
line-height: 18px; для мозилы 17-16 прописать
 
Старый 03.10.2009, 07:48   #8
Может кто поможет поиск сделать )
Хочу что бы картинка менялась когда мышкой наводишь.

Код:
#poisk{
	padding-left: 740px;
	width: 255px;
	height: 23px;
	
}
	
	.inputbox {
	color        : #FF9900;
	background   : #ECEEEF;
	border       : 1px solid #ff9e50;
	margin       : 0px 2px;
	background-color: #FFFFFF;
	width: 167px;
}
	.button{
	color        : #000000;
	background   : #ECEEEF;
	border       : 1px solid #ff9e50;
	margin       : 0px 2px;
	background-color: #0066CC;
	width: 60px;
	background-image: url(../images/04.gif);
}
,

Код:
<div id="poisk"><form action="index.php" method="post">
	<div class="search">
		<input name="searchword" id="mod_search_searchword" maxlength="20" alt="Поиск" class="inputbox" type="text" size="20" value="поиск..."  onblur="if(this.value=='') this.value='поиск...';" onfocus="if(this.value=='поиск...') this.value='';" /><input type="submit" value="Поиск" class="button" onclick="this.form.searchword.focus();"/>	</div>
	<input type="hidden" name="task"   value="search" />
	<input type="hidden" name="option" value="com_search" />
,
 
Старый 03.10.2009, 19:00   #9
Цитата:
Хочу что бы картинка менялась когда мышкой наводишь.
http://ulvgard.ru/test.html

Код HTML:
<html>
<head>
<style>
#button{
	color: #000000;	
	border: 1px solid #ff9e50;
	margin: 0px 2px;
	width: 80px;
	height: 80px;
	background-image: url(2.gif);
}
</style>
<script>
function ChangeImage(id, src)
{
	document.getElementById(id).style.backgroundImage = "url("+src+")";
}
</script>
</head>


<body>
	<input type="button" id="button" onMouseOver="ChangeImage('button', '1.gif')" onMouseOut="ChangeImage('button', '2.gif')">
</body>
</html>
 
Старый 04.10.2009, 04:31   #10
Scroll,
а как церез css сделать? я как то делал но не могу вспомнить и шаблон не сохранился
 
Старый 04.10.2009, 04:31
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ребята помогите с версткой! Mixongur HTML, CSS, JavaScript 8 29.12.2015 04:26
Помогите с версткой moby dik HTML, CSS, JavaScript 3 16.06.2015 11:36
Помогите разобраться... olfa Вопросы по SEO 2 20.03.2014 18:11
Помогите, пожалуйста, с версткой сайта Dimitry HTML, CSS, JavaScript 2 24.04.2010 19:18
Помогите пожалуйста разобраться с версткой taylerx HTML, CSS, JavaScript 4 09.10.2009 16:54


Текущее время: 13:55. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум