1 reply [Last post]
newkidonblock
newkidonblock's picture
Offline
newbie
Last seen: 4 years 17 weeks ago
Timezone: GMT-4
Joined: 2015-03-15
Posts: 1
Points: 2

Hello CSS Gurus,

I am currently having difficulty with the template for the top of my website pages. They currently contain links to certain pages in a certain div, but they are "cutting" each other and starting on new lines, but I need them to appear right next to each other on the same line. Can anyone tell me what the reason for this might be? (attached is a picture of the problem)

Here is my template_pageTOP.php Document:

<html>
<head>
 <title>My Site</title>
 <!-- Insert meta data -->
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 
<?php
// It is important for any file that includes this file, to have
// check_login_status.php included at its very top.
$envelope = '<img src="images/note_dead.jpg" width="22" height="12" alt="Notes" title="This envelope is for logged in members">';
$loginLink = '<a href="login.php">Log In</a> &nbsp; | &nbsp; <a href="signupX.php">Sign Up</a>';
if($user_ok == true) {
	$sql = "SELECT notescheck FROM users WHERE username='$log_username' LIMIT 1";
	$query = mysqli_query($db_conx, $sql);
	$row = mysqli_fetch_row($query);
	$notescheck = $row[0];
	$sql = "SELECT id FROM notifications WHERE username='$log_username' AND date_time > '$notescheck' LIMIT 1";
	$query = mysqli_query($db_conx, $sql);
	$numrows = mysqli_num_rows($query);
    if ($numrows == <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" /> {
		$envelope = '<a href="notifications.php" title="Your notifications and friend requests"><img src="images/note_still.jpg" width="22" height="12" alt="Notes"></a>';
    } else {
		$envelope = '<a href="notifications.php" title="You have new notifications"><img src="images/note_flash.jpg" width="22" height="12" alt="Notes"></a>';
	}
    $loginLink = '<a href="user.php?u='.$log_username.'">'.$log_username.'</a> &nbsp; | &nbsp; <a href="logout.php">Log Out</a>';
}
?>
<div id="pageTop">
  <div id="pageTopWrap">
    <div id="pageTopLogo">
      <a href="login.php">
        <img src="images/logo.png" alt="logo" title="Maestro Nation">
      </a>
    </div>
    <div id="pageTopRest">
      <div id="menu1">
        <div>
          <?php echo $envelope; ?> &nbsp; &nbsp; <?php echo $loginLink; ?>
        </div>
      </div>
      <div id="menu2">
        <div>
          <a href="login.php">
            <p>Login</p>
          </a>
        </div>
      </div>
      <div id="menu3">
        <div>
          <a href="locatemaestros2.php">
            <p>Logout</p>
          </a>
        </div>
      </div>
      <div id="menu4">
        <div>
          <a href="locateevents.php">
           <p>Home</p>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
 
</body>
 
</html>

And here is my CSS Doc: style.css

body {
	margin: 0px; 
	font-family: Tahoma, Geneva, sans-serif; 
	font-size: 14px;
}
 
/* PAGE TOP */
 
#pageTop {
	background:url(headerSliver.png) repeat-x;
	height: 90px;
}
#pageTop > #pageTopWrap {
	width: 1000px;
	margin: 0px auto;
	height: 90px;
}
#pageTop > #pageTopWrap > #pageTopLogo {
	float: left;
	height: 90px;
	width: 108px;
}
#pageTop > #pageTopWrap > #pageTopRest {
	float: left;
	height: 90px;
	width: 892px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 {
	height: 44px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div {
	margin-top: 8px;
	padding: 4px;
	text-align:right;
}
 
#pageTop > #pageTopWrap > #pageTopRest > #menu2 {
	height: 44px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div {
	margin-top: 2px;
	padding: 4px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div > a {
	display: block;
	float: left;
	color:#CCC;
	text-decoration: none;
	margin: 0px 16px;
}
 
#pageTop > #pageTopWrap > #pageTopRest > #menu3 {
	height: 44px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu3 > div {
	margin-top: 2px;
	padding: 4px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu3 > div > a {
	display: block;
	float: left;
	color:#CCC;
	text-decoration: none;
	margin: 0px 16px;
}
 
/* PAGE MIDDLE */
#pageMiddle{
	width: 1000px;
	margin: 0px auto;
	height: 900px;
}
/* PAGE BOTTOM */
#pageBottom{
	background: #666;
	padding: 24px;
	font-size: 12px;
	color: #CCC;
	text-align: center;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi newkidonblock, Div's are

Hi newkidonblock,
Div's are block level elements by default, so they take up all the horizontal space they can unless told otherwise.
Best way to debug it is play around with your browser tools. Right click on one of the menu items and choose Inspect Element.
Then you can have a look at the values the elements are using.