Browse Source

fix responsive design fo bigish pages with side bar

pull/1/head
Craig Stewart 4 years ago
parent
commit
936c479910
  1. 2
      about.html
  2. 2
      contact.html
  3. 2
      index.html
  4. 9
      styles/default.css

2
about.html

@ -13,6 +13,7 @@ About Me
About Me
</h1>
</div>
<div id="layout">
<div id="navigation">
<p class="link">
<a href="/index.html">
@ -57,5 +58,6 @@ I am quite proud of the fact that I am a member of Mensa, having a quite high IQ
I like to think I am a reasonably moral person, but I do have failings, and I can sometimes be quite pragmatic. This, combined with quite strongly held views in some areas, can make me quite difficult to get along with at times, but I have learnt to not judge others by my beliefs. Unless of course they try to force their beliefs onto me, but that is not a topic for here.
</p>
</div>
</div>
</body>
</html>

2
contact.html

@ -13,6 +13,7 @@ Contact Me
Contact Me
</h1>
</div>
<div id="layout">
<div id="navigation">
<p class="link">
<a href="/index.html">
@ -51,5 +52,6 @@ Or on <a href="https://www.linkedin.com/in/craig-james-stewart">linkedin</a> for
Or if that fails I can be contacted <a href="mailto:server@craig-james-stewart.co.uk">by email</a>.
</p>
</div>
</div>
</body>
</html>

2
index.html

@ -13,6 +13,7 @@ My Website
New Website
</h1>
</div>
<div id="layout">
<div id="navigation">
<p class="link">
<a href="/index.html">
@ -48,5 +49,6 @@ So this is my new website. It is hosted on two virtual private servers. These we
I'm going to be working on the design of this on and off for a while, and even when that becomes less regular I'm probably never going to be fully happy with it. The technical details, how it is hosted, how it is kept up to date, etc, which are all my area of expertise, are already in a state that I am happy with. However the design which is not my area of expertise, is going to take me some time to settle on something I can accept.
</p>
</div>
</div>
</body>
</html>

9
styles/default.css

@ -62,13 +62,18 @@ p {
margin-bottom:15px;
}
div {
float:left;
#float:left;
display:table-cell;
}
#header {
height:55px;
display:block;
}
#navigation {
#layout {
display:table;
height:calc( 100% - 55px );
}
#navigation {
width:95px;
}
#content {

Loading…
Cancel
Save