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;
Related
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.
I am having a hard time centering my logo on the center of my header. When displayed correctly it would look like this: "Name" Logo "Surname" .Being the logo at the center, and the "name" and "surname" displaying at both sides of it, "name" on it's left and "surname" on it's right.
(You'll understand better with the picture I'm posting)
Header: logo not centered
So I would like the circled logo to be the center of the header, then have "Pousada" adapt to it at it's right and same with "Team" at it's left.
This is my CSS and HTML:
*{
font-family: 'Oswald', sans-serif;
}
#rafa {
background-color: #000000;
background-repeat:no-repeat;
background-position: 40% 0;
background-size:30%;
color: #fff;
padding: 0.5rem 0 0 0;
border-top:none;
}
#BJJ {
text-align:center;
height: 4rem;
font-weight: normal;
}
.escudo{
text-align:center;
}
.group:after {
content: "";
display: table;
clear: both;
}
#uno {
text-align:center;
vertical-align:middle;
font-size: 2em;
display:inline-block;
}
#dos {
text-align:center;
font-size:2em;
display:inline-block;
vertical-align:middle;
}
img {
max-width: 15%;
clear:both;
display:inline-block;
vertical-align:middle;
}
ul {
color: #000;
list-style: none;
text-align:center;
background: #fff;
border-bottom: solid #000 1.5px;
padding:0;
height: 2.5em;
border-top:none;
}
li {
display:inline-block;
padding: 0 1em;
border-right: 2px;
}
#welcome{
text-align:center;
}
/************ESTILO LINKS*************/
li a {
text-decoration:underline;
color: #000;
}
.Inicio {
color: #fff;
text-decoration:none;
}
/*****************ARTE SOAVE*******************/
/*****************EL EQUIPO*******************/
/*****************LA ESCUELA*******************/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="Treehouse Programación/Recursos/normalize.css" rel="stylesheet">
<link href="estilo.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700|Roboto+Condensed:300" rel="stylesheet">
<title>Pousada Team Brazilian Jiu-Jitsu</title>
</head>
<body>
<header id="rafa">
<a href="Pousada Team.html" class="Inicio">
<h3 id="BJJ">Brazilian Jiu-Jitsu</h3>
<div class="escudo group">
<h3 id="uno">Pousada</h3>
<img src="309011_3565552909659_642031164_n.jpg"/>
<h3 id="dos">Team</h3>
</div>
</a>
</header>
<nav>
<ul>
<li>Arte soave</li>
<li>El Equipo</li>
<li>La Escuela</li>
</ul>
</nav>
<div id="welcome">
<h3>Bienvenido al equipo</h3>
</div>
<div>
</div>
</body>
</html>
I have tried with float, but didn't do well with it. What I have tried here is to use inline-block to have the 3 elements of this header ("Pousada", "logo" and "Team") align.
Any help with this particular problem I have and any content recommendations (or project practices) to fully understand HTML and CSS principles (like layouts and positioning) so I can learn them and move on to more functional aspects like Javascript, will be HUGELY appreciated, you can totally expect any help back that I can provide.
Thanks in advance, and if there's anything I can do to make this place better, please let me know.
Best regards,
Miguel
Here is a quick fix for you:
I have added a background color to the div's to help you identify them.
HTML:
Add your header, add your logo inside the header... then add both the first and the last names inside of the logo div. By adding the names inside of the logo; when ever you move the logo the names will move relative to it.
<div class="Header">
<div class="Logo">
<div class="FirstName">FirstName</div>
<div class="LastName">LastName</div>
</div><!-- End CenterContent -->
</div><!-- End Header -->
CSS:
I use the single line method of writing my css.
You can easily adjust the dimensions of the logo DIV and you can move the names around as needed.
.Header{position:relative; width:100%; height:300px; display:block; float:left; background:SILVER;}
.Logo{position:relative; margin:auto; width:200px; height:200px; background:BLACK;}
.Logo > .FirstName{position:absolute; top:90px; left:-100px; min-width:1em; text-align:center;}
.Logo > .LastName{position:absolute; top:90px; right:-100px; min-width:1em; text-align:center;}
Your Welcome.
I'm trying to decide the best way to automate adding text overlays onto images for a resource library I am creating. I have hundreds of these kinds of resources where I grab a "sample image" of the item that I then manually, in a graphics program, add the resource name overlay. It would be great if I could just upload the image and then in the HTML add the resource name and have it overlay the name and round the corners of the image and make it look right. An example of what I am trying to do is at http://digitallearning.pcgus.com/Pepper/PPB/General/leadership.html. This is all manual at this point and the more I can automate the better the process of creating this will be. Thanks in advance for any advice/code I could use.
thanks for asking on SO!
In future, we would all appreciate it if you could add your code at the moment, if any.
There are multiple ways to do this, it all depends on how you write code.
The way I would do it is using a bootstrap row (for inline images), then insert this code (modify for your application):
HTML:
<div class="col-xs-4">
<div class="imageTextContainer">
<div class="imagePart">
<img src="imgSrcHere" />
</div>
<p>Your text here</p>
</div>
</div>
<div class="col-xs-4">
<div class="imageTextContainer">
<div class="imagePart">
<img src="img2SrcHere" />
</div>
<p>Your text here</p>
</div>
</div>
<div class="col-xs-4">
<div class="imageTextContainer">
<div class="imagePart">
<img src="img3SrcHere" />
</div>
<p>Your text here</p>
</div>
</div>
Custom CSS:
.imageTextContainer {
height: 250px;
background-color: #0000FF
}
.imagePart {
height: 230px;
}
.imagePart > img {
height: 100%;
}
Hope this helps.
The reason this works is because the div containing the images and text is 250px high, however the images are set to 100% of 230px, so you get 20px for text. You can obviously modify these values however
This is what I ended up with that seems to have addressed my particular needs.
.wrap {
/* force the div to properly contain the floated images: */
position:relative;
float:left;
clear:none;
overflow:hidden;
}
.wrap img {
position:relative;
z-index:2;
width:200px;
height:125px;
border:2px solid #1F497D;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index:1;
}
.wrap img:hover {
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
-o-filter: brightness(70%);
-ms-filter: brightness(70%);
filter: brightness(70%);
}
.wrap .desc {
display:block;
position:absolute;
width:100%;
top:55%;
left:0;
background-color: rgba(31,73,125,0.85);
font-family: 'Arvo', serif;
font-size:11px;
color: #FFF;
text-shadow: 1px 1px #111111;
font-weight:normal;
display:flex;
text-align:center;
justify-content:center;
align-items:center;
bottom: -5%;
-webkit-border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
border-radius: 0px 0px 10px 10px;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head><title>Client Resources</title>
<link href="learningmat.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo|Alice|Roboto|Roboto+Condensed|Alegreya:700">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<div class="list">
<h1 class="list2">Client Resources</h1>
<hr class="list2">
<p>SOME KIND OF DESCRIPTION</p>
<img src="imgs/spacer.png" class="spacer2">
<a href="docs/03 - How do we define urgency.pdf" target="_blank">
<div class="wrap">
<img src="imgs/Urgency.jpg" />
<h3 class="desc">How Do We Define Urgency?</h3>
</div>
</a>
</div>
</body>
</html>
If anyone sees any improvements or changes, please let me know.
I am trying to set out my webpage and I am facing a big problem. I have wrapped all of my code in a tag as I wish to wrap all of my content in an additional background of different color.
However when I set the attributes for my code this happens:
It is as if by bottom element is overlapping somehow with the two above. I am using column separators I do not know if this affects it. Here is my full CSS & HTML code:
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li>Home</li>
<li>Featured</li>
<li>Coming Soon</li>
</ul>
<ul class="pull-right">
<li>Sign In</li>
<li>Register</li>
</ul>
<div id="logo-game">
<img src="http://upload.wikimedia.org/wikipedia/he/b/b7/Gamespot_logo.png">
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="feature-cont">
<div id="feature-cont-back">
<h1>100's Of Featured Game Reviews</h1>
<p>Browse through our collection of the most popular game reviews out there</p>
Find Out More
</div>
</div>
</div>
</div>
<div class="bodytwo">
<!--Recommened Section-->
<div class="recommended">
<div class="text-center">
<div class="container">
<ul>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Destiny.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_CODAW.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Evolve.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_AssassinsCreed.jpg"</li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_FIFA.jpg"</li>
</ul>
<ul>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Forza.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_BattlefieldHardlines.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_GTAV.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_Halo.jpg"></li>
<li><img src="https://img.game.co.uk/merch/homeEspots/FranchiseLogos/FranchiseLogos_FarCry4.jpg"> </li>
</ul>
</div>
</div>
</div>
<!--Start Of Tables-->
<div class="mainc">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="new-game">
<table>
<tr>
<th colspan="3">Games</th>
</tr>
<tr>
<td>
<img src="http://static.gamespot.com/uploads/original/1197/11970954/2396871-battlefield4.jpeg">
<p>Battlefield 4 is the genre-defining action blockbuster made from moments that blur the line between game and glory...</p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps3/fifa_14/cover_large.jpg">
<p>This year it's all about the emotion of scoring great goals - the challenge of building play as a team...</p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps3/dead_island_riptide/cover_large.jpg">
<p>Take on hundreds of Zombies at once as your screen becomes swamped with the undead all after one thing…. You!</p>
</td>
</tr>
<tr>
<td height="400">
<img src="http://images.pushsquare.com/games/ps4/need_for_speed_rivals/cover_large.jpg">
<p>High speed meets high stakes in Need for Speed: Rivals. Play as a lone-wolf racer or a team-based cop as you speed... </p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps4/watch_dogs/cover_large.jpg">
<p>Join the Community and Social Team from GAME as they head to Paris for a special Watch Dogs event with Ubisoft!.. </p>
</td>
<td>
<img src="http://images.pushsquare.com/games/ps3/last_of_us/cover_large.jpg">
<p>From the creators of the Uncharted Series comes an emotionally-charged experience that’ll keep you gripped...</p>
</td>
</tr>
</table>
</div>
</div>
<!--End Of Tables-->
<!--Start of chart-->
<div class="col-md-6">
<div class="table-chart">
<table class="background">
<tr>
<th colspan="3"><h1>Game Charts</h1></th>
</tr>
<tr>
<td><h1>1</h1></td>
<td><img src="http://images.pushsquare.com/games/ps3/gran_turismo_6/cover_large.jpg"</td>
<td><h3>Gran Turismo</h3>View Review</td>
</tr>
<tr>
<td><h1>2</h1></td>
<td><img src="http://images.pushsquare.com/games/ps3/call_of_duty_ghosts/cover_large.jpg"</td>
<td><h3>Call of Duty:Ghosts</h3>View Review </td>
</tr>
<tr>
<td><h1>3</h1></td>
<td><img src="http://images.pushsquare.com/games/ps4/killzone_shadow_fall/cover_large.jpg"</td>
<td><h3>Killzone</h3>View Review</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!--End of chart-->
</div>
<div class="feature-article">
<div ="feature-back">
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Call Of Duty: Ghosts</h2>
<img src="http://eaglerising.com/wp-content/uploads/2013/11/call_of_duty_ghosts-hd-300x180.jpg">
<p>Build your team and take up to 6 of them into battle in the all new Squads mode. This mode takes the best parts of the multiplayer experience and allows you to play either solo or cooperatively with the custom soldiers created and leveled up in multiplaye</p>
</div>
<div class="col-md-4">
<div id="feature_back">
<h2>Grand Theft Auto V</h2>
<img src="http://ronewiznation.files.wordpress.com/2013/10/grand-theft-auto-game-cover.jpg?w=300&h=180">
<p>Grand Theft Auto V Los Santos: a sprawling sun-soaked metropolis full of self-help gurus, starlets, and fading celebrities, once the envy of the Western world, now struggling to stay afloat in an era of economic uncertainty and cheap reality TV. </p>
</div>
</div>
<div class="col-md-4">
<h2>Assasins Creed</h2>
<img src="http://www.ketubanjiwa.com/wp-content/uploads/2013/12/Assassins-Creed-IV-Black-Flag-Freedom-Cry-DLC-Reloaded-Single-Link-300x180.jpg">
<p>The year is 1715. Pirates rule the Caribbean and have established their own lawless Republic where corruption, greediness and cruelty are commonplace.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color:#121212;
}
.bodytwo {
background-color:white;
position:relative;
}
.nav {
background-color:black;
width:100%;
position:fixed;
z-index:5;
}
.nav li {
display:inline;
}
.nav a {
padding:10px 8px;
position:relative;
top:6px;
color:#FF6600;
text-transform:uppercase;
}
#logo-game img {
position:relative;
height:50px;
left:20%;
}
.jumbotron {
position:relative;
top:50px;
background-image:url('http://collectortoys.net/wp-content/uploads/2014/06/battlefield-4-server-bannerladder-standings-for-xboxone-battlefield-4---bf4-xbox-one-mretosqa.jpg');
height:500px;
z-index:2;
background-size:cover;
}
.feature-cont {
position:relative;
left:800px;
width:350px;
color:white;
z-index:2;
}
#feature-cont-back {
background-color:rgba(20,20,20,.5);
width:400px;
height:400px;
position:relative;
border-radius:10px;
padding:5px;
z-index:1;
}
.jumbotron h1 {
font-family:ubuntu, Arial;
}
.recommended li {
display:inline;
margin:auto;
float: none;
position:relative;
top:80px;
}
.new-game {
position:relative;
}
.new-game td, th {
padding: 0.5;
}
.new-game table {
border-collapse:separate;
border-spacing:15px 10px;
border: 1px solid black;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.new-game tr {
padding:10px;
}
.new-game tr th {
text-align:center;
color:white;
font-family:ubuntu;
font-size:25px;
}
.new-game td {
padding:10px;
width:100px;
height:200px;
vertical-align:top;
background-color: rgba(24,24,24,.2);
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.new-game td p {
text-align:center;
font-family:arial;
font-size:12px;
color:white;
}
.new-game td img {
width:100px;
height:100px;
}
.background {
background: url("http://i1057.photobucket.com/albums/t390/Alexwileyy/box-01_zpsdd34bf84.png")
no-repeat;
height:500px;
width:424px;
}
.table-chart table {
position:relative;
border-collapse:separate;
}
.table-chart tr td h3 {
width:150px;
text-align: center;
font-family:Arial;
font-size:20px;
position:relative;
top:-20px;
color:black;
}
.table-chart td a {
position:relative;
top:-20px;
}
.table-chart td img {
width:100px;
height:100px;
}
.table-chart th h1 {
text-align:center;
font-family:ubuntu;
color: #dd6a15;
text-shadow: 0 2px rgba(0,0,0,0.75);
}
.table-chart td {
padding:15px;
box-shadow: 0 3px 1px rgba(26,26,26,0.75);
}
.feature-article {
position:relative;
clear:both;
height:400px;
border-bottom:3px solid #2f2f2f;
border-top:3px solid #2f2f2f;
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/1_zps87c3163e.jpg');
}
.feature-article .col-md-4 {
width:370px;
height:200px;
text-align:center;
margin:auto;
z-index:1;
}
.feature-article .col-md-4 img {
width:300px;
height:180px;
}
.feature-article .col-md-4 p {
width:350px;
}
#feature_back {
clear:both;
background-image:url('http://i1057.photobucket.com/albums/t390/Alexwileyy/line-01_zps79e6ad19.png');
height:400px;
width:370px;
padding-left:10px;
background-repeat:no-repeat
}
/*Buttons Design*/
.view-review {
margin-top: 0px;
margin-right: 0px;
padding: 14px 26px;
font-size: 14px;
line-height: 100%;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
color: #fff;
display:inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
font-weight: bold;
transition: background 0.1s ease-in-out;
/*for different browsers */
-webkit-transition: background 0.4s ease-in-out;
-moz-transition: background 0.1s ease-in-out;
-ms-transition: background 0.1s ease-in-out;
-o-transition: background 0.1s ease-in-out;
/*END*/
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
color: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: 'Helvetica Neue', Helvetica, sans-serif;
}
.view-review:active {
padding-top: 15px;
margin-bottom: -1px;
}
.view-review, .view-review:hover, .view-review:active {
outline: 0 none;
text-decoration: none;
color: #fff;
border-radius: 3px;
}
.view-review {
background-color: #2f2f2f;
box-shadow: 0px 3px 0px 0px #ea6300;
width:150px;
height:35px;
}
.view-review:hover {
background-color: #454545;
}
.mainc .row {
position:relative;
top:80px;
}
To summarise I want to have the white background wrapped around only the table elements on the page running all the way down the page, however the bottom element is overlapping the tables.
Any idea at all of what I could possible do?
The problem is that you gave a 'top:80' to '.mainc .row'. This causes the overlap. Delete it, and your footer will not overlap the content. Also, give a 'margin-top:100px' to your '.mainc' class. this will fix the new overlapping problem.
You need to learn to use bootstrap more efficiently. Don't be afraid to abuse bootstrap's 'container' and 'row' divs. Think of those element as some big lego blocs that will stack themselves untop of each others.
Also I would not recommend using tables, as they are old-school and less edit-friendly. Use DIVs, you will have more control over them and they will adjust more easily with bootstrap.
If you want your site to be responsive, learn how to scale and place your columns accordingly by adding all of bootstrap 'col-x-x' classes.
You're adding position:relative all over for no good reason. In general you use position:relative to set the anchor point for absolutely-positioned child elements. You'd then use position:absolute to move those elements around in the layout.
If you need to perform minor tweaks of element positioning, use margin:, not position:relative.
I just made my first website, and I notice that the elements start to look weird and clumped together if the browser window gets too small or so. I was wondering how to make the elements scalable
Relevant HTML:
<!DOCTYPE html>
<html>
<head>
<title>Andrew Louis, University of Toronto</title>
<link rel="stylesheet" href="fonts/stylesheet.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="javascript/jqueryscript.js"></script>
<script src="javascript/popup.js"></script>
<script language="JavaScript">
var i = 0;
imageObj = new Image();
images = new Array();
images[0] = "images/book-black.png";
images[1] = "images/male-black.png";
images[2] = "images/telephone-black.png";
//Start preloading
for (i = 0; i<=2; i++)
{
imageObj.src=images[i];
}
</script>
<body>
<div id="heading">
<span class="border">Andrew Louis</span>
<div id = "subheading">
<p> <br /><b>Andrew</b> is a big fan of grandiose ideas that propel change, imaginative software,<br /> innovative web design, and caffè americanos.</p>
</div>
</div>
<!-- <div id="footer"> -->
<div class="nav_wrapper">
<ul class = "Fade" id="list_orientation">
<li id="about"><img src = "images/male.png" height = '50' width = '50' /></li>
<li id="port"><img src = "images/book.png" height = '50' width = '50' /></li>
<li id="contact"><img src = "images/telephone.png" height = '50' width = '50' /></li>
</ul>
</div>
<!-- </div> -->
</body>
</html>
Relevant CSS:
.Chunk{
font-family:'ChunkFiveRomanRegular';
}
.Museo{
font-family:'MuseoSlab500Regular';
font-size:20px;
}
.nav_wrapper {
position:fixed;
color:#000;
left: -100px;
right: 0px;
bottom: 0px;
text-align:center;
height:225px;
/*background:white;
border-style:dotted;*/
}
.global_nav{
position:fixed;
float:bottom;
padding:5px;
color:#000;
left: 0px;
right: 0px;
bottom: 0px;
text-align:center;
height:17px;
font-size:10px;
background:white;
}
#portfolio_text{
text-align:center;
}
#heading{
font-family:'Lobster1.3Regular';
color:#D04D21;
position: absolute;
font-size:80px;
top: 10%;
left: 0px;
width: 100%;
height: 1px;
text-align:center;
text-shadow: 0 0 2px rgba(0,0,0,0.9);
}
.border{
border-top: 1px solid #D04D21;/*#000000;*/
border-bottom:1px solid #D04D21;/*#000000;*/
padding:20px;
}
.rounded_border{
border:2px dashed;
padding:10px 40px;
border-radius:25px;
}
body{
background:#FFFFFF;
}
#subheading{
font-family:'MuseoSlab500Regular';
text-align:center;
font-size:25px;
text-shadow: 0 0 1px rgba(0,0,0,0.1);
}
#list_orientation li a {
text-decoration:none;
text-align:center;
color:black;
}
#list_orientation li{
display:inline-block;
padding:50px;
height:50px;width:50px;
text-align:center;
width:20%;
margin-left:3%;
}
.Fade img{
border-style:dotted;
/* opacity:0.4;
padding:10px;
padding-bottom:20px;*/
background:white;
border-color:#D04D21;
padding: 2em 2em 2em 2em;
-moz-border-radius: 5em;
-webkit-border-radius: 5em;
border-radius: 5em;
}
.Fade img:hover{
background:#D04D21;
border-color:white;
}
#pup {
position:absolute;
z-index:200; /* aaaalways on top*/
text-align:center;
font-family:'ChunkFiveRomanRegular';
padding: 3px;
margin-left: 10px;
margin-top: -5px;
width: 120px;
border: 1px solid black;
background-color:white;
color: #D04D21;
opacity:0.9;
font-size: 1em;/*0.95em;*/
}
.Entypo{
font-family:'EntypoRegular';
font-size:100px;
}
a{
text-decoration:none;
color:#D04D21;
}
This can vary a lot depending on the effect you want to create.
The easiest way would be to set the min-height and min-width of the body (or a new top level div) and have the user scroll in a smaller browser window.
Most solutions you will come up with will probably involve messing around with these min-height and min-widths of various elements!
However, a 'better' solution would be to avoid position: absolute or fixed. These do not scale well. Try using padding and margin on divs to get the desired effect instead.
Use css zoom and the equivalent for firefox. (-moz-transform:scale(xx)), with jquery
CSS zoom will work on both IE and Chrome.
after the DOM is loaded,
var zoomRatio = $(window).width() / 1024;
//if your site is fixed at 1024 px for example
$(document).ready(function(){
$(html).css("zoom",zoomRatio);
});
this is not extremely well supported, but it does the job. That is what I am currently using.