You'll notice there's some space around the black rectangle (i.e the DIV) element, most browsers put a little space around the body by default so
elements in the page wouldn't start exactly from the top and edge of the page, this is usually an undesired effect, and to clear it open up your CSS file for editing, now where we have style rules for the body element add the following

 margin : 0px;

so the CSS for the body should look something like

 
 body {
  background-color:#f5f5dc;
  margin: 0px;
}

save and refresh, the space which was actually a margin around the body should now be gone

Next we create the main menu for the page, We havent yet introduced HTML Lists, List in HTML is just a tag that allows you show a list of items, and there are two tyes of lists
1. The ordered lists, which has the tag <ol></ol>
2. The un-ordered list <ul></ul>

As you can see both types of lists have closing tags, which means they are meant to contain some other element, The List's
elements have an associated <li> element which stand for list-item, that is we show each item in a list using the <li> element.
Lets illustrate by using a list to create the top menu of the page. Open up index.html and inside the DIV which has an id of header, add the following

<ul id="top-menu">
  <li>Rooms & Suites</li>
  <li>Resuturant & Bars</li>
  <li>Meetings</li>
  <li>Gallery</li>
  <li>Login</li>
</ul> 

Notice we started by creating an un-ordered list <li>, and gave it an id of top-menu, then inside this un-ordered list we created five list items, if you save and refresh the browser, you should have something similar to

Again you might notice that the space on top is back again, the list is a block element, and atime's this is a behavior that happens when we put one block element into another, to clear it open up your CSS file
and add the ff

#top-menu{
 display: inline;
}

The display CSS property helps us control how an element is displayed and is usually used to force a block element to be displayed inline, is you save and refresh the annoying space on-top should be gone, again add the ff to your index.css

#top-menu > li{

color:#fff;


}

In CSS we are able to target an element based on its parent, the line

#top-menu > li

Simply means we are targeting li elements that are child nodes of and element with an ID of top-menu..

Let me further illustrate
if you have a <p> element and it has a <span> element as its child, to target that span child element, you could use

 p > span {...

,

The > character in CSS is used to select a child element

if the span has an id, you could also directly access it in CSS using its id selector as in #id_here, however in our html page we did not give the list-items an id so its appropriate to use the Child selector format, save and refresh if you did everything right your page should look like this and the list items should be colored white so you now see where the list actually started from

But we are tyring to create a menu so we do not want a vertical list, The list items <li> are also block elements and as such would display on a line for each new li element, open your index.css again and where we put styles for the list items add a display:inline style rule for the list items so that style block looks like..

#top-menu > li{

color:#fff;
display: inline;

}

save and refresh, all the items should now show on a single line as they are no longer displaying as block elements, but as in-line elements

The various list items are too close together for a menu, so lets space them out a bit by controlling the left margin of each list item, and we would also reduce the text size using the font-size property

in the CSS file now edit the list item section so it looks like

#top-menu > li{

color:#fff;
display: inline;

margin-left: 1em;
font-size: .8em

}

save and refresh, it should look something similar to this

are we clear up to this point??

Yes, sir.

so i just created a simple image we would be using for the logo of the site ( well you could create and use yours)
so download it and save to your images directory, don't worry if it's not too visible here its a png file with transparency, and it would be visible once you put it in the header section of the index.html page

just before we link the image, lets make a little change

open up the index.css file and change the height element (i.e our DIV with id header to 4.5em)

so the section for the header element should look like

#header{
 width: 100%;
 height: 4.5em;
 background-color:#000;

}

we would insert the logo just before the list, so create an image element as the new first child of the DIV header, your code would be something like

  <div id="header">
    <img src="images/logo.png" alt="site logo" id="site-logo"/> <!-- image element here before the list

  <ul id="top-menu">
  <li>Rooms & Suites</li>
  <li>Resuturant & Bars</li>
  <li>Meetings</li>
<li>Gallery</li>
<li>Login</li>
</ul> 
...

the image src value is images/logo.png as we are linking to as the logo.png file is in the images sub-folder, also note we gave the <img> element an id of site-logo

The image would initally be bigger than its container and might even force the list down the page so lets resize the image. Open your index.css file and add the ff, remember the image element has an id of site-logo

#site-logo{
width:15%;
margin-top: .5em;
margin-left:1em;


}

the margins are there to give some space at the top and left-hand side of the image.. you could remove the margin rules to see the effect
Your page should now be looking like...

Images sometimes cause text around them to be aligned to the bottom line, and in our example the list is seen to be aligned to the bottom of the image, we can change this using the vertical-align CSS property to the image which causes the text around it to align somewhere around the middle, so add to the CSS for the image

 vertical-align:middle

Your Menu should now be moved up to the middle

The list or menu inst exactly clickable yet, we'll get to that shortly, any questions for now..

How do i create a logo like that, perfect hotel

MULLAH123:
How do i create a logo like that, perfect hotel

dats graphics design stuff bro, but the logo is easy,u could use may be Corel Draw of Photoshop,there's not muh to it just select the right Font add somme effects and u're good, anyway dat logo was don in Photoshop just normal text with Bevel and outer-glow effects applied

Nice one, following keenly.

Next we change the menu items to links, we have covered links already so you should know links are created with the <a> tag (anchor)

what we would do is that on each <li> element that holds each menu text we would surround each of the list's text with link tags
like this: ..open index.html for editing

  <ul id="top-menu">
  <li>  <a href="rooms.html"> Rooms & Suites </a> </li>
  <li> <a href="bars.html"> Resuturant & Bars </a> </li>
  <li> <a href="conference.html"> Meetings </a> </li>
<li> <a href="gallery.html" > Gallery </a> </li>
<li> <a href="signin.html"> Login </a> </li>
</ul> 

so you see all we did was to surround the the text contents of the list with <a> tags, now in the href attributes for each link we put the names of other html files there, we haven't created those html files yet so when you click the link it would tell you file not found or something similar

You'll also notice the color of the links are no longer white (which was the previous color of the text) links have their own style definitions, so we are going to edit our CSS file now:

Add

#top-menu > li > a{
color :#fff
}

the line #top-menu > li > a means we are targeting a elements i.e links that are child elements of list elements li, and the list elements are also child elements of the element with id top-menu which is the parent ul element, so we then give the links a white color, save and refresh all your links should be white again, the links would also be underlined as that is the default style applied to links, I'll later show how to remove the 'underline

Weldone boss..make i go carry my pc practice yarrr(start) display:none

might not post for a few day's, almost out if data here, but by or b4 weekend would be back

Welldone boss ....#following

stack1:
might not post for a few day's, almost out if data here, but by or b4 weekend would be back

OK now boss... we dey enjoy the class...

stack1:
Images sometimes cause text around them to be aligned to the bottom line, and in our example the list is seen to be aligned to the bottom of the image, we can change this using the vertical-align CSS property to the image which causes the text around it to align somewhere around the middle, so add to the CSS for the image

 vertical-align:middle

Your Menu should now be moved up to the middle

No offense bro, but your codes should be aligned. You should keep them in a container or such. Hope you get what I'm saying.

stack am new and I want to start from page one and catch up with u continue the good work

Pls, I am confronted a problem. I am trying to select from database using any of the selection parameters. But records are returned until all the conditions are met. I want to return records from the database when any of the conditions are met as well. Here is my php code below:

<?php



if(isset($_POST['submit'])){
$selecttype = $_POST['selecttype'];
$bed = $_POST['bed'];
$transaction = $_POST['transaction'];
$state = $_POST['state'];
$location = $_POST['location'];
$minprice = $_POST['minprice'];
$maxprice = $_POST['maxprice'];





$query = $pdo->prepare("SELECT * FROM property WHERE propertytype = ?
AND bed = ? AND transaction = ? AND state = ? AND location = ?
AND minprice = ? AND maxprice = ? ";

$query->bindValue(1, $selecttype);
$query->bindValue(2, $bed);
$query->bindValue(3, $transaction);
$query->bindValue(4, $state);
$query->bindValue(5, $location);
$query->bindValue(6, $minprice);
$query->bindValue(7, $maxprice);


$query->execute();
$propertydisplay = $query->fetchall();
$query->setFetchMode(PDO::FETCH_ASSOC);



$num = $query->rowcount();

if (empty($num)){
$error = 'No record found!';

}
else{
foreach($propertydisplay as $display){

$disprefno = $display['refno'];
$dispfullname = $display['fullname'];
$dispphone = $display['phone'];
$disppropertytype = $display['propertytype'];
$dispbed = $display['bed'];
$disptransaction = $display['transaction'];
$dispstate = $display['state'];
$displocation = $display['location'];
$dispminprice = $display['minprice'];
$dispmaxprice = $display['maxprice'];

}
}
}

?>


<form class="item-add" action="index.php" method="post" autocomplete="off">


<input type="submit" name="submit" value="Search" class="submit">

<?php if(!empty($propertydisplay)){

echo '<table>';
echo '<thead>';
echo '<tr valign="top">';
echo '<th>Property Type</th>';
echo '<th>Agent Name</th>';
echo '<th>Agent Phone Number</th>';
echo '<th>Bed</th>';
echo '<th>Transaction</th>';
echo '<th>State</th>';
echo '<th>Location</th>';
echo '<th>Min Price</th>';
echo '<th>Max Price</th>';
echo '</tr>';
echo '</thead>';


echo '<tbody>';

foreach($propertydisplay as $display){


echo '<tr valign="top">';
echo '<td>'.$disppropertytype.'</td>'.
'<td>'.$dispfullname.'</td>'.
'<td>'.$dispphone.'</td>'.
'<td>'.$dispbed.'</td>'.
'<td>'.$disptransaction.'</td>'.
'<td>'.$dispstate.'</td>'.
'<td>'.$displocation.'</td>'.
'<td>'.$dispminprice.'</td>'.
'<td>'.$dispmaxprice.'</td>';

echo '</tr>';



}
echo '</tbody>';
echo '</table>';
}
?>




</form>

Just entered the class and following up.

Waiting for the next topic

Thanks for the opportunity @stack1

basil123:
Pls, I am confronted a problem. I am trying to select from database using any of the selection parameters. But records are returned until all the conditions are met. I want to return records from the database when any of the conditions are met as well. Here is my php code below:

<?php



if(isset($_POST['submit'])){
$selecttype = $_POST['selecttype'];
$bed = $_POST['bed'];
$transaction = $_POST['transaction'];
$state = $_POST['state'];
$location = $_POST['location'];
$minprice = $_POST['minprice'];
$maxprice = $_POST['maxprice'];





$query = $pdo->prepare("SELECT * FROM property WHERE propertytype = ?
AND bed = ? AND transaction = ? AND state = ? AND location = ?
AND minprice = ? AND maxprice = ? ";

$query->bindValue(1, $selecttype);
$query->bindValue(2, $bed);
$query->bindValue(3, $transaction);
$query->bindValue(4, $state);
$query->bindValue(5, $location);
$query->bindValue(6, $minprice);
$query->bindValue(7, $maxprice);


$query->execute();
$propertydisplay = $query->fetchall();
$query->setFetchMode(PDO::FETCH_ASSOC);



$num = $query->rowcount();

if (empty($num)){
$error = 'No record found!';

}
else{
foreach($propertydisplay as $display){

$disprefno = $display['refno'];
$dispfullname = $display['fullname'];
$dispphone = $display['phone'];
$disppropertytype = $display['propertytype'];
$dispbed = $display['bed'];
$disptransaction = $display['transaction'];
$dispstate = $display['state'];
$displocation = $display['location'];
$dispminprice = $display['minprice'];
$dispmaxprice = $display['maxprice'];

}
}
}

?>


<form class="item-add" action="index.php" method="post" autocomplete="off">


<input type="submit" name="submit" value="Search" class="submit">

<?php if(!empty($propertydisplay)){

echo '<table>';
echo '<thead>';
echo '<tr valign="top">';
echo '<th>Property Type</th>';
echo '<th>Agent Name</th>';
echo '<th>Agent Phone Number</th>';
echo '<th>Bed</th>';
echo '<th>Transaction</th>';
echo '<th>State</th>';
echo '<th>Location</th>';
echo '<th>Min Price</th>';
echo '<th>Max Price</th>';
echo '</tr>';
echo '</thead>';


echo '<tbody>';

foreach($propertydisplay as $display){


echo '<tr valign="top">';
echo '<td>'.$disppropertytype.'</td>'.
'<td>'.$dispfullname.'</td>'.
'<td>'.$dispphone.'</td>'.
'<td>'.$dispbed.'</td>'.
'<td>'.$disptransaction.'</td>'.
'<td>'.$dispstate.'</td>'.
'<td>'.$displocation.'</td>'.
'<td>'.$dispminprice.'</td>'.
'<td>'.$dispmaxprice.'</td>';

echo '</tr>';



}
echo '</tbody>';
echo '</table>';
}
?>




</form>

hi sorry for the late response, i hav been offliine, you didn't say what errors you are getting and its not really possible for me to run your code since i do not have access to the database, so may be state/post the exact error messages u re getting or if i can get a dump of the db table u're accessing data from so i can test with d code.

Also you said u want to return records from the database when any of the conditions are met as well. i can see u used perepared statements to bind to values coming in from Post which means those POST values must exist, maybe use isset to know whih POST value came in a nd construct your SQL statement based on the available POST data

stack1:


hi sorry for the late response, i hav been offliine, you didn't say what errors you are getting and its not really possible for me to run your code since i do not have access to the database, so may be state/post the exact error messages u re getting or if i can get a dump of the db table u're accessing data from so i can test with d code.

Also you said u want to return records from the database when any of the conditions are met as well. i can see u used perepared statements to bind to values coming in from Post which means those POST values must exist, maybe use isset to know whih POST value came in a nd construct your SQL statement based on the available POST data

welcme bk we don miss u ohh

Nice trend bro...very educating...followed carefully...

OP weytin dey happen now

At d front seat waiting for d class to start,cant wait for d class to keep going. Tnx for d good work @ Stack1.

@Patoskid i dey here baba, facing some hard-ware ish on ma system's pls give me a while

stack1:
@Patoskid i dey here baba, facing some hard-ware ish on ma system's pls give me a while

no more updates bro...hope you re good.