so I have this little box on my site that displays links about the user when logged in. I just added a feature where it gets how many unread messages the user has and displays it next to messages "Messages (1)". It just messed up the formatting completely and I tried to fix it but it isn't cooperating. I have been fighting it for over an hour, any help would be greatly appreciated.
To see what I am talking about, go to the link and the box is in the top right corner. I am trying to get the links to be inline. So it should read:
My Account Messages (0) Logout
right now, the logout is
in a weird position and I can't seem to resolve it.
URL: http://www.clanrippgaming.net/
Thanks a bunch
Here is the php code:
echo "<div class='logged_in'>";
echo "<div class='welcome'>".$user->data['username'] ;"</div>";
echo "<div class='account'>My Account</div>";
echo "<div class='account'>Messages (".$user->data['user_new_privmsg'].')';"</div>";
echo "<div class='account'>Logout</div>";
echo "</div>";
And the CSS for it:
.logged_in {
background-image:url(images/bg_login2.png);
border:3px solid#000000;
outline:1px solid#BDBDBD;
width:304px;
height:55px;
margin-left:-2px;
padding-top:5px;
}
.logged_out {
margin-right: 22px;
position: relative;
}
.logged_out_txt {
margin-top:-20px;
}
.welcome {
color:#B40404;
font-size:22px;
font-family:"Rockwell";
padding-left:15px;
float:left;
font-weight:bold;
}
.account {
font-weight:normal;
list-style:none;
float:right;
position:center;
padding:0px;
margin-top:-5px;
font-size:16px;
text-decoration:underline;
margin-right:15px;
display: inline;
}
.account a:hover {
color:#D8D8D8
}
echo '<div class="account">Messages ('.$user->data["user_new_privmsg"].')</div>';
I think that should do the trick.
My tip: be consistent, choose what you want to use: double quote for attributes? Okay, then stick with that, don't go switching that over mid-code.
Related
I want to create a div where an image is on the left side and the text on the right side. I want to create this with PHP. It looks like this in Firefox:
but the situation is different in Chrome on Windows: But on Ubuntu appears totally correctly!
I create the HTML with this PHP script:
echo'<div class="callout large clearfix card">';
echo'<div class="float-left">';
echo '<img src="img/'.$card['cardimg'].'">';
echo '</div>';
echo'<div class="float-right carddescription">';
echo '<div class="title">';
echo $card["description"];
echo "</div>";
echo "<br>";
echo '<div class="additionalinfo">';
echo htmlspecialchars_decode($card["additionalinfo"], ENT_QUOTES);
echo '</div>';
echo "<br>";
echo '<div class="creator">';
echo "creator: ".$card["uploader"];
echo '</div>';
echo '</div>';
echo '</div>';
And I use foundation CSS with this few rules:
#media screen and (min-width: 800px) {
.card{
margin-top: 2%;
margin-bottom: 2%;
}
.card img{
max-width: 20em;
height: auto;
}
.card .carddescription{
max-width: 70%;
}
.card .title{
font-size: 2.5em;
background-color: black;
color: white;
padding-left: 5%;
padding-top: 1%;
padding-bottom: 1%;
}
.card .additionalinfo{
font-weight: bold;
padding-top: 1%;
}
.card .creator{
padding-top: 2%;
text-align: right;
font-style: italic;
}
}
I also have very similar rules for the screens which are smaller, but those work correctly, as I see, on Chrome too.
How and why can this happen? I don't use any browser-specific rule as I know. How can I solve this problem?
If you are using PHP with the the Foundation CSS framework, you should check out a package I wrote to address problems like this, PHPFUI. It is a completely object oriented PHP solution to producing web pages with PHP. Basically you use patterns in the framework to solve problems like this. I wrapped all the basic Foundation concepts in PHP, so you don't even need to figure out the HTML, which can get pretty gnarly. Of course you could write all that HTML by hand, but why bother? It is a solved problem. You don't write assembly language for the same reason, we have tools (languages, including markup), to abstract all this. Just write to the concept and let the tools do the work.
To do what you want, it would look like this:
namespace PHPFUI;
// Your autoloader here
include '../vendor/autoload.php';
$page = new Page();
$page->addStyleSheet('/css/styles.css');
$mainColumn = new \PHPFUI\Cell(12);
$mainColumn->addClass('main-column');
$gridX = new GridX();
$colA = new Cell(4);
$colA->add(new Image('https://foundation.zurb.com/sites/docs/assets/img/rectangle-1.jpg'));
$gridX->add($colA);
$colB = new Cell(8);
$colB->add(new SubHeader('PHPFUI Rules!'));
$colB->add('This is some text next to the photo on the left');
$gridX->add($colB);
$page->add($gridX);
echo $page;
Pretty simple!
I'm kind of stuck on this. I have to put an horizontal list of different states of some services I'm working on. I have 3 different states ( Green, Orange, Red ), and I want to "go back to the line" whenever the state changes. I have the feeling I need to write something like "you go xx pixels down" to correctly have my lists in order, but it still keeps packing weirdly. I don't really know if I'm clear.
Here's part of the code :
$brequest = 1;
echo "<ul>\n";
foreach($arrstate as $sun){
for($x=1 ; $x<4 ; $x++){
if($sun[1] == $x){
if($brequest != $x){
$brequest = $x;
echo "</ul><ul>\n"; //Note that it's just a try here
}
$affichage=" <img src=\"images/" . $images[$x] . ".svg\" title=\"" . $texte_alt[$x] . "\" alt=\"" . $texte_alt[$x] . "\" height=\"40px\" style=\"vertical-align:middle\"";
$comment="<br /><br />".$sun[2]."<br /><br/>Last Updated : ".$sun[3]."<br /><br />By ".$sun[4]."</li>\n";
echo "<li style=\"background-color: " . $couleur_etat[$x] . "\">" . $sun[0] . $affichage. $comment;
}
}
}
echo "</ul>";
The array is sorted by states, and the <style> part is :
<style>
ul { list-style-type: none;}
li {
display: inline;
margin: 1em;
float: left;
padding: 1em;
border: 1px solid black;
border-radius: 15px;
width: 15em;
min-height: 3em;
font-weight: bold;
}
</style>
Feel free to ask me anything about the code. Thank you in advance for your answer !
Answering my own question to help.
I just had to clear:left every <ul> I use, this way the float will stop putting images at the same row. It goes like this :
echo "</ul><ul style=\"clear:left\">";
I know CSS in line is not that much appreciated, but I began HTML PHP & CSS Yesterday. So, let's run with it for the moment !
( And sorry for the bad example, I'll give more attention to details next time. Thank you ! )
I have posts that are echoed out of my mysql database. If there is more than one, they are echoed in separate divs in order of decreasing rank number (taken from DB). However, when the divs are echoed, the all overlap on the top. I believe this is a CSS problem. The thing is that each div has several sub divs. I think the "position" attribute might have contributed to this. I would like for each div to be echoed out with about 100px between each one. Thanks.
CODE:
$post = array();
$f=0;
while ($row=mysql_fetch_assoc($g)){
$post[]=$row['post'];
echo "<div id='area'>";
echo "<div id='badge'><span style='color: gray;'>Answered by:</span>";
include 'badge.php';
echo "</div>";
echo "<div id='areapost'><pre>$post[$f]</pre></div>";
$f++;
}
echo "</div>"; /*end area*/
CSS CODE:
#area {
background-color: #fff;
border: 1px solid red;
width:500px;
height: 300px;
}
#badge{
position: absolute;
top: 0px;
left: 0px;
}
#areapost{
position: absolute;
top: 0px;
right: 0px;
height: 300px;
width: 380px;
background-color: #E0E0E0;
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}
The "area" is the entire post container. The areapost and badge are elements inside "area"
All elements in the page must have a unique id, otherwise you get unexpected behavior.
Fix this, and see where it puts you.
Try moving the opening "area" div tag out of the conditional:
while ($row=mysql_fetch_assoc($g)){
$post[]=$row['post'];
echo "<div id='area'>";
should be:
echo "<div id='area'>";
while($row=mysql_fetch_assoc($g)){
$post[]=$row['post']
since you want area to contain everything else
You almost always need to open and close divs at the same level of looping. Here you are opening the <div id='area'> inside the while loop and closing it outside the while loop. They need to either both in, or both out. Also, your id's ought to be unique, over your whole page, else you should be using classes on those divs.
You also need to not position all these areas absolutely. I've added a content div around everything. Position this absolutely, and the area class relatively. You don't need the styling on #area, change it to .area.
$f=0;
echo "<div id='content'>"
while ($row=mysql_fetch_assoc($g)){
$post[]=$row['post'];
echo "<div id='area-'" + $f + " class='area'>";
echo "<div class='badge'><span style='color: gray;'>Answered by:</span>";
include 'badge.php';
echo "</div>";
echo "<div class='areapost'><pre>$post[$f]</pre></div>";
echo "</div>"; /*end area*/
$f++;
}
echo "</div>"
also try using relative positioning, with 100px space on each. this way each div will be spaced relative to the previous div, rather than one spot, causing them to overlap.
So far i have this code:
function changeGeoLoc($a,$b,$c){
echo "<ul style='list-style-type: none; display:inline;'>";
while(list(,$geoloc) = each($a) AND list(,$Details) = each($b)) {
echo "<li style='list-style-type: none; display:inline; padding-right:5px;'>$Details {$c->$geoloc} </li>";
}
echo "</ul>";
}
which produces this:
Does anyone know how to make the above centered so its in the middle?
Any ideas appreciated.
Thankyou
Update:
I have tried styling as a block and doing margin:0 auto with a fixed with but thats a problem, i need it to stretch along 100% of the width because the fields 'IP, City, Region, Country Name and Country Code will be filled in via GeoLoc services automatically, so having a fixed width of say 500px is not big enough therefore it needs to be the whole width, I want it centred because if there is someone viewing my webpage that there info doesnt use the whole width it would look better centered.
I hope this makes sense.
Try this:
<ul style='list-style-type: none; display:block; width:500px; margin:0 auto;'>
If you want to center the content of the UL without providing a fixed width probably the easiest way is the following:
function changeGeoLoc($a,$b,$c){
echo "<ul style='list-style-type: none; text-align: center;'>";
while(list(,$geoloc) = each($a) AND list(,$Details) = each($b)) {
echo "<li style='list-style-type: none; display:inline; padding-right:5px;'>$Details {$c->$geoloc} </li>";
}
echo "</ul>";
}
Wrap the ul in a div and then add this CSS:
.className {
margin:0 auto;
}
HTML:
<div class="className">
<ul style='list-style-type: none; display:inline;'>
<li style='list-style-type: none; display:inline; padding-right:5px;'>Stuff</li>
</ul>
</div>
Change the ul style to block
I have a classifieds section. I want to allow users to share a particular ad from a page. I have created a page that allows a user to print the ad out, so I used that page as the actual share link. The problem is, that when I use the script that opens it's own smaller window, no matter what I specify as the link it shares the entire page, not the URL I specify. Here is the code I am using.
<script>function fbs_click() {u='http://<?php echo $_SERVER['SERVER_NAME']; ?>/classifieds/printAd.php?AdID=<?php echo $row_rsAds['AdID']; ?>';t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> html .fb_share_button { display: -moz-inline-block; display:inline-block; padding:1px 20px 0 5px; height:15px; border:1px solid #d8dfea; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right; } html .fb_share_button:hover { color:#fff; border-color:#295582; background:#3b5998 url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right; text-decoration:none; } </style> <a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" class="fb_share_button" onclick="return fbs_click()" target="_blank" style="text-decoration:none;">Share</a>
if I use the following code, it works just as it should, but it won't open in a new smaller window, it goes to the facebook site and away from my site.
Share on Facebook
<a class="boldbuttonsFaceBook" href ="http://www.facebook.com/sharer.php?u=http%3A%2F%2F<?php echo $_SERVER['SERVER_NAME']; ?>%2Fclassifieds%2FprintAd.php?AdID=<?php echo $row_rsAds['AdID']; ?>&t=Dragboats.com Classifieds"><span>SHARE ON FACEBOOK</span></a>
Thanks for you help!
function fbs_click() {
u=link;
t=document.title;
w = window.screen.width;
h = window.screen.height;
window.open(link,'sharer','menubar=1,resizable=1,width='+w+',height='+h+'25');
}
The above opened it for me in the same size as the screen resolution. Try it out and let me know.
I actually figured it out. Put the script in the head of the document, and just referenced the function with parameters to get the desired result. Worked perfectly.
In the head:
<script>
function fbs_click(u, t) {
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;}
</script>
<style>
html .fb_share_button {
display: -moz-inline-block;
display:inline-block;
padding:1px 20px 0 5px; height:15px;
border:1px solid #d8dfea;
background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right;
}
html .fb_share_button:hover {
color:#fff; border-color:#295582;
background:#3b5998 url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top right;
text-decoration:none;
}
</style>
And then for each ad:
<a rel="nofollow" href="#" class="fb_share_button" onclick="return fbs_click('http://<?php echo $_SERVER['SERVER_NAME']; ?>/classifieds/printAd.php?AdID=<?php echo $row_rsAds['AdID']; ?>', 'Dragboats.com Classified Ad' )" target="_blank" style="text-decoration:none;">Share</a>
Worked like a dream.