I'm having an issue where a search bar & text within a nav are overflowing it's div container. I have tried using various things like word-break and overflow-hidden but nothing seems to be working for me. If you see below I have my HTML code along with the CSS. Any help appreciated!
I know there are many other similar questions but nothing answers mine.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="Enter Book Title"/>
</form>
</div>
<ul>
<li>
<a id="firstlink">
Home
</a>
</li>
<li>
<a id="secondlink">
Categories
</a>
</li>
<li>
<a id="thirdlink">
Bestsellers
</a>
</li>
<li>
<a id="fourthlink">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #f1f6f6;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
margin: 2em 1em 1em 1em;
text-align: right;
color: #888888;
display: block;
}
#nav li{
list-style-type: none;
}
#searchbar{
padding-bottom: 0.5em;
text-align: center;
}
#firstlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#secondlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#thirdlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#fourthlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
Example of Problem - http://i.imgur.com/TigP5MD.png & http://i.imgur.com/nj2A9ka.png
Give the <input> a width:
#searchbar input { max-width: 100%; }
The way to investigate things like this is to use your browser's DOM inspector tools. In this case, I was able to see (by selecting the <div> and <form> containers) that your block-level elements were constrained within the sidebar area, but the <input> itself wasn't. (In the images you linked, the container size is indicated by the blue highlight box.) It was therefore pretty obvious that the answer lay in sizing that element directly.
Here's a jsfiddle with that CSS change.
#Pointy is right, but you will always geht in trouble with using percentage width on #sidebar and the text on your input and links. At a certain point they will be always greater than the #sidebar and overlap.
You may want to look in http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
to avoid this.
Related
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.icon {
width: 32px;
height: 32px;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: dodgerblue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_311846.png" class="absoluteCenter">
<div>LOGIN</div>
</a>
</li>
<li>
<a href="#" >REGISTER</a>
</li>
<li>
<a href="#" class="new_paragraph" >GET<span>PREMIUM</span></a>
</li>
<li>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>
Hello community,
I added an icon for my navbar for the login, but when I load the website, the icon doesnt load instantly. How can I change it? I heard that it's better to use links for inserting pictures or icons to your website because it loads faster than when having a seperate picture in your project file as .png or .jpg.
It really sucks that its slowly loading, usually on other websites its instant.
Thanks!
The reason is its a massive image scaled down to icon size with your CSS and is probably being grabbed from a slow server. Here, all I did was reupload that icon to imgur and made it smaller. See here: https://i.imgur.com/76JuT8K.png?1 And look how your code runs now:
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.icon {
width: 32px;
height: 32px;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: dodgerblue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img class="icon" src="https://i.imgur.com/76JuT8K.png?1" class="absoluteCenter">
<div>LOGIN</div>
</a>
</li>
<li>
<a href="#" >REGISTER</a>
</li>
<li>
<a href="#" class="new_paragraph" >GET<span>PREMIUM</span></a>
</li>
<li>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>
This may depend on your server and cdn config BUT as written,
It loads pretty darn fast (there is no loading animation or logic waits just load order and parallelization issues). If you want it to load faster you can offset your font links, each of those is going to take up a DNS lookup and load BEFORE your image. You can either prefetch, async, or defer these. If you are going to add a css reference do the same. Javscript do the same. Internal CSS style tag move it to bottom of body. You can also move fonts, js, css to local file so it doesn't use DNS to do lookups. Additionally, your CDN is serving on http1.1 ideally you want http2 for more parallelization. Finally, you have no caching on the image on web, this should be set in your CDN for that image or image file types in general. That means you'd only ever need to download it one time.
Much more server specific is cache control for your other assets. If you make people download js, css, fonts everytime they load your site then its always gonna suck up more time than if you cache it.
It's slow on my machine too - over 600 ms - and it does not get cached.
If you don't have better options as far as a sever to host it on, you could consider embedding it directly into your HTML. Here's a site that will convert your existing URL into a base 64 img tag, that you just include directly in your page and there's no additional load needed:
https://base64.guru/converter/encode/image/png
If you link to an external asset, the loading time can only be as fast as the speed and throughput external source's servers permit for the nature and size of the asset. In general, images are always going to load more slowly than text, html and your CSS styles. There are ways to mitigate against this using optimisations in front- and back-end code, but there are also low-hanging fruits if you wish to keep your project relatively simple. It's worth noting that all of the icons on the homepage of onlinewebfonts.com took a little while to load, and it's probable that they aren't prioritising performance as a free and honestly rather old-school looking service.
I have a few suggestions that may help you out.
Firstly, the gold-standard for external icons (many of which are completely free) is fontawesome.com. They provide copy-and-paste html for hundreds of modern, performant icons plus guides for hosting, CSS styling and accessibility.
Secondly, consider the format and resolution of the content you wish to include. The icon you have chosen is a medium-to-large PNG. Considering the rendered size of the icon, this could be overkill and would naturally increase the load time. As Dai mentioned, self-hosting gives you more control over loading and content sizing; you could create a smaller, optimised version of the file and host it yourself with your html and css files.
Finally, depending on your project goals, you could consider a more advanced solution and create your own icon using the SVG html element. SVGs give you a tonne of creative flexibility in an efficient, embedded format which doesn't load via a separate HTTP request but simultaneously with your html. (Worth noting here that this does mean these icons cannot be cached or pre-loaded.) There are loads of free-to-use SVG code templates if you search for them, or you can attempt to create a unique one of your own design using the numerous permitted shape and fragment elements, or in a vector graphics program like Adobe Illustrator. Lots more on SVGs at csstricks.com.
Hope this helps!
I am learning HTML and CSS and I am trying to replicate Apple website as my first real project. I am having trouble with the images, the first image is overblown out of proportion, it is way too big than it actually is. The other two images proportions are fine, however, they are pushed to the right of the screen even though I have the parents div width set to 100%, and these child elements set accordingly to the page. Please have a look and tell me what I am doing wrong. Thank you.
<!doctype html>
<html>
<meta charset="utf-8">
<head>
<title>Apple</title>
<link rel="stylesheet" href="./apple2.css" type="text/css">
</head>
<div id="wrapper">
<body>
<nav> <!--Main navigation of the site-->
<ul>
<li>Mac</li>
<li>iPad</li>
<li>iPhone</li>
<li>Watch</li>
<li>TV</li>
<li>Music</li>
<li>Support</li>
</ul>
</nav>
<div id="content">
<div class="airpodspro"> <!--div class 1 of main content-->
<h1>Airpods Pro</h1>
<h4>Magic like you've never heard</h4>
<ul>
<li>Learn more ></li>
<li>Buy ></li>
</ul>
</div>
<div class="iphone11pro"> <!--div class 2 of main content-->
<h1>iPhone 11 Pro</h1>
<h4>Pro cameras. Pro display. Pro performance</h4>
<h6>From $24.95/mo. or $599 with trade-in.</h6>
<ul>
<li>Learn more ></li>
<li>Buy ></li>
</ul>
</div>
<div class="iphone11"> <!--div class 3 of main content-->
<h1>iPhone 11</h1>
<h4>Just the right amount of everything</h4>
<h6>From $16.62/mo. or $399 with trade-in.</h6>
<ul>
<li>Learn more ></li>
<li>Buy ></li>
</ul>
</div>
</div>
</body>
</div>
.html {
font-size: 22px;
}
body {
font-family: Helvetica;
}
html body{
margin:0;
padding:0;
}
img {
max-width: 100%;
}
#wrapper {
margin: auto;
position: relative;
}
nav {
position: relative;
background-color: #3d3d3d;
font-size: 0.9em;
word-spacing: 4em;
padding: 0.04%;
width: 100%;
}
ul{
list-style-type: none;
}
li{
display: inline;
color: white;
}
nav ul {
text-align: center;
}
nav a {
color: white;
}
#content {
width: 100%;
position: relative;
}
.airpodspro {
background-color: #5aa8cc;
height: 800px;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/airpods-pro-
takeover/airpods_pro__fok8ao5xkga6_large.jpg");
}
.iphone11pro {
background-color: #6fffd4;
margin-top: 53%;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/iphone-11-
pro/hero__dvsxv8smkkgi_large.jpg");
}
.iphone11 {
background-color: #dc84ff;
margin-top: 89%;
background-image: url("https://www.apple.com/v/home/ep/images/heroes/iphone-
11/hero__dvsxv8smkkgi_large.jpg");
}
.airpodspro, .iphone11pro {
color: #ececec;
}
.iphone11pro, .iphone11 {
height: 500px;
}
.airpodspro, .iphone11pro, .iphone11 {
font-size: 1.5em;
line-height: 1em;
position: absolute;
padding: 5% 40%;
background-repeat: no-repeat;
background-size: cover;
width: 20%;
}
You are using image in CSS As background image properties.
Its better download the respective image from apple website and then use them
in img tag in your HTML. This way you will have better control over image.
Also when you are using the image the way you are already using because of the apple link, its also downloading js codes and controlling the behavior of website. So check out for it.
Thanks, me later.
I have a page that includes links, in the form of inline-blocks, to a couple of pages. My links stay at the same height, as long as they have identical text. Like this: Screenshot of webpage
However, when I change the text in the boxes, whichever box has fewer characters is lower than the other. Like this: Screenshot of webpage
Can anyone tell me why this is happening and how to fix it?
Here is my HTML, CSS, and JavaScript:
//The JavaScript is probably irrrelevant, but maybe not
//Set menu block height proportionally to the width
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
//Reset height of menu block on resize
$(window).resize(function() {
var menuAWidth = $('.menu a').css('width');
menuAWidth = menuAWidth.substring(0, menuAWidth.length - 2);
var menuAHeight = menuAWidth*1.618;
menuAHeight = (Math.round(menuAHeight*1000))/1000;
$('.menu a').css('height', menuAHeight);
});
body {
background: #fffae5;
font-family: sans-serif;
margin: 0;
}
.main {
margin-left: 300px;
padding-left: 1%;
}
.main h2 {
text-align: center;
font-size: 30px;
}
/*Any code pertaining to the sidebar, nav, or heading is irrelevant*/
#sidebar {
position: fixed;
top: 0;
left: 0;
float: left;
width: 300px;
font-size: 20px;
background: #D2B48C;
margin-left: 0;
margin-top: 0;
height: 100%;
}
#heading {
background: #a52a2a;
padding: 5px;
text-align: center;
font-family: serif;
}
#heading h1 {
font-size: 30px;
}
nav {
line-height: 35px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
}
nav ul li,
nav ul {
padding-left: 0;
}
#sidebar a {
color: #000;
text-decoration: none;
}
/*This is the relevant code*/
.menu a {
color: #000;
text-decoration: none;
display: inline-block;
width: 21%;
background: #9E7D70;
padding: 5px;
margin: 1%;
border-radius: 10px;
}
.menu h3 {
text-align: center;
padding: 0 16px 0 16px;
}
.menu p {
padding: 0 16px 0 16px;
}
/*Also irrelavent*/
nav a[href="vocab.html"] li {
background: #000;
color: #fff;
}
nav a[href="../vocab.html"] li {
background: #000;
color: #fff;
}
<!--Most of the code is irrelevant to the problem-->
<!--The important part is in a div with an id="main"-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>He Who Teacheth</title>
<!--<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="vocab/vocab.css">
<style>
</style>-->
</head>
<body>
<div id="sidebar">
<a href="home.html">
<div id="heading">
<h1>He Who Teacheth</h1>
<p><strong>Romans 2:21</strong>
</br><q>Thou therefore which teachest another, teachest thou not thyself?</q>
</div>
</a>
<nav>
<ul>
<a href="home.html">
<li>Home</li>
</a>
<a href="math.html">
<li>Math</li>
</a>
<a href="science.html">
<li>Science</li>
</a>
<a href="history.html">
<li>History</li>
</a>
<a href="art.html">
<li>Art</li>
</a>
<a href="vocab.html">
<li>Vocabulary</li>
</a>
<a href="gospel.html">
<li>Gospel</li>
</a>
<a href="english.html">
<li>English</li>
</a>
</ul>
</nav>
</div>
<!--Main code, this is the part that pertains to the question-->
<div class="main">
<h2>Vocabulary</h2>
<div class="menu">
<a href="skeleton.html">
<h3>Skeleton</h3>
<p>This is the basic HTML structure for all the math pages.</p>
</a>
<a href="skeleton.html">
<h3>Literary</h3>
<p>This is a personal dictionary of literary terms, with a description of each one.</p>
</a>
</div>
</div>
<!--<script src="jquery.min.js"></script>
<script src="main.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
display: inline-block causes this behaviour. There's a decent amount of info about this here: http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
Short answer: use vertical-align: top on your inline-block elements to keep the tops aligned (rather than sticking to the baseline default), or try floats instead.
I've created a page (http://www.nextsteptutoring.co.uk/WhatWeTeach.html) with 4 selectable h3 elements that bring up further text on the topic for the user to read.
The 1st element works perfectly - the whole element is selectable. The 2nd and 3rd are partially selectable, the + and first letter can be clicked. The 4th can't be clicked at all.
The JS works fine and my CSS would seem to be fine as displayed by the 1st working fine, and the 2nd and 3rd being partially ok. I can't see how this could be a z-inex as the only element on the page with a z-index value is the footer, which loads fine as well.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content-type">
<link href="http://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Cabin+Condensed" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="Main.CSS">
<title>NST | What We Teach</title>
</head>
<body>
<div class="container">
<header> </header>
<div class="leftcolumn">
<h2>What We Teach</h2>
<p> Clear schemes of work, linked to the National Curriculum, which
are individually tailored to your child’s needs. We offer one to one
sessions, or small groups, with a maximum of 4 children. Groups are
based on specific needs/ability, rather than on chronological age.<br/>
<br/>
Programmes of study are adapted for high achievers in need of a
challenge, as well as those who lack confidence or require additional
support, outside of mainstream education.<br/>
</p>
</div>
<div class="rightcolumn">
<div class="hide">
<h3>+ Primary Maths</h3>
<ul>
<li>The four rules of number</li>
<li>Focus on Mental Arithmetic</li>
<li>Multiplication and associated division facts</li>
<li>Fractions, decimals and percentages</li>
<li>Data Handling, measures, and shapes</li>
<li>Algebra</li>
<li>Using and applying mathematical skills in everyday problem
solving</li>
<li>Confidence building and catch-up</li>
</ul>
</div>
<div class="hide">
<h3>+ Primary English</h3>
<ul>
<li>Clear focus on comprehension. Building skills of inference and
reasoning</li>
<li>Individually tailored spelling programme (specialised dyslexia
spelling programme)</li>
<li>Grammar and punctuation</li>
<li>Writing for different purposes and audiences</li>
<li>Handwriting</li>
<li>Confidence building and catch-up</li>
</ul>
</div>
<div class="hide">
<h3>+ Year 6 to Year 7 Transition</h3>
<p>Tailored English and Maths programme to support youngsters who
lack confidence during their transition from Primary to Secondary
education.</p>
</div>
<div class="hide">
<h3>+ Written Reports</h3>
<p>Parents may wish to receive a termly or yearly written report on
their child’s progress, and targets for the next phase of their
learning. This service will incur a fee of £10.</p>
</div>
</div>
<footer> </footer>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("header").load("Header.txt");
});
$(document).ready(function(){
$("footer").load("Footer.txt");
});
$(".hide > h3").click(function(){
$(this).parent().toggleClass("show");
});
$(".show > h3").click(function(){
$(this).parent().toggleClass("hide");
});
</script>
</body>
</html>
footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
background: rgba(150,150,150,1);
color: white;
text-align: center;
z-index: 5;
}
footer .container div {
display: inline-block;
padding: 5px 30px 2px 30px;
}
#contact {
background: rgba(120,117,185,1);
float: right;
padding: 5px 100px 2px 100px;
}
.hide h3 {
width: 100%;
background: rgba(171,167,242,0.75);
border-radius: 5px;
cursor: pointer;
padding: 2px 0 2px 8px;
}
.hide p, .hide ul {
opacity: 0;
height: 0;
}
.show {
height: auto;
}
.show p, .show ul {
opacity: 1;
list-style-type: square;
height: auto;
font-size: 18px;
}
Any ideas would be greatly appreciated!!
The problem is css.
Add this:
.hide p, .hide ul {
opacity: 0;
height: 0;
overflow: hidden;
}
The li elements were overlapping the buttons. So give overflow: hidden to the ul and they get hidden properly without affecting the rest.
CSS
.hide h3 {
padding: 2px 0 2px 10px;
width: 97%;
background: rgba(171,167,242,0.75);
border-radius: 5px;
cursor: pointer;
position: relative;
}
Add position:relative CSS property to your .hide h3 it will work fine.
Why is it that when I move my text down another vertical scroll bar appears on the inside of the browser its right where then width ends at approximately 1000px is there a way to extend the length of my page or a simple way to hide the scroll bar that is showing vertically? I still want the default browser vertical scroll bar to show. All tips are appreciated thank you!
If you need to seen any of my code just ask thanks again!
HTML:
<head>
<meta charset="utf-8" />
<title> Iamdrivingtoday.com </title>
<link rel="stylesheet" href="mfcc.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="JqueryPlugins/jquery.vegas.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.vegas.min.css"></link>
<style type="text/css">
<!--
#fadein {
position: relative;
height:100%;
width:100%;
}
#fadein img {
position:absolute;
left:0;
top:0;
}
-->
</style>
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<img src="iadt.jpg" height="100" width="300"> </img>
</header>
<center><nav id="top_menu">
<ul>
<li>Home</li>
<li>Application</li>
<li>Privacy Policy</li>
<li>Contact Us</li>
</ul>
</nav> </center>
<div class="fadein">
<img src="images/slide1.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide3.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
<img src="images/slide.jpg" width=1500 height=308 style="position: absolute; left: -90px;">
</div>
<div class="bg1">
<img src="images/bg1.jpg" width=1500 height=308 style="position: absolute; left: -125px; top: 477px;">
</div>
<img src="Images/images/newcar.png" width=150 height=150 style="position: relative; top: 320px; left: 100px">
<img src="Images/images/usedcar.png" width=150 height=150 style="position: relative; top: 320px; left: 500px">
<section id="new_car">
<center> <h3>New Car Loan Requirements</h3> </center>
<p> If you're ready to apply for a new car loan, fill out our quick an easy application here at
Iamdrivingtoday.com But obviously, you don't want to waste your time when you don't
know the requirements to get approved for a new car loan. Here's what you'll need to qualify:
</p>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut()
.next('img')
.fadeIn()
.end()
.appendTo('.fadein');
}, 4000); // 4 seconds
$.vegas('next');
});
</script>
<section id="main_section" style="position: relative; right: 0px;">
<article>
<header>
<hgroup>
<center><h1>What is Iamdrivingtoday.com?</h1></center>
</hgroup>
</header>
<p>Iamdrivingtoday.com is where we specialize in providing auto loans for people with bad credit.
We know that new and used car customers in certain times need help
finding the right auto loan provider. If you think you
have a really bad, or low credit rating, or you have been
turned down in the past, chances are we can help!
Our specialty is getting you financed and we guarantee an
approval!</p>
</article>
<article>
<header>
<hgroup>
<center><h1>Having a hard time getting approved?</h1></center>
</hgroup>
</header>
<p>No matter what your prior credit which may be due to bankruptcy, divorce,
foreclosure, repossession, late payments, or unpaid balances we get
you driving the same day no matter your circumstances.
Just fill out the application and drive away today.</p>
</article>
</section>
<div id="new_div">
<aside id="side_news">
<h4>What your Dealer needs!</h4>
<center>Paystubs!</center>
<center>$1000 Down!</center>
<center>Proof of Insurance!</center>
</aside>
</body>
</html>
CSS:
*{
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
h1{
font:bold 16px tahoma;
}
}
header,section,footer,aside,nav,article,hgroup{
display: block;
}
body{
width: 100%;
display:-webkit-box;
-webkit-box-pack: center;
}
section{
font: 12px Verdana;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header{
background: transparent;
padding: 5px;
text-align: center;
}
#top_menu{
border: 1px solid black;
background:-webkit-linear-gradient(left, #BDBDBD, #E6E6E6, #BDBDBD);
width: 998px;
text-align: center;
box-sizing: border-box;
}
#top_menu li{
display: inline-block;
list-style: none;
padding: 5px 20px;
font: bold 14px tahoma;
}
#new_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#new_car{
Position: relative;
Top: 20px
}
#bg1{
border: 3px solid black;
}
#main_section{
Position: relative;
border:1px solid black;
color: white;
text-shadow:
2px 2px 0 #000,
1px 1px 0 #000;
background-image:url('tb.png');
background-size: 365px 325px;
background-color:#cccccc;
-webkit-box-flex: 1;
float: right;
margin: 15px;
margin-top: 300px;
margin-right: 625px;
padding: 20px 20px;
}
#side_news{
border: 1px solid black;
width: 250px;
margin: 20px;
padding: 30px;
background: #66CCCC;
}
#the_footer{
text-align: center;
padding: 20px;
border-top: 2px solid black;
}
Best guess without seeing code: You have a set height on that container element with overflow:auto
Edit: After looking at your code, I think the best thing to do in this situation is to encourage you to spend some more time reading up about HTML and CSS. You have a lot of inline styles and you're positioning things that really mess up the natural flow of the document. This isn't a small error that's happening but just fundamentally poor code.
I'm not saying this to be mean, but this scroll bar is the least of your problems.
By default when your contents height or width exceeds the height or width of the container explicitly set by you, the css properties overflow-y and overflow-x are enabled.
Disabling the overflow-y value on that particular element will remove the scrollbar.
overflow-y:hidden
To avoid the content from being clipped, increase the height of the container or reduce the content or vice-versa. Not setting the height explicitly or setting it to auto will ensure the container expands enough to prevent its contents from overflowing.
DEMO
You should use,
overflow-y:hidden; - Use this for hiding the Vertical scroll
overflow-x:auto; - Use this to show Horizontal scroll
For IE8: -ms-overflow-y: hidden;
http://www.w3schools.com/cssref/pr_pos_overflow.asp