Hi, I have a site, and was wondering why the responsive design will not work in a top.php file but it did in the .css file. Is this how it works? Would I need to add it in the CSS and then link to it? Also How do I make a sidebar the full page height. Here is the code: #sidebar-wrapper { float: left; width:29%; padding:10px; border-right:1px solid #ccc; height:100%; } Code (markup): The sidebar doesn't go to the same height as the content. Help on both these issue would be much appreciated. Thanks
It's hard to say without seeing the whole design -- snippets are like doing brain surgery over a time-phone to 1887. In terms of your media queries, the best approach I've found is to put them at the end of your stylesheet for screen media... are you using the MEDIA attribute on your LINK? For your screen appearance are you setting it to "screen,projection,tv"? How are you even declaring your media queries? Did you build a proper elastic semi-fluid layout before you started trying to apply responsiveness to it? Though usually percentage widths on a column are actually a bad idea, an elastic (em) width is usually easier to control and just as accessible. Small columns elastic with the big column fluid is usually the best approach. Though your 'issue' of a side column not going to the same height, that's just how CSS works. usually developers use something like faux-columns ( a background to fake it looking like it stretches) to pull this off. When the faux column needs elastic or dynamic width, you aPo (position absolute) a spare DIV underneath the column, set to "bottom:0; left:0; width:29%; height:999em;" -- it will get chopped off at the top by the page height or the first wrapper it comes across. CSS3 adds the new flex-box way of building a website, but it's not what I'd call 'real world' deployable for widths yet, though for height it's ok so long as you plan on it not working via graceful degradation. (meaning when it doesn't work, the page is still usable even if it's not 'perfect' -- something responsive design is ALSO supposed to be about). Some other advice, avoid declaring padding the same time/direction as width, it's just too unpredictable -- especially on legacy browsers. Pad or margin the content instead. Again though, REALLY hard to diagnose further without seeing the actual page's HTML and CSS -- as in ALL of it, not some crappy little snippet that doesn't tell us anything about what you've got so far.
This is the code I have for the sidebar <aside id="sidebar-wrapper"> BUNCH OF PHP HERE </aside> Code (markup): As for the queries, I am doing it with mid height, width etc. It works when I resize my browser but it doesn't on my phone or other mobile devices.
Doesn't tell me what you have around the sidebar, how the content interacts with the sidebar, what else you have going on with the page to interact with that, and so forth. Though it DOES reek of using ASIDE for a non-semantic purpose much akin to the deprecated CENTER tag; particularly since I very much doubt your content is a literary aside (like Ferris explaining why he got a computer and his sister got a car) -- and using it to say something is just 'off to one side' might not even apply when you make the site responsive. Of course, the same could be said of using the term 'sidebar' in the ID. Though that's why I don't believe in using ANY of that HTML 5 nonsense either. I would suggest doing yourself a favor and use an actual RECOMMENDATION doctype. ... but again, without seeing the WHOLE page (markup and CSS) I can't say what/where you'd attach faux-columns, if something else you are doing is interfering with the positioning or flow of the ASIDE, and so forth.
I have put the entire top.php script here: http://pastebin.com/e3nTfryq Now you will be able to see the problems and hopefully help me. Also if you can help with the responsive stuff it would be a greater help. Thanks
You have HTML 5 elements and CSS targeting HTML 5 in a XHTML doctype -- you seem to have a ridiculous number of media queries thanks to trying to turn fixed layouts responsive, The CSS is bloated and redundant, you have nothing even remotely resembling semantic markup, tags like CENTER and FONT that have NO business being used on any website written after 1997, tables crapping all over a form for no good reason, incomplete/inaccessible forms (as in no FIELDSET or LABEL), CENTER wrapping the doctype and HTML which is outright gibberish, run-on sentence as a menu, horizontal rules when you aren't changing the topic, numbered heading orders that don't make any sense under ANY HTML rules (2, 4 or 5), static CSS in the markup, most likely that fat bloated jQuery crap for nothing (not a fan)... ... and that's without even talking about throwing accessibility out the window with px metric fonts, zero graceful degradation, and of course the storage of connection data in globals and using the mysql_ functions we were supposed to stop using eight years ago. I would HIGHLY suggest throwing that ENTIRE mess in the trash and starting over with MODERN coding techniques. There is quite literally NOTHING I would even TRY to save from that mess. NOTHING you are doing there is compatible with responsive layout, as it completely fails at all the accessibility stepping stones you should have before you even TRY to make a site responsive. Those stepping stones being semantic accessible markup and content, progressively enchanced into an elastic semi-fluid layout with dynamic (non-px) fonts. It's flawed to the core, and any silver bullet fixes is just dumping a can of shellac on a pile. Just to give you an idea what I mean, there is likely little reason for that to be much more than: <?php session_start(); include('db.php'); // should create $db as a PDO object if ($user = $_SESSION['user']) { $userId = $_SESSION['id']; $statement = $db->prepare(' UPDATE users SET lastseen = NOW() WHERE id = :id '); $statement->execute([':id' => $userId]); $messageStmt = $db->prepare(' SELECT count(*) FROM messages WHERE to_user = :toUser AND new = 1 AND to_delete = 0 '); $messageStmt->execute([ ':toUser' => $user ]); $messageCount = $messageStmt->fetchColumn(); $statement = $db->prepare( UPDATE messages SET new = 0 WHERE to_user = :toUser ); $statement->execute([':toUser' => $user]); $adminStmt = $db->prepare(' SELECT admin FROM users WHERE username = :userName '); $adminStmt->execute([ ':userName' => $user ]); $newChat = $adminStmt->fetchColumn() != '0'; } else { // you should probably set it to guest or check login here... $newChat = false; $messageCount = 0; } $usersOnlineStmt = $db->exec(' SELECT * FROM users WHERE lastseen > DATE_SUB(NOW(), INTERVAL 5 MINUTE) '); $usersOnlineCount = $usersOnlineStmt->rowCount(); // word of warning, rowCount is not reliable on anything other than mysql ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Clashing Clans </title> </head><body> <div id="pageWrapper"> <h1> Clashing Clans <span><!-- image replacement --></span> </h1> <ul id="mainMenu"> <li><a href="index.php">Home</a></li> <li><a href="about.php">About Us</a></li> <li><a href="contact.php">Contact Us</a></li> <li><a href="clans.php">Clan Pages</a></li> <li><a href="members.php">Member List</a></li> <li><a href="chat.php">Chat<?= ($newChat ? ' <b>' . $newchat . '<b>' : '') ?></a></li>'; </ul> <div id="userBar"> <?php if ($user) echo ' <div id="welcome"> Welcome <a href='profile.php?id=$userid'><b>$user</b></a> - <a href='logout.php'>Logout</a><br /> <a href='inbox.php'>Inbox(', $messageCount, ')</a> - <a href='edit_profile.php'>Edit Profile</a> </div>'; else echo ' <form action="login.php" method="post" id="welcome"> <h2> Welcome <b>Guest</b><br /> Please Log in or register. </h2> <fieldset> <label for="login_username">Username:</label> <input type="text" name="username" id="login_username" /><br /> <label for="login_password">Password:</lable> <input type="password" name="password" id="login_password"><br /> <input type="submit" value="Login" class="submit" /> </fieldset> <div> <a href="register.php">Register</a> <a href="reset.php">Reset Password</a> </div> </form>'; } echo ' <div id="usersOnline"> <h2>Users online:</h2>'; if ($usersOnlineCount == 0) echo ' <p>No Users Online</p>'; else { echo ' <ul>'; while ($row = $usersOnlineStmt->fetch(PDO::FETCH_ASSOC)) echo ' <li><a href="profile.php?id=', $row['id'], '">', $row['username'], '</a></li>'; echo ' </ul>'; } echo ' <!-- #usersOnline --></div> <!-- #userBar --></div>'; Code (markup): NOT that I'd actually have the doctype and header in the file since that belongs in an include (and probably a function) as well -- nor do I usually open and close <?php ?> so much. In terms of the CSS to be applied, I'd have to see (as I keep saying) the full page running -- but really it's such a late '90's style mess and hodge-podge of mismatched methodologies, trying to make that responsive is like trying to turn a Reliant Robin into something that can compete with a Zonda. This isn't a 'quick help', this is something that DESPARATELY needs to be started over from scratch and dragged kicking and screaming out of the 1990's.