I must preface this post by saying my CSS isn't great!
I have a page with a menu on the left, which is essentially an unordered list, wrapped in a div to apply the CSS
<div class="leftMenu" id="jobMenu">
<ul>
<li ng-click="menuClick(1)">
<p>Menu Item</p>
</li>
<li ng-click="menuClick(2)">
<p>Menu Item</p>
</li>
<li ng-click="menuClick(3)">
<p>Menu Item</p>
</li>
<li ng-click="menuClick(4)">
<p>Menu Item</p>
</li>
<li ng-click="menuClick(5)">
<p>Menu Item</p>
</li>
<li ng-click="menuClick(6)">
<p>Menu Item</p>
</li>
</ul>
</div>
Menu CSS:
.leftMenu {
display: block;
text-align: center;
float: left;
height: 94vh;
border: 1px solid #778390;
width: 120px;
background-color: #778390;
color: white;
}
.leftMenu ul {
margin-top: 0;
list-style: none;
padding: 0;
}
.leftMenu li {
text-align: center;
border-bottom: 1px solid #58626B;
padding-bottom: 18px;
padding-top: 18px;
cursor: pointer;
font-size: 14px;
}
.leftMenu li:hover {
background-color: #5d9eca;
}
.leftMenu li p {
margin: 0;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 13px;
}
On the right hand side, I have a main page, with a Kendo Grid (the issue occurs no matter what the content is).
<div class="bottomSection">
<kendo-grid options="mainGridOptions">
</kendo-grid>
</div>
CSS:
.bottomSection {
display: block;
padding: 12px 15px;
/*float: right;*/
width: 84.5%;
height: 60%;
/*margin-right: 66px;*/
}
On most displays, the layout renders perfectly, like so:
However if I resize the window and/or zoom in, the bottomSection div is thrown under the left menu like so:
How can I make it so whenever the window is resized, the leftMenu always stays at 120px width and the bottomSection div resizes itself, so they both stay side by side no matter what size the window is? I would have thought using the percentage as a width property would achieve this?
Thanks in advance!
.leftMenu {
display: block;
text-align: center;
position: absolute;
left: 0;
top: 0;
height: 94vh;
border: 1px solid #778390;
width: 120px;
background-color: #778390;
color: white;
}
.bottomSection {
display: block;
padding: 12px 15px;
width: 100%;
padding-left: 135px;
height: 60%;
box-sizing: border-box;
}
Let me preface my solution by suggesting that you use a percentage for your left menu also, so that mobile devices would have a good experience. With a fixed width on one div, and a percentage on the other, you're bound to have layout problems.
With that said, if you're constrained to use a fixed with for the left menu, here's a solution - I've cut out some of the markup, to focus on the major layout aspects:
html, body {
margin: 0;
padding: 0;
}
.container {
width: 100%;
position: relative;
}
.leftMenu {
background-color: #333;
color: #FFF;
height: 200px; /* for demo purposes */
width: 120px;
position: relative;
}
.bottomSection {
background-color: #CCC;
color: #FFF;
padding: 10px;
position: absolute;
left: 120px;
right: 0;
}
.leftMenu, .bottomSection {
display: inline-block;
vertical-align: top;
}
<html>
<head>
</head>
<body>
<div class="container">
<div class="leftMenu">Menu</div>
<div class="bottomSection">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus congue hendrerit. Phasellus luctus quam in nulla mollis finibus. Quisque feugiat, metus sit amet porta fringilla, elit odio sodales mauris, sed gravida turpis felis vitae turpis. Mauris interdum ac magna vel pretium. Nulla porta rutrum velit mollis congue. Proin pellentesque urna et magna lacinia, et tincidunt mi placerat. Nulla suscipit rhoncus viverra. Integer pulvinar at purus non tristique.
</div>
</div>
</body>
</html>
Points to note:
Using display: inline-block for layout instead of float.
A parent div (container) is used: must be set to position: relative (or possibly absolute).
Using absolute for positioning of bottomSection. left is set to 120px (to ignore the left menu); right is set to 0, to stretch to the other side of the screen.
vertical-align is set to top, to keep alignment of the child divs to the top.
Related
How would I make it so that a border only spans a certain length, on one side? I tried
<ul id = 'list'>
<li class = 'list-item'>example1</li>
<li class = 'list-item'>example2</li>
<li class = 'list-item'>example3</li>
</ul>
and the css:
<style>
#list{
list-style-type:none;
display:inline;
}
.list-item{
float:left;
border-left:solid 5px red;
}
</style>
The only way to have a border take up part of the width or height of an element is to make use of two elements - a parent and child (or an element that is absolutely-positioned).
Vertical borders should be specified on the element with the smaller height, and horizontal borders should be specified on the element with the smaller width.
This can be seen in the following example:
#div1 {
height: 200px;
width: 100px;
border-top: 5px solid red;
}
#div2 {
height: 100px;
width: 200px;
padding-left: 5px;
border-left: solid 5px red;
}
<div id="div1">
<div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et ex sed mi luctus luctus sed sed mauris. Cras pretium nisi non odio rhoncus, id viverra erat rutrum. Vivamus congue ultrices sem maximus tempor. Suspendisse in est gravida, elementum lorem eget, tincidunt urna.</div>
</div>
Hope this helps! :)
You can try the line-height hack:
#list {
list-style-type: none;
display: inline;
}
.list-item {
float: left;
border-left: solid 5px red;
line-height: 5px;
}
<ul id='list'>
<li class='list-item'>example1</li>
<li class='list-item'>example2</li>
<li class='list-item'>example3</li>
</ul>
The pseudo-element hack:
#list {
list-style-type: none;
display: inline;
}
.list-item {
float: left;
position: relative;
margin-left: 5px;
}
.list-item:after {
content: '';
background-color: red;
bottom: 0;
height: 50%;
left: -5px;
position: absolute;
width: 5px;
}
<ul id='list'>
<li class='list-item'>example1</li>
<li class='list-item'>example2</li>
<li class='list-item'>example3</li>
</ul>
So this again links to the same website as my other question and is another positioning problem that is possibly simple.
I have a container div that I want to hold two divs inside it, one taking up a 3rd of the container on the right to contain pictures and one to contain text on the left. For some reason however, when telling both inner divs to float left the container seems to disappear and when using inspect element, is in a weird place that I cannot explain.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toby King - Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<div id="banner">
<div class="menu">
<div class="menuBit">
<h2 class="menuContent">HOME</h2>
</div>
<div class="menuBit">
<h2 class="menuContent">BLOG</h2>
</div>
<div class="menuBit">
<h2 class="menuContent">WORK</h2>
</div>
</div>
</div>
<div class="main">
<div class="textSection">
<div class="mainTextSection">
<h1 class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus erat nec porttitor facilisis. In hac habitasse platea dictumst. Mauris id faucibus arcu. Mauris non orci mauris. Vivamus a porta odio. Praesent at purus ante. Quisque magna odio, elementum ut facilisis vitae, consequat at tellus. Praesent nulla est, ultrices sit amet sagittis eget, consequat id justo. Integer elementum in nibh eu ultricies. Integer fringilla urna in mollis accumsan. Etiam iaculis urna et malesuada tincidunt. Nunc dignissim purus eu tempor bibendum.</h1>
</div>
<div class="mainPictureSection">
<img src="images/Example.svg">
</div>
</div>
</div>
<div id="footer">
<h2 class="social">CONTACT:</h2>
<img src="images/fb.png" class="social">
<h2 class="social">some text</h2>
<img src="images/insta.png" class="social">
<h2 class="social">some text</h2>
</div>
</body>
</html>
CSS:
#banner {
height: 50px;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
position: fixed;
background-image: url("images/menuHor.png");
}
.menuBit {
height: 40px;
width: 100px;
margin: 0px;
padding: 0px;
float: left;
margin-left: 10px;
}
.menuContent:hover {
text-decoration: underline;
cursor: pointer;
}
.menuContent {
font-family: "cicle-gordita";
font-size: 30px;
text-align: center;
padding: 0px;
margin: 0px;
margin-top: 10px;
color: #ffffff;
}
.main {
position: fixed;
margin: 0px;
margin-top:50px;
padding: 0px;
width: 100%;
height: 94.7916666667%;
overflow: scroll;
background: url("images/backgr.png");
}
.maintext {
font-family: "cicle-gordita";
}
.textSection {
width: 65%;
height: auto;
background: #FFFFFF;
margin-right: 17.5%;
margin-left: 17.5%;
margin-top: 2.5%;
margin-bottom: 5%;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.mainPictureSection {
height: auto;
width: 21.67%;
float: left;
overflow: hidden;
margin: 0px;
padding: 0px;
}
.mainTextSection {
height:auto;
width: 43.33%;
float: left;
margin: 0px;
padding: 0px;
}
#footer {
width: 100%;
height: 30px;
clear: both;
position: fixed;
bottom: 0;
background-image: url("images/menuHor.png");
}
.social {
float: left;
padding: 0;
margin-top: 0px;
margin-bottom: 2.5px;
margin-left: 10px;
font-family: "cicle-gordita";
color: #ffffff;
}
.social h2 {
margin-top: 5px;
}
The Jscript/jQuery file is just to fade bits in and out but contributes no effect to positioning
Change float: left to display: inline-block should be the best way to do this.
display: inline-block adds white-space. One way to remove this is adding comments between your divs:
<div class="container">
<div class="child">
</div><!--
--><div class="child">
</div>
</div>
or have the divs inline like this:
<div class="container">
<div class="child"></div><div class="child"></div>
</div>
To align them at the top add vertical-align: top to the child divs.
Where has the parent element gone?
If a container has only floating children, its height will collapse as floating elements are not considered when calculating height of a container. You need to clear those floating elements to make the container actually contain the floating children.
One way to do this is by adding a clearfix and putting the class on the container element (taken from http://nicolasgallagher.com/micro-clearfix-hack/):
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
That's kind of ugly. Any other solution?
There is an (more than one) alternative, though, the most common probably being using display: inline-block instead of float: left.
Unfortunately, looking at the following example you'll see it does not work as expected initially:
.container {
background-color: #a00;
}
.child {
background-color: #f0f0f0;
display: inline-block;
width: 50%;
}
<div class="container">
<div class="child">Child One</div>
<div class="child">Child Two</div>
</div>
You see that the second container wraps to a new line even though both have been defined to have their fair share of 50% of the container's width.
Why does this happen?
As soon as your HTML contains any sort of whitespace between inline-block elements, it's going to get rendered and consume space.
So how can I fix that?
The most common way to avoid that is to set the container's font-size: 0; (which is not always the go-to-solution, but in most cases), and re-setting it ony the children as needed:
.container {
background-color: #a00;
font-size: 0;
}
.child {
background-color: #f0f0f0;
display: inline-block;
font-size: 16px;
width: 50%;
}
<div class="container">
<div class="child">Child One</div>
<div class="child">Child Two</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am looking for a way to allow an image inside of a div to stay overflow:visible and to allow the border of the parent div to overlap the image. Right now I have the image right where I want it using negative margins, but the images is covering the parent div's border.
I tried using z-index for the image and the div but that did now work.
This is the effect that I am trying to achieve.
http://imgur.com/a/yt8eU
This where I currently am.
http://imgur.com/a/sgYjI
https://jsfiddle.net/zgwywq0v/
random html <p>
Position the image absolutely or relatively and set it z-index: -1.
div.keynote {
border: 3px solid #F68B1F;
position: relative;
}
div.keynote img {
position: absolute;
left: -20px;
top: -20px;
z-index: -1;
}
https://jsfiddle.net/zgwywq0v/3/
The main trick here is to use the pseudo element ::before for the border, and to align them left/right I gave their parent keynote display: flex
Note, an obvious way would be using z-index, though if one can do it without, do it without
div.keynote {
position: relative;
display: flex;
}
div.keynote::before {
content: '';
position: absolute;
border: 3px solid #F68B1F;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
}
div.keynote .speaker-info {
position: relative;
padding: 30px 30px 30px 10px;
box-sizing: border-box;
}
<div class="keynote keynote-border">
<div>
<img src="http://placehold.it/240x320">
</div>
<div class="speaker-info">
<p class="name">PASTOR
<br><strong>PATRICK</strong>WINFIELD</p>
<p class="session">PREPARING FOR TOMORROW</p>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie rutrum ipsum, luctus interdum metus egestas non. Aliquam at mi sollicitudin leo blandit ornare. Suspendisse laoreet ultrices ante. Nunc a velit elementum, pretium erat ut, vulputate
ante. Maecenas ac magna augue. Donec ac mauris lectus.</p>
</div>
</div>
Updated based on comment
If you can't/don't want to use flex, here is a fallback
div.keynote {
position: relative;
overflow: auto; /* clear float and grow with its content */
}
div.keynote::before {
content: '';
position: absolute;
border: 3px solid #F68B1F;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
}
div.keynote div:first-child {
float: left;
width: 240px;
}
div.keynote .speaker-info {
position: relative;
margin-left: 240px; /* left div width */
padding: 30px 30px 30px 10px;
box-sizing: border-box;
}
<div class="keynote keynote-border">
<div>
<img src="http://placehold.it/240x320">
</div>
<div class="speaker-info">
<p class="name">PASTOR
<br><strong>PATRICK</strong>WINFIELD</p>
<p class="session">PREPARING FOR TOMORROW</p>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie rutrum ipsum, luctus interdum metus egestas non. Aliquam at mi sollicitudin leo blandit ornare. Suspendisse laoreet ultrices ante. Nunc a velit elementum, pretium erat ut, vulputate
ante. Maecenas ac magna augue. Donec ac mauris lectus.</p>
</div>
</div>
Take the image out of the div and place bordered div and img inside a parent with position: relative; then you can change the position and z-index of bordered div and img to get your result.
This looks like the perfect opportunity to deploy an ::after pseudo-element - this will enable you to make the orange border exactly the dimensions you need it to be and position it exactly where you want it to be, completely independently of all the other elements.
.profile-card {
margin: 100px 0 0 100px;
width: 600px;
height: 300px;
font-family: arial, helvetica, sans-serif;
}
.profile-card::after {
content: '';
position: absolute;
top: 70px;
left: 70px;
z-index: 0;
display: block;
width: 600px;
height: 220px;
border: 3px solid rgb(255,165,0);
}
.profile-card h2 {
font-weight: 300;
}
.profile-card h2 b {
font-weight: 900;
}
.profile-card p,
.profile-card a.more {
font-size: 11px;
}
.profile-card h2,
.profile-card h2 ~ strong,
.profile-card a.more {
text-transform: uppercase;
}
.profile-card img {
display: block;
float: right;
width: 280px;
height: 280px;
background-color: rgb(191,191,191);
border: 1px solid rgb(0,0,0);
transform: translateY(-108px);
}
.profile-card a.more {
display: inline-block;
position: relative;
z-index: 6;
margin-left: 90px;
padding: 12px;
color: rgb(255,255,255);
background-color: rgb(255,165,0);
text-decoration: none;
}
<div class="profile-card">
<h2><b>Profile</b> Name</h2>
<img src="/profile-name.png" alt="Profile Photo" />
<strong>Profile Tagline Here</strong>
<p>Paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here, paragraph here.</p>
<a class="more" href="/more.html">Read More</a>
</div>
Hello I have made a website where people can get information on various topics. I spent all day yesterday adding in Rectangles to the background to make the site look slightly nicer. Last night I looked at the site on my phone and saw that the rectangles were not lined up correctly like they should be and the way they are on PC. I dont have enough reputation to post Images so I'll describe the problem.
On pc a rectangle is drawn behind one block of text and a rectangle is drawn behind an image. On the phone the image has the rectangle behind it but the text only has part of the rectangle behind it. Its as if they wont line up or the text is being re-formatted or something. The site name is omicrome.com if you want yo see for yourself. Here's the code that takes care of the part of the site with the problem.
<div class = "container_24">
<header>
<div id = "rectban"></div>
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="# " class = selected>Home</a></li>
<li>Articles</li>
<li><a href="software.html">Projects</a ></li>
<li>About</li>
</ul>
</nav>
<div id = "rect0"></div>
<div class = "banner grid_18" href="about.html">
View Article
<h2>
</h2>
</div>
<div class=" grid_8 callout"></div>
View Gallery
</header>
<div id = "rect1"></div>
<div id = "rectIndexContact"></div>
<div id = "contactblock">
<h6>Contact</h6>
<center>Email</center>
<center>Twitter</center>
</div>
<div class = "main clearfix">
<div class ="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section...
<p>Find Out More</p>
</div>
<div class ="grid_9">
<h3>Our Content</h3>
<p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space... </p><p>
</p>
<br>
<p>Find Out More</p>
</div>
<div class ="grid_6">
</div>
Here is the CSS:
#rect1{
position: absolute;
margin-top: 10px;
margin-left: -6px;
width: 750px;
height: 208px;
background: #ffffff;
z-index: -1;
}
#rect2{
position: absolute;
margin-top: 195px;
margin-left: -6px;
width: 750px;
height: 1663px;
background: #ffffff;
z-index: -1;
}
h6{
font-size: 26px;
border-bottom: 1px solid #d1d1d1;
padding-bottom: 20px;
margin-bottom: 15px;
line-height: 1em;
padding-right: 83px;
}
.banner{
background: url(../img/rectoday.jpg) no-repeat;
width:695px;
height:250px;
margin-top: 10px;
clear:both;
}
.callout{
background: url(../img/callout.png) no-repeat;
text-indent: -9999px;
width : 250px;
height:250px;
margin: -250px 710px 22px;
float: left;
}
header{
overflow: hidden;
}
header h1{
background: url(../img/logo.png) no-repeat;
text-indent: -9999px;
width : 220px;
height:60px;
margin: -10px 5px 22px;
float: left;
}
nav{
float: right;
padding-top:10px;
margin-right: 09px;
}
nav li{
display: inline;
}
li{
margin-left: 24px;
}
nav a{
text-transform: lowercase;
}
.grid_4{
}
.grid_3{
margin-left: 60px;
}
a{
color:#7e7e7e;
text-decoration: none;
}
a:hover, .selected{
color: black;
}
a:.selected{
color:black;
}
p{
font-size: 13px;
line-height: 20px;
color: #353535;
}
The rectangles are just with the id "rect1" or "rect0". Here is a link to the screenshots: https://drive.google.com/open?id=0B5JL3GH0xtHPMzVESWhSb1JDa0k and https://drive.google.com/file/d/0B5JL3GH0xtHPdUZSZm1ZMlFYWGs/view?usp=sharing How can I make the rectangles match up with the text and images the same way on pc's and phone's? Thanks -Jack.
UPDATE:
Created another example for clarification: jsfiddle updated.
There are two cases in the example below, the first one uses a wrapper like I am recommending, and the second one uses a rectangle using position absolute and fixed height like you are using. Check it out in different viewports and see what happens.
HTML:
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae massa eget ante tincidunt finibus. Maecenas dolor ipsum, feugiat a lacus quis, efficitur egestas elit. Cras quis mattis eros. Aliquam enim felis, sollicitudin ac orci at, mattis interdum libero. Nunc pretium mi diam, sit amet facilisis urna condimentum cursus. Aliquam fringilla ipsum aliquam tortor sodales aliquet. Sed imperdiet odio vitae malesuada molestie.
</p>
</div>
<div class="rect1"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae massa eget ante tincidunt finibus. Maecenas dolor ipsum, feugiat a lacus quis, efficitur egestas elit. Cras quis mattis eros. Aliquam enim felis, sollicitudin ac orci at, mattis interdum libero. Nunc pretium mi diam, sit amet facilisis urna condimentum cursus. Aliquam fringilla ipsum aliquam tortor sodales aliquet. Sed imperdiet odio vitae malesuada molestie.
</p>
CSS:
.wrapper {
background-color: #7DF481;
padding: 10px 20px;
}
.rect1 {
position: absolute;
top: 140px;
background-color: #ff0000;
height: 90px;
width:100%;
z-index: -1;
}
EDIT:
You should read more about responsive design, you could use a framework like Bootstrap. There's also media features that limit the stylesheet's scope, you can read more about that here: Using Media Queries.
The problem is that you are relying on a fixed height for your rectangles. The text will try to fit in the viewport of your device, making your container have a higher height. I recommend you using a wrapper instead of fixed rectangles. Here's an example: jsfiddle
HTML:
<div class="container_24">
<header>
<div id="rectban"></div>
<h1>Omicrome</h1>
<nav>
<ul>
<li><a href="# " class=s elected>Home</a></li>
<li>Articles</li>
<li><a href="software.html">Projects</a ></li>
<li>About</li>
</ul>
</nav>
<div id="rect0"></div>
<div class="banner grid_18" href="about.html">
View Article
<h2>
</h2>
</div>
<div class=" grid_8 callout"></div>
View Gallery
</header>
<div id="rect1">
<div id="rectIndexContact"></div>
<div id="contactblock">
<h6>Contact</h6>
<a href="mailto:crew#omicrome.com" class="button" id="contactEMAIL">
<center>Email</center>
</a>
<a href="https://twitter.com/Error404inSpace" class="button" id="contactTwitter">
<center>Twitter</center>
</a>
</div>
<div class="main clearfix">
<div class="grid_9">
<h3>About The Site</h3>
<p>Here at Omicrome we are always coming up with new and innovative ideas for the future and for the present. These ideas are researched and expanded upon to make them a reality. View our ideas in the article section...
<p>Find Out More</p>
</div>
<div class="grid_9">
<h3>Our Content</h3>
<p>We post a variety of ideas and project's based around space and technology. Some of them include a hand held cheap computer, software to teach people about space... </p>
<p>
</p>
<br>
<p>Find Out More</p>
</div>
<div class="grid_6">
</div>
</div>
CSS:
#rect1 {
background-color: #ffffff;
padding: 10px 20px;
}
#rect2 {
position: absolute;
margin-top: 195px;
margin-left: -6px;
width: 750px;
height: 1663px;
background: #ffffff;
z-index: -1;
}
h6 {
font-size: 26px;
border-bottom: 1px solid #d1d1d1;
padding-bottom: 20px;
margin-bottom: 15px;
line-height: 1em;
padding-right: 83px;
}
.banner {
background: url(../img/rectoday.jpg) no-repeat;
width: 695px;
height: 250px;
margin-top: 10px;
clear: both;
}
.callout {
background: url(../img/callout.png) no-repeat;
text-indent: -9999px;
width: 250px;
height: 250px;
margin: -250px 710px 22px;
float: left;
}
header {
overflow: hidden;
}
header h1 {
background: url(../img/logo.png) no-repeat;
text-indent: -9999px;
width: 220px;
height: 60px;
margin: -10px 5px 22px;
float: left;
}
nav {
float: right;
padding-top: 10px;
margin-right: 09px;
}
nav li {
display: inline;
}
li {
margin-left: 24px;
}
nav a {
text-transform: lowercase;
}
.grid_4 {}
.grid_3 {
margin-left: 60px;
}
a {
color: #7e7e7e;
text-decoration: none;
}
a:hover,
.selected {
color: black;
}
a:.selected {
color: black;
}
p {
font-size: 13px;
line-height: 20px;
color: #353535;
}
Please note the nav utilises JS as well as the footer text. The rest is all HTML/CSS. I can show the JS if needs be but I believe this issue lies either with the HTML or the CSS.
In the preview of the site, the navigation (nav01/menu) and the body/main area are shifted to the right slightly (approximately by 10px). So instead of the navigation and main red area being in line with the banner image/bg they're offset to the right. I'm assuming this is what has caused a horizontal scroll bar (there's approximately 400px of additional blank space on the right hand side of the website).
I've set margins to 0 in the specific areas but these left and right margins remain.
The second issue is with what will become a hidden content/dropdown area (currently visible) and the page divider for the next page (scrolling single page). In each of these instances, pagedown and hidden box, I've specified the width as 100% yet they remain central and don't even stretch to the actual image sizes.
Any help with these 2 problems would be appreciated. I'm sure it's something simple but I just can't seem to find it after hours of trying.
..............................
#fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
}
#fontface {
font-family: Swisz;
src: url(fonts/swisrg.ttf);
font-weight: thin;
}
#container {
position: absolute;
top: 0px;
left: 0px;
background-color: #73008C;
background-image: url("banner.jpg");
background-size: 100%;
width: 100%;
height: 800px;
content: 60px;
padding: 0px;
border: 5px #73008C;
margin-left: 0px;
margin-right: 0px;
z-index: -3;
}
#header {
position: absolute;
background-color: rgba(255, 255, 255, 0.4);
width: 100%;
height: 12%;
margin: auto;
z-index: 1;
}
#logo {
position: relative;
border: 0px;
margin-top: 9px;
z-index: 2;
}
#nav01 {
position: absolute;
background-color: #374754;
width: 100%;
height: 40px;
padding: 0px;
margin-left: 0px;
margin-top: 85px;
margin-right: 0px;
border-radius: 0px 0px 6px 6px
}
ul#menu {
font-family: Swisz;
position: relative;
background-color: #374754;
padding: 0;
margin-top: 13px;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
ul#menu li {
display: inline;
margin-right: 5px;
}
ul#menu li a {
background-color: #374754;
padding: 10px 10px;
text-decoration: none;
color: #ffffff;
border-radius: 4px 4px 4px 4px;
}
ul#menu li a:hover {
color: white;
font-style: bold;
background-color: #d83030;
}
#overlay {
font-family: Swisz;
position: relative;
margin-left: auto;
margin-right: auto;
top: 250px;
bottom: 200px;
width: 30%;
height: 30%;
background-color: #d83030;
padding: 15px 15px;
color: #ffffff;
border-radius: 8px 8px 8px 8px;
}
#info {
position: relative;
left: 400px;
top: 280px;
}
body {
font-family: "Helvetica", Verdana, sans-serif;
font-size: 12px;
background-color: #ffffff;
color: #ffffff;
text-align: center;
padding: 0px;
}
#main {
position: absolute;
top: 600px;
padding: 10px;
padding-left: 200px;
padding-right: 200px;
background-color: #d83030;
background-position: top center;
margin: 0;
}
#h1 {
font-family: Swisz;
text-shadow: 5px 5px 5px ##374754;
color: #ffffff;
text-align: center;
font-size: 30px;
}
#h3 {
font-family: Helvetica, sans-serif;
color: #ffffff;
text-align: left;
font-size: 12px;
}
.h5 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 16px;
}
#hiddenbox {
position: relative;
width: 100%;
height: 298px;
background-image: url("hidden_bg.jpg");
background-repeat: repeat-x;
padding: 5px;
padding-top: 7px;
margin: 0;
text-align: left;
}
.pagedown {
position: relative;
width: 100%;
padding: 0;
top: 900px;
margin: 0;
}
#sub {
position: relative;
padding-left: 20%;
padding-right: 20%;
padding-bottom: 10%;
padding-top: 1%;
color: #374754;
top: 1200px;
background-color: #ffffff;
margin: 0;
#h4 {
font-family: Helvetica, sans-serif;
color: #374754;
text-align: center;
font-size: 40;
}
#footer {
position: relative;
color: #ffffff;
margin-bottom: 0px;
margin-top: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title>TITLE HEREd</title>
<link href="Site.css" rel="stylesheet">
<script src="Script.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="logo.png" alt="Logo" style="width: 20%; height: 20%"></img>
</div>
</div>
</div>
<nav id="nav01"></nav>
<div id="overlay">
<h1>Filler title text here<h1>
<h2>Filler filler filler filler filler</h2>
</div>
<div id="info">
<img src="seehow.png" alt="See How" style="width:345px;height:240px">
</div>
<div id="main">
<h1>LIPSUM</h1>
<h2>main content will al be placed here</h2>
<img src="wilfcent.png" alt="Wilf" style="width:345px;height:428px">
<div id="hiddenbox">
<h3>drop down content/hiddent content here/h3>
<img src="promo.png" alt="Promotion" style="width:321px;height:176px"></img>
</div>
<img src="pagedown.gif" alt="Page down" style="width:100%;height:68px"></img>
</div>
<div id="sub">
<h4> How It Works </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut turpis sapien. Proin tempus nibh ac rhoncus congue. Nullam pretium placerat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sed est vitae libero placerat tristique. Aliquam pulvinar convallis mi, vitae consequat tortor pellentesque ut. In lacinia, ex vel accumsan viverra, est ex efficitur justo, pulvinar luctus mi leo nec risus. Sed nec tellus bibendum, convallis enim at, elementum lectus. Fusce eu enim blandit, volutpat eros lobortis, auctor odio. Praesent tristique sem elit, nec consequat tortor placerat at. Nullam eu arcu et ex iaculis feugiat ut quis enim. Nulla quis libero placerat, accumsan nulla et, laoreet magna. Sed congue ut nunc maximus gravida.</p>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>
To solve your first issue of the navigation and the body being shifted give the body tag a margin:0px. This will move them back into place.
The 400px of blank space is caused by the left:400px you have on the #info element.
Your second issue is caused by the padding-left and padding-right you have on the #main element. Remove those, and give a width:100% to the #main. The parent and now the child both fill the width of the page.
The first problem is quite simple. All browser handle html tags differently, and most of the browsers for example have given the <body> a margin, which causes you the 10px.
Simply add this to your css file:
body, html {
margin: 0;
padding: 0;
}
The reason for the 400px on the right side is your <div id="info"> tag. This div got the attribute (set by the browsers default) div {display: block}, which says the div does block the full width, that is available by the screen size.
Then you gave it the css attributes position: relative; left: 400px. That means, that the div, as said above, already has the full width plus the 400px added as space from the left. Because of that its overscaled.
A smoother version is to change the leftinto padding, so it becomes:
#info {
position: relative;
padding-left: 400px;
top: 280px;
}
Your second issue is caused by the padding-(left/right)attributes on your #main div. You can simply remove them and your div gets the full width of the page.
Last, you have got one missing <symbol in this line before the closing </h3> tag.
<h3>drop down content/hiddent content here/h3>
Hope this helps, feel free to ask for further information.
Best regards,
Marian.