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

Scorp · 01.10.2009, 05:55

Создаю новую тему, т к возникло куча проблем и вопросов, долго не верстал, забыл то малое что знал.
Сейчас главная проблема с меню. думал решил проблему, но как оказалось в осле все отображается неверно. Подскажите как решить это. Прикрепляю пример как выглядит в опере и в осле. код тоже. если допускаю ошибки грубые тоже скажите )

Код:

 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)

Scorp · 01.10.2009, 12:22

проблему вроде как решил

Deli · 01.10.2009, 12:23

Scorp, всегда приятно поговорить с умным человеком, правда?

можно закрывать?

Scorp · 01.10.2009, 12:35

проблема другая ) как расстояние между ссылками в осле сделать меньше ?

Scorp · 01.10.2009, 12:44

Цитата:

Сообщение от Nine Moons

Scorp, всегда приятно поговорить с умным человеком, правда?

можно закрывать?

та не то слово ))) , закрывать не надо, буду сюда отписывать след проблемы, думаю они будут ) а как смайлы тут вставлять ?

Deli · 01.10.2009, 12:47

Scorp, шучу я

Scorp · 01.10.2009, 14:44

В мозиле немного отступ больше, как для мозилы прописать стиль?

Код:

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

#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 прописать

Scorp · 03.10.2009, 07:48

Может кто поможет поиск сделать )
Хочу что бы картинка менялась когда мышкой наводишь.

Код:

#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" />

,

Scroll · 03.10.2009, 19:00

Цитата:

Хочу что бы картинка менялась когда мышкой наводишь.

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>

Scorp · 04.10.2009, 04:31

Scroll,
а как церез css сделать? я как то делал но не могу вспомнить и шаблон не сохранился

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Ребята помогите с версткой!	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

01.10.2009, 12:22	#2
Scorp	проблему вроде как решил

01.10.2009, 12:23	#3
Deli	Scorp, всегда приятно поговорить с умным человеком, правда? можно закрывать?

04.10.2009, 04:31	#10
Scorp	Scroll, а как церез css сделать? я как то делал но не могу вспомнить и шаблон не сохранился

01.10.2009, 05:55
Ссылки