Holy hell I’m being pulled from two sides. You and another user. I’m being stretched so thin! Any other front-end Sitepointers, help!
On “#featured” give it table-layout:fixed;width:100%.
1 Like
That would clip your content in this case. What do you want to do about the header? Obviously there is too much content there. What is your plan for how that will lay out?
I don’t want it to overflow like from the #featured 
But there are many menu items. How do you plan ongetting it all to fit? What format? Visual mockup please.
You could have the logo on the top line and then drop the menu items below it. But I would think the menu items wil still be too wide.
This is just rough but I would do something like this for the header section.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gilboa Quarry</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" media="screen, projection" href="http://raineer24.github.io/gilboaquarry/css/style.css" />
<link rel="stylesheet" media="screen, projection" href="http://raineer24.github.io/gilboaquarry/css/normalize.css" />
<script type="text/javascript" src="http://raineer24.github.io/gilboaquarry/js/jquery.js"></script>
<script type="text/javascript" src="http://raineer24.github.io/gilboaquarry/js/script.js"></script>
<style>
header{
max-width:1160px;
width:100%;
height:auto;
min-height:81px;
}
.logo{margin-right:30px;}
.register{float:right;width:auto}
.section{
float:none;
width:auto;
overflow:hidden;
margin:0;
}
.address{
float:none;
width:auto;
}
.address ul li a{text-indent:0;}
@media screen and (max-width:780px){
.section{clear:both;overflow:visible;margin:10px 20px;text-align:center;}
.logo{margin:20px;}
.nav,.nav ul,.nav li,.address,.address ul,.address li{float:none;width:auto;text-align:center;}
.nav li,.adress li {display:inline-block;margin:10px 10px 0;}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="logo"> <img src="http://raineer24.github.io/gilboaquarry/images/logo.png" alt="logo"> </div>
<div class="register">
<ul>
<li><a href="#">Register</a></li>
<li><a href="#" class="connect facebook">Facebook</a></li>
<li><a href="#" class="connect vimeo">Vimeo</a></li>
<li><a href="#" class="connect youtube">Youtube</a></li>
</ul>
</div>
<!-- end register -->
<div class="section">
<div class="address">
<ul>
<li class="phone"><a href="#">(419) 456-3300</a></li>
<li class="map"><a href="#" >Gilboa Quarry, 3763 Old St. Rt. 224, Ottawa, OH 45875</a></li>
</ul>
</div>
<div class="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">DIVING</a></li>
<li><a href="#">MEDIA GALLERY</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">WHAT'S NEW</a></li>
<li><a href="#">CONDITIONS</a></li>
<li><a href="#">SUMMER HOURS</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">DIVE PROFESSIONALS</a></li>
</ul>
</div>
<!-- end nav -->
</div>
<!-- end section -->
</div>
<!-- end container -->
</header>
<div class="banner">
<div class="container">
<div class="bannerWidth">
<h1>diving and dive training</h1>
<p>Gilboa Quarry is the best inland place to scuba dive in
Northwest Ohio.</p>
</div>
</div>
</div>
<!-- end BANNER -->
<div class="content">
<div class="container">
<h1>OPEN WATER DIVING</h1>
<p>Gilboa Quarry is a great location for diving and dive training. The quarry provides
two distinct personalities: the shallow side at 5 - 65 ft provides great recreational
enjoyment, while the deep side of the quarry with depths of 130 plus
ft is suitable for technical training.</p>
</div>
<img src="http://raineer24.github.io/gilboaquarry/images/img1.jpg" alt="images">
<div class="container">
<h1>GO CAMPING</h1>
<p>Gilboa Quarry offers plenty of camping space.
Camping areas are conveniently accessible by gravel road allowing for easy drive
up access to the quarries main sites.</p>
</div>
</div>
<!--content -->
<ul id="featured">
<li>
<div> <img src="http://raineer24.github.io/gilboaquarry/images/f1.jpg" alt=""> </div>
</li>
<li>
<div> <img src="http://raineer24.github.io/gilboaquarry/images/f2.jpg" alt=""> </div>
</li>
<li>
<div> <img src="http://raineer24.github.io/gilboaquarry/images/f3.jpg" alt=""> </div>
</li>
</ul>
</body>
</html>
That allows the menu to be fluid and to wrap and to fit on mobile.
1 Like
Hi,
I’m not quite sure what you are after exactly.
I didn’t see the calendar on your page.
If you are looking for a calendar to work with the date input then jqueryrui has some decent calendars that you can style to suit (if you have the time).
What I mean is I want to have a calendar like from the top image that I shared
That doesn’t quite answer my question 
Do you have code for the calendar?
If not I suggest using the jquery one in the link I gave above which will work from an input.
You can then style it to fit your scheme although styling a calendar is quite a long process as there is a lot to them.
There is still no calendar on my page because I don’t know how to code it.
Maybe the link that you have shared, will do
EDIT: Why it’s just an input box? @PaulOB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
Date:
Coding a calendar or a datepicker is a job for an expert and not one that can be done in a few minutes so I suggest googling for calendars or datepickers and find one that suit your needs the best (only you know what that is).
If you want a datepicker (one that pops up from an input) then the jquery one is fine but if you are looking for an event calendar to store and retrieve events then you will need to find a suitable plugin.
I want a calendar just the same from the image that I shared though.
I tried the date picker code, but its just an input box.
You really must be clear about what you want as I am just guessing here time and time again
It’s just an input because you click it and then the datepicker pops up so that you can enter a date (just like in the example link I gave you). I assumed that’s what you were after because you had it next to a form with a date input.
If you are looking for a calendar of sorts then that’s something different.
Is there a website that has the exact functionality you want? That would be ideal.
The link that you shared isn’t the one like from the image?
@RyanReese just a PSD lol
Creating a table in HTML to replicate a calendar isn’t hard. What functionality will the calendar have? Does the calendar show by default? What can you do with it?
A simple picture does not answer everything; the functionality is a mystery to us.
From whose image?
The image that I posted in #34 or the image that you posted in post #27?
If you are talking about the image in your post #27 then no one will have a calendar like that because its just something someone has drawn. You would need to customise a plugin and style it to look like yours.
Until you give fuller details (not half a sentence) with unambiguous information then we are shooting in the dark I’m afraid.
I just want the front end calendar, not rely on backend though.
Like UI somehow? Just like a button, but not working.
Sorry, but you are not helping us to help you.
What use is a calendar with no function? Just put an image on the page and then you are done.
Answer these following questions before you ask anything else.
-
What is the calendar to be used for? Is it for selecting dates that should go in an input so that a form can be submitted?
-
Is it a calendar (not a datepicker) that a user can store and retrieve dates with?
-
Is it just a css/html element with no scripts and no function (i,e, it won’t do anything but just displays like you want).
-
Or is it just a drawing with no function?
-
None of the above.