Trying to get two div's to line up side by side but having some trouble getting them to connect with each other. This is the design of what im trying to make where it says "We're hiring today" and "Schedule Today".
HTML:
<!DOCTYPE html>
<head>
<title>Merry Maids</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<div class="backgroundofdivgreen">
<header>
<div class="logo"><img src="images/logo.jpg"></div>
<nav>
Home
Services
Offers
People
Franchises
Reviews
<div class ="phone">
Call Us Today: (800) Merry Maids
</div>
<div class="media">
<img src="images/twitter.png">
<img src="images/facebook.png">
</div>
<div class="clearboth"></div>
</header>
</nav>
</div>
<div class="banner"><img src="images/banner.jpg" alt="Merry Maids Banner Image"></div>
<div class="spacer1"></div>
<article>
<div class="wrapper">
<div class="yellow">
<h1>Schedule Appointments</h1>
<p>Our cleaning services are thorough, consistent and customized. If you would like to request a special service, change your cleaning schedule, or skip an area in your home, just let us know! We are happy to fulfill every request in order to exceed your expectations.Merry Maids home cleaning services are available weekly, every other week, monthly or one-time. On every visit, your Merry Maids team dusts, vacuums, washes and sanitizes each room.</p>
</div>
<div class="green">
<h1>We're Hiring Today</h1>
<p>For more than 30 years, our team members have provided reliable service for homeowners like you worldwide. We clean people's homes like they are our own and we treat our team members with the same concern, respect and care we expect them to show our customers. Merry Maids knows that our team members are our greatest asset and we recognize the power of our people.</p>
</div>
CSS:
.clearboth {
clear:both;
}
.backgroundofdivgreen {
height: 96px;
margin: 0px;
background-color: #39b54a;
}
header {
width: 980px;
background-color: #39b54a;
margin: 0px auto;
}
nav {
float:right;
width: 570px;
text-align: right;
padding-top:10px;
}
nav a {
color:white;
margin: 0px 25px 0px 0px;
text-decoration:none;
}
nav a:hover {
color: #fff799;
}
.logo {
float:left;
}
.phone {
margin: 40px 0px 0px 130px;
color: white;
float:left;
}
.media {
float: right;
margin: -23px 30px 0px 0px;
}
.banner {
height:553px;
width:1600px;
margin: 0px auto;
}
.spacer1 {
height:20px;
background-color: #39b54a;
margin: 0px auto;
}
.wrapper {
margin: 0 auto;
overflow: hidden;
}
.yellow {
position:fixed;
width:800px;
height:313px;
background-color: #fff799;
float:left;
text-align:right;
}
.green {
position:fixed;
width:800px;
height:313px;
background-color: #005e20;
float:right;
}
Remove the position: fixed from the two divs. (position: fixed takes an element out of the document flow so the floats have no effect on them.)
You'll also need to make sure the wrapper has enough width to accommodate the full width of both divs.
Related
Hello I have a problem regarding the footer part of this web page like for some reason the footer doesnt line up properly and im not sure whats wrong with it
this is what its supposed to look like (https://imgur.com/Bmvfbrx) but this is what it looks like (https://imgur.com/vY1kPTH). Just please tell me what i did wrong and that will be appreiated please and thank you.Also I have 0 errors on validator too.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="cyclestyle.css">
<title>Cycling Tours</title>
</head>
<body>
<div id="container">
<section id="header">
<header>
<nav>
<ul>
<li>About us</li>
<li>Ask Us</li>
<li>Destination</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Reviews</li>
<li>Trip Prep</li>
</ul>
</nav>
<h1>Cycling Tours</h1>
<figure>
<img id="banner" src="images/cycling_banner.png" alt="cycling">
</figure>
</header>
</section>
<section id="aboutus">
<h3> About Us </h3>
<p> Cycling Tours began when Bill Randolf and three of his friends from high school began to cycle regularly every weekend. Their routine cycling evolved into frequent cycling trips and they cultivated a following. Before they knew it, other friends and family members asked to join them in their trips.</p>
<img src = "images/cyclists.jpeg" alt="cyclists" class = "floatright">
<p>Cyclists are enthusiastic and very health and environmentally conscious. For this reason, all of our trips include vegan options for meals, recycled paper food serving utensils, and hybrid vehicles to escort the cyclists.</p>
<p>Our trips are suitable for solo cyclists, couples, friends, and families. We provide camping accommodation for off-road cycling trips, and shared accommodations for couples, friends and families. If you are travelling solo, we can match you with someone for shared accommodations. You can also pay the single-supplement if you wish to have a room of your own.</p>
<p>After you've completed one trip with us, we're sure you'll want to do more. Over 80% of our customers have been on at least one prior trip with us. We're always looking for new ideas for trips, so please let us know if you have any ideas!</p>
</section>
<section id="tripinfo">
<h3>Trip Information</h3>
<br>
<p>Our trips are planned carefully to provide the best experience for cyclists.</p>
<br>
<p>Types of trips include self-contained camping tours, inn-to-inn tours and other adventure cycling.</p>
</section>
<footer>
<div id = "footer">
<hr>
<hr>
<p>Cycling Tours✻ P.O. Box 4455✻ Brantford,ON✻ N3T 2J0 <br> Image Credit: http://www.bikelink.com/images/banner01.jpg </p>
</div>
</footer>
</div>
</body>
</html>
cyclestyle.css
* {
margin: 0;
padding: 0;
}
body {
height:90vh;
}
p {
text-indent: 50px;
line-height:1.5em;
}
#tripinfo {
background-color:#bbccdd;
float:right;
width:20%;
height:68.5vh;
}
header {
}
#banner {
width:100%;
}
nav {
list-style-type: none;
text-align: center;
text-decoration: none;
}
nav li {
display: inline ;
}
#container {
width: 1000px;
margin: 20px auto;
}
* {
box-sizing: border-box;
}
nav a{
border: 2px solid black;
padding: 8px;
border-radius:10px 10px 0px 10px;
text-decoration:none;
background-color:#bbccdd;
color:white;
font-family: verdana;
font-weight:bold;
}
a:hover {
color: black;
}
#aboutus {
float:left;
width:80%;
height:80vh;
}
h1 {
position:absolute;
font-family:Verdana;
color:White;
font-size:3.5em;
}
h3 {
font-family:Verdana;
}
p {
font-family:Verdana;
font-size:.90em;
}
#footer {
text-align:centre;
font-weight:bold;
}
#container {
width: 1000px;
}
You are almost there. Need to remember when you use the float. Always create another div that use CSS clear:both and it will push the next div to the bottom.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="cyclestyle.css">
<title>Cycling Tours</title>
</head>
<body>
<div id="container">
<section id="header">
<header>
<nav>
<ul>
<li>About us</li>
<li>Ask Us</li>
<li>Destination</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Reviews</li>
<li>Trip Prep</li>
</ul>
</nav>
<h1>Cycling Tours</h1>
<figure>
<img id="banner" src="images/cycling_banner.png" alt="cycling">
</figure>
</header>
</section>
<section id="aboutus">
<h3> About Us </h3>
<p> Cycling Tours began when Bill Randolf and three of his friends from high school began to cycle regularly every weekend. Their routine cycling evolved into frequent cycling trips and they cultivated a following. Before they knew it, other friends and family members asked to join them in their trips.</p>
<img src = "images/cyclists.jpeg" alt="cyclists" class = "floatright">
<p>Cyclists are enthusiastic and very health and environmentally conscious. For this reason, all of our trips include vegan options for meals, recycled paper food serving utensils, and hybrid vehicles to escort the cyclists.</p>
<p>Our trips are suitable for solo cyclists, couples, friends, and families. We provide camping accommodation for off-road cycling trips, and shared accommodations for couples, friends and families. If you are travelling solo, we can match you with someone for shared accommodations. You can also pay the single-supplement if you wish to have a room of your own.</p>
<p>After you've completed one trip with us, we're sure you'll want to do more. Over 80% of our customers have been on at least one prior trip with us. We're always looking for new ideas for trips, so please let us know if you have any ideas!</p>
</section>
<section id="tripinfo">
<h3>Trip Information</h3>
<br>
<p>Our trips are planned carefully to provide the best experience for cyclists.</p>
<br>
<p>Types of trips include self-contained camping tours, inn-to-inn tours and other adventure cycling.</p>
</section>
<div class="clearfix"></div>
<footer>
<div id = "footer">
<hr>
<hr>
<p>Cycling Tours✻ P.O. Box 4455✻ Brantford,ON✻ N3T 2J0 <br> Image Credit: http://www.bikelink.com/images/banner01.jpg </p>
</div>
</footer>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
body {
height:90vh;
}
p {
text-indent: 50px;
line-height:1.5em;
}
#tripinfo {
background-color:#bbccdd;
float:right;
width:20%;
height:68.5vh;
}
header {
}
#banner {
width:100%;
}
nav {
list-style-type: none;
text-align: center;
text-decoration: none;
}
nav li {
display: inline ;
}
#container {
width: 1000px;
margin: 20px auto;
}
* {
box-sizing: border-box;
}
nav a{
border: 2px solid black;
padding: 8px;
border-radius:10px 10px 0px 10px;
text-decoration:none;
background-color:#bbccdd;
color:white;
font-family: verdana;
font-weight:bold;
}
a:hover {
color: black;
}
#aboutus {
float:left;
width:80%;
/* height:80vh; */ /* I remove this line */
}
h1 {
position:absolute;
font-family:Verdana;
color:White;
font-size:3.5em;
}
h3 {
font-family:Verdana;
}
p {
font-family:Verdana;
font-size:.90em;
}
.clearfix {
clear:both;
}
#footer {
text-align:center;
font-weight:bold;
}
#footer p {
padding-top:10px;
}
#container {
width: 1000px;
}
DEMO
To fix the margin you could try adding float:right;width:100%; into #footer and adding:
#footer p {
padding-top:10px;
padding-left:20%;
}
to fix the whacky text format.
#footer and #footer p:
#footer {
text-align:centre;
font-weight:bold;
float:right;
width:100%;
}
#footer p {
padding-top:10px;
padding-left:20%;
}
If you want to add some thickness into your hr line you could also add:
hr {
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #333; /* Modern Browsers */
}
Result:
Hey everyone I am having an issue where my social media buttons for my website are not staying in the nav header area. I have tried using the float attribute and it wont stay in the header here are some images to show you what I am talking about.
http://imgur.com/zwmtXju
as you can see in this image the social media buttons wont stay in the header area, any help would be appreciated. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container">
<header>
<nav class="clearfix">
<a href="#" id="brand">
<h1>Skull</h1>
</a>
<ul class="clearfix">
<li>Moonshine</li>
<li>Recipes</li>
<li>The Blog</li>
<li>The Store</li>
<div id="socialMedia">
<img src="imgs/fbsm.png" alt=""/>
<img src="imgs/tsm.png" alt=""/>
<img src="imgs/psm.png" alt=""/>
</div>
</ul>
Skull®
</nav>
</header>
<div id="content">
<div id="story">
<p id="ourStory">Our Story</p>
<h1 id="bootleg">Bootlegging</h1>
<p id="storyBoard">
<span class="storyTelling">This is our history,</span>
<span class="storyTelling">our story,</span>
<span class="storyTelling">of how we became one of the greatest</span>
<span class="storyTelling">moonshine brands on the planet.</span>
<span class="storyTelling">A story of struggle,</span>
<span class="storyTelling">and independence,</span>
<span class="storyTelling">accompanied by expert craftmanship.</span>
<span class="storyTelling">Using years as chapters of our book of life</span>
<span class="storyTelling">we will show you what makes our moonshine so great.</span>
<span class="storyTelling">Scroll down and enjoy.</span>
</p>
</div>
<div id="timeLine">
<div id="present">
<h1>Here and Now</h1>
<p>Now in 2014 we are a globally recognized brand that many people know and love. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="2000">
<h1>2000</h1>
<p>In 2000, bars started buying our moonshine to make drinks with. This was a huge milestone for Skull®
Because, it brought our brand to the attention of many people that were not yet customers of our great alcohol. </p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1960">
<h1>1960</h1>
<p>By 1960 we were booming with popularity. Skull alcohol became a recognized brand.</p>
<img src="imgs/skullBrand.png" alt=""/>
</div>
<div id="1933">
<h1>1933</h1>
<p>By 1933 Prohibition was repealed, and the market grew thin. But that didn't stop us. Skull alcohol was born.
With our superior craftsmanship skills, and our excellent customer satisfaction our legacy continued</p>
<img src="imgs/prohibitionends.jpg" width="263" height="185" alt=""/>
</div>
<div id="1920">
<h1>1920</h1>
<p>By the early 1900s, states began passing laws that banned alcohol sales, and consumption. in 1920,
nationwide Prohibition went in to effect. It was the greatest thing moonshiners could have asked for.
Because there was no legal alcohol available, the demand for moonshine shot up like a rocket. Moonshiners
had so much business they couldn't even keep up with the demand. Hidden saloons called speakeasies were even
opened in every city. they were used to sell the illegal whisky.</p>
<img src="imgs/dry.jpg" height="200" alt=""/>
</div>
<div id="1860">
<h1>1860</h1>
<p>The hatred from the Whisky Rebellion escalated in to the 1860s as the government continued
to try and collect excise tax to fund the Civil War. At this time Moonshiners and many other anti-governmental
groups, such as the KKK, joined forces to kill anyone who would release the location of their stills and attack IRS officials and
their families.</p>
<img src="imgs/kkk.jpg" width="263" height="185" alt=""/>
</div>
<div id="1794">
<h1>1794</h1>
<p>The American people, who had just fought a war to get out from under oppressive British taxes
(among other things), were not particularly pleased. So, they decided to just keep making their own
whisky, completely ignoring the federal tax. All the resentment that the citizens had toward the
government eventually exploded when several hundred angry citizens took over the city of Pittsburgh,
Pennsylvania. President George Washington called apon the militia, a group of 13,000 troops to disperse
The angry mob. The Whiskey Rebellion was a failure.</p>
<img src="imgs/wr.jpg" alt=""/>
</div>
<div id="1791">
<h1>1791</h1>
<p>Moon shining began very early in American history. Shortly after the Revolution,
the United States found itself struggling to pay for the expense of fighting a long war.
The solution was to place a federal tax on liquors and spirits that would soon be known
as the whisky tax.</p>
<img src="" alt=""/>
</div>
</div>
</div>
<footer>
<div class="footerContent"></div>
<div class="footerContent"></div>
<div class="footerContent"></div>
</footer>
</div><!--containerEnd-->
</body>
</html>
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
body {
width: 1920px;
background-color: #202021;
}
#container{
width: 100%;
margin: 0;
background: url('../imgs/565.jpeg') repeat-y center center fixed ;
}
header{
width: 100%;
height: 100px;
}
nav{
width: 100%;
height: 100px;
position: relative;
border-bottom: 2px solid #cccccc;
}
#brand{
margin-top:15px;
width: 250px;
height: 70px;
float: left;
background: url('../imgs/skullAlcoholText.png') no-repeat;
}
#brand h1{
display: none;
}
nav ul{
padding: 0;
margin: 0 auto;
width: 600px;
height: 100px;
list-style: none;
color: #fff;
border-bottom: 2px solid #cccccc;
}
nav li{
display: inline;
float: left;
}
nav a{
color: #fff;
display:inline-block;
width: 150px;
text-align: center;
text-decoration: none;
line-height: 100px;
}
nav li a{
border-right: 1px solid #cccccc;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
nav li:first-child a{
border-left: 1px solid #cccccc;
}
nav a:hover, nav a:active {
color: #ffffff ;
}
#socialMedia{
width: 320px;
float: right;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#socialMedia a:first-child{
}
#socialMedia a{
width: 100px;
}
nav a#pull {
display: none;
}
#content {
text-align: center;
}
#story{
margin: auto;
line-height: 2;
width: 300px;
height: 200px;
}
#ourStory, #bootleg, #storyBoard{
text-align: center;
color: #ffffff;
}
Your nav ul width is 600px. It's too small to contain all these elements. Therefore div is on next row. I also prefer to change div on something more semantic, like ul.
Put your code in table
<table width="646" border="0">
<tr><td width="98"><ul class="clearfix"><li>Moonshine</li></td><td width="82"><li>Recipes</li></td><td width="88"><li>The Blog</li></td><td width="110"><li>The Store</li></td>``<td width="78"><div id="socialMedia"><img src="imgs/fbsm.png" alt=""/></div></td><td width="78"><div id="socialMedia"><img src="imgs/tsm.png" alt=""/></div></td><td width="82"><div id="socialMedia"><img src="imgs/psm.png" alt=""/></div></td></tr></table></ul>
I bought before-after jQuery plugin, and I made a simple WordPress-theme. But few things don't work. I wanted to make this slider as my background so I made div in which slider is fit to page, but it doesn't fit. That is my first problem.
My second problem is that gravity forms make some strange things, they are blocking some functions, but I'll fix that.
Here is code:
css:
html {
width: 100%;
}
body {
background-color:#A6B8CC;
margin: 0px!important;
}
.titlelogo {
background-image:url(../images/sitelogo.png);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
padding-top:35px;
margin-top:20px;
margin-bottom:-5px;
display:block;
width:250px;
height:98px;
}
#big_divider {
margin-top:150px;
}
#example{
margin: auto;
padding: 0px!important;
}
#example img {
max-width: 100vw;
max-height: 100vh;
}
#after {
max-height: 100vh;
max-width: 100vw;
}
ul {
margin:0px!important;
}
#secondary {
display: none;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 0em!important;
-webkit-margin-after: 0em!important;
-webkit-margin-start: 0px!important;
-webkit-margin-end: 0px!important;
-webkit-padding-start: 0px!important;
}
#ext_ext_after {
margin: 0 auto;
}
html:
<div id="example" class="beforeafter_slider shadow1">
<ul>
<!-- THE 1. SLIDE -->
<li><img src="<?php bloginfo('template_url'); ?>/img/extralightgethaldus2.jpg" alt="<?php bloginfo('template_url'); ?>/img/withglassesgethaldus2.jpg">
<div id="textbox_1" class="before">
<div id="title_1b" class="fadeup">BEFORE</div>
</div>
<div id="textbox_1" class="after">
<div id="title_1b" class="fadeup">AFTER</div>
</div>
<div id="textbox_snw">
<div id="title" class="fadeup">Don't let the sun be your enemy!</div>
<div id="title2" class="fadeup">Do you consider yourself unique?<br>Your glasses should be as well.</div>
<div id="description" class="fadeup">We are soon lounching a new eyeware webshop<br>like you've never seen before across all Europe.<br><br>
Right now we cannot say anithing else, but if you want<br> to be among the firs to be noticed what it's all about<br>
leave your e-mail adress below and join our community.</div>
</div>
</li>
</ul>
</div>
And here is link: http://svinaweb.hr/gethaldus-lp/
The div will not always fit everyone's screen so to overcome this problem it might be a good idea to change your CSS style to this one below...
#example img {
width: 100%;
height: auto;
overflow: hidden;
}
Please comment back if you need more help or this is not what you are looking for.
I am building a website and I am still in the stages of learning, I'd say this is my most complex layout. Basically I have an unusual banner at the top of my page which I think is causing my problem. Above the footer of my page there is a large white space. I think it is caused by the face I have had to use things like top:-200px; on some of my divs so that they are in the right place.
It would really help to have someone with more experienced eyes to look it over.
Here is the website -
www.redchevron.co.uk
and here is the html -
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/header.css">
<link rel="stylesheet" type="text/css" href="css/font.css">
<link rel="stylesheet" type="text/css" href="css/footer.css">
<link rel="stylesheet" type="text/css" href="css/home_stylesheet.css">
<title>Red Chevron | Graphic Design</title>
<META NAME="description" CONTENT="At Red Chevron, we strive to bring you crisp, quality designs to suit your needs. Digital Graphics | Corporate Identity | Promotional Material">
<META NAME="keywords" CONTENT="graphics, rob, jeffrey, graphic, design, photoshop, logo, business, card, leaflet, flyer, freelance, red, chevron, redchevron, designer, digital, quality, media">
<script>
$(“body”).Scrollbar();
</script>
</head>
<body>
<div class="banner">
<div class="navigation">
<ul>
<li><a class="nav" href="index.html">Home</a></li>
<li><a class="nav" href="#">Portfolio</a></li>
<li><a class="nav"></a></li>
<li><a class="nav" href="#">About me</a></li>
<li><a class="nav" href="#">Contact</a></li>
</ul>
</div>
</div>
<div class="headround">
</div>
<div class="headlogo">
<img src="images/head_logo.png">
</div>
<!-- stop here for header -->
<div class="maincont">
<div class="mainfeat">
<img src="images/feat_flag.png">
<div class="maininfo"><!--feature-->
</div>
</div>
</div>
<div class="maincont">
<div class="mainfeat">
<img src="images/news_flag.png">
<div class="maininfo"><!--news-->
<h2> Coming Soon </h2>
Thank you for visiting Red Chevron.<br><br>
My name is Rob Jeffrey, founder of Red Chevron. I offer quality, affordable graphic design services to suit your needs.
Whether you need a new Corporate Identity, promotional material, or anything in between, I am here to make your ideas a reality.<br><br>
I have spent over 6 years refining and polishing my Digital Design skills in order to give my clients the very best results.<br><br>
Unfortunately this site is currently under construction.<br>
If you would like to contact me, please use the details below:<br><br>
Rob Jeffrey<br>
<b>Call:</b> 07925 870385<br>
<b>Email:</b> rob.jeffrey#redchevron.co.uk
</div>
</div>
</div>
<div class="maincont">
<div class="mainfeat">
<img src="images/pipe_flag.png">
<div class="maininfo"><!--pipeline-->
</div>
</div>
<div class="footer">
© 2014 Red Chevron All Rights Reserved
</div>
</div>
<!-- Start of footer -->
</body>
</html>
And the css -
Header -
*{
margin:0px;
padding:0px;
}
body{
overflow-x:hidden;
}
.banner{
width:100%;
height:80px;
position:relative;
z-index:10;
background-color:white;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.6);
overflow:hidden;
}
.headround{
background: #fff;
position:relative;
float: center;
margin:auto;
height: 76px;
width: 164px;
z-index:100;
-webkit-border-radius: 0px 0px 76px 76px;
-moz-border-radius: 0px 0px 76px 76px;
border-radius: 0px 0px 76px 76px;
box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 7px 12px 0px rgba(0, 0, 0, 0.4);
}
.headlogo{
position:relative;
z-index:101;
width:124px;
margin:auto;
float:center;
top:-144px;
}
.navigation
{
width: 1300px;
overflow:auto;
margin:25px auto 0px auto;
padding:0px;
float:center;
}
ul {
list-style-type:none;
margin:auto;
padding:0;
text-align:center;
}
li {
display:inline-block;
float:center;
text-align:center;
font-size:34px;
font-family:walkway;
}
.nav {
display:inline-block;
width:250px;
height:30px;
color:black;
text-decoration:none;
text-align:center;
padding:2px;
float:center;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background-color: rgba(235,235,235,1);
-webkit-border-radius: 0px;
}
::-webkit-scrollbar-thumb:vertical {
background-color: rgba(231,52,39,1);
-webkit-border-radius: 0px;
}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover {
background: rgba(231,52,39,1);
}
::-webkit-scrollbar-thumb:horizontal {
background-color: rgba(231,52,39,1);
-webkit-border-radius: 0px;
}
Home page style sheet -
*{
margin:0px;
padding:0px;
}
body{
overflow-y:hidden;
}
.maincont{
margin:0 auto;
float:center;
width:1350px;
padding-left:1px;
height:auto;
z-index:1;
position:relative;
top:-220px;
color:white;
font-family:verdana;
font-size:11pt;
}
.mainfeat{
width:450px;
height:auto;
text-align:center;
float:left;
margin:auto;
}
.maininfo{
height:428px;
width:378px;
top:-56px;
z-index:-1;
position:relative;
background:#303030;
margin:0px 30px;
padding:61px 5px 5px 5px;
}
h2{
color:#e73427;
}
and Footer -
.footer{
width:100%;
height:auto;
text-align:center;
color:#b4b4b4;
font-family:verdana;
clear:both;
padding:10px;
bottom:-100px;
vertical-align:bottom;
}
Like I said I'm a beginner so if there is a much more logical way of constructing my banner and getting rid of the white space, please let me know.
Many thanks guys
It looks like the culprit is, as you say, your usage of position CSS. If I disable top: -220px; from your maincont divs, the gap is eliminated.
As for a solution...? I'm not too sure, really. There are plenty of neater ways to code what you're trying to do, using different methods, from what I'm seeing in your page source.
Perhaps someone else might be able to suggest ways you can fix it up, but from my perspective, I would redo more or less everything, because of other issues, such as the one we discussed in the comments regarding overflow-y. Plus, the width of the page and your overflow-x would essentially stop users on smaller screens/browser widths/resolutions from seeing a good chunk of the right side of your site.
Not the best nor neatest way to code, but sometimes a negative margin on the bottom the equivalent of the negative top works or change the top:-220px; to margin-top:-220px;
I am new to css . I am trying to display my images in a perfect manner
here is my html code:
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="something.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Now i want to style the same like this:
http://www.desolve.org/
If you want to make your image like that wall post i did it in below given fiddle link.
http://jsfiddle.net/zWS7c/1/
Css
#photos{
margin:10px;
border:solid 1px red;
font-family:arial;
font-size:12px;
}
#photos h3{
font-size:18px;
}
.date, .like{
text-align:right;
}
.about{
margin:10px;
}
#image img{
width:100%;
}
HTML
<div id="photos">
<h3>Photo title</h3>
<P class="like">Like </P>
<p class="date">date </p>
<div id="image">
<img src="http://www.desolve.org/_images/chicago_banner.jpg" />
</div>
<p class="about">about image goes here</p>
</div>
Live demo http://jsfiddle.net/46ESp/
and now set to according to your layout as like margin *padding* with or height
I think you need like this
http://jsfiddle.net/VwPna/
From http://www.w3schools.com/css/default.asp you learn easily... and also you can check other website css from firebug in your browser.
below code is that you given site css for banner class.
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
same way you can give more style their.
Here is the way it is made on the link you gave.
HTML:
<div class="banner">
<h1>We love urban photography</h1>
<p>
We’re betting you do to. Welcome to our site, a growing collection of galleries taken by a small group of passionate urban photographers. Visit our galleries, buy some of our prints, or drop us a line. While you’re at it, feel free to submit a gallery of your own.
<strong>Welcome</strong>
.
</p>
</div>
CSS:
.banner {
background: url("../_images/gallery_banner.jpg") no-repeat scroll 0 0 transparent;
height: 350px;
margin-bottom: 4em;
overflow: hidden;
padding-left: 3.9%;
position: relative;
}
.banner h1 {
color: #FFFFFF;
font-size: 2.2em;
letter-spacing: 0.1em;
padding-top: 290px;
}
.banner p {
background: none repeat scroll 0 0 rgba(123, 121, 143, 0.8);
color: #FFFFFF;
font-size: 1em;
height: 350px;
padding: 1% 1% 0;
position: absolute;
right: 0;
top: 0;
width: 21%;
}
You only need to translate that to your id's, classes and form, then you have it
There's nothing special that they've done on the reference web site. They've used the image as a background property of a div class="preview".
Here is the (x)HTML:
<section class="chicago">
<h2>Chicago</h2>
<p class="pubdate">
<time datetime="2011-04-24" pubdate="">April 2011</time>
</p>
<div class="preview"></div>
<p class="caption">Big wind, big shoulders. See a different side of Chicago.</p>
</section>
And the corresponding CSS
.chicago .preview {
background: url(../_images/sm_chicago_banner.jpg) no-repeat;
}
You can always sneak-peek by right mouse click on the website and choosing "View Page Source" or something similar, depending on your browser :)