Стоп Меню из Shifting

Question

Стоп Меню из Shifting

0

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

heres мой CSS:

    @charset "utf-8";
/* Main CSS Document */

#parent{
  padding: 0px, auto;
  width: 50%;
  min-width:50%;
  height: 50px;
  margin-top:3%;
  margin-left: 25%;
  margin-right: 15%;
  background: #FFF;
  border-bottom:thin groove #000;
}
#child-left{
  float: left;
  padding-left:25px;
  width: 35%;
  min-width:35%;
  height: 50px;
  background: #FFF;
}
#child-right{
  padding-top: 15px;
  padding-right:20px;
  float: right;
  width: 60%;
  min-width:60%;
  height: 35px;
  background: #FFF;
}
#logoparent{
  padding: 0px, auto;
  width: 100%;
  height: 50px;
  margin-left: 15%;
  margin-right: 15%;
  background: #FFF;
}
#menu{
  float:right;
  padding-right:7%; 
  font-family:"Courier New", Courier, monospace;
  font-size:18px;
  font-weight:600;
  color:#666666;
}
#menuend {
  padding-right:10px;
  float:right;
  font-family:"Courier New", Courier, monospace;
  font-size:18px;
  font-weight:600;
  color:#666666;
}
#menu:hover{
    color:#C30;
}

И вот HTML:

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="mainstylesheet.css" />
            <title>Home</title>
</head>
<body>
    <div id="parent">
    <div id="child-left"><img name="Logo" src="" width="100%" height="100%" alt="" /></div>
    <div id="child-right">
        <div id="menupad">
            <div id="menuend"> Contact </div>
            <div id="menu"> Gallery </div>
            <div id="menu"> About </div>
            <div id="menu"> Home </div>
        </div>
    </div>
</div>
</body>
</html>

Любая помощь очень ценится!

Tyharo 18 фев. 2014, в 04:56

Источник

Теги:

html

css

menu

scale

shift

1 ответ

Ещё вопросы

Krimson · Accepted Answer · 2014-02-18T01-08-00.000Z

Хорошо, поэтому я видел ваш дизайн и не мог расшифровать все%, которые вы используете в своем css (мой плохой), поэтому я начал с нуля и попытался соответствовать вашему дизайну. Надеюсь, вы сможете приспособить его к своей ссылке. Вот:

См. JsFiddle

HTML

<!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">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="mainstylesheet.css" />
            <title>Home</title>
</head>
<body>
    <div id="parent">

        <div id="child-left">
            <img name="Logo" src="" width="200px" height="50px" alt="" />
        </div>

        <div id="child-right">
            <div id="menupad">
                <div id="menuend"> Contact </div>
                <div id="menu"> Gallery </div>
                <div id="menu"> About </div>
                <div id="menu"> Home </div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</body>
</html>

CSS

    @charset "utf-8";
/* Main CSS Document */

#parent{
    max-width: 900px;
    margin: 0 auto;
    border-bottom:thin groove #000;
}
#child-left{
    float: left;
    height: 50px;
}
#child-right{
    float: right;
    height: 50px;
    line-height: 80px;
    vertical-align: bottom;

}
#logoparent{
  height: 50px;
}
#menu{
  float:right;
  font-family:"Courier New", Courier, monospace;
  margin-left: 10px;
}
#menuend {
  float:right;
  font-family:"Courier New", Courier, monospace;
  margin-left: 10px;
}

.clear{
    clear: both;
}