stackoom
  简体   繁体   中英

CSS - Links don't line up properly

 原文  2017-01-05 19:17:41  6   2    html/ css

Question

I am not much of a web designer, more of a backend developer. However, the frontend designer left me with a problem I am facing. I have a login and register links and navigation links on the right. I want these links to line up and display in the same navigation bar. At the moment, my links are distorted. They appear in the middle of the page I am dealing with. I want the login/register links to align to the left side of the navigation bar and I also want the right navigation tp sit within the main navigation. Neither of these things are happening (screenshot provided). how do I get th e user links to align to the left of the top navigation bar an the other links to stay to the right?

Here is a link to my screenshot: https://s30.postimg.org/tlkvrcv5t/Screen_Shot_2017_01_05_at_11_11_55_AM.png

and here is my code:

app.blade.php: 

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="{!! asset('css/stylesheet.css') !!}" />
</head>

<body>
<div class="mainheader">
    <div class="subcontainer">
        <div class="subcontainer-left">
            <div class="subcontainter-title">Cryptoflip</div>

                @if (Auth::guest())
                <div class="subcontainer-button">
                    <a href="/login">Login</a>
                </div>
            <div class="subcontainer-button">

                <a href="/register">Register</a>
            </div>
                   @else
                    <div class="subcontainer-button">
                <a href="/user/{{$user->name}}"Your Profile</a>
                    </div>
                    <div class="subcontainer-button">
                        <a href="/logout">Logout</a>
                    </div>
                    @endif

        </div>
    </div>
        <div class="subcontainer-right noselect">
            <div class="subcontainer-button">
                <a href="support.html">Support</a>
            </div>
            <div class="subcontainer-button">
                <a>Provably Fair</a>
            </div>
            <div class="subcontainer-button">
                <a>Dice</a>
            </div>
            <div class="subcontainer-button bt-active">
                <a href="main.html">Coinflip</a>
            </div>
        </div>
    </div>
    <!-- Decoration -->
    <!--<div style="height: 10px; width: 200px; margin: auto; margin-top: -50px; background-color: gold"></div>-->
</div>
<div class="maincontainer">
    @yield('content')

</div>
</body>
</html>

stylesheet.css; 

@font-face {
  font-family: NexaBold;
  src: url(NexaBold.otf); }

@font-face {
  font-family: NexaLight;
  src: url(NexaLight.otf); }

@font-face {
  font-family: OpenSans;
  src: url(OpenSans-Regular.ttf); }

body {
  margin: 0;
  background-color: #ecf0f1; }

.mainheader {
  height: 75px;
  font-family: NexaBold;
  font-size: 28px;
  line-height: 75px;
  text-align: center;
  vertical-align: middle;
  background-color: #dce0e1; }

.menu {
  height: 40px; }

.subcontainer-left {
  height: 75px;
  float: left; }

.subcontainer {
  height: 75px;
  margin: auto; }

.subcontainer-right {
  height: 75px;
  width: auto;
  float: right; }

.subcontainer-button {
  height: 75px;
  width: 100px;
  float: right;
  padding-left: 12px;
  padding-right: 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 75px;
  font-family: OpenSans;
  font-size: 14px; }

.subcontainer-button a {
  text-decoration: none;
  color: black; }

.subcontainer-button a:visited {
  text-decoration: none;
  color: black; }

.subcontainer-button a:active {
  color: black; }

.subcontainer-button a:hover {
  border-bottom: 3px solid gray;
  cursor: pointer; }

.subcontainer-title {
  height: 75px;

  float: left;
  padding-left: 12px;
  padding-right: 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 75px;
  font-family: OpenSans;
  font-size: 14px; }

.bt-active a {
  border-bottom: 3px solid gold; }

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.maincontainer {
  height: 700px; }

.textheader {
  height: 180px;
  text-align: center;
  vertical-align: middle;
  line-height: 180px;
  font-family: NexaLight;
  font-size: 48px; }

.ongoing-header {
  width: 700px;
  margin: auto;
  height: 70px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background-color: #bcc0c1; }

.subheader {
  height: 70px;
  width: 260px;
  font-family: OpenSans;
  font-weight: bold;
  font-size: 22px;
  text-align: center;
  line-height: 70px;
  vertical-align: middle;
  float: left; }

.subheader-menu {
  height: 36px;
  background-color: #ccd0d1; }

.button {
  height: 36px;
  width: auto;
  margin: auto;
  padding-left: 12px;
  padding-right: 12px;
  text-align: center;
  vertical-align: middle;
  line-height: 36px;
  font-family: OpenSans;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.3s; }

.button:hover {
  background-color: #ecf0f1; }

.subheader-right {
  float: right;
  padding-top: 16px;
  width: 260px;
  margin: auto;
  margin-right: 24px; }

.ongoing-container {
  width: 700px;
  margin: auto; }

.ongoing-game {
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
  font-family: OpenSans;
  transition: 0.3s; }

.ongoing-game:nth-child(even):hover {
  background-color: #f3f9fa; }

.ongoing-game:nth-child(odd):hover {
  background-color: #f3f9fa; }

.ongoing-game:nth-child(even) {
  background-color: #d3d9da; }

.ongoing-game:nth-child(odd) {
  background-color: #dce0e1; }

.iconholder {
  height: 20px;
  width: 20px;
  float: left;
  margin-top: 4px;
  margin-right: 4px; }

#username {
  float: left;
  height: 40px;
  width: 220px;
  text-align: left;
  padding-left: 24px; }

#btcamount {
  float: left;
  height: 40px;
  width: 220px;
  text-align: right;
  padding-right: 24px; }

#ongoing {
  height: 40px;
  width: 212px;
  float: left; }

.bitcoinlogo {
  height: 15px; }

.helpcontainer {
  height: 600px;
  width: 500px;
  margin: auto;
  font-family: OpenSans; }

.helpform {
  margin-top: 20px;
  height: 400px;
  font-size: 12px; }

.helpform textarea {
  resize: none;
  font-family: OpenSans; }

#issuetext {
  height: 100px;
  width: 480px; }

#emailtext {
  height: 18px;
  width: 220px;
  font-family: OpenSans; }

.submitbutton {
  height: 40px;
  width: 180px;
  float: none;
  margin: auto;
  margin-top: 20px;
  border: 1px solid gray;
  background-color: white;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  font-size: 14px;
  cursor: pointer;
  border-radius: 3px;
  transition: 0.2s background-color; }

.submitbutton:hover {
  background-color: lightgrey; }

/*# sourceMappingURL=stylesheet.css.map */

EDIT:Updated code.

2 answers

solution1
 0 ACCPTED  2017-01-05 19:24:28

Get rid of width on .subcontainer-left . Then give a width to .subcontainer-button . 

.subcontainer-left {
    height: 75px;
    /* width: 200px; */
    float: left;
}

.subcontainer-button {
    height: 75px;
    width: 100px;
    ...
}

solution2
 0  2017-01-05 19:39:50

You need to place "Cryptoflip" inside a div, for example "subcontainer-title": 

<div class="subcontainer">
        <div class="subcontainer-left">
            <div class="subcontainer-title">Cryptoflip</div>
                <div class="subcontainer-button">
                    <a href="/login">Login</a>
                </div>
            <div class="subcontainer-button">

                <a href="/register">Register</a>
            </div>

        </div>
    </div>

Then add the style for it copying ".subcontainer-button" and modify the content to match what you want it to look (float: left in first place): 

.subcontainer-title {
  height: 75px;
  width: auto;
  float: left;

  padding-left: 12px;
  padding-right: 12px;

  text-align: center;
  vertical-align: middle;
  line-height: 75px;

  font-family: OpenSans;
  font-size: 14px;
}

And change the width of subcontainer-left: 

.subcontainer-left {
  height: 75px;
  width: 400px;
  float: left;
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question parallax backgrounds don't line up properly HTML links show up but don't work properly Containers/divs don't line up (html, css) CSS: Divs don't line up left and right HTML CSS identical tables don't line up Navbar links don't center properly html links don't work properly Floated image left, text align center. After image, links don't line up DIVs don't line up Links don't work after css animation
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM