CSS Naviagtion bar: Should Never leaving the row & relative Text

After finding my stupid grammar mistake to do a sub-menu I edited my files. I have trouble to solve 2 problems:

Both of them happen when I resize my browser's window to check if my side can be watched on every framesize (to watch my html-side on PC, later on a mobile,...)

  1. I don't understand, why the navi-elements start to stack. I watched carefuly to programm the document scalable... what did i forgett? Also how can I let the 5 elements use the entire 100% of the 90% body?

  2. If I try to set the font-size of my ul.navi absolute (px) the text will disapear, when I scale the window is too small...
    If I set it relative (vw) it becomes unreadable. I tried a combination: font-size: calc(2px + 1vw) . It's better but not entirely what I want.

Is there a possibility to scale the words with the button-borders li where they stand?

Screenshots of the problem: nearly fullscreen | smaller | small enough for the mistake

And here is my Code:

/* 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) */
}
<!-- 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>

Note: My index.html will be in a project-folder. In this folder will be a "css"-folder, where my CWAllgemeinStyle.css lies.

2 answers

  • answered 2017-06-17 18:44 Manuel E

    Are you using float?

    To stop stacks if so try using this in your CSS.

    Remove the comments when you paste this, and your CSS should work

    .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
    }
    

  • answered 2017-06-17 18:44 Mateusz Mysiak

    It wraps, because the elements can't shrink to break the link text, however it could break the list since there were multiple list elements. And the text shrinks slower than the width of the page does. Personally, I wouldn't scale the font live with the window, I would make break points with media queries (https://www.w3schools.com/css/css_rwd_mediaqueries.asp) for different screens and devices. And for positioning I usually use flexbox (https://www.w3schools.com/css/css3_flexbox.asp). Here's an example using both of these on Your HTML document:

    <!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>
    

    And the 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;
      }
    }
    

  • Navbar With Sub Menus, Collapse

    I'm working on a navbar that has 5 main items in a top menu, each with sub menus. When collapsed, the sub menus appear nested under their parent. however, at full width, the sub menus roll down and push the subsequent parent sections below.

    What I'd like to accomplish at full width is to have the five main items appear in the top menu centered, while the sub menus appear directly below (centered) once the parent has been clicked.

    On collapse, I'd like the parent items to open the sub menus directly below (this seems to be working properly.

    Here's a fiddle: [https://jsfiddle.net/8j600vmd/1/][1]

  • JavaScript addEventListener 'click''

    I struggling with very basic thing

    I am trying to make this side-nav appear and disappear with JavaScript. The code below only activates the nav bar but doesn't deactivate it. Tried all options but I don't know how to call function to close nav-bar.

    Thank you

    HTML
    
    
        <div id="mySidenav" class="sidenav">
         <a href="#" class="closebtn">&times;</a>
         <a href="#">About</a>
         <a href="#">Services</a>
         <a href="#">Clients</a>
         <a href="#">Contact</a>
        </div>
    
         <!-- Use any element to open the sidenav -->
          <span id="MyElement">&times;</span>
    
    
    JS
    
    
            <script type="text/javascript">
        function changeClass() {
            document.getElementById("mySidenav").style.width = "250px";
    
        }
        window.onload = function() {
    document.getElementById("MyElement").addEventListener('click',changeClass);
        }
    </script>
    
    
        </body>
    
        </html>
    
  • Absolute positioned element and responsive design

    I'm doing the responsive part of a template, and I'm facing an issue with an absolutely positioned element. When resizing the screen, the absolutely positioned element starts to move from its position, which is unwanted. It is possible to just use media queries, but then I would need to use them for almost each pixel the element moves(or maybe I'm incorrect?).

    Here is my code: https://codepen.io/Kestvir/pen/QMdMXo

     #design {
      padding-top: 20px;
      background: green;
      min-height: 850px;
      background-size: cover;
      position: relative; }
    
      #design #big {
        display: block;
        margin: 0 auto; }
    
      #design #small {
        position: absolute;
        right: 655px;
        top: 300px; }
    
  • Android relative layout elements are placed at different position in emulator than in preview

    So first, I know this question was already asked. I already looked for a answer that could help me but found nothing too useful. I'm new to android layouts and have really no Idea how or with wich layout I can do it as I want.

    I have a ViewPager with 3 fragments and yeah. So, here is how it looks like in the preview and also should look like (On the bottom is a bar that shows my progress with dots, and the other elements are edittext's):

    preview

    And here is how it looks like on my emulator:

    device

    (My layout code:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    
        <com.roide.progressdotslib.ProgressDotWidget
            android:id="@+id/progress_dots1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentStart="true"
            android:background="@color/cyan_600"
            android:padding="@dimen/standard_margins" />
    
        <TextView
            android:id="@+id/step1TextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="93dp"
            android:text="@string/step1TextViewText"
            android:textAppearance="@style/TextAppearance.AppCompat.Display1"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />
    
        <EditText
            android:id="@+id/step1UsernameEditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="@string/step1UsernameEditTextHint"
            android:layout_marginTop="43dp"
            android:layout_below="@+id/step1TextView"
            android:layout_centerHorizontal="true" />
    
        <EditText
            android:id="@+id/step1NicknameEditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignStart="@+id/step1UsernameEditText"
            android:layout_below="@+id/step1RepeatPasswordEditText"
            android:layout_marginTop="29dp"
            android:hint="@string/step1NicknameEditTextHint" />
    
        <EditText
            android:id="@+id/step1PasswordEditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="33dp"
            android:hint="@string/step1PasswordEditTextHint"
            android:layout_below="@+id/step1UsernameEditText"
            android:layout_toStartOf="@+id/step1NicknameEditText" />
    
        <EditText
            android:id="@+id/step1EmailAddressEditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="36dp"
            android:hint="@string/step1EmailAddressEditTextHint"
            android:layout_below="@+id/step1NicknameEditText"
            android:layout_toStartOf="@+id/step1NicknameEditText" />
    
        <EditText
            android:id="@+id/step1RepeatPasswordEditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="42dp"
            android:hint="@string/step1RepeatPasswordEditTextHint"
            android:layout_alignBaseline="@+id/step1PasswordEditText"
            android:layout_alignBottom="@+id/step1PasswordEditText"
            android:layout_toEndOf="@+id/step1PasswordEditText" />
    
        <EditText
            android:id="@+id/step1RepeatEmailAddressEditText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="@string/step1RepeatEmailAddressEditTextHint"
            android:layout_alignBaseline="@+id/step1EmailAddressEditText"
            android:layout_alignBottom="@+id/step1EmailAddressEditText"
            android:layout_toEndOf="@+id/step1EmailAddressEditText"
            android:layout_marginStart="23dp" />
    
        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:layout_below="@+id/step1EmailAddressEditText"
            android:layout_alignStart="@+id/step1EmailAddressEditText"
            android:layout_marginTop="29dp" />
    
        <CheckedTextView
            android:id="@+id/checkedTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignStart="@+id/step1RepeatPasswordEditText"
            android:layout_alignTop="@+id/button"
            android:text="CheckedTextView" />
    
    </RelativeLayout>
    `    

    ) The ProgressDotWidget is like I described before a progress indicator. Is there any whay to make that it looks on every device the same as in the preview? Because I really don't want that it looks so messy.

    LG abilnf

  • Line drop of a second textview

    I have two textview in a same line, the two textview do not have static content, the problem comes when the second textview is loaded with data, this takes the second line but not from the left completely. I hope you can help me.

    The code is this:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >
    
            <TextView
                android:id="@+id/add"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="uno"
                android:visibility="visible"
                android:textSize="@dimen/msg_text_primary"
                android:textColor="@color/from"
                android:maxLines="1"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true" />
            <TextView
                android:id="@+id/text_titulo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="titulo"
                android:ellipsize="end"
                android:textSize="@dimen/msg_text_primary"
                android:textColor="@color/from"
                android:maxLines="2"
                android:layout_alignParentTop="true"
                android:layout_toRightOf="@+id/add"
                android:layout_toEndOf="@+id/add"
                android:layout_marginLeft="2dp"
                android:layout_alignParentLeft="false"
                android:layout_toLeftOf="@+id/add"
               />
    </RelativeLayout>
    

    The picture:

  • how to set random text size on each letter once? (processing)

    how can I set a random size for each letter that spreads out? I want each of them to have a different random size but I can't really figure out where to put textSize (random(10, 20)); because if I put it under draw it just loops over and over again that each frame the text size of each letter changes but when I put it under setup it just changes the size of all the letters.

    String message = "Alice fell into the rabbit hole";
    int x =  130;
    int y = 90;
    
    Letter[] letters;
    
    void setup() {
      size(260, 200);
      letters = new Letter[message.length()];
      textSize (random(10, 20));
    
      for (int i = 0; i < message.length(); i++) { 
        letters[i] = new Letter(x, y, message.charAt(i));
        //x += textWidth(message.charAt(i));
      }
    }
    
    void draw() { 
      background(255);
      for (int i = 0; i < letters.length; i++) { 
        letters[i].display(); 
        letters[i].shake();
      }
    }
    
    class Letter {
      char letter;
      float x, y;
    
      Letter (float x, float y, char letter) {
        this.x = x;
        this.y = y;
        this.letter = letter;
      }
    
      void display() {
        fill(0);
        textAlign(CENTER, CENTER);
        text(letter, x, y);
      }
    
      void shake() {
        x += random(-2, 2);
        y += random(-2, 2);
      }
    }
    
  • How to create an instance of a class and store them in an array or arraylist? (processing)

    I have this program that I need 50 random words from an external file to appear and each of them randomly moves to a random place... I was already able to make each word move separately from each other to a random place but the problem is that only the first word in the external file appears 50 times and that is the only word that appears... not 50 random words! just 50 words that are all the same... so I tried to put int index = int(random(allWords.length)); under draw and inside for but this may cause that it will happen 50 times, 60 times per second and that's not what I want to happen... someone suggested that Instead, I could probably just want to generate the random words once in the setup() function and I could do this by creating instances of the class I created and store them in an array or an ArrayList. The thing is I'm still not that familiar with that so does anybody has tips on how I can do that or maybe a link where I can have a guide on how to do that?

    here is my code if anyone wants to see what my problem is...

        String [] allWords;
        int x = 120;
        int y = 130;
        int index = 0 ;
        word [] words;
    
        void setup () {
    
          size (500, 500);
          background (255); //background : white
    
          String [] lines = loadStrings ("alice_just_text.txt");
          String text = join(lines, " "); //make into one long string
          allWords = splitTokens (text, ",.?!:-;:()03 "); //splits it by word
    
          words = new word [allWords.length];
    
          for (int i = 0; i < 50; i++) {
            words[i] = new word (x, y);
          }
        }
    
        void draw() {
    
          background (255);
    
          for (int i = 0; i < 50; i++) {  //produces 50 words
            words[i].display();
            words[i].move();
            words[i].avgOverlap();
          }
        }
    
        class word {
          float x;
          float y; 
    
          word(float x, float y) {
            this.x = x;
            this.y = y;
          }
    
          void move() {
    
            x = x + random(-3, 3); //variables sets random positions
            y = y + random(-3, 3); //variables sets random positions
          }
    
          void display() {
            fill (0); //font color: black
            textAlign (CENTER, CENTER);
            text (allWords[index], x, y, width/2, height/2 );
          }
    
          void ran () {
            textSize (random(10, 80)); //random font size
          }
    
        }
    
  • What should to be done to increase the text size in properties menu?

    Source Source

    I want to increase the text size of the texts pointed in the green bracket. But Windows allow title bar size, menu bar size, palette title, message boxes, tool tips, etc but there is no option for these texts. What can be done?