Matt142 Matt142 - 4 months ago 23
HTML Question

How can I group these closer together?

I just finished my logo for my site and now the users avatar, username and all of the tabs are too far down, how can I make it so the text is closer to the logo: http://serverlauncherplus.co.uk/Skins4Accounts/index.php

Code:

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

Answer

Apply this CSS to the div with the id logo (<div id="logo">)

#logo{
  margin-top:0;
}

Or by applying it directly to the tag like so:

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

That will make everything shift up.

If you wish for it to be even closer to the image you can actually give the margin a negative margin like so:

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

Make sure you specify the units (in this case px)

Comments