Flowdy
Members
-
Joined
-
Last visited
-
I've been following a bootstrap tutorial on YouTube, to try and understand the concept. I've followed it more the once now. The first time the nav collapse worked along with the drop down menu, but now it won't seem to work, yet i haven't done anything different. It makes the button when the screen is reduced in size, it just doesn't do anything when i click on it, yet in the tutorial it does. What has gone wrong? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/bootstrap.min.css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Life+Savers:400,700' rel='stylesheet' type='text/css'> <!--[if lt IE 9]> <script src="bootstrap-3.0.0/assets/js/html5shiv.js"></script> <script src="bootstrap-3.0.0/assets/js/respond.min.js"></script> <![endif]--> </head> <body> <div class="navbar navbar-default"> <div class="container"> <a href class="navbar-brand">Porcellus</a> <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="collapse navbar-collapse navHeaderCollapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> </ul> </div> </div> </div> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="jquery.js"></script> </body> </html>
-
I'm new to responsive layouts, i have no idea how to do them, though i have tried, I've looked and tried tutorials via google, none of them seem to work. Can anyone tell me the best free guides out there? I want to learn how to make a navigation menu into a drop down menu when the screen is a certain width, etc, Sorry if this is in the wrong place.
-
I'm literally brand new to jQuery and have been playing around, so far good. Until now, I have a fade in div which contains a form and it fades out when clicked anywhere else on the page, this includes the actual forms, so i can't fill the form out before it fades out. My question is how do i fix it so that my form will let me fill in the fields, but will fade out when clicked any where else on the page. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="style.css"> <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> </head> <body> <div id="wrapper"><!-- START OF WRAPPER --> <header></header> <nav></nav> <div id="infobar"> <ul> <li><a id="log" href="#">LOGIN</a></li> </ul> </div> <div id="loginform"> <form> <input id="user" type="text" name="user" placeholder="Username" /> <input id="pass" type="password" name="pass" placeholder="Password" /><br /> <button id="loginbut">Login</button> </form> <p id="forgot">Forgotten Password</p> </div> <aside></aside> <section></section> <footer></footer> </div><!-- END OF WRAPPER --> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="click.js"></script> </body> </html> $('#log').click(function() { $('#loginform').fadeIn('slow'); }); $(document).on('click', ':not(#log)', function(e){ if(e.target.id !== 'log') { $("#loginform").fadeOut('slow'); } });
-
Ha, I can't believe i missed that. Thanks. Is there another way i can fix this, i don't really want to change the size of the header, I have the logo set to where i would like it. Can i not layer the divs differently?
-
I'm really confused. I've never had this problem before. I'm making a site for a friend. As i design i preview as i go as everyone does, however this time the links are not working. I'm using the same code and never had this problem before. Now i'm really confused. All i want to do is preview them. /* GENERAL */ a {text-decoration:none;} a:link {color:#FFFFFF;} /* unvisited link */ a:visited {color:#FFFFFF;} /* visited link */ a:hover {color:#878C6D;} /* mouse over link */ a:active {color:#FFFFFF;} /* selected link */ /* HEADER */ #headerwrap {height:150px;} header {height:150px;} #logo {width:918px; height:146px; background-image:url(images/logo-trans.png); position:relative; top:45px;} #navwrap {height:50px; background-image:url(images/navbar.jpg);} #navi {height:50px;} #links {width:700px; height:50px; float:left;} #navi ul {list-style:none; margin-top:10px; margin-left:50px} #navi li {display:inline-block; width:70px; padding:5px; text-align:center; color:#edc5b5; margin:auto;} #social {height:50px; width:260px; float:right;} #social ul {list-style:none;} #social li {display:inline-block; width:20px;} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SITE NAME</title> <meta name="description" content="An interactive getting started guide for Brackets."> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="text.css"> <link rel="stylesheet" href="960_24_col.css"> <link rel="stylesheet" href="stylesheet.css"> <link href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'> </head> <body> <!-- HEADER SECTION --> <div id="headerwrap"><!--START OF HEADER WRAP--> <header class="container_24"> <div id="logo"></div> </header> </div><!--END OF HEADER WRAP--> <div id="navwrap"><!--START OF NAV WRAP--> <div id="navi" class="container_24"> <div id="links"> <ul> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a></li> <li><a href="#">LINK</a></li> </ul> </div> <div id="social"> <ul> <li><a href="#"><img src="images/twitter.png" alt="twitter"></a></li> <li><a href="#"><img src="images/facebook.png" alt="facebook"></a></li> <li><a href="#"><img src="images/skype.png" alt="skype"></a></li> </ul> </div> </div> </div><!--END OF NAV WRAP--> <!-- END OF HEADER SECTION --> </body> </html>
-
I've been playing around with the grid system. I have this box that i can't seem to figure out how to get it the right location. I have attached an image. It's the bottom left box which i'm trying to get under the top left. I've tried floating it didn't make a difference. * { font-family: 'Josefin Sans', sans-serif; font-weight:400; } h1 { font-family: 'Cinzel', serif; font-weight:400; } #header { height:100px; background-color:#000; } #topleft { height:200px; background-color:#066; } #topright { height:200px; background-color:#066; margin-bottom:10px; margin-top:10px; } #bottomright { height:200px; background-color:#066; } #bottomleft { height:200px; background-color:#066; float:left; } #main { background-color:#960; height:400px; } <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="960.css"> <link rel="stylesheet" type="text/css" href="960_12_col.css"> <link rel="stylesheet" type="text/css" href="reset.css"> <link rel="stylesheet" type="text/css" href="text.css"> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <link href='http://fonts.googleapis.com/css?family=Cinzel:400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400' rel='stylesheet' type='text/css'> </head> <body> <div class="container_16"> <div class="grid_16" id="header"></div> <div class="grid_4" id="topleft"></div> <div class="grid_8" id="main"></div> <div class="grid_4" id="topright"></div> <div class="grid_4" id="bottomright"></div> <div class="grid_4" id="bottomleft"></div> </body> </html>
-
-
I currently use windows but used mac at university..I do prefer mac abit more but i can't choose both have they benefits for me.
-
Thanks guy. I wasn't expecting such a response.. I will be giving these ago
-
-
Sorry if this is the wrong place. Ive been wanting to learn php for ages now and now ive gotthe grasped with html and css I was wondering. What is the best way to learn php and if anyone can lead me in the right direction for some good tutorials. Thanks.
-
Ok....so i took away the table element which made it easier so thanks for that however it still not aligned in other browsers ie9 and ff. I put the big code at the top like suggest but am i meant to do something else as well. thanks
-
-
Thanks that worked, Now i have another problem. I have attached another screen. The code is the same apart from the footer height. I have added clears to the wrap but it didn't work. The question is how do i move the boxes down which i've shown on the picture. also the space between the footer how do i close that edit - nevermind i fixed it
-
-
sorry here is the codes The HTML <body> <div id="wrap"> <div id="content"> <div id="header"></div> <div id="nav"></div> <div id="main"></div> <div id="footer"></div> </div> </div> </body> The CSS #wrap { width:980px; margin:0 auto; } #content { width:900px; margin:23px; padding:9px; } #header { width:900px; height:150px; } #nav { float:left; width:300px; } #main { float:right; width:600px; } #footer { clear:both; width:900px; }
-
Im in need of more help. Im getting really confused.... My code is as follows. <div id="header></div> <div id="navigation"></div> | this floats left <div id="main"></div> | this floats right <div id="footer"></div> | this is the problem i cant see this unless i type something in. Im assuming its hidden behind the two floating. What am i doing wrong. Thanks
-
I didnt even think about that its a free code as i don't know php yet (if i ever will) I just thought because it was a free code just to copy and paste.
-
Sorry about the double post(if anyone can fix this please do) it didn't seem to allow me to attach an image during edit. the code for the form is <div id="form"> <form action="FormToEmail.php" method="post"> <table border="" style="background:#ffffff" cellspacing="5"> <tr align="left"><td>Name</td> <td><input type="text" size="28" name="name"></td> </tr> <tr align="left"> <td>Email </td><td><input type="text" size="28" name="email"></td></tr> <tr align="left"> <td>Tel No </td><td><input type="text" size="28" name="tel"></td></tr> <tr align="left"> <td valign="top">Message</td><td><textarea name="comments" rows="6" cols="27"></textarea></td></tr> <tr align="left"><td> </td><td><input type="submit" value="Send"><font face="arial" size="1"> <a href="http://FormToEmail.com">PHP Form</a></font></td></tr> </table> </form> </div> ex is the preview in browser and ex2 is preview in DW as you an see there is spacing in DW but not browser
