CSS Naviagtion栏：应该永远不要离开行和＆amp;相对文字

时间：2017-06-17 18:44:39

标签： html css navbar relative text-size

在找到我的愚蠢的语法错误来做一个子菜单后，我编辑了我的文件。 我无法解决2个问题：

当我调整浏览器窗口大小以检查我的身边是否可以在每个框架上观看时（在PC上观看我的html端，稍后在移动设备上观看......）时，都会发生这两种情况。

  1. 我不明白，为什么navi-elements开始堆叠。我仔细观察了将文件编程为可扩展...我忘记了什么？ 另外，我怎样才能让5个元素使用整个100％的90％身体？

  2. 如果我尝试设置ul.navi绝对值（px）的字体大小，则当我缩放窗口时，文本会消失。

    3. 如果我将它设置为相对（vw）则变得不可读。我尝试了一个组合：font-size: calc(2px + 1vw)。它更好但不完全是我想要的。

    是否有可能使用按钮边框li来缩放单词？

    问题截图，几乎是全屏：

    nearly fullscreen

    小：

    small enough for the mistake

    这是我的代码：

    ＆＃13;
    ＆＃13; 
    /* CSS Style für Kletterwelt - Allgemeine Inhalte v1.02 vom 17.06.2017 */


/* Allgemeine Daten & Einstellungen */
*
{
	margin:		0px;
	padding:	0px;
}

body
{
	/* Für den Gesamten Inhalt gilt */
	width:			90vw;	/* relativ auf Fenstergröße! */	
	margin:			auto;
	
	/* Für den Text des gesamten Inhaltes gilt */
	font-family:	arial;
}

img
{
	width:	100%;	/* Gilt für ALLE Bilder auch später im Content*/
}


/* Navigationsleiste */
ul.navi
{
	list-style-type:none;
	width:	100%;

	font-size:	calc(2px + 1vw);	/* relativ zur Fenstergröße!!! */
}

ul#hauptmenu li
{
	width:			19%;				/* Aufteilung der Hauptmenüpunkte. relative zur body-Größe! */
	position:		relative;			/* Untermenüs werden relativ zu ihrem Hauptmenüpunkt zugeordnet */
	float: 			left;				/* Buttons werden nebeneinander angezeigt */
	margin-right:	1px;				/* Abstand zwischen den Hauptmenü-Buttons*/
	
	border:			2px solid #333333;	/* Listenelemente haben sichtbaren Rand */
	border-radius:	5px;				/* Rand abrunden */
}

ul#hauptmenu a
{
	display:			block;		/* gesamtes Listenelement wird zum anklickbaren Button, nicht nur das Wort */
	height:				40px;
	line-height:		40px;		/* Wenn Wert mit "height" identisch ist, ist Text vertikal zentriert */
	background-color:	#333333;	
	
	text-decoration:	none;		/* Entfernt Unterstriche der Links */
	text-align: 		center;
	color:				white;
	font-weight:		bold;
}

ul#untermenu li
{
	width:	100%;	/* Untermenüpunkte sind relativ! Also sollen sie die voll zur verfügung stehende Länge nutzen */
}

ul#untermenu a
{
	width:	100%;	/* Untermenüpunkte sind relativ! Also sollen sie die voll zur verfügung stehende Länge nutzen */
}

ul#hauptmenu li:hover > a
{
	background-color: #777777;	/* markiert Buttons übergeordneter Menüs UND den Button, über den man hovert, grau */
}

ul#hauptmenu li:hover a:hover
{
	background-color: #FF0000;	/* markiert Button, über den man hovert, rot (überschreibt Definition)*/
}

ul#hauptmenu ul#untermenu
{
	display:	none;		/* Untermenüpunkte standardmäßig ausblenden*/
	position:	absolute;
	width:		100%;
}

ul#hauptmenu li:hover #untermenu
{
	display:	block;	/* beim Hovern über übergeordneten Menü, soll das untergeordnete eingeblendet werden */
	z-index:	500;	/* Untermenüpunkte werden über dem Content angezeigt (Ebenen-technisch) */
}
    ＆＃13; 
    <!-- Kletterwelt - Home v1.06 vom 16.06.2017 -->
<!DOCTYPE HTML>
<html lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
	<meta name="Florian Zimmermann, Rudolf Geist & Thomas Kretzer" content="HTML-Projekt: Kletterwelt">
	
	<link rel="stylesheet" type="text/css" href="./css/CWAllgemeinStyle.css">
	<link rel="stylesheet" type="text/css" href="./css/CWContentStyle.css">

	<link rel="icon" href="./bilder/icon.ico">	
	<title>Kletterwelt - Home</title>
</head>

<body>
	<header>		
		<img src="./bilder/headerbild.jpg">
		
		<!--Hinweis zu Navis! Untermenüs stehen innerhalb der Klammern eines Listenelements li !!! -->
		<ul class="navi" id="hauptmenu">
			<li><a href="#">HOME</a>
				<ul class="navi" id="untermenu">
					<li><a href="#">NEWS</a></li>
				</ul>
			</li>
			<li><a href="#">VIDEOS</a></li>
			<li><a href="#">SCHWIERIGKEITSGRADE</a></li>
			<li><a href="#">SICHERUNGSGERÄTE</a>
				<ul class="navi" id="untermenu">
					<li><a href="#geräteart1">DINGER</a></li>
					<li><a href="#geräteart2">TEILE	</a></li>
				</ul>
			</li>	
			<li><a href="#">ALLGEMEINES</a></li>
		</ul>
	</header>

	<main>
			<img class="mySlides" src="egal" style="width:100%">
      <!-- doesent matter now -->		
	</main>
</body>
</html>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    注意：我的index.html将位于项目文件夹中。在这个文件夹中将是一个＆＃34; css＆＃34; -folder，我CWAllgemeinStyle.css所在的位置。

2 个答案:

答案 0 :(得分：0)

你在使用浮动吗？

要停止堆栈，请尝试在CSS中使用它。

粘贴此评论时删除评论，您的CSS应该正常工作

.class {
  position: relative;
  top: 0;
  width: 100%;
  height:  auto;
  max-width: 10vh;
  max-height: 5vh;
  right: 1vh; //or any value u want
  margin:0 0 0 0;
  overflow: auto; // to bring out nav if max height is reached
}

答案 1 :(得分：0)

它包装，因为元素不能缩小以破坏链接文本，但是它可能会破坏列表，因为有多个列表元素。文本缩小比页面宽度慢。就个人而言，我不会在窗口中实时缩放字体，我会为不同的屏幕和设备制作媒体查询（https://www.w3schools.com/css/css_rwd_mediaqueries.asp）的断点。而对于定位我通常使用flexbox（https://www.w3schools.com/css/css3_flexbox.asp）。以下是在HTML文档中同时使用这两个示例的示例：

<!DOCTYPE HTML>
<html lang="de">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <meta name="Florian Zimmermann, Rudolf Geist & Thomas Kretzer" content="HTML-Projekt: Kletterwelt">

    <link rel="stylesheet" type="text/css" href="styles.css">

    <link rel="icon" href="./bilder/icon.ico">  
    <title>Kletterwelt - Home</title>
</head>

<body>
    <header>        
        <img src="./bilder/headerbild.jpg">

        <!--Hinweis zu Navis! Untermenüs stehen innerhalb der Klammern eines Listenelements li !!! -->
        <ul class="navi navi-top">
            <li><a href="#">HOME</a>
                <ul class="navi navi-bottom">
                    <li><a href="#">NEWS</a></li>
                </ul>
            </li>
            <li><a href="#">VIDEOS</a></li>
            <li><a href="#">SCHWIERIGKEITSGRADE</a></li>
            <li><a href="#">SICHERUNGSGERÄTE</a>
                <ul class="navi navi-bottom">
                    <li><a href="#geräteart1">DINGER</a></li>
                    <li><a href="#geräteart2">TEILE </a></li>
                </ul>
            </li>   
            <li><a href="#">ALLGEMEINES</a></li>
        </ul>
    </header>

    <main>
            <img class="mySlides" src="egal" style="width:100%">
      <!-- doesent matter now -->       
    </main>
</body>
</html>

CSS：

html,
body {
  background: white;
  font-size: 12px;
  padding: 0;
  margin: 0 5%;
}
.navi {
  display: -webkit-flex;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.navi-top {
  -webkit-flex-direction: column;
  flex-direction: column;
}
.navi > li {
  -webkit-flex: 1;
  flex: 1;
  background: black;
  border-radius: 0.3rem;
  margin: 0.1rem;
  position: relative;
}
.navi-top > li:hover > .navi-bottom {
  display: -webkit-flex;
  display: flex;
}
.navi-bottom {
  display: none;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 100%;
  padding: 0;
  position: relative;
}
.navi-bottom li {
  width: 100%;
  padding: 0;
  margin: 0 auto;
}
.navi a {
  display: block;
  background: #333333;
  color: white;
  text-align: center;
  padding: 1rem;
  border-radius: 0.3rem;
  margin: 0.2rem;
}
.navi a:hover {
  background: #FF0000;
}
@media only screen and (min-width: 750px) {
  html,
  body {
    font-size: 16px;
  }
  .navi-top {
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  .navi-bottom {
    position: absolute;
  }
}
相关问题
最新问题