This is the code for my site, CSS is as <style></style> even though it's as an external stylesheet in the original basically:
<link rel="stylesheet" type="text/css" href="magazinetheme.css">
This is the code:
<TITLE>A Guide Book on Tourism</TITLE>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 5.2px solid green;
padding: 25px;
margin: 25px;
font-family: Arial, sans-serif;
font-size: 14px;
float: left;
}
.div1 {
background-color: lightgrey;
width: 500px;
border: 2px solid red;
height: auto;
padding: 25px;
margin: 25px;
font-family: Arial, sans-serif;
font-size: 12px;
float: left;
}
.div2 {
background-color: #FFF;
width: 300px;
border: 2px solid red;
padding: 25px;
margin: 25px;
font-family: Arial, sans-serif;
font-size: 12px;
float: left;
}
img.auto {
width: 425px;
margin-left: auto;
margin-right: auto;
}
.datetime {
font-style: oblique;
}
.wv {
display: block;
}
</style>
<div>
</div>
<div class="div1">
<article><H1>My page</H1>
<p><span class="datetime">02 Jul 2016</span></p>
<section class="wv"><img class="auto" src="placeholderpic.jpg"></section>
</article>
<p>Your text here</p>
</div>
<div class="div2">
</div>
The CSS works well - but I want to add a header, and generally have CSS more like this site: with links in header and a menu.
How can I improve my CSS to create a menu/header that can have a dropdown with some basic JavaScript and is compatible with older browsers? [I have User Agent Switcher on Firefox for testing, on OS X El Capitan 10.11.5].
I had considered jQuery, but am not sure if it is suited to older browsers.
Basically - I want to fix my layout and make it look more blog or magazine-like whilst retaining backward-compatibility for older browsers across Windows, Linux and Mac OS X. This is for a PHP based site but it is a template/layout I have created independently; the PHP blog is one I have been working on from a basic website tutorial on creating your own PHP blog.
