2016-07-30 3 views
0

私はちょうど私のサイトのための私のロゴを終え、ユーザーはアバター、ユーザ名とタブのすべてが離れすぎてダウンしている今、どのように私はそれがとてもテキストロゴに近いことができます。http://serverlauncherplus.co.uk/Skins4Accounts/index.phpどうすればこれらをより密接にグループ化できますか?

コード:

<html> 
<head> 
    <link href="images/favicon.ico" rel="icon" type="image/x-icon" /> 
    <style> 
     body, html {height:100%;} 
     wholePage.wrap {height:100%; overflow:hidden;} 
     body {overflow: hidden; } 
     .ellipsis { 
      overflow: hidden; 
      white-space: nowrap; 
      text-overflow: ellipsis; 
     } 
     .Logoimg { 
      max-width: 100%; 
      height: auto; 
     } 
     .column { 
      -webkit-column-count: 3; 
      -moz-column-count: 3; 
      column-count: 3; 
     } 
     ::selection { 
      background: #474746; /* WebKit/Blink Browsers */ 
     } 
     ::-moz-selection { 
      background: #474746; /* Gecko Browsers */ 
     } 
     .tradeURL { 
-moz-box-shadow:inset -4px 13px 17px -15px #e67a73; 
-webkit-box-shadow:inset -4px 13px 17px -15px #e67a73; 
box-shadow:inset -4px 13px 17px -15px #e67a73; 
background-color:#e4685d; 
-moz-border-radius:5px; 
-webkit-border-radius:5px; 
border-radius:5px; 
border:2px solid #ffffff; 
display:inline-block; 
cursor:pointer; 
color:#ffffff; 
font-family:Arial; 
font-size:15px; 
font-weight:bold; 
padding:12px 31px; 
text-decoration:none; 
text-shadow:-1px 3px 27px #b23e35; 
} 
.tradeURL:hover { 
    background-color:#eb675e; 
} 
.tradeURL:active { 
    position:relative; 
    top:1px; 
} 
    </style> 
    <script> 
     window.addEventListener("keydown", function(e) { 
      // space, page up, page down and arrow keys: 
      if([32, 33, 34, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { 
       e.preventDefault(); 
      } 
     }, false); 
    </script> 
    <title>AccountFury | Deposit Skins For Accounts!</title> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]--> 
    <link rel="stylesheet" href="assets/css/main.css" /> 
    <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]--> 
    <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]--> 
</head> 
<body> 
    <div id="wholePage"> 
    <!-- Header --> 
     <div id="header"> 

      <div class="top"> 

       <h1 align="center"><img class="Logoimg" src="http://serverlauncherplus.co.uk/Skins4Accounts/Logo.png"/></h1> 

       <!-- Logo --> 
        <div id="logo"> 
         <span class="image avatar48"><img src="<?php echo $avatar; ?>" alt="" /></span> 
         <h1 style="margin-left: 60px" class="ellipsis" id="title"><?php echo $username; ?></h1> 
         <p>Account ID: <?php echo $accid; ?></p> 
        </div> 

       <!-- Nav --> 
        <nav id="nav"> 

         <ul> 
          <li><a href="#Dashboard" id="dashboard-link" class="skel-layers-ignoreHref"><span class="icon fa-home">Dashboard</span></a></li> 
          <li><a href="#Deposit" id="Deposit-link" class="skel-layers-ignoreHref"><span class="icon fa-th">Deposit</span></a></li> 
          <li><a href="#orderAccounts" id="order-link" class="skel-layers-ignoreHref"><span class="icon fa-shopping-cart">Order Accounts</span></a></li> 
          <li><a href="#Settings" id="order-link" class="skel-layers-ignoreHref"><span class="icon fa-cogs">Settings</span></a></li> 
          <li><a href="#Support" id="support-link" class="skel-layers-ignoreHref"><span class="icon fa-question-circle">Support</span></a></li> 
         </ul> 
        </nav> 

      </div> 
+0

輝かしいタイトル... – vsync

答えて

1

は、ID logo<div id="logo">

#logo{ 
    margin-top:0; 
} 

divにかそこらのようなタグに直接適用することによって、このCSSを適用します。

<div id="logo" style="margin-top:0;"> 

これはすべてを上にシフトさせます。

それも近いあなたが実際に余白にそのような否定的余裕を与えることができ、画像にするためにあなたが希望する場合:

<div id="logo" style="margin-top:-40px;"> 

あなたは(この場合はpxで)の単位を指定してください

+0

を解決することができます.... – Matt142

+0

よろしいですか?私はそれが何をしているかを示すために画像の後に投稿に追加しました。それはあなたが欲しいものです@ Matt142 –

+0

ああ、変更が非常に微妙だったので、ロゴは上から5px下に、テキストはさらに上になるようにする方法があるのですか? – Matt142

0

あなたに3emの上下のパディングを追加

#main > section { 
    padding: 3em 0; 
} 

(あるmain.cssライン2219に)このCSSルールを持っていますidが(Dashboard)。次のルールは、それに何かを移動していないようでした

#main > section#Dashboard { 
    padding: 0; 
} 
関連する問題