проблема с div'ом id=#topmenu

dmr · February 26, 2012

в css я писал для этого div'a margin-top:10px; а он отступает не от родительского div'a header , а я не знаю от чего, похоже от окна браузера.

index.php:

<?php
// защита от прямого доступа к файлу
defined('_JEXEC') or die;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>

    <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/style.css" type="text/css"  />
    <!--[if lte IE 6]>
    <link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/tyle_ie.css" type="text/css"  />
    <![endif]-->

</head>

<body>

<div id="wrapper">
    <!-- #header-->
    <div id="header">

  		<div id="topmenu">jj</div>

    </div>
    <div id="middle">  <!-- все пространство от хедера до футера-->
        <div id="container">
            <div id="content">ычяч
                <jdoc:include type="message" />
                <jdoc:include type="component" />
            </div><!-- #content-->
        </div><!-- #container-->
        <div class="sidebar" id="sideLeft">
            <jdoc:include type="modules" name="left" style="xhtml" />
        </div><!-- .sidebar#sideLeft -->
        <div class="sidebar" id="sideRight">
            <jdoc:include type="modules" name="right" style="xhtml" />
        </div><!-- .sidebar#sideRight -->
    </div><!-- #middle-->
    <div id="footer">
        <jdoc:include type="modules" name="footer" style="xhtml" />
    </div><!-- #footer -->
</div><!-- #wrapper -->

</body>
</html>

css:

*{
	 margin: 0;
    padding: 0;
}

html {
height: 100%;

}

body {
	height: 100%;
   font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
}
a { 
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
/* Begin of styles for the demonstration (you can remove them) */
a.expand {
    width: 150px;
    display: block;
    margin: 10px 0 0;
}
a.expand:hover {
    height: 500px;
}
/* End of of styles for the demonstration */
p { 
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
	height: 100%;
   width: 100%;
   min-width: 1000px;
	min-height: 100%;

}


/* Header
—————————————*/
#header {
    height: 150px;
    background: #FFE680;
}
/* Middle
—————————————*/
#middle {
    border-left: 250px solid #B5E3FF;
    border-right: 250px solid #FFACAA;
    min-height: 100%;
    position: relative;
}


#container {
    width: 100%;
    float: left;
    overflow: hidden;
    margin-right: -100%;
}

#content {	

    padding: 0 20px;
}
/* Sidebar Left
—————————————*/
#sideLeft {
    float: left;
    width: 250px;
    position: relative;
    background: #B5E3FF;
    left: -250px;
}
/* Sidebar Right
—————————————*/
#sideRight {
    float: right;
    margin-right: -250px;
    width: 250px;
    position: relative;
    background: #FFACAA;
}
/* Footer
—————————————*/
#footer {
    height: 50px;
    background: silver;
}
/* для меню
————————————--*/
/*
ul.menu_horizont {
	display: block;
	text-align: left;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.9em;
	color: #000;
}
ul.menu_horizont li {
	display: inline; //ключик к горизонтальному расположению	
	margin: 0 !important;
	padding: 0;
}
*/
#topmenu {
	margin-left: 250px;
	margin-top:10px;
	background: #ff4432; 
}
ul.menu_horizont {
 margin-bottom: 0px 
 font-size: 0.85em;
 height:2.8em; 
 color: #000;
}

ul.menu_horizont li {
 display:block; 
 float:left; 
 color: #003388;
 background-color: #f5f5f5;
 text-align:center; 
 padding: 8px 18px; 
 margin-right: 2px; 
}
ul.menu_horizont a:hover {
 color: #333;	
 background-color: #fff;
}

помогите пожалуйста разобраться :rolleyes:

K313 · February 26, 2012

defined('_JEXEC') or die;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ht

- перед доктипе у вас перевод строки

*{
         margin: 0;
    padding: 0;
}

- указание в css только звёздачки я думаю не достаточно. попробуёте применить цепочку

html body,body,*{
         margin: 0;
    padding: 0;
}

dmr · February 26, 2012

выполнил Ваши указания, проблема осталась. Я удалил весь пхп код оставил только html+css(мож посмотрите у себя как оно отображыется и из за чего, буду очень признаелен)

хтмл


<html>
<head>
    <link rel="stylesheet" href="style.css" type="text/css"  />   

</head>

<body>

<div id="wrapper">
    <!-- #header-->
    <div id="header">

  		<div id="topmenu2">jj</div>

    </div>
    <div id="middle">  <!-- все пространство от хедера до футера-->
        <div id="container">
            <div id="content">ычяч

            </div><!-- #content-->
        </div><!-- #container-->
        <div class="sidebar" id="sideLeft">
           левый
        </div><!-- .sidebar#sideLeft -->
        <div class="sidebar" id="sideRight">
            правый
        </div><!-- .sidebar#sideRight -->
    </div><!-- #middle-->
    <div id="footer">
        футер
    </div><!-- #footer -->
</div><!-- #wrapper -->

</body>
</html>

css:


html body,body, *{
	 margin: 0;
    padding: 0;
}

html {
height: 100%;

}

body {
	height: 100%;
   font: 12px/18px Arial, Tahoma, Verdana, sans-serif;
}
a { 
    color: blue;
    outline: none;
    text-decoration: underline;
}
a:hover {
    text-decoration: none;
}
/* Begin of styles for the demonstration (you can remove them) */
a.expand {
    width: 150px;
    display: block;
    margin: 10px 0 0;
}
a.expand:hover {
    height: 500px;
}
/* End of of styles for the demonstration */
p { 
    margin: 0 0 18px
}
img {
    border: none;
}
input {
    vertical-align: middle;
}
#wrapper {
	height: 100%;
   width: 100%;
   min-width: 1000px;
	min-height: 100%;

}


/* Header
—————————————*/
#header {
    height: 150px;
    background: #FFE680;
}
/* Middle
—————————————*/
#middle {
    border-left: 250px solid #B5E3FF;
    border-right: 250px solid #FFACAA;
    min-height: 100%;
    position: relative;
}


#container {
    width: 100%;
    float: left;
    overflow: hidden;
    margin-right: -100%;
}

#content {	

    padding: 0 20px;
}
/* Sidebar Left
—————————————*/
#sideLeft {
    float: left;
    width: 250px;
    position: relative;
    background: #B5E3FF;
    left: -250px;
}
/* Sidebar Right
—————————————*/
#sideRight {
    float: right;
    margin-right: -250px;
    width: 250px;
    position: relative;
    background: #FFACAA;
}
/* Footer
—————————————*/
#footer {
    height: 50px;
    background: silver;
}
/* для меню
————————————--*/

#topmenu2 {
	margin-left: 250px;
	margin-top:10px;
	background: #ff4432; 
}
ul.menu_horizont {
 margin-bottom: 0px 
 font-size: 0.85em;
 height:2.8em; 
 color: #000;
}

ul.menu_horizont li {
 display:block; 
 float:left; 
 color: #003388;
 background-color: #f5f5f5;
 text-align:center; 
 padding: 8px 18px; 
 margin-right: 2px; 
}
ul.menu_horizont a:hover {
 color: #333;	
 background-color: #fff;
}

K313 · February 26, 2012

#topmenu2{margin-top:

вообщето такие вещи нужно искать и находить самому... неужели ждать несколько часов приятнее чем за 5 минут просто там и там поменять значения и посмотреть как это влияет на вёрстку :facepalmxd:

dmr · February 26, 2012

#topmenu2{margin-top:
вообщето такие вещи нужно искать и находить самому... неужели ждать несколько часов приятнее чем за 5 минут просто там и там поменять значения и посмотреть как это влияет на вёрстку

если я спрашиваю, значит найти самому сложно, а Вы нашли в чем дело? я так и непонят. Желаемого результата я добился поставив див после хедера и сделав отрицательный отступ. Но почему не работал первоначальные метод, я понять не смог.

Edited February 26, 2012 by dmr

Sign In

проблема с div'ом id=#topmenu

Question

dmr

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

K313

Link to comment

Share on other sites

dmr

Link to comment

Share on other sites

K313

Link to comment

Share on other sites

dmr

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information