CODEWITHSUNDEEP
csshtmlmobile
BaRud
BaRud

Reputation: 3218

make a ul as child of another in CSS

I am not a web designer. I have created a website for me. It has few problem, but overall works fine. My minimal html is:

<!DOCTYPE HTML>
<html>
<head>
<title>Rudra Banerjee</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css" media="all">
footnote {font-size :70%; font-style : italic}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div id="container">
  <div id="header">
  </div>
  <div id="navigation">
    <ul>
      <li>
      <a href="#" style='background-color: #6da8f8'>About Me</a>
      </li>
      <li>
      <a href="work.html">Work</a>
      </li>
      <li>
      <a href="passion.html">Passion</a>
      </li>
    </ul>
  </div>
  <div id="rightnavigation">
    <ul>
      <li>
      <a href="contact.html">Contact Me</a>
      </li>
    </ul>
  </div>
  <div id="content">
    <div class="shadow">
      <img src="images/my_pic.png" alt="MyPic" style="box-shadow:0 10px 10px #000;">
    </div>
    <h2>
      About Me 
    </h2>
    Here goes my about me.
  </div>
</div>
</body>
</html>

and my corresponding css is:

body {
    font : 100% "Times New Roman", Times, serif;
    color : #0a8bf8;
    background : #184470;
    margin : 0;
      }
#header {
    height : 60px;
    margin : 0 auto;
    border-left : 214px solid #184470;
      }
#navigation {
    position : absolute;
    top : 60px;
    left : 1%;
    width : 15%;
    color : #e4ecef;
    font-size : 110%;
      }
#navigation ul {
    margin : 0 0 2em 0;
    padding : 0;
    list-style : none;
    color : #e4ecef;
      }
#navigation ul a {
    color : white;
    text-decoration : none;
    display : block;
    background : #4674b2;
    padding : 0 0.5em;
    margin : 0 2em 1px 1em;
    color : #e4ecef;
    box-shadow :0 10px 10px #000;
      }
#rightnavigation {
    position : absolute;
    top : 0px;
    left : 83%;
    width : 17%;
    color : #000;
    font-size : 100%;
      }
#rightnavigation ul {
    margin : 100% 0 1em 0;
    padding : 0;
    list-style : none;
    color : #000;
      }
#rightnavigation ul a {
    color : white;
    text-decoration : none;
    display : block;
    background : #4674b2;
    padding : 0 0.5em;
    margin : 0 1em 1px 1em;
    color : #e4ecef;
    box-shadow : 0 10px 10px #000;
      }
#content {
        background : #e4ecef;
        padding : 0.0em 2.5em;
        border-radius: 15px 15px 15px 15px;
        border-radius: 15px 15px 15px 15px;
        width : 62%;
        float : right;
        margin-right : 17%;
        margin-left : 30%;
        border : 0px;
        background : #e0e9f8;
      }
#content img {
        height : 200px;
        padding : 0;
        border : 0 solid #333;
        float : right;
        margin : .5em 0em 2em 2em;
      }

This works fine, except when viewing in mobile, there is no way to seperate navigation(i.e. About Me, Work and Passion) from rightnavigation(i.e. Contact Me, which is only in about me page). To say, the navigations I am getting in mobile is:

* About Me
* Work
* Passion

* Contact Me

But, for me it will be better if I have something like:

* About Me
      * Contact Me
* Work
* Passion

in mobile view. But I don't want to change its position in desktop view.

As I said, I am not very familiar with html's terms, but I guess, here I need a child....to define rightnavigation as a child of navigation,

Can I define anything like that in my css? Please don't refer me to java etc, those are too heavy for me.

Reply to @NachoDawg So, now my navigation should look like:

<div id="container">
  <div id="header">
  </div>
  <div id="navigation">
    <ul>
      <li>
      <a href="#" style='background-color: #6da8f8'>About Me</a>
      <ul class="showOnMobile">
        <li>
        <a href="contact.html">Contact Me</a>
        </li>
      </ul>
      </li>
      <li>
      <a href="work.html">Work</a>
      </li>
      <li>
      <a href="passion.html">Passion</a>
      </li>
    </ul>
  </div>
  <div id="rightnavigation">
    <ul>
      <li>
      <a href="contact.html">Contact Me</a>
      </li>
    </ul>
  </div>

But this is giving "Contact Me" under About Me as well.as shown here

Upvotes: 1

Views: 54

Answers (1)

NachoDawg
NachoDawg

Reputation: 1544

Sounds like you want to have "nested" lists.

<ul>
  <li>
  <a href="#" style='background-color: #6da8f8'>About Me</a>

    <ul>
      <li>
          <a href="contact.html">Contact Me</a>
      </li>
    </ul>


  </li>
  <li>
  <a href="work.html">Work</a>
  </li>
  <li>
  <a href="passion.html">Passion</a>
  </li>
</ul>

Contact me is now a child element of the li that contains "about me"

EDIT: reread the question, sorry.

If you only want "contact me" to appear indented under "about me" when in a mobile view then things are getting slightly more complicated, but there's still a pure CSS solution.

Consider my example of "nesting" the "contact me"-ul inside the "about me"-li and just look at the new nested ul. Let's add a class to the ul so we can select the element in CSS and do things to it.

Meanwhile, don't remove the old "contact me" on the right side

<li>
  <a href="#" style='background-color: #6da8f8'>About Me</a>

    <ul class="showOnMobile">
      <li>
          <a href="contact.html">Contact Me</a>
      </li>
    </ul>

  </li>

Then we add some new CSS at the bottom of your 

//we make sure everything with the class "showOnMobile" is hidden on a normal sized screen
.showOnMobile { 
    display:none;
}


 // This is a media query. it applies the css rules inside the brackets when the condition in the "()" are met. In this instance, the screen must be less than 379 pixles for the rules inside to apply.
@media (max-width: 379px) {
    .showOnMobile{
        display:block;
    }

}

EDIT 2

I forgot that you also have to hide the right 'contact me' when in mobile,

@media (max-width: 379px) {
    .showOnMobile{
        display:block;
    }
   .rightnavigation{
        display:none;
    }
}

Upvotes: 2

Related Questions