can someone help me with this php calling

hello, im calling stuff from my server and im trying to get it to be line after line... but it is line then a gap then line..

<div id="latestcontent">
        
                <?php require('connect.php');
                
                $result = mysql_query("SELECT * FROM articles ORDER BY article_id DESC ")
                or die(mysql_error());  
                // keeps getting the next row until there are no more to get
                while($row = mysql_fetch_array( $result )) {
                // Print out the contents of each row into a table
                echo "<div id='newestpostleft'>";
                echo '<p><a style="font-size: 10px" href="'. $row['url'] .'">'. $row['article_name'] .'</a>'; echo "</div><div id='newestpostright'>";    echo '<p style="font-size: 10px">'; echo $row['posted'];    echo "</div>";
                // author + date
                
                }

                ?>
            </div>

PHP:

#bodycontatiner {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    width: 80%;
    overflow: auto;
    background-color: white;
}
#main {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: -5px;
    width: 70%;
    min-height: 500px;
    background-color: white;
    float: left;
}
#latestcontent {
    width: 80%;
    max-height: 100px;
}
#newestpostleft {
    margin-top: 0px;
    margin-bottom: 0px;
    float: left;
    width: 70%;
}
#newestpostright {
    margin-top: 0px;
    margin-bottom: 0px;
    float: right;
    width: 30%;
}
#rightbar {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    width: 30%;
    text-align:right;
    min-height: 200px;
    float: left;

}

Code (markup):

 

clear: both; ? and design has nothing to do with php!

 

where would i put the clear both?

 

Just use a simple html like an " <li> </li> " with each row you are echoing from sql.
The, all the results from the sql will be displayed in order of top to bottom.

 

1) <div> is a block element.

2) You're missing the closing "}". This may work in some browsers, but it will throw an error in others.

3) You're creating multiple divs with the same id. This code is invalid and will cause some browsers to (correctly) refuse to display it.

 

Hi

You didn't close <p> tag and also didn't specify p tage properties in css so i help you below also modify display: inline-block; for right left div style

i hope its help

 #bodycontatiner {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    width: 80%;
    overflow: auto;
    background-color: white;
}
#main {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: -5px;
    width: 70%;
    min-height: 500px;
    background-color: white;
    float: left;
}
#latestcontent {
    width: 80%;
    max-height: 100px;
}
#newestpostleft {
    display: inline-block;
    margin:auto;
    float: left;
    width: 70%;
    clear: both;
}
#newestpostleft p {
    margin-top: 0; 
    padding-top: 0;
}
#newestpostright {
    display: inline-block;
    margin:auto;
    float: right;
    width: 30%;
    clear: both;
}
#newestpostright p {
   margin-top: 0; 
   padding-top: 0;;
}
#rightbar {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    width: 30%;
    text-align:right;
    min-height: 200px;
    float: left;
}

Code (markup):

Now HTML PART

<div id="latestcontent">
        
                <?php require('connect.php');
                
                $result = mysql_query("SELECT * FROM articles ORDER BY article_id DESC ")
                or die(mysql_error());  
                // keeps getting the next row until there are no more to get
                while($row = mysql_fetch_array( $result )) {
                // Print out the contents of each row into a table
                echo "<div id='newestpostleft'>";
                echo '<p><a style="font-size: 10px" href="'. $row['url'] .'">'. $row['article_name'] .'</a>'; echo "</p></div><div id='newestpostright'>";    echo '<p style="font-size: 10px">'; echo $row['posted'];    echo "</p></div>";
                // author + date
                
                }

                ?>
            </div>

Code (markup):

cheerS

Regards,

D Najmi

 

it didnt work, it made the date go a line down (not what i want)
and also made my right bar go to the bottom of the page

 

Kurt, after a </div>, the next item in the flow will be on the next line. Either change your divs to spans if you don't want that behavior, or position the date (using a negative value for the vertical position) with absolute position in CSS. Then position the right bar with absolute position in CSS.

 

remove float:left; from below class
#newestpostleft {
margin-top: 0px;
margin-bottom: 0px;
float: left;
width: 70%;
}

 

how to upload meta tags in phpmyadmin ?

 

Hi,
You can set Meta tags in HTML >> Head tag.

 

Can you post full CSS / PHP CODE ..

I didn't see Date in you code just a comment like // Author +date .

You can alos use <UL><LI> instead of <p> tag .

D Najmi

 

<html>
<head>

<title>Motor Bike Central</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
    <div id="header">
        <div id="logo">
            <a href="http://motorbikecentral.com/test/test.html"><img src="logo.jpg" width="400" height="75" /></a>
        </div>
        <div id="searchbar">
            <form action="searchbar.php" method="get">
                <input type="text" name="kw" id="s" class="textInput" value="SEARCH MOTORBIKECENTRAL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
            <input type="image" value="Search" src="search.jpg" align="top"/>                  
            </form>
        </div>
    </div>

    <div id="menu">
        <ul id="navigation">
            <li><a href="http://www.motorbikecentral.com">Home</a></li>
            <li><a href="http://www.motorbikecentral.com">Features</a></li>
            <li><a href="http://www.motorbikecentral.com">Media</a></li>
            <li><a href="http://www.motorbikecentral.com">Off Road</a></li>
            <li><a href="http://www.motorbikecentral.com">Interviews</a></li>
            <li><a href="http://www.motorbikecentral.com">Blogs</a>
                <ul>
                    <li><a href="http://www.motorbikecentral.com">Kurts Blog</a></li>
                    <li><a href="http://www.motorbikecentral.com">Camerons Blog</a></li>
                </ul>
            </li>
            <li><a href="http://www.motorbikecentral.com">Business</a>
                <ul>
                    <li><a href="http://www.motorbikecentral.com">About Us</a></li>
                    <li><a href="http://www.motorbikecentral.com">Contact Us</a></li>
                </ul>
            </li>
        </ul>    
    </div>
    <div id="bodycontatiner">
        <div id="main">
        
            <div id="latestcontent">
        
                <?php require('connect.php');
                
                $result = mysql_query("SELECT * FROM articles ORDER BY article_id DESC ")
                or die(mysql_error());  
                // keeps getting the next row until there are no more to get
                while($row = mysql_fetch_array( $result )) {
                // Print out the contents of each row into a table
                echo "<div id='newestpostleft'>"; 
                echo '<p><a style="font-size: 10px" href="'. $row['url'] .'">'. $row['article_name'] .'</a>'; echo "</div><div id='newestpostright'>";    echo '<p style="font-size: 10px">'; echo $row['posted'];    echo "</div>";
                // author + date
                
                }

                ?>
            </div>
        
        </div>
        <div id="rightbar">
            <img src="illusionadvert.gif" width="325px" height="150px" border="1px">
        </div>
    </div>
    
    <div id="footer">
        <img src="logofooter.jpg" width="700" height="75" />
        <br />
        <hr />
        <div id="footerlinkscontainer">
            <div id="footerlinks">
                <p>Home</p>
            </div>
            
            <div id="footerlinks">
                <p>Features <br />- poo
            </div>
            
            <div id="footerlinks">
                <p>Blogs <br /> - Kurts Blog <br /> - Camerons Blog
            </div>
            
            <div id="footerlinks">
                <p>Business <br /> - <a href="http://www.motorbikecentral.com/About Us.php">About Us</a> <br /> - <a href="http://www.motorbikecentral.com/Contact Us.php">Contact Us</a>
            </div>
        </div>
    </div>
    
</body>
</html>

PHP:

html {
    margin: 0px;
    padding: 0px;
}
body {
    margin: 0px;
    padding: 0px;
    font-family: Arial;
    background-image:url('background.gif');
}
#header {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    width: 80%;
    height: 80px;
    background-color: #000;
}
#logo {
    position: absolute;
    float: left;
}
#searchbar {
    position: absolute;
    right: 10%;
    top: 1%;

    
}
.textInput
{
width: 200px;
height: 25px;
border: 0px;
background: #FFF;
color: #000;
font: 10px Arial;
}
#navigation{
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    width: 80%;
    height: 25px;
    background-color: #000;
    list-style:none;
    font-weight:bold;
    text-align: center;
}
#navigation li{
    float:left;
    margin-right:75px;
    position:relative;
}
#navigation a{
    display:block;
    padding:5px;
    color:#FFF;
    background:#000;
    text-decoration:none;
}
#navigation a:hover{
    color:#FFF;
    background:#FFF;
    text-decoration:underline;
}

/*--- DROPDOWN ---*/
#navigation ul{
    background:#000; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
    background: #000; /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
    list-style:none;
    position:absolute;
    left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#navigation ul li{
    padding-top:5px; /* Introducing a padding between the li and the a give the illusion spaced items */
    float:left;
}
#navigation ul a{
    white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#navigation li:hover ul{ /* Display the dropdown on hover */
    left:0; /* Bring back on-screen when needed */
}
#navigation li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    background:#000;
    text-decoration:underline;
}
#navigation li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
    text-decoration:none;
}
#navigation li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
    background:#000;
    text-decoration:underline;
}
#bodycontatiner {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    width: 80%;
    overflow: auto;
    background-color: white;
}
#main {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: -5px;
    width: 70%;
    min-height: 500px;
    background-color: white;
    float: left;
}
#latestcontent {
    width: 80%;
    max-height: 100px;
}
#newestpostleft {
    margin-top: 0px;
    margin-bottom: 0px;
    float: left;
    width: 70%;
}
#newestpostright {
    margin-top: 0px;
    margin-bottom: 0px;
    float: right;
    width: 30%;
}
#rightbar {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    width: 30%;
    text-align:right;
    min-height: 200px;
    float: left;

}
#footer {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    width: 80%;
    min-height: 300px;
    background-color: #000;
    text-align: center;
}
#footerlinkscontainer {
    color: #FFF;
    float: left;
    line-height: 20px;
    margin-bottom: 20px;
    padding:  0 20px;
    text-align: center;
    width: 100%;
}
#footerlinks {
    font:bold 15px Arial;
    display: inline;
    float: left;
    text-align: left;
    padding: 0px 0px 5px 40px;
}
#footerlinks a {
    color: #FFF;
    text-decoration: none;
}
#footerlinks a:hover{
    text-decoration: underline;
}

Code (markup):