CODEWITHSUNDEEP
htmlcss
LegendOfKass
LegendOfKass

Reputation: 191

How do I 'anchor' a list element right next to the site name on top left?

I want to 'anchor' a sub-heading right next to the website name at top left corner. the website name is in the corner and the sub-heading is to the right of it. There's an example of this at https://www.djangoproject.com/ where the phrase "the web framework for perfectionists with deadlines" is right next to the website name "DJango." In my code I have everything set up but I cannot figure out how to "anchor" the item right next to the name. Using padding or margins to hold them there always pushes other items out of format and it doesn't actually keep the sub-heading in one place, it always tries to move around while resizing the window.

html code...

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test Site</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stackdemo.css">
  <link href='https://fonts.googleapis.com/css?family=Lato:400,400italic,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,400italic' rel='stylesheet' type='text/css'>

  </head>

  <body>
    <div class="main-nav">
        <ul class="nav">
          <li class="name">Test Site</li>
          <li class="subname">
          sub-heading should be right next to 'Test Site' whenever page is resized
          </li>
          <li><a href="#">Sign up</a></li>
          <li><a href="#">Log in</a></li>
        </ul>
    </div>

    <header>
      <img src="https://placeimg.com/400/400/people" alt="picture" class="profile-image">

      <ul class="direct">
        <li><a href="#">Try</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </header>
  </body>
  </html>

css code...

/* Global Layout Set-up */
* { 
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: 'Lato', sans-serif;
  color: #222;
  background: #54ffa0;
}
/* Link Styles */

/******************************************/

/*TOP PAGE

/******************************************/

a {
  text-decoration: none;
  color: #000;
}
a:hover {
  color: #000;
}

.main-nav {
  width: 100%;
  background: #000000;
  min-height: 30px;
  padding: 10px;
  position: fixed;
  text-align: center;
  min-width: 600px;
}

.nav {
  display: flex;
  justify-content: space-around;
  font-weight: 700;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}

.nav .name {
  display: none;
  padding-top: 15px;
}

.nav li {
  padding: 5px 10px 10px 10px;
}

.nav a {  
  color: #fff;
  display: block;
    border: solid #fff; 5px;
    padding: 10px;
}

a {
    text-decoration: none;
    color: #fff;
}

a:hover {
    color: #0efb7b;
    border-color: #0efb7b;
}

.nav a:hover {
  color: white
  border-color: #0efb7b;    
    color: #fff;
}

.nav {
    max-width: 1200px;
  }

  .nav .name {
    display: block;
    margin-right: auto;
    color: white;
  }

/******************************************/

/*BODY

/******************************************/

.direct a {
    color: #222;
}

ul.direct {
    padding: 0;
    text-align: center;
}

.direct li {
border: solid #222; 5px;
    display: inline-block;
    background: #fff;
    color: #222;
    padding: 5px 10px;
    margin: 2px;
}

.subname {
    padding-right: 1000px;
    color: #fff;
    display: block;
}

 .nav .subname {
    position: left;
    margin-right: auto;
    padding-top: 20px;    
    font-size: 0.75em;
    text-align: left;
    max-width: 225px;
    min-width: 200px;
  }

Upvotes: 0

Views: 805

Answers (2)

Deuxis
Deuxis

Reputation: 239

CSS positioning is your best friend.

  1. position:static is the default, makes things flow when page resizes
  2. position:relative is basically the same thing but you can move something relatively to where it would be.
  3. position:fixed fixes an element in a certain spot on the screen, when you scroll around the page the element stays in the same spot. Like the Facebook header that always stays on the top of your screen.
  4. position:absolute makes an element be in one spot relative to its first positioned (non-static) parent element. This is the one we will use.
  5. properties top, right, bottom and left are then used to say WHERE will the element be positioned

What you can do is make main-nav positioned (just do position:relative, it will behave like static but tell all absolutes inside it that it's positioned), and then everything inside it position:absolute. Example:

HTML:

<nav class="main-nav"> <!-- nav is just a div, but tells search engines that it's a navigation menu -->
<ul class="nav">
        <li class="name">Test Site</li>
        <li class="subname">sub-heading should be right next to 'Test Site' whenever page is resized</li>
        <li class="signup"><a href="#">Sign up</a></li>
        <li class="login"><a href="#">Log in</a></li>
    </ul>
</nav>

CSS:

nav {
    position:relative;
}
.name {
    width:50px; /* whatever the width you want */
    position:absolute;
    top:0;
    left:0;
}
.subname {
    position:absolute;
    top:0;
    left:50px; /* whatever the width of name was */
}
.signup {
    position:absolute;
    top:0;
    right:60px; /* whatever the width of login is */
}
.login {
    width:60px; /* whatever the width you want */
    position:absolute;
    top:0;
    right:0;
}

This makes all the elements all having the exact same spaces inside of nav, no matter what. The downside of position:absolute is that if you make the screen small enough, the elements from the left will overlap with elements on the right, as absolutely positioned elements don't give a crap about anything including collision.

Upvotes: 1

Rounin
Rounin

Reputation: 29453

Rather than combining padding and margins with:

<body>
<div class="main-nav">
<ul class="nav">
<li class="name">Test Site</li>
<li class="subname">sub-heading should be right next to 'Test Site' whenever page is resized</li>
<li><a href="#">Sign up</a></li>
<li><a href="#">Log in</a></li>
</ul>
</div>

I'd be tempted to have something like these two <div>s:

<div class="sitename">Test Site</div>
<div class="strapline">sub-heading should be right next to 'Test Site' whenever page is resized</div>

outside all parent-containers (apart from <body>).

Then, you might style .sitename and .strapline with:

.sitename, .strapline {
position: absolute;
top: 36px;
}

.sitename {
left: 6px;
width: 120px;
}

.strapline {
left: 126px;
width: 180px;
}

Upvotes: 0

Related Questions