Question

我对html / css编程很新鲜，所以如果这是一个菜鸟错误，请原谅我。

我已经开始了一个新网页 - http://robingham.co.uk/LUUCC4/index.php

我决定先尝试修复导航和菜单栏。

我希望网站的菜单按钮和徽标位于固定导航栏中。正如你所看到的，我几乎把它整理出来了。我需要做一些小事，比如对齐菜单按钮。但功能似乎正常。

我目前正在尝试解决的问题是徽标的屏幕宽度超出了超链接区域。我添加了一个指向徽标的超链接，以便用户可以通过单击返回主页。我也希望徽标水平居中，无论屏幕大小如何。我相信这个问题与我必须使用display: block;来使水平中心对齐工作这一事实有关，但我不确定如何修复超链接。

我该如何解决？

由于

我的index.php是。

   <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="icon" type="image/ico" href="http://www.robingham.co.uk/LUUCC3/media/favicon.ico">
    <link type="text/css" rel="stylesheet" href="http://www.robingham.co.uk/LUUCC3/styles/general_formatting.css"/>
    <title>LUUCC-Build</title>
    <meta charset="UTF-8" />
    <script src="http://www.robingham.co.uk/LUUCC3/scripts/jquery-1.11.3.min.js"></script>
    <script src="http://www.robingham.co.uk/LUUCC3/scripts/menu_function.js"></script>
</head>


<body>
    <div id="header_bar">
        <img class="icon-menu" src="media/menu.png" width="40" height="40" alt="Menu button"/>
        <!--<a href="http://www.robingham.co.uk"><img id="header_bar_menu" src="media/menu.png" width="40" height="40" alt="Menu button"/></a>-->
        <div><a href="http://www.robingham.co.uk/LUUCC/index.php"><img id="header_bar_logo" src="media/header_bar_logo.png" width="315" height="65" alt="LUUCC logo"/></a></div>
    </div>

    <div class="menu">
      <!-- Menu icon -->
      <div class="icon-close">
        <img src="http://www.robingham.co.uk/LUUCC3/media/close.png">
      </div>

      <!-- Menu -->
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>




    </div id="body_material">
    <p>test1</p>
    <p>test2</p>
    <p>test3</p>
    <p>test4</p>
    <p>test5</p>
    <p>test6</p>
    <p>test7</p>
    <p>test8</p>
    <p>test9</p>
    <p>test10</p>
    <p>test221</p> <!--Removed some of these for the sake of the post-->
    <p>test221</p>
    <p>test221</p>
    <p>test221</p>
    <p>test221</p>
    </div>  
</body> 
</html>

我的CSS代码是。

body {
    background-color: #00FFF0; /*#f6f6f6*/
}

#header_bar {
    z-index: 1;
    position: fixed;
    width: 100%;
    top: -1px;
    left: -1px;
    height: 65px; /**/
    background-color: #FFFFFF; /*FFFFFF*/
    border:1px solid #ccc;
}

#header_bar_menu{
    display: inline-block;
    /*vertical-align: 9px;
    margin-left: 10px;*/
    border:4px solid #000000;
    margin-left: 15px;
    margin-top: 15px;
}

#header_bar_logo {
    /*display: inline-block;
    margin-left: 500px;*/
    /*display: inline-block;
    text-align:center;*/
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: -95px; /*-60*/
}

.menu {
  background: #202024; 
  left: -285px;  /* start off behind the scenes */
  top: 65px;
  height: 100%;
  position: fixed;
  width: 285px;
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}
 /**/
.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-menu {
  color: #fff;
  cursor: pointer;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  padding-bottom: 25px;
  padding-left: 25px;
  padding-top: 25px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-menu i {
  margin-right: 5px;
}

Answer 1

＆＃13;

body {
    background-color: #f6f6f6; /*#f6f6f6*/
}

#header_bar {
	z-index: 1;
	position: fixed;
	width: 100%;
	top: -1px;
	left: -1px;
	height: 65px;/**/
	background-color: #FFF;/*FFFFFF*/
	border:1px solid #ccc;
  text-align: center;
}

#header_bar_menu{
	display: inline-block;
	/*vertical-align: 9px;
	margin-left: 10px;*/
	border:4px solid #000000;
	margin-left: 15px;
    margin-top: 15px;
}

#header_bar_logo {
	/*display: inline-block;
	margin-left: 500px;*/
	/*display: inline-block;
	text-align:center;*/
	/* display: block; */
	/* margin-left: auto; */
	/* margin-right: auto; */
	/* margin-top: -95px; *//*-60*/
}

.menu {
  background: #202024; /* url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;*/
  left: -285px;  /* start off behind the scenes */
  top: 65px;
  height: 100%;
  position: fixed;
  width: 285px;
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}
 /**/
.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
}

.icon-close {
  cursor: pointer;
  padding-left: 10px;
  padding-top: 10px;
}

.icon-menu {
  color: #fff;
  cursor: pointer;
  font-family: 'Open Sans', 
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  sans-serif;
  font-size: 16px;
  /* padding-bottom: 25px; */
  /* padding-left: 25px; */
  /* padding-top: 25px; */
  text-decoration: none;
  text-transform: uppercase;
  position: absolute;
  left: 1rem;
  top: 1rem;
}

.icon-menu i {
  margin-right: 5px;
}

＆＃13;

<base href="http://robingham.co.uk/LUUCC4/index.php"/>
<div id="header_bar">
	    <img class="icon-menu" src="media/menu.png" width="40" height="40" alt="Menu button"/>
		<!--<a href="http://www.robingham.co.uk"><img id="header_bar_menu" src="media/menu.png" width="40" height="40" alt="Menu button"/></a>-->
		<a href="http://www.robingham.co.uk/LUUCC4/index.php"><img id="header_bar_logo" src="media/header_bar_logo.png" width="315" height="65" alt="LUUCC logo"/></a>
	</div>
	
	<div class="menu">
      <!-- Menu icon -->
      <div class="icon-close">
        <img src="http://www.robingham.co.uk/LUUCC4/media/close.png">
      </div>

      <!-- Menu -->
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
	

	</div id="body_material">
	<p>test1</p>
	<p>test2</p>
	<p>test3</p>
	<p>test4</p>
	<p>test5</p>

	</div>

＆＃13;

Answer 2

嵌套链接和徽标，如下所示：

<a>
    <img src="this_is_my_logo.png" />
</a>

如何缩小宽度超链接？

2 个答案: