max-width: 1080px;
width: 100%;
also messes up the menu, causing them to drop down as the browser is downsized past them.
Those #wrapper properties are not in your current code.
Your code currently says #wrapper {width:1080px}. To be fluid, It should say {max-width:1080px;} and not width anything.
That causes the nav-menu to act as floats (i guess), falling down as the window goes past them though.
You didn’t add the height:1px to the header that Ron and I have mentioned multiple times. That means that the top row will stretch to fill available height. Your height on the columns was a hack because it was not needed if you had used the code we have mentioned several times now 
What did you expect to happen?
Stop firefighting for a minute and think carefully about what you are doing. If the window width is less than 1080px then your nav items must wrap to a new line to be useful and usable. You never want horizontal scrolling. Therefore you need to look at way of accommodating the menu when it wraps and looking past the “It doesn’t look like that in my drawing” approach.
You need to expect and cater for all types of content at all available widths and you do this by having a fluid design approach and then using media queries to tidy up anything that looks odd when resized.
1 Like
I did try the 1px height thing but removed it because it actually made my header 1px tall… 
I guess I’ll look into a responsive menu now that I’ve got most things sorted out and know what I’m dealing with.
Thanks to all of you for bearing with me.
Then you did it wrong and applied it to the element you now call header and not the table cell that contains the header
Here is your code from post #25 in working order and turned into a responsive site that works for mobile down to 320px. You must keep the viewport meta tag in place for this to work on mobile.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="html/master.css">
<style>
html, body {
font-family: Meiryo;
font-size: 14px;
margin: 0;
padding: 0;
height: 100%;
}
h1 {
margin-bottom: 48px;
font-size: 32px;
text-align: center;
}
h2 {
font-size: 18px;
}
a {
text-decoration: none;
color: inherit;
}
.trow {
display: table-row;
}
.tcell {
display: table-cell;
vertical-align: top;
}
#wrapper {
margin: 0 auto;
height: 100%;
max-width: 1080px;
width:100%;
display: table;
}
#header {
height: 140px;
background: url(http://onshirazu.netai.net/img/logo.png);
}
.top{height:1px}
/*-------Navigation-------*/
#navigation ul {
padding: 0;
margin:0;
display:table;
width:100%;
}
#navigation li {
height: 32px;
display: table-cell;
background: #ffc7e9;
}
#navigation a {
display: block;
text-align: center;
line-height: 32px;
font-size: 12px;
font-weight: 800;
}
#navigation a:hover {
color: white;
}
/*-------Left Column-------*/
#left {
padding: 10px;
width: 220px;
}
.left-image {
padding: 5px 7px 5px 0;
}
.right-image {
padding: 5px 0px 5px 7px;
}
.content {
display: table;
width: 100%;
height: 100%;
}
/*-------Right Column-------*/
#right {
padding: 10px 20px 10px 20px;
background: #DFDED4;
text-align: center;
}
/*-------Footer-------*/
#footer {
height: 32px;
width: 100%;
background: #18121E;
}
#footer p {
margin: 0;
line-height: 24px;
font-size: 10px;
text-align: center;
color: white;
}
/*-------Cast Members-------*/
#rumi {
background-image: url("http://onshirazu.netai.net/img/Rumi.jpg");
}
#underling {
background-image: url("http://onshirazu.netai.net/img/Underling.jpg");
}
.cast {
margin: 0 48px 96px 48px;
background: white;
text-align: center;
border: 1px solid black;
width: 100px;
height: 128px;
float: left;
}
.layer {
transform: translateY(108px);
height: 20px;
line-height: 20px;
background: rgba(255, 255, 255, 0.5);
color: rgba(0, 0, 0, 1);
}
.modal-content img {
margin: 0 20px 0 0;
float: left;
}
.modal-content p {
font-size: 14px;
}
.lightbox .box {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
min-width: 600px;
margin: 2% auto;
padding:20px;
background-color: white;
box-shadow: 0px 1px 26px -3px #777777;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.lightbox .title {
margin:0;
padding:0 0 10px 0px;
border-bottom:1px #ccc solid;
font-size:22px;
}
.lightbox .content {
display:block;
padding:10px 0 0 0px;
}
.lightbox .close {
float:right;
display:block;
text-decoration:none;
font-size:22px;
color:#858585;
}
.lightbox {
display: none; /*Hide the lightbox*/
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
color:#333333;
}
.lightbox:target {
display: block; /*Show lightbox when it is target*/
outline: none;
}
@media screen and (max-width:600px){
#left,#right{width:auto;display:block}
}
@media screen and (max-width:460px){
#navigation li{display:block;border-bottom:1px solid #fff;}
}
</style>
</head>
<body>
<div id="wrapper">
<div class="trow">
<div class="tcell top">
<div id="header"></div>
<div id="navigation">
<ul>
<li><a href="Index.html">Index</a></li>
<li><a href="html/System.html">System</a></li>
<li><a href="html/Cast.html">Cast</a></li>
<li><a href="html/Schedule.html">Schedule</a></li>
<li><a href="html/Access.html">Access</a></li>
<li><a href="html/Contact.html">Contact</a></li>
</ul>
</div>
<!--navigation-->
</div>
<!--tcell-->
</div>
<!--trow-->
<div class="trow">
<div class="tcell">
<div class="content">
<div id="left" class="tcell"> <a class="twitter-timeline" href="https://twitter.com/Roy_Bread" width="220px" height="397px" data-widget-id="728961573411119106">Tweets by @Roy_Bread</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>
<a href="#"><img class="left-image" src="http://onshirazu.netai.net/img/Twitter.png" alt="Twitter" width="100" height="100"></a> <a href="#"><img class="right-image" src="http://onshirazu.netai.net/img/Facebook.png" alt="Facebook" width="100" height="100"></a> </div>
<!--left-->
<div id="right" class="tcell">
<h1>ようこそ！</h1>
<h2>[コンセプトの説明]</h2>
<h2>[店の画像]</h2>
<h2>[時事]</h2>
</div>
<!--right-->
</div>
<!--content-->
</div>
<!--tcell-->
</div>
<!--trow-->
<div class="trow">
<div id="footer" class="tcell">
<p>Copyright © 店名 2016 All rights reserved.</p>
</div>
<!--footer-->
</div>
<!--trow-->
</div>
<!--wrapper-->
</body>
</html>
Don’t change anything (apart from the absolute urls) as the above is 100% working.
Just copy that code and before you even think of changing it run it in your browser while you are online (just copy the code above into an html file and then click on that file and let it run in your browser). You can then see how it works before you try and copy the changes into your live site although the code I posted (apart from my changes) is a direct copy of your site anyway as I copied it all locally.
Resize the width of the browsers to see how content adapts at various sizes. I have only put in place simple adjustments but you can follow that process as required.
.
1 Like
You are welcome.
That’s not what my code produces anyway. You have a horizontal scrollbar and my page does not have that.
The facebook and twitter icons are something I left for you to tweak and to linearize.
The menu on a small screen needs to be linearized as that is perfect for mobile as it allows for a good touch area. (You need to research a hamburger menu toggle to hide the menu on small screens.)
On large screens the layout will look like this:
On an iphone it will look like this:
The code I used is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="html/master.css">
<style>
html, body {
font-family: Meiryo;
font-size: 14px;
margin: 0;
padding: 0;
height: 100%;
}
h1 {
margin-bottom: 48px;
font-size: 32px;
text-align: center;
}
h2 {
font-size: 18px;
}
a {
text-decoration: none;
color: inherit;
}
.trow {
display: table-row;
}
.tcell {
display: table-cell;
vertical-align: top;
}
#wrapper {
margin: 0 auto;
height: 100%;
max-width: 1080px;
width:100%;
display: table;
}
#header {
height: 140px;
background: url(http://onshirazu.netai.net/img/logo.png);
}
.top {
height:1px
}
/*-------Navigation-------*/
#navigation ul {
padding: 0;
margin:0;
display:table;
width:100%;
}
#navigation li {
height: 32px;
display: table-cell;
background: #ffc7e9;
}
#navigation a {
display: block;
text-align: center;
line-height: 32px;
font-size: 12px;
font-weight: 800;
}
#navigation a:hover {
color: white;
}
/*-------Left Column-------*/
#left {
padding: 10px;
width: 220px;
}
.left-image {
padding: 5px 7px 5px 0;
}
.right-image {
padding: 5px 0px 5px 7px;
}
.content {
display: table;
width: 100%;
height: 100%;
}
/*-------Right Column-------*/
#right {
padding: 10px 20px 10px 20px;
background: #DFDED4;
text-align: center;
}
/*-------Footer-------*/
#footer {
height: 32px;
width: 100%;
background: #18121E;
}
#footer p {
margin: 0;
line-height: 24px;
font-size: 10px;
text-align: center;
color: white;
}
/*-------Cast Members-------*/
#rumi {
background-image: url("http://onshirazu.netai.net/img/Rumi.jpg");
}
#underling {
background-image: url("http://onshirazu.netai.net/img/Underling.jpg");
}
.cast {
margin: 0 48px 96px 48px;
background: white;
text-align: center;
border: 1px solid black;
width: 100px;
height: 128px;
float: left;
}
.layer {
transform: translateY(108px);
height: 20px;
line-height: 20px;
background: rgba(255, 255, 255, 0.5);
color: rgba(0, 0, 0, 1);
}
.modal-content img {
margin: 0 20px 0 0;
float: left;
}
.modal-content p {
font-size: 14px;
}
.lightbox .box {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
min-width: 600px;
margin: 2% auto;
padding:20px;
background-color: white;
box-shadow: 0px 1px 26px -3px #777777;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.lightbox .title {
margin:0;
padding:0 0 10px 0px;
border-bottom:1px #ccc solid;
font-size:22px;
}
.lightbox .content {
display:block;
padding:10px 0 0 0px;
}
.lightbox .close {
float:right;
display:block;
text-decoration:none;
font-size:22px;
color:#858585;
}
.lightbox {
display: none; /*Hide the lightbox*/
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
color:#333333;
}
.lightbox:target {
display: block; /*Show lightbox when it is target*/
outline: none;
}
@media screen and (max-width:600px) {
#left, #right, iframe {
width:auto;
display:block;
margin:auto;
height:auto;
}
#left iframe{margin:auto!important;display:block!important;}
.images{text-align:center;}
}
@media screen and (max-width:460px) {
#navigation li {
display:block;
border-bottom:1px solid #fff;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div class="trow">
<div class="tcell top">
<div id="header"></div>
<div id="navigation">
<ul>
<li><a href="Index.html">Index</a></li>
<li><a href="html/System.html">System</a></li>
<li><a href="html/Cast.html">Cast</a></li>
<li><a href="html/Schedule.html">Schedule</a></li>
<li><a href="html/Access.html">Access</a></li>
<li><a href="html/Contact.html">Contact</a></li>
</ul>
</div>
<!--navigation-->
</div>
<!--tcell-->
</div>
<!--trow-->
<div class="trow">
<div class="tcell">
<div class="content">
<div id="left" class="tcell"> <a class="twitter-timeline" href="https://twitter.com/Roy_Bread" width="220px" height="397px" data-widget-id="728961573411119106">Tweets by @Roy_Bread</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>
<div class="images"> <a href="#"><img class="left-image" src="http://onshirazu.netai.net/img/Twitter.png" alt="Twitter" width="100" height="100"></a> <a href="#"><img class="right-image" src="http://onshirazu.netai.net/img/Facebook.png" alt="Facebook" width="100" height="100"></a></div>
</div>
<!--left-->
<div id="right" class="tcell">
<h1>ようこそ！</h1>
<h2>[コンセプトの説明]</h2>
<h2>[店の画像]</h2>
<h2>[時事]</h2>
</div>
<!--right-->
</div>
<!--content-->
</div>
<!--tcell-->
</div>
<!--trow-->
<div class="trow">
<div id="footer" class="tcell">
<p>Copyright © 店名 2016 All rights reserved.</p>
</div>
<!--footer-->
</div>
<!--trow-->
</div>
<!--wrapper-->
</body>
</html>
What I posted is exactly what I got when copy & pasting the code though
In any case, thanks for the help. I now know what’s been causing my issues and what to work towards
What do you mean?
Attached is Paul’s code as I copied it. It performs as expected. Download and open in your browser. No “copy and paste” required.
Are you in turn pasting it to another platform such as a server? Is that where the problem is happening? You’ll need to explain more clearly the conditions under which the code is failing for you, because it works properly here.
RoyBread4=Paul.html|attachment (5.6 KB)
That’s odd. The file you gave me does indeed work as intended. Copying the exact code given to me by paul into a blank html document gave me what you saw in my screenshot when opened in Firefox though.
1 Like
Try it again you must have done something wrong. Firefox is fine with my code.
The image you posted shows no text showing in the nav but my example shows it clearly. I’m guessing you that put the page in the same directory as your original css file and had a conflict of rules. The code I gave you was full code so make sure you don’t link to your old css when testing.
Tried copying it into a new file and did nothing else with it (just like last time) and it does indeed work as intended, though I am on a different machine with a different resolution right now. Wouldn’t think that’d affect it though.
I’m thinking though, that if I’m going to commit to making the page work well with all kinds of devices and resolutions then I might want to look into making the page using flexbox. Supposedly it isn’t compatible with older browsers but I don’t know how much of a problem that is here in Japan. Is it generally avoided?
Flexbox is just another tool in the toolbox and for 90% of layouts you won’t need it. Indeed responsive design was around for years before flexbox arrived. Flexbox does make some aspects easier but comes with a great deal of complexity for beginners as it introduces a lot more concepts.
I don’t see a need for flexbox at all in your site apart from the fact that you could re-order the content panel on small screen using flexbox (which can be done using the existing structure anyway and just adding the flexbox rules in media queries).
Concentrate on the basics first and learn how to handle elements responsively as that is the main approach for a fluid site. Avoid fixed widths/heights (or control them with media queries) but aim never to get a horizontal scrollbar at any time.
It can be a bit overwhelming at first to let go of pixel control but we aren’t working on a fixed sized piece of paper here but on an ever changing viewport.
1 Like
Got it. What you’re saying makes a lot of sense. Perhaps doubly so considering I live in a place where everybody but myself is using a cellphone for most of their browsing.
Thanks a lot to both of you for the advice.
I’m gonna rebuild the site from scratch with these things in mind.
Glad to help and while sometimes it may seem we put things in your way we are only doing it to help point you in the right direction. At some stage we’ve all been where you are and have had to re-think the way we work.
2 Likes
I “finished” the flexbox layout I had started on and rather than it being complex, I find that the minimalism it allows for makes things extremely easy. Is there really any reason for why I should not stick to this?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.