Site: http://tripleo.biz/test/index.html
Please shrink browser to mobile view.
Header:
I have problems with the alignment. They don't seem to align all to the middle of the header. The Android logo seems ot be the only thing aligned. The text and dash image aren't. :/
Navigation:
The Navigation Drop Down is in effect when you mouse-over "ALL" but the links after Link 2 are hidden behind the image. I tried to use z-index to fix this issue but nothing still.
Content Area:
Another problem with Vertical align. For some reason there is more space at the bottom of the content.
Index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="stylesheet" href="css/styled.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<div class="image_carousel">
<img src="images/menu.png" style="width: 15px; height: 22px;" />
<img src="images/android_icon.png" style="margin-top: 10px; width: 26px; height: 46px;" />
<div class="nav">
ALL
<ul>
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</header>
<section>
<img src="images/headerimg.jpg" />
<div class="bround">
<img src="images/logo.jpg" class="imgleft" width="75px" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
<div class="bround">
<img src="images/logo.jpg" class="imgleft" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
</section>
<footer>
<p>Copyright Confidential</p>
</footer>
</body>
</html>
CSS
img {
width: 100%;
}
header {
background: #83aa01;
width: 100%;
height: 76px;
/*position: fixed;*/
top: 0;
left: 0;
vertical-align:middle;
}
.image_carousel {
padding: 5px 0 1px 1px;
vertical-align: middle;
text-align: left;
}
.image_carousel img {
border: 0px;
padding: 0px;
margin: 0px;
display: inline-block;
vertical-align: middle;
bottom:0px;
}
.clearfix {
float: none;
clear: both;
}
div.bround {
background-color: #FFF;
color: #000;
padding: 20px;
margin-top: 10px;
margin-right: 0px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
img.imgleft {
position:relative;
float: left;
margin: 0px 5px 5px 0px;
width: 60px;
}
.bauthor {
color: #D3D3D3;
}
.bauthor a {
color: #83aa01;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
font-size: 20px;
}
div.nav {
border: 0px;
padding: 0px;
margin: 0px;
display: inline-block;
vertical-align: middle;
bottom:0px;
color: #FFF;
}
div.nav ul, div.nav:active ul {
display: none;
position: absolute;
padding: 0px;
background: #444;
color: #FFF;
top: 50px;
width: 20%;
border-radius: 4px 0 4px 4px;
}
div.nav li {
text-align: center;
width: 100%;
padding: 5px 0;
margin: 0px;
border-bottom: 1px dotted #FFF;
z-index:1000;
}
div.nav:hover ul {
display: block;
}
div.nav ul, div.nav a {
color: #FFF;
font-size: 17px;
font-weight: normal;
letter-spacing:2px;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
-
Please Help!
Thanks.
For Header :
set your .image_carousel padding-top value to 15px and remove margin-top from your android icon. which looks like this
.image_carousel {
padding: 15px 0 1px 1px;
vertical-align: middle;
text-align: left;
}
Content Area :
You have Given margin-bottom :20px to your p tag Just remove that .
Regarding the Navigation issue, You need to add z-index for the dropdown menu. Update your css like below it will resolve.
div.nav ul, div.nav a
{
color:#fff;
font-size:17px;
font-weight:normal;
letter-spacing:2px;
z-index:10;
}
Regarding the Content Area padding is coming from the following class
section
{
margin:80px auto 40px;
max-width:980px;
position:relative;
padding:20px;
}
If you remove the margin bottom 40px, it will work fine in mobile. But the problem is you wont get enough space on bigger screens. So you can use media query and apply this class only on mobile versions.
#media all and (max-width: 399px)
{
section
{
margin-bottom:0px;
}
}
Test css copy code
header {
background: none repeat scroll 0 0 #83AA01;
height: 76px;
position: relative;
width: 100%;
z-index: 10;
}
.image_carousel {
text-align: center;
vertical-align: middle;
}
.image_carousel img, .image_carousel > .nav {
border: 1px solid #DDDDDD;
display: inline-block;
height: 74px;
line-height: 74px;
padding: 0 30px;
position: relative;
vertical-align: middle;
}
.image_carousel > .nav:hover {
background-color: #FF0000;
}
.image_carousel > .nav ul li {
line-height: normal;
}
.clearfix {
clear: both;
float: none;
}
div.bround {
background-color: #FFFFFF;
border-radius: 15px;
color: #000000;
margin-right: 0;
padding: 20px;
}
img.imgleft {
float: left;
margin: 0 5px 5px 0;
position: relative;
width: 60px;
}
.bauthor {
color: #D3D3D3;
}
.bauthor a {
color: #83AA01;
}
#menu-icon {
display: inline-block;
font-size: 20px;
height: 40px;
width: 40px;
}
div.nav ul, div.nav:active ul {
background: none repeat scroll 0 0 #444444;
border-radius: 4px 0 4px 4px;
color: #FFFFFF;
display: none;
left: 0;
padding: 0;
position: absolute;
width: 100px;
margin-top:30px;
}
div.nav li {
border-bottom: 1px dotted #FFFFFF;
margin: 0;
padding: 5px 0;
text-align: center;
width: 100%;
z-index: 1000;
}
div.nav li:hover{
background-color:red;
}
div.nav:hover ul {
display: block;
top: 43px;
}
div.nav ul, div.nav a {
color: #FFFFFF;
font-size: 17px;
font-weight: normal;
letter-spacing: 2px;
}
ul {
list-style: none outside none;
}
li {
display: inline-block;
float: left;
padding: 10px;
}
//yes test html
<header>
<div class="image_carousel">
<img src="images/menu.png" />
<img src="images/android_icon.png" />
<div class="nav">
ALL
<ul>
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</header>
<section>
<img src="images/headerimg.jpg" />
<div class="bround">
<img src="images/logo.jpg" class="imgleft" width="75px" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
<div class="bround">
<img src="images/logo.jpg" class="imgleft" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
</section>
<footer>
<p>Copyright Confidential</p>
</footer>
Related
I have to make a webpage of food ordering. In the left side, navigation is defined, and in the center there is a tag line quote written in
div class="main_content"
which will be in the center of the webpage and in the
div class="right"
there is several other line is written which will be in the right upside like People Cards in google search.
Help me to adjust it using CSS. Below is my Html and CSS code.
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Josefin Sans', sans-serif;
}
body {
background-color: #f3f5f9;
}
.wrapper {
display: flex;
position: relative;
}
.wrapper .sidebar {
width: 200px;
height: 100%;
background: #FDFDFB;
padding: 30px 0px;
position: fixed;
}
.wrapper .sidebar h2 {
color: rgb(82, 17, 17);
text-transform: uppercase;
text-align: center;
margin-bottom: 50px;
}
.wrapper .sidebar ul li {
padding: 15px;
border-bottom: 1px solid #bdb8d7;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.wrapper .sidebar ul li a {
color: #bdb8d7;
display: block;
}
.wrapper .sidebar ul li a .fas {
width: 25px;
}
.wrapper .sidebar ul li:hover {
background-color: #594f8d;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .main_content {
width: 100%;
margin-left: 200px;
}
.wrapper .main_content .header {
padding: 20px;
background: #fff;
color: #717171;
border-bottom: 1px solid #e0e4e8;
}
.wrapper .main_content .info {
margin: 20px;
color: #717171;
line-height: 25px;
}
.wrapper .main_content .info div {
margin-bottom: 20px;
}
.right {
width: 48%;
float: left;
padding: 10%;
}
<div class="wrapper">
<div class="sidebar">
<h2>Loren<br>Ipsum</h2>
<ul>
<li><i class="fas fa-about"></i>About</li>
<li><i class="fas fa-service"></i>Service</li>
<li><i class="fas fa-cuisine"></i>Cuisine</li>
<li><i class="fas fa-gallery"></i>Gallery</li>
<li><i class="fas fa-contact"></i>Contact</li>
<li><i class="fas fa-book"></i>Book</li>
</ul>
<br>
<br>
<input type="submit" value="Cart">
</div>
<div class="main_content">
<div class="info"> What are you having for Lunch?</div>
<div class="right"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod incidunt ut laoreet et</div>
</div>
</div>
Wrap the div in container div and adjust in to float right or left.
Make sure your div width is set to 100%.
I'm trying to center an image gallery with a lists background symmetrically. No matter the size of the browser. What are some ways I can symmetrically align content
I tried setting a wrapper around the list and the gallery and setting a fixed width but it only changes my image size and not the list background size. I also tried having a float but it changes around everything.
.months {
display: inline-block;
text-align: justify;
color: #808080;
width: 44.4%;
margin-top: 25px;
}
.months ul {
list-style-type: none;
}
.months li {
background-color: #ffffff;
padding: 16px;
border-bottom: 1px solid #808080;
}
.tourCities {
display: inline-block;
width: 260px;
margin: 15px;
background-color: #ffffff;
}
.tourCities img {
width: 100%;
height: auto;
}
http://jsfiddle.net/xza7g439/
I have included a jsfiddle of the code to keep everything neat.
https://imgur.com/a/PnIzxnp This is what I wanted to achieve
https://imgur.com/a/dDt27UE but this is what I get and it doesn't look right hurts my OCD.
You can do this:
CSS
body {
background-color: #000;
box-sizing: border-box;
}
.wrapper{
display: inline-block;
width: 500px; //Set the size here what you want (px, %)
position: relative;
left: 50%;
transform: translateX(-50%);
}
.months {
display: inline-block;
text-align: justify;
color: #808080;
width: 100%;
margin-top: 25px;
}
.months ul {
list-style-type: none;
margin:0;
padding:0;
}
.months li {
background-color: #ffffff;
padding: 16px;
border-bottom: 1px solid #808080;
}
.tourCities {
display: inline-block;
width: calc(50% - 8px);
background-color: #ffffff;
vertical-align: middle;
float: left;
margin: 16px 0px;
}
.cities .tourCities:nth-child(2n+0) {
margin-right:0;
margin-left: 16px; //pixel perfection
}
.tourCities img {
width: 100%;
height: auto;
}
.desc {
text-align: justify;
padding: 5px;
}
.date{
font-weight: 100;
color: #808080;
}
.smlBtn {
color: #ffffff;
background-color: #000000;
border-style: none;
padding: 14px;
}
HTML
<div class="wrapper">
<div class="months">
<ul>
<li>September</li>
<li>October</li>
<li>November</li>
</ul>
</div>
<div class="cities">
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="New york" width="245" height="184">
<div class="desc">
<p>
<b>New York</b>
</p>
<p class="date">Fri 27 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="Paris" width="245" height="184">
<div class="desc">
<p>
<b>Paris</b>
</p>
<p class="date">Sat 28 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="San Francisco" width="245" height="184">
<div class="desc">
<p>
<b>San Francisco</b>
</p>
<p class="date">Sun 29 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
</div>
</div>
DEMO HERE
So I have my header with a background image set and I want to create a div underneath it so I can write text there, but when I create the new div, the text I write inside of it appears on top of the already created header. I think it is due to the background image I have set. This is one of my first projects made all by my own so if you guys could help me it will be really appreciated.
These are the HTML and CSS files:
body {
margin: 0;
padding: 0;
background-color:#f4f4f4;
float: left;
}
header{
overflow: hidden;
margin: auto;
}
nav {
width: 100%;
height: 50px;
background-color: rgba(192,192,192,0.3);
margin: auto;
}
.wtf {
padding-right: 50px;
position: relative;
bottom: 3px;
}
#logo {
float: left;
color: white;
font-family: 'Concert One', cursive;
padding-left: 20px;
}
p.highlight {
margin: 0;
position: relative;
bottom: 7px;
}
ul {
float:right;
}
li {
display: inline;
padding: 0 10px 0 10px;
}
a {
text-decoration: none;
color: white;
font-size: 21px;
margin: 0 0 3px 0;
font-family: 'Montserrat', sans-serif;
}
li a:hover {
background-color: #ddd;
color: black;
}
.image {
background-image: url('nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg');
}
.main {
width: 100%;
height: 400px;
color: white;
text-align: justify;
position: absolute;
font-family: 'Montserrat', sans-serif;
background-image: url('nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg')
}
.main p,h1,h3 {
text-align: center;
position: relative;
}
.main h1 {
top: 100px;
font-size: 50px;
}
.main h3 {
top: 120px;
}
.main p {
top: 90px;
font-size: 20px;
}
.development {
position: relative;
}
.development p {
color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Упражнение</title>
<link rel="stylesheet"
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/solid.css" integrity="sha384-+0VIRx+yz1WBc
</head>
<body>
<header>
<div class="image">
<nav>
<div id="logo">
<h1><p class="highlight">ATANAS DEVELOPING</p></h1>
</div>
<div class="wtf">
<ul>
<li class="current">
Home
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Team
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div class="main">
<p>Can you build the website of my dreams?</p>
<h1>YUP, WE CAN DO THAT.</h1>
<h3>Learn More</h3>
</div>
</div>
</header>
<br>
<div class="development">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin.</p>
</div>
</body>
</html>
You positioned your .main absolutely:
.main {
position: absolute;
}
With this styling you take .main out of the normal document flow and it is positioned in the top left corner. The other elements stay in regular flow and are right above it. Just get rid of this positioning and you are good to go.
body {
margin: 0;
padding: 0;
background-color:#f4f4f4;
float: left;
}
header{
overflow: hidden;
margin: auto;
}
nav {
width: 100%;
height: 50px;
background-color: rgba(192,192,192,0.3);
margin: auto;
}
.wtf {
padding-right: 50px;
position: relative;
bottom: 3px;
}
#logo {
float: left;
color: white;
font-family: 'Concert One', cursive;
padding-left: 20px;
}
p.highlight {
margin: 0;
position: relative;
bottom: 7px;
}
ul {
float:right;
}
li {
display: inline;
padding: 0 10px 0 10px;
}
a {
text-decoration: none;
color: white;
font-size: 21px;
margin: 0 0 3px 0;
font-family: 'Montserrat', sans-serif;
}
li a:hover {
background-color: #ddd;
color: black;
}
.image {
background-image: url('https://picsum.photos/200/300?image=15');
}
.main {
width: 100%;
height: 400px;
color: white;
text-align: justify;
/* position: absolute; <-- do not position this absolutely */
font-family: 'Montserrat', sans-serif;
background-image: url('https://picsum.photos/1920/1080?image=10')
}
.main p,h1,h3 {
text-align: center;
position: relative;
}
.main h1 {
top: 100px;
font-size: 50px;
}
.main h3 {
top: 120px;
}
.main p {
top: 90px;
font-size: 20px;
}
.development {
position: relative;
}
.development p {
color: red;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/solid.css" >
<div class="image">
<nav>
<div id="logo">
<h1><p class="highlight">ATANAS DEVELOPING</p></h1>
</div>
<div class="wtf">
<ul>
<li class="current">
Home
</li>
<li>
Services
</li>
<li>
Clients
</li>
<li>
Team
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div class="main">
<p>Can you build the website of my dreams?</p>
<h1>YUP, WE CAN DO THAT.</h1>
<h3>Learn More</h3>
</div>
</div>
<div class="development">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam lacus quis ex malesuada fermentum. Sed fringilla porttitor massa sit amet sollicitudin.</p>
</div>
Your .main css class has an absolute position. Disabling that fixes the issue
Remove some position property from your css.
.development {
// remove
//position: relative;
}
.main {
width: 100%;
height: 400px;
color: white;
text-align: justify;
// remove
// position: absolute;
font-family: 'Montserrat', sans-serif;
background-image: url(nebula-stars-universe-galaxy-space-4k-kx-1920x1080.jpg);
}
Changing to above would work but your body is floated towards left so remove that too.
body {
margin: 0;
padding: 0;
background-color: #f4f4f4;
// remove
// float: left;
}
basically i have 3 images and a div.contact sitting next to each other contained in a Section.gallery. div.contact has been floated right and relatively positioned but not the images .
My problem is that i cant get the 'NEWSLETTER' in the footer to occupy the available space on the right, it keeps dropping down.
However when apply a clear:both to footer see what happens.It Creates a huge space between the footer and the Section.gallery ,but 'NEWSLETTER' takes up all the space
When i check with google chrome inspect element, there is a big margin that i did not apply.
The relevant code
the HTML part
<section class="gallery">
<div class="display-gallery">
<img src="images/picture.png" />
<img src="images/picture.png" />
<img src="images/picture.png">
</div>
<!--End gallery-->
<div class="contact">
<p>contact</p>
<h2>booking <br />
<span>0123.456.789</span><br />
<span>0123.456.789</span><br />
<span> contact#xidian.com</span>
</h2>
Find out more
</div>
<!--End-->
</section>
<!--End Section-->
<footer>
<div class="nav-wrapper">
<nav class="footer-nav">
<ul>
<li> Home </li>
<li> Biography </li>
<li> Photo Gallery</li>
<li> Calendar </li>
<li> Videos </li>
<li> Contact me </li>
</ul>
<ul class="second-nav">
<li> Home </li>
<li> Biography </li>
<li> Photo Gallery</li>
<li> Calendar </li>
<li> Videos </li>
<li> Contact me </li>
</ul>
</nav>
<div class="more-info">
<h3>some information here</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipis ellt. Cras non nibh
sed vellt ultrices convallis eget vitae leo. Vestibulum porttitor dolor
sed is semper id consequat urna tristique vivamus sodales, nibh id comisam risti.
</p>
</div>
<div class="follow-me">
<h3>follow me </h3>
<a href="">
<img src="images/youtube.png">
</a>
<a href="">
<img src="images/fb.png">
</a>
<a href="">
<img src="images/twitter.png">
</a>
<a href="">
<img src="images/link.png">
</a>
</div>
<div class="newsletter">
<h3>newsletter</h3>
<p>Lorem ipsum dolor sit amet, consectetur<br />adipiscing ellt. Cras non nibh sed.</p>
<input type="text" name="comment" ><br />
<input type="submit" value="Send" >
</div>
</div>
CSS:
.display-gallery img {
width: 215px ;
height:195px;
margin-right: 30px;
border: 1px solid #D9D9D9;
}
.display-gallery img:hover{
transition-duration: 0.5s ;
transform: scale(1.2);
}
.contact {
float: right;
width: 215px ;
height:195px;
position: relative;
top: -199px;
border: 1px solid #D9D9D9;
}
.contact h2 {
font-size: 16px;
text-transform: uppercase;
line-height: 20px;
padding-left: 12px;
}
.contact p {
text-transform: uppercase;
color: #8e3a17;
font-size: 16px;
padding-top: 20px;
padding-bottom: 18px;
padding-left: 12px;
}
.contact a {
margin-top: 10px;
margin-left: 12px;
}
.nav-wrapper {
outline: solid 1px greenyellow;
overflow: hidden;
border-top: 2px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
padding-top: 14px;
padding-bottom: 13px;
}
.footer-nav ul {
float: left;
margin-right: 25px;
}
.footer-nav ul li {
font-size: 10px;
text-transform: uppercase;
line-height: 19px;
}
.second-nav {
margin-right: 25px;
}
.more-info {
border-left: dashed 1px #D9D9D9;
border-right: dashed 1px #D9D9D9;
float: left;
width: 245px;
padding-left: 20px;
padding-right: 20px;
}
.more-info h3 {
font-size: 10px;
text-transform: uppercase;
line-height: 19px;
}
.more-info p {
font-size: 10px;
display: inline-block;
line-height: 13px ;
padding-top: 17px;
width: 210px;
word-break: break-all;
}
.follow-me {
padding: 0 25px 0 25px ;
float: left;
width: 245px;
border-right: 1px dashed #D9D9D9;
}
.follow-me h3 {
text-transform: uppercase;
font-size: 10px;
line-height: 19px;
}
.follow-me img {
padding-top: 17px;
margin-right: 7px;
}
.newsletter {
float: right;
width: 205px;
}
.newsletter h3 {
text-transform: uppercase;
font-size: 10px;
line-height: 19px;
padding-bottom: 7px;
}
.newsletter p {
font-size: 10px;
display: inline-block;
line-height: 13px;
padding-bottom: 6px;
}
input[type= text] {
width: 205px;
height: 20px;
border: 1px solid #D9D9D9;
}
input[type = submit] {
margin-top: 7px;
float: right;
display: inline-block;
background-color: #8e3a17;
font-size: 11px;
color: white;
width: 55px;
height: 20px;
line-height: 15px;
text-align: center;
box-shadow: 1px 1px 2px #8e3a17;
}
Ps:i did apply a css reset
Sorry about the long post
Update the css as follows:
.gallery {
overflow: hidden;
}
.display-gallery {
float: left;
}
.contact {
float: right;
width: 215px ;
height:195px;
/*position: relative;
top: -199px;*/
border: 1px solid #D9D9D9;
}
your first div "display-gallery" catches all the width of the screen. so your "contact" floating right div is added at the bottom of the div block. (remove the "top: -199px" from the second div "contact" and you'll see why when you add clear: both to footer you got this gap).
The margin you get right to the footer is a placeholder of the ".contact" div to which you apply "top: -199px"
When I resize the window to less than 1150px I get an expanding white block in the bottom right corner of the page. I've tried everything I could think of and can't find anything that works..
Here's the HTML:
<!doctype HTML>
<html>
<head>
<title></title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Add mousewheel plugin (this is optional)
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel- 3.0.6.pack.js"></script>
-->
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Orienta' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="head100">
<div id="head"><img src="img/head.png" alt="" /></div>
</div>
<div id="nav100">
<div id="nav">
<ul id="menu">
<li class="contact">Contact</li>
<li class="resume">Resume</li>
<li class="development">Development</li>
<li class="design"><a class="selected" href="design.php">Design</a></li>
</ul>
</div>
</div>
<div id="body100">
<div id="body"> <div id="mainPic">
<div id="myCarousel" class="carousel slide carousel-fade">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="img/bodypic.jpg" alt="Carousel" /></div>
<div class="item"><img src="img/bodypic2.jpg" alt="Carousel" /></div>
<div class="item"><img src="img/bodypic3.jpg" alt="Carousel" /></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<img id="welcome" src="img/welcome.png" alt="Welcome to my portfolio!" />
<br />
<div id="welcomeunder">Take a look around and feel free to Contact Me with any questions.<br />Enjoy! <span id="smiley">☻</span></div>
</div>
</div>
<div id="amBG" class="amBG">
<div id="aboutMe">
<img src="img/me.png" id="me" alt="Me" />
<img src="img/aboHead.png" id="aboHead" alt="About Me" />
<p>
I'm a web developer / designer currently doing freelance work and seeking full time employment. Suspendisse et lacus vel lectus cursus rhoncus ac ac purus. Mauris massa ante, tempor sit amet mi eget, mattis semper arcu. Duis ipsum elit, ornare eu urna ac, faucibus aliquam quam. Etiam vel malesuada est, at vestibulum nulla. Etiam malesuada eget lorem eget lobortis. Praesent eu urna est. Aenean in magna vel arcu bibendum tristique. Cras accumsan sed purus eget facilisis. Maecenas a tempus velit. Nunc felis turpis, scelerisque rutrum mi quis, convallis fermentum ipsum. Mauris ut tristique magna, id consequat metus.
</p>
</div>
</div>
<footer>
<div id="foot">
<div id="footRight">
<fieldset><legend><img src="img/foot/quick.png" alt="Quick Contact" /></legend>
<form id="quickMail" method="post" action="quickMail.php">
<label for="email">Email:</label>
<input type="text" class="footText" name="email" />
<label for="subject">Subject:</label>
<input type="text" class="footText" name="subject" />
<label for="message">Message:</label>
<textarea rows="4" cols="25" name="message"></textarea><br />
<input type="checkbox" name="userCopy" value="userCopy" id="userCopy">Send me a copy</input><br>
<input type="submit" id="footSubmit" value=""></input>
</form>
</fieldset>
</div>
<div id="footLeft">
<img src="img/foot/footLogo.png" alt="" />
<br />
Home<br />
Design<br />
Development<br />
Resume<br />
Contact<br />
</div>
<div id="footBot">
<span id="btt"><span id="bttt">Back to top </span></span>
<span id="copy">Copyright © 2013 </span>•
<span id="botMid">All content on this site was made entirely by me.</span>•
<span id="resources">Resources: Bootstrap <a href="http://fancybox.net/" target="_blank">Fancybox</span>
</div>
</div>
</footer>
<script type="text/javascript">
$("#toTop").click(function () {
$("html, body").animate({scrollTop: 0}, 600);
return false;
});
$(document).ready(function() {
$(".fancybox").fancybox();
});
$(document).ready(function() {
$('.carousel').carousel({
interval: 5000
})
});
</script>
</body>
And the CSS:
body {
width: 100%;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', sans-serif;
}
#head100 {
height: 100%;
background-color: #9db2b1;
}
#head {
width: 1150px;
margin: auto;
padding-top: 15px;
background-color: #9db2b1;
}
img {
border:0px;
}
a {
border: none;
}
#nav100 {
width: 100%;
background-color: #fff;
border-top: 1px solid #8C9C9A;
}
#nav {
width: 1150px;
margin: auto;
height: 52px;
}
ul#menu{margin:0; padding:0; list-style:none; clear:both;}
#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:right;}
#menu li a{background:url('../img/menu-sprite.jpg') no-repeat; width:100%; height:100%; display:block;}
/* design Button */
#menu li.design{width:108px; height:52px;}
#menu li.design a{background-position: 0 0;}
#menu li.design a:hover{background-position: 0 -52px;}
/* development Button */
#menu li.development{width:177px; height:52px;}
#menu li.development a{background-position:-108px 0;}
#menu li.development a:hover{background-position:-108px -52px;}
/* resume Button */
#menu li.resume{width:102px; height:52px;}
#menu li.resume a{background-position:-285px 0;}
#menu li.resume a:hover{background-position:-285px -52px;}
/* Contact Button */
#menu li.contact{width:126px; height:52px;}
#menu li.contact a{background-position:-387px 0;}
#menu li.contact a:hover{background-position:-387px -52px;}
#body100 {
background-color: #485c5a;
padding-bottom: 20px;
}
#body {
width: 1150px;
min-height: 350px;
margin: auto;
padding-top: 25px;
color: #fff;
background-color: #485c5a;
}
#welcome {
margin-top: 15px;
margin-left: 188px;
text-align: center;
}
#welcomeunder {
text-align: center;
font-size: 22px;
line-height: 35px;
font-variant: small-caps;
}
#welcomeunder a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
#welcomeunder a:hover {
color: #a31e39;
}
#smiley {
font-size: 30px;
}
#mainPic {
width: 1150px;
margin: auto;
height: 450px;
}
.carousel.carousel-fade .item {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
left: 0;
z-index: 2;
opacity: 0;
filter: alpha(opacity=0);
}
.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
left: 0;
z-index: 1;
}
.carousel.carousel-fade .carousel-control {
z-index: 3;
}
.amBG {
height: 520px;
padding-top: 25px;
padding-bottom: 25px;
background-color: #bfcfcc;
border-top: 10px solid #fff;
color: #485c5a;
}
#amBG {
height: 390px;
}
#aboutMe {
width: 1150px;
margin: auto;
}
#aboHead {
margin-top: 20px;
}
#aboutMe p {
padding-top: 60px;
}
#me {
margin-top: 35px;
float: right;
}
#desSec {
margin-bottom: 150px;
}
#desSec p {
width: 250px;
text-align: right;
margin-left: 75px;
}
#temTitle {
margin-top: 20px;
}
#dar {
width: 575px;
margin-top: 117px;
float: right;
}
#darTitle {
margin-left: 190px;
}
#bita {
width: 575px;
margin-top: 55px;
}
.temLeft {
float: left;
}
.temPic img {
width: 225px;
height: 325px;
border: 5px solid #fff;
border-radius: 3px;
float: right;
}
#ps {
width: 1150px;
margin: auto;
margin-top: -25px;
}
#ps img {
margin-top: 40px;
margin-bottom: 30px;
}
#psPics {
margin-left: 30px;
}
#tlUL{position:relative;}
#tlUL li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#tlUL li, #tlUL a{height:264px;display:block;}
#blackNight{left:0px;width:140px;}
#blackNight{background:url('../img/ps/bnPreview.png') 0 0;}
#blackNight a:hover{background: url('../img/ps/bnPreview.png') -140px 0;}
#aDesign{left:155px;width:465px;}
#aDesign{background:url('../img/ps/niPreview.png') 0 0;}
#aDesign a:hover{background: url('../img/ps/niPreview.png') -465px 0;}
#blUL{position:relative;}
#blUL li{margin:0;padding:0;list-style:none;position:absolute;top:274px;}
#blUL li, #blUL a{height:96px;display:block;}
#blast{left:0;width:306px;}
#blast{background:url('../img/ps/blPreview.png') 0 0;}
#blast a:hover{background: url('../img/ps/blPreview.png') -306px 0;}
#spiderman{left:316px;width:306px;}
#spiderman{background:url('../img/ps/smPreview.png') 0 0;}
#spiderman a:hover{background: url('../img/ps/smPreview.png') -306px 0;}
#trUL{position:relative;}
#trUL li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#trUL li, #trUL a{height:138px;display:block;}
#church{left:632px;width:467px;}
#church{background:url('../img/ps/chPreview.png') 0 0;}
#church a:hover{background: url('../img/ps/chPreview.png') -467px 0;}
#brUL{position:relative;}
#brUL li{margin:0;padding:0;list-style:none;position:absolute;top:148px;}
#brUL li, #brUL a{height:222px;display:block;}
#heavenHell{left:632px;width:465px;}
#heavenHell{background:url('../img/ps/hhPreview.png') 0 0;}
#heavenHell a:hover{background: url('../img/ps/hhPreview.png') -465px 0;}
footer {
height: 320px;
width: 100%;
background-color: #621223;
font-size: 0.9em;
}
#btt {
float: right;
margin-top: -5px;
}
#bttt {
float: left;
padding-right: 5px;
}
#toTop {
display: block;
float: right;
width: 21px;
height: 21px;
background:url('../img/toTop.png') 0 0;
}
#toTop:hover {
background:url('../img/toTop.png') -21px 0;
}
#foot {
width: 1150px;
margin: auto;
padding-top: 10px;
color: #fff;
}
#footRight {
width: 365px;
float: right;
}
fieldset {
margin-top: 10px;
float: right;
border: none;
text-align: right;
width: 265px;
}
#userCopy {
font-variant: small-caps;
}
legend {
font-weight: bold;
padding-bottom: 10px;
}
textarea {
resize: none;
width: 177px;
display: inline-block;
padding: 5px;
margin-bottom: 5px;
background-color: #fff;
color: #000;
border: 1px solid #a31e39;
border-radius: 5px;
font-size: 11px;
}
textarea:focus {
outline: none;
}
.footText {
width: 177px;
display: inline-block;
vertical-align:middle;
padding: 5px;
margin-bottom: 10px;
background-color: #fff;
color: #000;
border: 1px solid #a31e39;
border-radius: 5px;
font-size: 11px;
}
input:focus {
outline: none;
}
label {
display: inline-block;
width: 65px;
text-align: right;
float: left;
clear: both;
padding-top: 5px;
padding-bottom: 5px;
color: #fff;
font-weight: bold;
}
#footRight ::-webkit-scrollbar {
width: 12px;
}
#footRight ::-webkit-scrollbar-track {
background-color: #000;
border-left: 1px solid #191919;
}
#footRight ::-webkit-scrollbar-thumb {
background-color: #ccc;
}
#footRight ::-webkit-scrollbar-thumb:hover {
background-color: #a2a1a1;
}
#footSubmit {
background-image: url('../img/foot/send.png');
background-position: 0 0;
background-repeat: no-repeat;
width: 80px;
height: 28px;
margin-top: 10px;
border: 0;
cursor: pointer;
}
#footSubmit:hover {
background-position: -80px 0;
}
#footBot {
width: 100%;
clear: both;
margin: auto;
font-size: 0.8em;
padding-top: 10px;
text-align: left;
border-top: 2px solid #fff;
}
#copy {
padding-right: 20px;
}
#botMid {
padding-right: 20px;
padding-left: 20px;
}
#resources {
padding-left: 20px;
margin-top: 1px;
}
#resources a {
text-decoration: none;
color: #fff;
padding-left: 10px;
target-name:new;
target-new: tab;
}
#resources a:hover {
color: #000;
}
#footLeft {
width: 365px;
float: left;
margin-bottom: 30px;
margin-top: 5px;
}
#footLeft img {
margin-bottom: -5px;
}
#footLeft a {
display: inline-block;
text-decoration: none;
color: #fff;
border-left: 2px solid #fff;
margin-top: 10px;
padding-left: 10px;
}
#footLeft a:hover {
color: #000;
border-left: 2px solid #000;
}
Sorry for the messyness, first time using this site.
So yeah, any ideas would help.. Thanks
If you change bodys property width: 100% to min-width: 1150px; you won't get the block. It's because your banner is wider than the window width, causing it to push out, but everything else is able to get thinner.