Click here to Skip to main content
14,301,895 members

Web Development

 
AnswerRe: WCF service with sql server stored procedure Pin
Richard MacCutchan6-Aug-18 20:57
protectorRichard MacCutchan6-Aug-18 20:57 
QuestionController, Include in Project Pin
Wiep Corbier5-Aug-18 10:20
memberWiep Corbier5-Aug-18 10:20 
AnswerRe: Controller, Include in Project Pin
Nathan Minier7-Aug-18 2:52
professionalNathan Minier7-Aug-18 2:52 
GeneralRe: Controller, Include in Project Pin
Wiep Corbier7-Aug-18 3:22
memberWiep Corbier7-Aug-18 3:22 
GeneralRe: Controller, Include in Project Pin
Nathan Minier7-Aug-18 3:43
professionalNathan Minier7-Aug-18 3:43 
GeneralRe: Controller, Include in Project Pin
Wiep Corbier7-Aug-18 3:45
memberWiep Corbier7-Aug-18 3:45 
PraiseRe: Controller, Include in Project Pin
Richard Deeming7-Aug-18 4:03
mveRichard Deeming7-Aug-18 4:03 
QuestionNewbie needs help with css and php Pin
kylo9991-Aug-18 3:20
memberkylo9991-Aug-18 3:20 
Hi everyone! I'm just starting with web development and I am currently trying to recreate the Billboard website (in a way). I already have the basics and got the data from a mysql database and had them ordered the way I want to by reading a lot of internet articles and tutorials.

Problem is, I don't know how to format it properly, the way I want it to. I have resized the photo elements and that's it.

Here's my index page:

<div class="content">
		
		<?php
		$result = mysqli_query($con, "SELECT * FROM singles ORDER BY sales DESC;");

		$produceByType = array();

		while ($row = mysqli_fetch_array($result)) {
    		$produceByType[ $row['title'] ][] = $row;
		}
		?>

		<table>
		<?php
		$counter=1;

		foreach ($produceByType as $title => $produce):
		?>
    		<tr>
        		<th colspan="9"></th>
    		</tr>
    		<?php
    		foreach ($produce as $row): ?>
        		<tr class="rowHolder">
            		<td class="number"><?= $counter?></td>
            		<td class="activity"><img src="<?php echo $row['activity'] ?>" ?></td>
            		<td class="artwork"><img src="<?php echo $row['artwork'] ?>" ?></td>
            		<td style="display:inline-block;"class="title"><?= $row['title'] ?></td>
            		<td style="display:block;"class="artist"><?= $row['artist'] ?></td>
            		<td style="width:20px;"class="buttonExpand"><img src="assets/images/expand.png"></td>
            		
        		</tr>
        		<tr class="additionalHolder">
					
					<td class="lastWeek"><?= $row['last'] ?></td>
            		<td class="peak"><?= $row['peak'] ?></td>
            		<td class="woc"><?= $row['woc'] ?></td>
            		<td class="sales"><?= $row['sales'] ?></td>
            		<td class="tSales"><?= $row['tSales'] ?></td>
        		</tr>
    		<?php
    		$counter++;
    		endforeach;
		endforeach; ?>
		</table>
</div>


and my css:

*{
    font-family: "Poppins", sans-serif;
}

body {
    margin: 0;
    padding: 0; 
}
.header {
    padding: 25px 0;
    background-color: #000;
}


.bblogo img{
    display: block;
    width:200px;
    margin-left: auto;
    margin-right: auto;
}

.nav {
    padding: 15px 0;
    background-color: #333333;
    position: -webkit-sticky;
}

.nav .item{
    text-decoration: none;
    color: white;
    padding-right: 30px;
}

.nav .item:hover{
    text-decoration: underline;
}

.nav .active{
    color: #6b6b6b;
    text-decoration: none;
    padding-right: 30px;
}

.header, .nav {
    text-align: center;
    color: #fff;
}
.content {
    width: 600px;
    margin: 10px auto 100px;
}

.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
}

.artwork img{
  width: 110px;
}

.activity img{
  width:40px;
}

.buttonExpand img{
  width: 20px;
}

.content{
  text-align: center;
}

.title{
  width: 30px
  border-top: 20px;
}


I'm still pretty new to do this so please go easy on me. Frown | :(

(For reference, you can look at numbers 2-100 here: Top 100 Songs | Billboard Hot 100 Chart | Billboard[^] .)

Thank you everyone. If you also can suggest me some books I can read and articles, I'm open to suggestions. Smile | :)
QuestionHow to make svg Icon so that user can download it? Pin
Aftab Anxari26-Jul-18 9:34
memberAftab Anxari26-Jul-18 9:34 
AnswerRe: How to make svg Icon so that user can download it? Pin
OriginalGriff26-Jul-18 9:39
protectorOriginalGriff26-Jul-18 9:39 
Questioncompile error in angular app Pin
deepak_201223-Jul-18 8:15
memberdeepak_201223-Jul-18 8:15 
QuestionINTRODUCTION Pin
Suren Kiddo17-Jul-18 2:28
memberSuren Kiddo17-Jul-18 2:28 
AnswerRe: INTRODUCTION Pin
Richard Deeming17-Jul-18 3:09
mveRichard Deeming17-Jul-18 3:09 
AnswerRe: INTRODUCTION Pin
Dominur7-Aug-18 0:48
memberDominur7-Aug-18 0:48 
AnswerRe: HTML Code Has Been Changed to Compressed Mode Pin
Nathan Minier10-Jul-18 6:48
professionalNathan Minier10-Jul-18 6:48 
GeneralRe: HTML Code Has Been Changed to Compressed Mode Pin
Richard Deeming10-Jul-18 7:07
mveRichard Deeming10-Jul-18 7:07 
GeneralRe: HTML Code Has Been Changed to Compressed Mode Pin
Nathan Minier10-Jul-18 7:17
professionalNathan Minier10-Jul-18 7:17 
QuestionLimit lines in bootstrap card-text component Pin
Urgen Dorjee6-Jul-18 1:04
memberUrgen Dorjee6-Jul-18 1:04 
Questionobject vs img Pin
V.4-Jul-18 20:37
professionalV.4-Jul-18 20:37 
AnswerRe: object vs img Pin
Richard Deeming5-Jul-18 1:50
mveRichard Deeming5-Jul-18 1:50 
GeneralRe: object vs img Pin
V.5-Jul-18 18:50
professionalV.5-Jul-18 18:50 
Questionstudent information Pin
Raja Jee2-Jul-18 18:31
memberRaja Jee2-Jul-18 18:31 
AnswerRe: student information Pin
Richard MacCutchan2-Jul-18 21:11
protectorRichard MacCutchan2-Jul-18 21:11 
QuestionCode Stopped Working When Controller Method Is Invoked Using AJAX Instead Of Formaction Pin
MadDashCoder24-Jun-18 1:23
memberMadDashCoder24-Jun-18 1:23 
AnswerRe: Code Stopped Working When Controller Method Is Invoked Using AJAX Instead Of Formaction Pin
Richard Deeming24-Jun-18 5:04
mveRichard Deeming24-Jun-18 5:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.