Quick question. You know when you open a new window & at the top of the page you see the tab for said window & you'll see whatever you typed in your title tag & you'll see a little image (website's logo). How do I place an image/logo in that little tab? Do I have to place an image link within my title tag or something?!
Here's my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Round Table</title>
<meta charset="utf-8">
<link rel="stylesheet" href="RTH.css">
<script src="RTH.js"></script>
</head>
<body>
<H1> Come & take a seat at the Round Table B] </H1>
<p> "Where <i>REAL MUSIC</i> still exists"</p><br><br>
<ol type=I> <H2> <li>BEAT$</li>
<br><li>Music by Mercile$$</li>
<br><li>Spoken Word</li> <br>
<li>Tale$ of a Blind Sword$man</li> </H2> </ol><br><br><br>
<dt><i>RTH</i> consists of:</dt>
<dd>Show Luciano, Pistol McFly, Dior, YZ, & last but not least...Mercile$$</dd>
<p> thee music industry is DEAD !! i hope to bring restoration.<br>
~mercile$$</p><br>
<footer>© Round Table</footer>
</font>
</body>
</html>
& here's my CSS file:
body {
background-image: url("Round Table, Hoe II.jpg");
background-repeat: Repeat;
font-family: AR Christy, Kozuka Gothic Pr6N, Cooper std;
color: Red;
text-shadow: 1px 0 0 #CEA40C, 0 -1px 0 #CEA40C, 0 1px 0 #CEA40C, -1px 0 0 #CEA40C;
font-size: 25px;
margin: 0 auto;
text-align: center;
width: 700px;
}
h1 {
font-family: AR Christy, Kozuka Gothic Pr6N, Cooper std;
color: Red;
text-shadow: 2px 0 0 #CEA40C, 0 0px 0 #CEA40C, 0 2px 0 #CEA40C, 0px 0 0 #CEA40C;
margin: 0 auto;
text-align: center;
width: 700px;
}
i {
font-family: AR Christy, Kozuka Gothic Pr6N, Cooper std;
color: White;
text-shadow: 2px 0 0 #CEA40C, 0 0px 0 #CEA40C, 0 2px 0 #CEA40C, 0px 0 0 #CEA40C;
margin: 0 auto;
text-align: center;
width: 700px;
}
dt {
color: #1BD29B;
text-shadow: 4px 0 0 #CEA40C, 0 0px 0 #CEA40C, 0 4px 0 #CEA40C, 0px 0 0 #CEA40C;
font-size: 45pt;
padding: 10px;
}
dd {
color: White;
padding: 5px 10px 5px 10px;
background: #f03;
border: solid 2px #fff;
}
p {
padding: 5px 10px 5px 10px;
background: #f03;
border: solid 2px #fff;
}
footer {
}
its easy use this site to convert the image http://www.favicongenerator.com/
and then in the head, but change the name of ur image and path
<link rel="shortcut icon" type="image/png" href="img/logo-favicon.ico.png">
You need a square image or icon then put this code in your head
<link rel="icon" type="image/png" href="/path/image.png"/>
One important thing is to put your link between the head tags:
<html>
<head>
<link rel="shortcut icon" type="image/png" href="img/logo.ico">
</head>
.
.
.
</html>
Related
This one should make many scratch their head...
Could someone let me know why my <div> element (id 'container') is shifting down when the overflow-y is set to "scroll" in Microsoft Edge? Seems to work just fine in Firefox.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8" />
<style>
body {
border: 3px dotted red;
position: fixed;
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
overflow: hidden;
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div style="height: 95%; border: 2px dotted orange; background-color: blue; overflow: hidden;">
<div id="container" style="overflow-y: scroll; width: 60vmin; height: 95%; background-color: silver;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
for (var i = 0; i < 500; i++) {
$('#container').append('<div style="border: 1px solid silver;">Hello World!</div>');
}
</script>
</body>
</html>
Here are the screenshots for both Firefox and Microsoft Edge:
Firefox:
Edge:
Try to modify your code as below(demo):
<style type="text/css">
body {
border: 3px dotted red;
position: fixed;
width: 100%;
height: 100%;
justify-items: center;
align-items: center;
overflow: hidden;
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
<div style="height: 95%; width: 60vmin; border: 2px dotted orange; background-color: blue; overflow: hidden; margin-right:20px ; margin-top:20px; float:right">
<div id="container" style="overflow-y: scroll; width: 60vmin; height: 100%; background-color: silver;"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
for (var i = 0; i < 500; i++) {
$('#container').append('<div style="border: 1px solid silver;">Hello World!</div>');
}
});
</script>
The result in Microsoft Edge browser as below:
I would need some advice/assistance here. I'm trying to upload image but wampserver keeping showing me this error (Warning: POST Content-Length of 80237 bytes exceeds the limit of 750 bytes in Unknown on line 0 File not uploaded!) however i try to change php.ini setting but it still same, would appreciate if anyone can assist here. Thanks
here is my code
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Ajax Image Upload with jQuery - w3bees.com</title>
<!-- scripts -->
<script type="text/javascript" src="js/jquery.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<style>
a, h1{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 170%;
color: #645348;
font-style: italic;
text-decoration: none;
font-weight: 100;
padding: 10px;
}
body{
font: 14px Arial,Tahoma,Helvetica,FreeSans,sans-serif;
text-transform: inherit;
color: #582A00;
background: #E7EDEE;
width: 100%;
margin: 0;
padding: 0;
}
.wrap{
width: 700px;
margin: 10px auto;
padding: 10px 15px;
background: white;
border: 2px solid #DBDBDB;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
overflow: hidden;
}
#preview {
color: red;
}
#preview img{
margin-top: 30px;
max-width: 100%;
border: 0;
border-radius: 3px;
-webkit-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, .27);
box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, .27);
overflow: hidden;
}
input[type="submit"]{
border-radius: 10px;
background-color: #61B3DE;
border: 0;
color: white;
font-weight: bold;
font-style: italic;
padding: 6px 15px 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="wrap">
<h1>Ajax Image Upload with jQuery</h1>
<p>Valid formats: jpeg, gif, png, Max upload: 200kb</p>
<!-- loader.gif -->
<img style="display:none" id="loader" src="loader.gif" alt="Loading...." title="Loading...." />
<!-- simple file uploading form -->
<form id="form" action="ajaxupload.php" method="post" enctype="multipart/form-data">
<input id="uploadImage" type="file" accept="image/*" name="image" />
<input id="button" type="submit" value="Upload">
</form>
<!-- preview action or error msgs -->
<div id="preview" style="display:none"></div>
<p>© W3bees.com 2013</p>
</div><!--wrap-->
</body>
</html>
Ajax upload code:
<?php
$valid_exts = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
$max_size = 2000000 * 1024; // max file size
$path = 'uploads/'; // upload directory
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if( ! empty($_FILES['image']) ) {
// get uploaded file extension
$ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
// looking for format and size validity
if (in_array($ext, $valid_exts) AND $_FILES['image']['size'] < $max_size) {
$path = $path . uniqid(). '.' .$ext;
// move uploaded file from temp to uploads directory
if (move_uploaded_file($_FILES['image']['tmp_name'], $path)) {
echo "<img src='$path' />";
}
} else {
echo 'Invalid file!';
}
} else {
echo 'File not uploaded!';
}
} else {
echo 'Bad request!';
}
?>
wampserver version 2.4
php.ini 5.4.12
max_execution_time = 600000
max_input_time = 600000
memory_limit = 1000M
post_max_size = 750MB;
upload_max_filesize = 750M;
check your phpinfo()
see this part :
Loaded Configuration File
in my case its
/etc/php5/apache2/php.ini
and see if your editing the right php.ini file
after editing restart apache to reload php.ini file
I'm trying to create a chart on a webpage with each entry being coded as a div containing a <p> element, to number the entry, furthest to the left and a picture next to it. However when I try this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD\xhtml1-strict.dtd">
<html xmlns="hhtp://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<style>
.entry {
background-color: #99d699;
width: 600px;
height: auto;
margin-left: auto;
margin-right: auto;
padding: 1px;
border-color: #808080;
border-width: 2px;
border-bottom-style: solid;
position: relative;
overflow: hidden;
}
.entry p {
color: white;
font-weight: bold;
font-size: 30px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 10px;
}
.art {
width: 80px;
height: 80px;
margin-top: auto;
margin-bottom: auto;
margin-left: 10px;
float: left;
overflow: hidden;
}
</style>
</head>
<body style="background-color: #D6DDD6;">
<div class="entry">
<p>
1
</p>
<img class="art" src="http://wvs.topleftpixel.com/photos/2008/04/Dundas_Square_Pano_Fisheye_tunnel_crop.jpg" alt="Random pic" />
</div>
</body>
</html>
...the picture ends up underneath the paragraph. How can I cleanly position the image to the right of the paragraph?
Here is JSBin
Simply add below code in your CSS
p{
float:left;
}
I have a website I'm working on and I'm positive it is something obvious that I'm overlooking here.
My main issue and why I'm here: My page looks great in Chrome and Safari, but FF v.21 (Mac) takes the textcont and linkcont layers and puts them all the way to the right, outside of the container I have for them. I know they are floating, but I can't seem to get them to show correctly there.
*EDIT: 6-18 # 1p--*I solved the other issue, but Firefox still is putting the two inner containers OUTSIDE of the main content container.
*EDIT: 6-20 # 9:45a--*I found that if I added "Position: absolute;" to the #contentbox, everything seemed to work in Chrome, Safari, and Firefox (can't test it on IE currently), BUT my #copybox div (last layer that displays the year with copyright at the very bottom) would align overtop of the #contentbox at the top. I tried using absolute position on that div, but just made it visible, relative made it hidden--but still up top where it shouldn't be. Any ideas? If I can get the absolute positioning to work on the content, I just need a fix to keep the #copybox following the end of the #contentbox layer.
Firefox Screenshot: http://i41.tinypic.com/20t0xh0.png
Chrome/Safari (correct): http://i40.tinypic.com/a4y1ar.png
Style Code:
#charset "UTF-8";
/* CSS Document */
body {
background-color: #FAD434;
font-family: Helvetica, arial, sans-serif;
font-size: 14px;
}
#container {
width: 100%;
padding: 0px;
margin: 0 auto;
}
#headercont {
width: 900px;
margin: 0 auto;
}
#header {
width: 100%;
height: 65px;
margin: 0 auto;
background-color: #000000;
background-image:url(img/logo.png);
background-repeat: no-repeat;
background-position: left;
border-bottom: 2px solid #fad434;
}
#picheader {
height: 360px;
background-image:url(img/NHYC_BoySmile.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#contentbox {
width: 100%;
background-image: url(img/content_bkgd.jpg);
background-position: bottom center;
background-repeat: repeat-x;
background-color: #ffffff;
margin-top: 0px;
padding-bottom: 50px;
}
#contentcont {
width: 900px;
margin: 0 auto;
overflow: auto;
}
#textcont {
width: 70%;
padding: 0px 0px 25px 10px;
float: left;
}
#linkcont{
width: 25%;
padding-top: 63px;
padding-right: 10px;
padding-left: 10px;
float: right;
}
#copybox {
width: 100%;
font-size: 10px;
text-align: center;
padding: 15px;
}
/* --- HEADER TEXT --- */
h1 {
font-size: 40pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
h2 {
font-size: 24 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
h3 {
font-size: 18 pt;
color: #f28c3d;
border-bottom: 2px solid #FAD434;
text-transform: uppercase;
}
/* --- LINK LIST --- */
.links li {
list-style-type:none;
line-height: 20pt;
}
/* --- MENU --- */
#menu {
width: 100%;
margin: 0 auto;
padding-top: 325px;
}
#menu ul, #menu ul ul {
list-style-type: none;
padding: 0;
margin: 0 auto;
}
#menu ul li{
padding: 10px 25px;
position: relative;
float: left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-transform: uppercase;
}
#menu ul a:link, #menu ul a:visited{
display: inline-block;
color: #ffffff;
width: 90px;
padding: 5px;
text-decoration: none;
font-size: 12px;
font-weight: bold;
text-align: center;
}
#menu ul a:hover, #menu ul a:active {
background: #f28c3d;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Index.php Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NHYC - Ohio</title>
<link href="nhyc_styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="headercont">
<div id="header">
<p align="right"><img src="img/socialmedia_icons.png" alt="Social Media" border="0" usemap="#socialmedia" style="padding-right:15px; padding-top: 18px;"/>
<map name="socialmedia" id="socialmedia">
<area shape="rect" coords="2,4,27,25" href="#" target="_blank" alt="Facebook" />
<area shape="rect" coords="42,4,69,24" href="#" target="_blank" alt="Twitter" />
</map>
</p>
</div> <!--End of header-->
<div id="picheader">
<div id="menu">
<ul>
<li>About Us</li>
<li>Mission</li>
<li>Services</li>
<li>Admission</li>
<li>Employment</li>
<li>Contact</li>
</ul>
</div>
<!--End of navigation-->
</div> <!--End of picheader-->
</div> <!--End of headercont-->
<div id="contentbox">
<div id="contentcont">
<div id="textcont">
<?php
if (!isset($_REQUEST['topic']))
include("aboutus.php");
else
{
$topic = $_REQUEST['topic'];
$nextpage = $topic . ".php";
include($nextpage);
} ?>
</div><!--End of textcont-->
<div id="linkcont">
<h3>Resources</h3>
<ul class="links">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
<li>Link #4</li>
</ul>
</div> <!--End of linkcont-->
</div>
</div> <!--End of contentbox-->
</div> <!--End of container-->
<div id="copybox">
2013 © NHYC
</div> <!--End of copybox -->
</body>
</html>
#contentbox {
overflow: hidden;
}
...will correct your issue.
You have an uncleared float there, and overflow: hidden will clear it. Read more about block formatting context (the weird hidden CSS nuance that overflow: hidden applies) here.
I've found this cool plugin sweet menu and i'm having trouble with making the easeoutbounce animation stop when i click a link. I would like to have a 'downstate' when, by example, i click the home animation, i would like to see the animation on (exatly like the mouseover funcion (but without going back with mouseleave. I hope someone can help me because i'm new to all this code stuff and i'm starting to go Nuts:) Thanks in advance for your help!
here is the script:
<script type="text/javascript" src="Widgets/sweetMenu/jquery.easing.js"></script>
<script type="text/javascript" src="Widgets/sweetMenu/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="Widgets/sweetMenu/jquery.sweet-menu-1.0.js"></script>
<script type="text/javascript" src="Widgets/sweetMenu/jquery.sweet-menu-min-1.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#exampleMenu').sweetMenu({
top: 200,
padding: 8,
iconSize: 48,
easing: 'easeOutBounce',
duration: 500,
icons: [
'widgets/sweetmenu/images/home.png',
'widgets/sweetmenu/images/comments.png',
'widgets/sweetmenu/images/red_heart.png',
'widgets/sweetmenu/images/male_user.png',
'widgets/sweetmenu/images/yellow_mail.png',
'widgets/sweetmenu/images/computer.png'
]
});
});
</script>
Here is the css:
.sweetMenuAnchor{
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
border-top-right-radius: 4px;
-moz-border-radius-topright: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-bottomright: 4px;
color: #0071bb;
font-size: 24px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
background-color: #888888;
opacity: 0.6;
visibility: visible;
z-index: 999999;
}
.sweetMenuAnchor span{
display: block;
padding-top: 10px;
}
h1
{
display: block;
text-align: center;
font-size: 48px;
color: #ffffff;
text-shadow: 0px 0px 12px #000000;
font-family: "Trebuchet MS";
}
And Finally the HTML:
<ul id="exampleMenu">
<li>Home</li>
<li>Blog</li>
<li>portfolio</li>
<li>Hire Me</li>
<li>Contact</li>
<li>My Apps</li>
</strike>