I have taken on the challenge of building a website to promote a specific region for visitors.
My goal is to display all my content on a single page without any scrollbars, not by hiding them but by optimizing the layout for a seamless user experience.
Despite experimenting with div widths, heights, and other elements, I haven't been able to achieve the desired outcome. What changes should I make to my code in order to accomplish this?
body,
td,
th {
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}
body {
margin: 0px;
}
#navigation {
color: white;
background-color: #292526;
width: 100%;
padding: 0.5% 0.5%;
}
#navigationLeft {
width: 24.5%;
display: inline-block;
vertical-align: middle;
font-size: 180%;
}
#navigationRight {
width: 74.5%;
display: inline-block;
vertical-align: middle;
}
#navigation ul {
float: right;
}
#navigation ul li {
display: inline;
}
#navigation a {
font-size: 120%;
color: white;
text-decoration: none;
}
#banner {
line-height: 0;
}
#footer {
color: white;
background-color: #292526;
width: 100%;
padding: 0.5% 0.5%;
text-align: center;
}<div id="container">
<div id="navigation">
<div id="navigationLeft">
<a href="#">Visit Clare Ireland</a>
</div>
<div id="navigationRight">
<ul>
<li><a href="#">Home |</a>
</li>
<li><a href="#">Maps |</a>
</li>
<li><a href="#">Hotels |</a>
</li>
<li><a href="#">Appartments |</a>
</li>
<li><a href="#">Attractions |</a>
</li>
<li><a href="#">Essentials |</a>
</li>
<li><a href="#">Bars & Clubs |</a>
</li>
<li><a href="#">Transport</a>
</li>
</ul>
</div>
</div>
<div id="banner">
<img src="http://i.imgur.com/VsIRZNZ.jpg" alt="The Cliffs of Moher" />
</div>
<div id="footer">
<p>Placeholder Text</p>
</div>
</div>