FloydBenson

Thanks for the reply. I'll investigate installing a CMS.

Ahoy everyone, I have a 'news' section on my music website, but I don't think I've chosen a very robust approach. I update the news content by manually editing the HTML and re-uploading the news page. Date/times of news posts aren't automatically included, and neither are social media share icons. I like the look of websites where the news posts look like blog posts, with date/time/social media icons, etc but I'm not sure what to search for in order to learn the technique. Would I be right in saying that trying to embed blog posts from a WordPress is not desirable? Some websites (http://www.gunsnroses.com/ or http://www.greenday.com/ as quick examples) look like their news sections are manually created pages, saved in a /news/ folder, using the article title as the page title. Would this be the work of a CMS? Any advice on how news sections are typically/professionally run would be very much appreciated. Many thanks.

Hi everyone, I'm quite new to PHP, and I've recently reconfigured my website to use global PHP headers and footers. This involved changing all my pages from the .html extension to .php. I have included code in the .htaccess to remove the .php from the URL of my pages, but for some reason this now results in my PHP email form not working. Instead of processing a message sent through the form, the result returns the $feedback_page when the submit button is pressed. Here is my .htaccess code: Options +FollowSymLinks -MultiViews # Turn mod_rewrite on RewriteEngine On RewriteBase / ## don't touch /forum URIs RewriteRule ^forums/ - [L,NC] ## hide .php extension snippet # To externally redirect /dir/foo.php to /dir/foo RewriteCond %{THE_REQUEST} ^[A-Z]{3,}\s([^.]+)\.php [NC] RewriteRule ^ %1 [R,L] # To internally forward /dir/foo to /dir/foo.php RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME}.php -f RewriteRule ^(.*?)/?$ $1.php [L] # To remove www header RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC] RewriteRule ^(.*)$ http://%1/$1 [L,R=301] ErrorDocument 404 /404.php and here is the send_mail.php code: <?php /* This first bit sets the email address that you want the form to be submitted to. You will need to change this value to a valid email address that you can access. */ $webmaster_email = "removed_email@removed.com"; /* This bit sets the URLs of the supporting pages. If you change the names of any of the pages, you will need to change the values here. */ $feedback_page = "contact.php"; $error_page = "error_message.php"; $thankyou_page = "thanks.php"; /* This next bit loads the form field data into variables. If you add a form field, you will need to add it here. */ $email_address = $_REQUEST['email_address'] ; $comments = $_REQUEST['comments'] ; /* The following function checks for email injection. Specifically, it checks for carriage returns - typically used by spammers to inject a CC list. */ function isInjected($str) { $injections = array('(\n+)', '(\r+)', '(\t+)', '(%0A+)', '(%0D+)', '(%08+)', '(%09+)' ); $inject = join('|', $injections); $inject = "/$inject/i"; if(preg_match($inject,$str)) { return true; } else { return false; } } // If the user tries to access this script directly, redirect them to the feedback form, if (!isset($_REQUEST['email_address'])) { header( "Location: $feedback_page" ); } // If the form fields are empty, redirect to the error page. elseif (empty($email_address) || empty($comments)) { header( "Location: $error_page" ); } // If email injection is detected, redirect to the error page. elseif ( isInjected($email_address) ) { header( "Location: $error_page" ); } // If we passed all previous tests, send the email then redirect to the thank you page. else { mail( "$webmaster_email", "Contact Form - MyWebsite.com", $comments, "From: $email_address" ); header( "Location: $thankyou_page" ); } ?> Any help would be much appreciated, thanks everyone.

Hi everyone, I'm new to using PHP include elements. I've decided to use the PHP include code for my header and footer so I don't have to manually change every page when I edit these elements. So, in my /include folder I have footer.php and header.php, and everything is working just great. However, I was wondering if I have to include the following html meta tag code in the header.php and footer.php files?: <meta http-equiv="Content-Type" content="text/html"> Or can I leave this out and just have the header/footer html information? Many thanks for your time.

Hi everyone, I am trying to create a list of links using graphics. Like this: I would like the graphic to be the clickable link to the relevant website, and I would like the graphic link brightness to dip to 50% when the mouse hovers over it (using webkit-filter). The problem I've had is trying to centre the text underneath the icon, and so far I've only managed by placing a single div around both the graphic and text - but this results in the brightness dip occurring when the mouse touches the text. Here's an example of the code I have so far: <div class="linkscontainermiddle"> <ul id="socialmedia"> <li><div class="link"><a href="https://twitter.com/" target="_blank"><img src="img/twitter.png" width="48" height="48" alt="Twitter"></a>Twitter</div></li> <li><div class="link"><a href="https://www.facebook.com/" target="_blank"><img src="img/facebook.png" width="48" height="48" alt="Facebook"></a>Facebook</div></li> <li><div class="link"><a href="https://www.youtube.com/" target="_blank"><img src="img/youtube.png" width="48" height="48" alt="YouTube"></a>YouTube</div></li> </ul> </div> .link { height: 68px; width: 88px; transition: 0.5s; padding: 0px; } .link:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); .linkscontainermiddle { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainermiddle ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } Perhaps I shouldn't use a list for this kind of thing? Any advice would be greatly appreciated, thanks.

Great, many thanks for the reply Nillervision. All the best.

Hi everyone, My site is here and when viewed on Internet Explorer or Microsoft Edge, some of the menu items in the top navigation bar are white blanks. This doesn't happen when viewed in Chrome. I'm thinking I've made a mistake in my CSS and was hoping someone could take a look. /* CSS Document */ @charset "utf-8"; @import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic); @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900); a, a:hover, a:visited { font-weight: bold; } a { color: #FFFFFF; transition: 0.5s; text-decoration: none; } a:hover { color: #714BF0; } a:visited { color: rgba(0,180,31,1.00); } .albumcover { width: 300px; height: 300px; float: right; } .albumdetails { float: left; width: 400px; height: 350px; } .albumshop { width: 300px; height: 40px; float: right; text-align: center; transition: 0.5s; background-color: rgba(0,0,0,1.00); padding-top: 5px; } .albumshop a:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } #buyrecords { padding: 0px; } body { color: #FFFFFF; background-color: #000000; font-family: 'Lato', sans-serif; background-image: url(img/backgrounds/21.gif); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; overflow-y: hidden; overflow-y: scroll; margin-top: 0; margin-right: 0; margin-left: 0; } body#news a#newsnav, body#greetings a#greetingsnav, body#music a#musicnav, body#media a#medianav, body#links a#linksnav { background: #222222; } .containerleft { text-align: center; width: 200px; height: 400px; float: left; padding-left: 100px; } .containerleft p { margin: 0; } .containermiddle { text-align: center; width: 200px; height: 400px; float: left; } .containermiddle p { margin: 0; } .containerright { text-align: center; width: 200px; height: 400px; float: left; } .containerright p { margin: 0; } .copyright { font-size: 12px; font-weight: lighter; letter-spacing: 5px; padding-top: 10px; } .discogmaincontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 5px; background-color: rgba(0,0,0,0.3); width: 800px; height: 700px; overflow: hidden; transition: 0.5s; } .discogmaincontainer h5 { color: rgba(88,88,88,1.00); letter-spacing: 2px; font-size: 10px; margin: 0; padding: 0; } .discogcontainertop { text-align: center; display: inline-block; width: 750px; height: 220px; } .discogcontainertop ul li { display: inline-block; margin-right: 20px; margin-left: 20px; } .discogcontainermiddle { text-align: center; display: inline-block; width: 750px; height: 230px; } .discogcontainermiddle ul li { display: inline-block; margin-right: 20px; margin-left: 20px; } .discogcontainerbottom { text-align: center; display: inline-block; width: 750px; height: 250px; } .discogcontainerbottom ul li { display: inline-block; margin-right: 20px; margin-left: 20px; } #discogtoprow { list-style-type: none; } #discogmiddlerow { list-style-type: none; } #discogbottomrow { list-style-type: none; } #discogbottomrow h { margin: 0; padding: 0; font-size: 14px; } .footer { color: #FFFFFF; position: fixed; text-align: center; left: 0px; bottom: 0px; height: 35px; width: 100%; background: #000000; z-index: 10; } .footer a { color: FFFFF; } .footer a:hover { color: #66D06B; } .greetingscontainer { margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 700px; overflow: auto; transition: 0.5s; } .greetingscontainer a { color: #C36700; } .greetingscontainer a:hover { color: #4B4B4B; } h1 { letter-spacing: 10px; font-size: 46px; margin: 0; padding: 0; font-weight: 900; } h2 { font-size: 12px; font-style: italic; font-weight: lighter; } h3 { font-size: 18px; font-style: bold; } h4 { font-size: 16px; } h5 { font-size: 12px; font-weight: lighter; letter-spacing: 5px; } h6 { font-size: 24px; margin: 0px; } h7 { font-size: 12px; margin: 0px; } .header { font-family: 'Source Sans Pro', sans-serif; font-weight: 900; text-align: center; transition: 0.5s; background-color: #000000; padding-top: 10px; width: 100%; } .header a { color: #FFFFFF; } .header a:hover { color: #FBA75F; } .link { height: 68px; width: 88px; transition: 0.5s; padding: 0px; } .link:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .linkdiscog { text-align: center; height: 190px; width: 150px; transition: 0.5s; padding: 0px; } .linkdiscog:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .linkscontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 480px; overflow: auto; transition: 0.5s; } .linkscontainer h4 { font-size: 12px; font-weight: lighter; letter-spacing: 5px; } .linkscontainertop { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainertop ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } .linkscontainermiddle { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainermiddle ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } .linkscontainerbottom { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainerbottom ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } .maincontainer { margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 415px; overflow: auto; transition: 0.5s; } .maincontainer a { color: #C36700; } .maincontainer a:hover { color: #4B4B4B; } .maincontainer2 { text-align: center; margin-left: auto; margin-right: auto; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 210px; } .mediacontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 700px; overflow: auto; } .mediacontainer div { display: inline-block; transition: 0.5s; } .mediacontainer div:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; margin-left: auto; margin-right: auto; text-align: center; background-color: #000000; } .nav li { display: inline; } .nav a:link { display: inline-block; width: 120px; font-weight: lighter; color: #FFFFFF; background-color: #000000; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; transition: 0.5s; } .nav a:hover { background-color: #222222; } .newscontainer { float: left; height: 380px; width: 400px; overflow: auto; margin-bottom: 20px; } .newscontainer a { color: rgba(185,109,0,1.00); transition: 0.5s; } .newscontainer a:hover { color: rgba(66,66,66,1.00); } #socialmedia { padding: 0px; } .socialmedia { list-style-type: none; float: right; background-color: #000000; padding: 0; margin: 0; bottom: 0px; z-index: 11; position: fixed; right: 10px; } .socialmedia li { display: inline; } .socialmedia a:link, a:visited { display: inline-block; width: 32px; color: #FFFFFF; background-color: #000000; transition: 0.5s; } .socialmedia a:hover, .socialmedia a:active { background-color: #222222; } .twitter-timeline { float: right; height: 380px; width: 300px !important; } #streaming { padding: 0px; } @media screen and (max-width: 480px) { .albumcover { margin-top: 100px; padding-right: 50px; } .albumdetails { width: 80%; } .albumshop { padding-right: 50px; } body { background-image: none !important; overflow-x: hidden; } #boxes { display: none; } .containerleft { text-align: center; width: 200px; height: 280px; padding-left: 70px; } .containermiddle { text-align: center; width: 200px; height: 250px; padding-left: 70px; } .containerright { text-align: center; width: 200px; height: 250px; padding-left: 70px; padding-bottom: 20px; } .copyright { font-size: 12px; font-weight: lighter; } .discogmaincontainer { height: auto; width: 90%; padding-bottom: 40px; text-align: center; margin-left: auto; margin-right: auto; } .discogcontainertop { text-align: center; width: 200px; height: 280px; padding-left: 50px; float: left; } .discogcontainermiddle { text-align: center; width: 200px; height: 280px; margin-top: 375px; padding-left: 50px; float: left; } .discogcontainerbottom { text-align: center; width: 200px; height: 280px; float: left; margin-top: 375px; padding-left: 50px; float: left; } #EdgeID { margin-top: 30px; width: 90%; height: 90%; } .greetingscontainer { width: 90%; padding-bottom: 20px; } h1 { letter-spacing: 4px; font-size: 20px; margin: 0; padding: 0; } .header { text-align: center; background-color: #000000; padding-bottom: 20px; } .header a { color: #FFFFFF; } .header a:hover { color: #FBA75F; } .link { height: 68px; width: 88px; transition: 0.5s; padding: 0px; margin-bottom: 20px; } .link:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .linkdiscog { padding-bottom: 25px; } .linkscontainer { height: auto; width: 90%; padding-bottom: 40px; } .linkscontainer h4 { font-size: 12px; font-weight: lighter; letter-spacing: 5px; } .linkscontainertop { text-align: center; width: 200px; height: 280px; padding-left: 70px; float: left; } .linkscontainermiddle { text-align: center; width: 200px; height: 250px; padding-left: 70px; float: left; margin-top: 30px; } .linkscontainerbottom { text-align: center; width: 200px; height: 250px; padding-left: 70px; margin-top: 60px; float: left; } .maincontainer { height: auto; width: 90%; padding-bottom: 40px; } .maincontainer2 { height: auto; width: 90%; } .mediacontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 85%; height: 400px; overflow: auto; overflow-x: hidden; } .mediacontainer iframe { width: 70%; height: 70%; } .newscontainer { height: 300px; width: 85%; margin-bottom: 20px; padding-right: 5px; padding-left: 60px; overflow-y: scroll; } .photo img { width: 70%; height: 70%; } p { font-size: 14px; } .shoplink { width: 250px; height: 43px; display: none; } .socialmedia { display: none; } .twitter-timeline { float: left; padding-left: 10px !important; } } /* Modal Window Popup */ #mask { position: absolute; left: 0; top: 0; z-index: 9000; background-color: #000; display: none; } #boxes .window { position: absolute; left: 0; top: 0; width: 440px; height: 200px; display: none; z-index: 9999; padding: 20px; border-radius: 15px; text-align: center; } #boxes #dialog { width: 750px; height: 600px; padding: 10px; background-color: #000; font-size: 25pt; } #popupfoot { font-size: 16pt; position: absolute; bottom: 0px; width: 250px; left: 250px; } #albumCover { float: left; transition: 0.5s; } #albumCover a:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } #popText { float: right; color: #FFF; width: 300px; height: 400px; background-color: #000; padding-right: 30px; } #popText a { color: #fff; } #popText a:hover { color: #6C3; } #popFooter { padding-top: 30px; width: 750px; height: 100px; float: left; transition: 0.5s } #popFooter a:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } Many thanks for your time, I appreciate any advice.

I'd like my navigation menu to show a different link background color to reflect the current/active page of my website. My html for the menu is this: <!doctype html> <html> <head> <link rel="shortcut icon" href="/img/favicon.ico"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>News - Lyle Christine</title> <link rel="stylesheet" type="text/css" href="stylesheet.css" /> </head> <body> <div class="header"><h1><a href="http://www.lylechristine.com">LYLE CHRISTINE.com</a></h1></div> <ul class="nav"> <li><a href="news.html">News</a></li> <li><a href="greetings.html">Greetings</a></li> <li><a href="music.html">Music</a></li> <li><a href="media.html">Media</a></li> <li><a href="http://www.lylechristine.com/blog">Blog</a></li> <li><a href="links.html">Links</a></li> </ul> <div class="maincontainer"> <div class="newscontainer"> <h3>NEWS</h3> *NEWS COPY* </div> <p><a class="twitter-timeline" href="https://twitter.com/PithyArtist" data-widget-id="447044618178150400">Tweets by @LyleChristine</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </p> </div> <div class="maincontainer2"> <object id="EdgeID" type="text/html" width="420" height="220" data-dw-widget="Edge" data="edgeanimate_assets/shop_link_big/Assets/shop_link_big.html"> </object> </div> <ul class="socialmedia"> <li><a href="https://twitter.com/PithyArtist"><img src="img/32x32_twitter.png" width="32" height="32" alt=""/></a></li> <li><a href="https://www.facebook.com/lyle.christine"><img src="img/32x32_facebook.png" width="32" height="32" alt=""/></a></li> <li><a href="https://www.youtube.com/user/LylieChristine/videos"><img src="img/32x32_youtube.png" width="32" height="32" alt=""/></a></li> </ul> <div class="footer"> <div class="copyright">© 2015 <a href="contact.html">CONTACT</a></div> </div> </div> </div> </body> </html> and the css is this: /* CSS Document */ @charset "utf-8"; @import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic); @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900); a, a:hover, a:visited {font-weight: bold;} a { color: #FFFFFF; transition: 0.5s; text-decoration: none; } a:hover {color: #714BF0;} a:visited {color: #FFFFFF;} .albumcover { width: 300px; height: 300px; float: right; } .albumdetails { float: left; width: 400px; height: 350px; } .albumshop { width: 300px; height: 40px; float: right; text-align:center; transition: 0.5s; background-color: rgba(0,0,0,1.00); padding-top: 5px; } .albumshop a:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } #buyrecords { padding: 0px; } body { color: #FFFFFF; background-color: #000000; font-family: 'Lato', sans-serif; background-image: url(img/backgrounds/21.gif); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; overflow-y: hidden; overflow-y: scroll; margin-top: 0; margin-right: 0; margin-left: 0; } .containerleft { text-align: center; width: 200px; height: 400px; float: left; padding-left: 100px; } .containerleft p {margin: 0;} .containermiddle { text-align: center; width: 200px; height: 400px; float: left; } .containermiddle p {margin: 0;} .containerright { text-align: center; width: 200px; height: 400px; float: left; } .containerright p {margin: 0;} .copyright { font-size: 12px; font-weight: lighter; letter-spacing: 5px; padding-top: 10px; } .discogmaincontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 5px; background-color: rgba(0,0,0,0.3); width: 800px; height: 700px; overflow: hidden; transition: 0.5s; } .discogmaincontainer h5 { color: rgba(88,88,88,1.00); letter-spacing: 2px; font-size:10px; margin: 0; padding: 0; } .discogcontainertop { text-align: center; display: inline-block; width: 750px; height: 220px; } .discogcontainertop ul li { display: inline-block; margin-right: 20px; margin-left: 20px; } .discogcontainermiddle { text-align: center; display: inline-block; width: 750px; height: 230px; } .discogcontainermiddle ul li { display: inline-block; margin-right: 20px; margin-left: 20px; } .discogcontainerbottom { text-align: center; display: inline-block; width: 750px; height: 250px; } .discogcontainerbottom ul li { display: inline-block; } #discogtoprow { list-style-type: none; } #discogmiddlerow { list-style-type: none; } #discogbottomrow { list-style-type: none; } #discogbottomrow h{ margin: 0; padding: 0; font-size: 14px; } .footer { color: #FFFFFF; position: fixed; text-align: center; left: 0px; bottom: 0px; height: 35px; width: 100%; background: #000000; z-index: 10; } .footer a {color: FFFFF;} .footer a:hover {color: #66D06B;} .greetingscontainer { margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 700px; overflow: auto; transition: 0.5s; } .greetingscontainer a { color: #C36700; } .greetingscontainer a:hover { color: #4B4B4B; } h1 { letter-spacing: 10px; font-size: 46px; margin: 0; padding: 0; font-weight: 900; } h2 { font-size: 12px; font-style: italic; font-weight: lighter; } h3 { font-size: 18px; font-style: bold; } h4 {font-size: 16px;} h5 { font-size: 12px; font-weight: lighter; letter-spacing: 5px; } h6 { font-size: 24px; margin: 0px; } h7 { font-size: 12px; margin: 0px; } .header { font-family: 'Source Sans Pro', sans-serif; font-weight: 900; text-align: center; transition: 0.5s; background-color: #000000; padding-top: 10px; width: 100%; } .header a {color: #FFFFFF;} .header a:hover {color: #FBA75F;} .link { height: 68px; width: 88px; transition: 0.5s; padding: 0px; } .link:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .linkdiscog { text-align: center; height: 190px; width: 150px; transition: 0.5s; padding: 0px; } .linkdiscog:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .linkscontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 480px; overflow: auto; transition: 0.5s; } .linkscontainer h4 { font-size: 12px; font-weight: lighter; letter-spacing: 5px; } .linkscontainertop { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainertop ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } .linkscontainermiddle { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainermiddle ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } .linkscontainerbottom { text-align: center; display: inline-block; width: 750px; height: 137px; } .linkscontainerbottom ul li { display: inline-block; margin-right: 40px; margin-left: 40px; } .maincontainer { margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 415px; overflow: auto; transition: 0.5s; } .maincontainer a { color: #C36700; } .maincontainer a:hover { color: #4B4B4B; } .maincontainer2 { text-align: center; margin-left: auto; margin-right: auto; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 210px; } .mediacontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 800px; height: 700px; overflow: auto; } .mediacontainer div { display: inline-block; transition: 0.5s; } .mediacontainer div:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; margin-left: auto; margin-right: auto; text-align: center; background-color: #000000; } .nav li {display: inline;} .nav a:link { display: inline-block; width: 120px; font-weight: lighter; color: #FFFFFF; background-color: #000000; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; transition: 0.5s; } .nav li a:focus {background-color: lightgreen;} .nav a:hover {background-color: #222222;} .newscontainer { float: left; height: 380px; width: 400px; overflow: auto; margin-bottom: 20px; } .newscontainer a { color: rgba(185,109,0,1.00); transition: 0.5s; } .newscontainer a:hover {color: rgba(66,66,66,1.00);} #socialmedia { padding: 0px; } .socialmedia { list-style-type: none; float: right; background-color: #000000; padding: 0; margin: 0; bottom: 0px; z-index: 11; position: fixed; right: 10px; } .socialmedia li {display: inline;} .socialmedia a:link, a:visited { display: inline-block; width: 32px; color: #FFFFFF; background-color: #000000; transition: 0.5s; } .socialmedia a:hover, .socialmedia a:active {background-color: #222222;} .twitter-timeline { float: right; height: 380px; width: 300px !important; } #streaming { padding: 0px; } @media screen and (max-width: 480px) { body { background-image: none !important; overflow-x: hidden; } #boxes { display: none; } .containerleft { text-align: center; width: 200px; height: 280px; padding-left: 70px; } .containermiddle { text-align: center; width: 200px; height: 250px; padding-left: 70px; } .containerright { text-align: center; width: 200px; height: 250px; padding-left: 70px; padding-bottom:20px; } .copyright { font-size: 12px; font-weight: lighter; } .discogmaincontainer { height: auto; width: 90%; padding-bottom: 40px; text-align: center; } .discogcontainertop { text-align: center; width: 200px; height: 280px; padding-left: 70px; float:left; } .discogcontainermiddle { text-align: center; width: 200px; height: 280px; padding-left: 70px; float:left; margin-top: 250px; } .discogcontainerbottom { text-align: center; width: 200px; height: 280px; padding-left: 70px; float:left; } #EdgeID { margin-top: 30px; } .greetingscontainer { width: 90%; padding-bottom: 20px; } h1 { letter-spacing: 4px; font-size: 20px; margin: 0; padding: 0; } .header { text-align: center; background-color: #000000; padding-bottom: 20px; } .header a {color: #FFFFFF;} .header a:hover {color: #FBA75F;} .link { height: 68px; width: 88px; transition: 0.5s; padding: 0px; margin-bottom: 20px; } .link:hover { -webkit-filter: brightness(50%); filter: brightness(50%); ms-filter: brightess(50%); } .linkscontainer { height: auto; width: 90%; padding-bottom: 40px; } .linkscontainer h4 { font-size: 12px; font-weight: lighter; letter-spacing: 5px; } .linkscontainertop { text-align: center; width: 200px; height: 280px; padding-left: 70px; float:left; } .linkscontainermiddle{ text-align: center; width: 200px; height: 250px; padding-left: 70px; float:left; margin-top: 30px; } .linkscontainerbottom { text-align: center; width: 200px; height: 250px; padding-left: 70px; margin-top: 60px; float:left; } .maincontainer { height: auto; width: 90%; padding-bottom: 40px; } .maincontainer2 { height: auto; width: 90%; } .mediacontainer { text-align: center; margin-left: auto; margin-right: auto; margin-top: 50px; padding: 10px; background-color: rgba(0,0,0,0.3); width: 90%; height: 400px; overflow: auto; } .newscontainer { height: 300px; width: 85%; margin-bottom: 20px; padding-right: 5px; padding-left: 60px; overflow-y: scroll; } p { font-size: 14px; } .shoplink { width: 250px; height: 43px; display: none; } .socialmedia { display: none; } .twitter-timeline { float: left; padding-left: 10px !important; } When I click on the 'news' link, the background changes to green for as long as I hold down the mouse button, but it doesn't stay green when on the active news page. Any ideas what I should change so that the green link background remains while on the active page? Many thanks for your time and help.

Hi everyone, I'm trying to design a grid layout to contain 9 button links. My current method uses 3 div columns like this: I'm thinking it would make more sense to use 3 div rows but I'm finding it quite difficult to evenly distribute the icons in the same way as using columns. The reason rows would help is I'm also trying to display these links vertically in a single line on mobile devices. Using the @media CSS code, I can achieve a single vertical column, but the links are in the wrong order (as in the 'buy records' links should be the first 3 icons, then the streaming icons, then the social media). How would you guys approach this? Here's my HTML & CSS so far: <div class="containerleft"> <br><br> <div class="link"><a href="http://www.amazon.co.uk/s/ref=nb_sb_noss?url=search-alias=digital-music&field-keywords=Lyle+Christine" target="_blank"><img src="img/amazon.png" width="48" height="48" alt=""/></a></div> <div class="linksmall"><a href="http://www.amazon.com/s/ref=ntt_srch_drd_B00P0UWAMG?ie=UTF8&field-keywords=Lyle Christine&index=digital-music&search-type=ss" target="_blank"><img src="img/US.png" width="23" height="17" alt=""/></a></div> <div class="linksmall"><a href="http://www.amazon.de/Lyle-Christine-Musik-Downloads/s?ie=UTF8&page=1&rh=n%3A77195031,k%3ALyle Christine" target="_blank"><img src="img/DE.png" width="23" height="17" alt=""/></a></div> <div class="linksmall"><a href="http://www.amazon.fr/Lyle-Christine-Téléchargement-de-Musique/s?ie=UTF8&page=1&rh=n%3A77196031,k%3ALyle Christine" target="_blank"><img src="img/FR.png" width="23" height="17" alt=""/></a></div> <div class="linksmall"><a href="http://www.amazon.es/s/ref=dm_ar_dp_rd?ie=UTF8&field-author=Lyle Christine&index=digital-music&search-type=ss" target="_blank"><img src="img/ES.png" width="23" height="17" alt=""/></a></div> <div class="linksmall"><a href="http://www.amazon.co.jp/s/ref=ntt_srch_drd_B00OZOBSEO?ie=UTF8&field-keywords=Lyle Christine&index=digital-music&search-type=ss" target="_blank"><img src="img/JP.png" width="23" height="17" alt=""/></a></div><p>Amazon</p> <br><br><br><div class="link"><a href="https://play.spotify.com/artist/4l7u1k3NMn1Y1vsckJhaV6" target="_blank"><img src="img/spotify.png" width="48" height="48" alt=""/></a></div><p>Spotify <br><br><br><br><br><div class="link"><a href="https://twitter.com/PithyArtist" target="_blank"><img src="img/twitter.png" width="48" height="48" alt=""/></a></div><p>Twitter</p> <br> </div> <div class="containermiddle"> <p><b>Buy Records</b></p><br> <div class="link"><a href="https://itunes.apple.com/us/artist/lyle-christine/id929741998" target="_blank"><img src="img/itunes.png" width="48" height="48" alt=""/></a></div><p>iTunes</p><br><br> <p><b>Streaming</b></p> <br><div class="link"><a href="http://www.last.fm/music/Lyle+Christine" target="_blank"><img src="img/lastfm.png" width="48" height="48" alt=""/></a></div><p>Last.fm</p><br><br> <p><b>Social Media</b></p><br> <div class="link"><a href="https://www.facebook.com/lyle.christine" target="_blank"><img src="img/facebook.png" width="48" height="48" alt=""/></a></div><p>Facebook</p> <br> </div> <div class="containerright"> <br><br><div class="link"><a href="http://lylechristine.bandcamp.com/" target="_blank"><img src="img/bandcamp.png" width="48" height="48" alt=""/></a></div><p>Bandcamp</p> <br><br><br><br> <div class="link"><a href="https://soundcloud.com/lyle-christine" target="_blank"><img src="img/soundcloud.png" width="48" height="48" alt=""/></a></div><p>SoundCloud</p> <br><br><br><br><div class="link"><a href="https://www.youtube.com/user/LylieChristine/videos" target="_blank"><img src="img/youtube.png" width="48" height="48" alt=""/></a></div><p>YouTube</p> </div> @media screen and (max-width: 480px) { .containerleft { text-align: center; width: 200px; height: 280px; padding-left: 70px; } .containermiddle { text-align: center; width: 200px; height: 250px; padding-left: 70px; } .containerright { text-align: center; width: 200px; height: 250px; padding-left: 70px; padding-bottom:20px; } }

Cheers davep, really appreciate your input. I see now it's quite simple. When I tried it before, I think I was using the position:absolute/relative incorrectly. Many thanks.

Thanks for letting me know cibgraphics.

Right, got you EpicWebs - many thanks for the reply, that's a great help.

If it helps, my current CSS code is: .equalityresearchlink { display: inline-block; float: center; width: 200px; height: 525px; text-decoration: none; background: url("img/equality_research_link.png"); } .equalityresearchlink:hover { background-position: -200px 0; } Thanks

Hi everyone, I have an image link which is roughly in the centre of my page: Using CSS, I shift the background position on hover so that the purple band brightens slightly. I was wondering how I would recreate this link using just a plain version of the image and creating the purple band/text with HTML/CSS. It's easy enough for me to create a div box, fill it with a purple background, and add the text. But how would I exactly align this purple div on top of the image? And is there CSS hover code which would lighten the purple band on hover? Thanks for your help everyone.

I have 2 questions about a simple website I've just started. The test webpage is http://www.lylechristine.co.uk/test8.html It's a simple site - static background image, fixed header and footer, basic content in between. You can see on the left is news section which is a div box positioned on the page with the left and top values. On the right is protected twitter content. 1. For this style of page, should I really have two main columns on the left and right sides to contain this news/twitter content, rather than using top/left values as positions for individual div elements? If so, should I start with a large div container that would surround everything on the page? 2. On right hand side of the footer I have some social media icons. In the middle of the footer is some text: copyright and CONTACT. This text is set to align in the middle of the footer, but it's aligning the centre between the left hand side of the page and the first social media icon for twitter (these icons are actually in the footer). What changes should I make to get the text to align centrally with the left and right hand sides of the page and ignore these icons? Thanks a lot for your help guys, I really appreciate any info on these topics. Cheers, Floydy

Thanks for the info guys, that's a great help. I'll read up on your advice, and check out those links. I'm keen to learn/implement this dynamic method of updating content, simply to broaden my web-design skills, but it looks/feels more professional than editing news updates on the main site. Cheers again, Floydy.

Hi everyone! Quite a basic question here, but one I really can't find much info on. Most websites have a news content section, the very typical updates that look slightly blog-esque, with a date of post, and the Facebook, Twitter share buttons below, sometime option for people to comment, etc. I'm trying to add this feature to my website, and I was wondering how to do this. Is there some sort of template code that everyone uses for their news updates, or do they manually type out the date/time info, and manually create each share button, etc.? Is he norm to actually edit news updates in the design software (e.g. Dreamweaver) and update via FTP, or is it usually done via an external blog updater? So far I see Wordpress seems to be quite good as an option to integrate, but my site is not built in php, which I think is a requirement. It seems like such an obvious task, but I'm struggling with how to approach it! I'd be very much grateful if you guys could reply with some info, Thanks for your time,

Hello, I have a simple website built with Dreamweaver. The site is: www.lylechristine.co.uk You'll see I have a scroll box on the page. It looks in the correct position when I use Chrome, IE or Firefox to check it. However, when I checked it on a Nexus 7 tablet running Android, the scroll box was moved out of place to the right. Also, there was no scroll bar. Could anyone kindly take a look and hopefully explain where I've gone wrong? Many thanks for your time, Floyd

Ok, I've tried adding the .swf into a div, I'd appreciate if someone who has a high resolution could check to see if it appears centred. Many thanks again Lyle

Thanks for directing me to the CSS topic. I've never actually implemented CSS before, although I have read enough introductory articles to understand its use; it's about time I got to grips with it. So, if I may ask another question, should I simply create a div layer in Dreamweaver that takes up most of the browser space, add my main flash/website file into that and then create a rule as described in the article? I've been watching tutorials on YouTube of the basics of div tags and how they relate to the html, but I just wanted to confirm that's not too far off the approach I should take. My thinking of div layers are similar to how tables operate, but perhaps I'm way off. Thanks again for taking the time to help me. Lyle

Hi everyone, Before viewing my website, please turn down your speakers. My site is found at www.caveataudiens.co.uk and I recently looked at it on a computer with a screen resolution of 1280x1024 and noticed that it looks too far over to the left. I originally designed the site on my laptop which is 1024x768 and the site is dead in the centre. Is there perhaps any html or other tricks I can use so that the site is always centred no matter what the screen resolution is? I already have the main flash file 'centred' in Dreamweaver so Im not sure what else I should be doing. Many thanks for your time and help, I look forward to hearing any suggestions. Lyle