I've tried to fix this for hours and i'm pulling my hair out, no matter what i do it refuses to call the CSS in the media tag the instant i add max-width or min-width. To test, i made the media tag make the body red and reduced min-width to something ridiculously low. Nothing happens. If i leave the screen tag and nothing else, it calls it
CSS:
#import url("reset.css");
#charset "iso-8859-1";
#font-face {
font-family: cooper;
src: url('../resources/CooperBlackStd.otf');
}
#media screen and (min-width:500){
body{background-color:#FF0000;}
}
body {
line-height: 28px;
}
#pagecenter {
margin-left:5%;
margin-right:5%;
background: #d1d1d1; /* Old browsers */
background: -moz-linear-gradient(left, #d1d1d1 0%, #66a8d2 20%, #66a8d2 80%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#d1d1d1), color-stop(20%,#66a8d2), color-stop(80%,#66a8d2), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #d1d1d1 0%,#66a8d2 20%,#66a8d2 80%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #d1d1d1 0%,#66a8d2 20%,#66a8d2 80%,#e5e5e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #d1d1d1 0%,#66a8d2 20%,#66a8d2 80%,#e5e5e5 100%); /* IE10+ */
background: linear-gradient(to right, #d1d1d1 0%,#66a8d2 20%,#66a8d2 80%,#e5e5e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#e5e5e5',GradientType=1 ); /* IE6-9 */
}
/*No one needs to select the navigation bar*/
nav {
width:100%;
float:left;
background-color:#0B61A4;
border-bottom:3px solid #000;
position:relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
nav > ul {
/*padding-left:10px;*/
display:block;
list-style:none;
position:relative;
float:left;
text-align:center;
margin-left:15em;
}
nav > ul li {
float:left;
}
nav ul li:hover{
background:rgb(63, 146, 210);
}
nav > ul li a {
position:relative;
height:100%;
padding: 2px 3px;
margin-bottom:3px;
margin:0;
display:block;
color:#000;
text-decoration:none;
}
nav ul:after {
content: "";
clear:both;
display:block;
}
nav ul ul {
display:none;
background:rgb(63, 146, 210);
position:absolute;
border-top:1px solid #000;
border-bottom:1px solid #000;
border-left:2px solid #000;
border-right:2px solid #000;
z-index:5;
}
nav ul ul li {
float:none;
border-top:1px solid #000;
border-bottom:1px solid #000;
height:50%;
position:relative;
}
nav ul ul li a {
color: #000;
padding:15px;
text-align:center;
position:relative;
font-family:cooper, times new roman, times, serif;
}
nav ul ul li a:hover {
background-color: rgb(102, 163, 210);
}
nav ul li:hover > ul {
display:block;
}
#logo {
border-left:3px solid #000;
border-right:3px solid #000;
margin-left:-3px;
padding:2px 3px;
height:inherit;
}
#logo img {
height:96px;
}
/*Navbar end*/
/*Butikk*/
table tr td {
vertical-align:top;
}
#shoplist {
width:100%;
float:left;
background-color:rgb(63, 146, 210);
border-bottom:2px solid #000;
}
#shoplist ul {
list-style:none;
margin:0 8%;
background-color:rgb(63, 146, 210);
text-align:center;
}
#shoplist li {
float:left;
}
#shoplist li a {
position:relative;
display:block;
padding:8px 25px;
text-decoration:none;
height:100%;
color:#000;
font-family:cooper, times new roman, times, serif;
border-right:2px solid #000;
}
#shoplist li:first-child a {
border-left:2px solid #000;
}
/* Universal */
.bigbutton {
position:relative;
list-style:none;
float:left;
background-color:rgb(209, 209, 209);
border:2px solid #000;
margin:5px 5px;
}
.bigbutton li {
float:left;
height:auto;
}
.bigbutton li a {
position:relative;
display:block;
padding:6px 6px 6px 25px;
text-decoration:none;
color:#000;
font-family:cooper, times new roman, times, serif;
}
.bigbutton li img {
height:32px;
padding:0px 15px 0px 8px;
}
HTML:
<!doctype html>
<html><!-- InstanceBegin template="/Templates/maintemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="iso-8859-1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Pedalsport</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!-- InstanceEndEditable -->
<link href="css/main.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="img/favicon.ico">
</head>
<body>
<nav>
<ul>
<li><img src="img/Butikkicon.png" alt="Butikk"></li>
<li><img src="img/verkstedicon.png" alt="tekst"></li>
<li><img src="img/mapicon.png">
<ul>
<li>Svartvann</li>
<li>Brønnøya</li>
<li>Bogstad</li>
<li>Brunkollen</li>
</ul>
</li>
<li id="logo"><img src="img/logo.png"></li>
<li><img src="img/magasinikon.png"></li>
<li><img src="img/klubbikon.png"></li>
<li><img src="img/abouticon.png"></li>
</ul>
</nav>
<!-- InstanceBeginEditable name="EditRegion1" -->
<div id="shoplist">
<ul>
<li>Barnesykler</li>
<li>Temposykler</li>
<li>Landeveissykler</li>
<li>Terrengsykler</li>
<li>El-sykler</li>
</ul>
</div>
<div id="pagecenter">
<h1>Butikk</h1>
<ul class="bigbutton"><li>Produktmagasin som PDF</li><li><img src="img/download.png"></li></ul>
<a name="Barnesykler">Barnesykler</a>
<table width="1061" border="0">
<tr>
<th scope="col">
Dynamite 20’’ Girl 2013</th>
<th scope="col"> </th>
</tr>
<tr>
<th width="256" height="156" scope="row">
<img src="img/Jentesykkel.jpg" width="227" height="138" align="left">
</th>
<td style="vertical-align:top;" width="795">
En pen og praktisk sykkel med fine farger. Perfekt for både landevei og terreng. Passer for jenter i alderen 8-12 år.
<br>
Pris: 1.699,-
</td>
</tr>
<tr>
<th scope="row">Fazer 16’’ Boy</th>
<td></td>
</tr>
<tr>
<th height="173" scope="row"><img src="img/Guttesykkel 16''.jpg" alt="Guttete sykkel" width="227" height="152" align="left"></th>
<td>En tøff og holdbar sykkel som passer til
de fleste anledninger med tøffe farger ogstøttehjul for de som trenger hjelp. Passer for gutter i alderen 6-10 år. <br>
Pris: 1.799,-
</td>
</tr>
<tr>
<th scope="row">Superior Team Issue 24 Deore</th>
<td></td>
</tr>
<tr>
<th scope="row"><img src="img/Guttesykkel2.jpg" alt="http://www.birksport.no/images/birksport%20images/Superior%20Team%2024%20Issue.jpg" width="222" height="123" align="left"></th>
<td>
En god sykkel med gode bruksmuligheter;
funker bra både på landeveien og i skog og mark.
For de som er kommet forbi nybegynner.
Passer for gutter og jenter i alderen 10-14 år. <br>
Pris: 3.599,-
</td>
</tr>
</table>
<br>
<hr>
<h1><a name="Temposykler">Temposykler</a></h1>
<table width="1063" border="0">
<tr>
<th width="249" scope="col">Norcom Straight 1.1 2014</th>
<th width="804" scope="col"> </th>
</tr>
<tr>
<th scope="row"><img src="img/Temposykkel.jpg" alt="Temposykkel" width="219" height="146" align="left"></th>
<td>En av markedes desidert sterkeste sykler,
en temposyklers drøm. Sykkelen er utstyr
med topnoch utstyr. Brukes av verdenseliten
som Matt Reed og Cameron Dye.
Pris: 49.999,-</td>
</tr>
</table>
<hr>
<h1><a name="Landeveissykler">Landeveissykler</a></h1>
<h1>Fuji Altamira SL</h1>
<img src="img/Landeveissykkel.jpg" alt="Landeveissykkel" width="201" height="121" align="left">
En flott landeveissykkel som har alt du er ute
etter. Denne sykkelen veier bare 6.2kg!
<br>
Pris: 34.999,-
<hr>
<h1><a name="Terrengsykler">Terrengsykler</a></h1>
<h1>Corratec Revolution carbon terrengsykkel</h1>
<img src="img/Terrengsykkel1.jpg" alt="Terrengsykkel" width="191" height="128" align="left">
Forskjellen mellom god og perfekt. Denne
sykkelen vil ta deg hvor du vil, når du vil
og hvor fort du vil. Ypperlig til både
konkurranse og for de som er ekstra dedikerte.<br>
Pris: 14.199,-
<h1> </h1>
<h1>Corractec X-Vert S.04</h1>
<img src="img/Terrengsykkel2.jpg" alt="Terrengsykkel2" width="188" height="118" align="left">
Perfekt sykkel, veldesignet for rundbane og
mosjon. Lever opp til alle dine behov, både
som mosjonist og som utdøver.
En sykkel vi sterkt anbefaler. <br>
Pris: 8.999,-
<hr>
<h1><a name="El-sykler">El-sykler</a></h1>
<h1>Superior Powerflex 24 Men</h1>
<img src="img/El-sykkel.jpg" alt="El-sykler" width="186" height="117" align="left">
Powerflex gir deg muligheten for et ekstra dytt
opp den litt tunge bakken. En meget
tilpasninsdyktig sykkel med 24V/ 250Watt
motor og Panasonic Li-Ion 25,2 V PCB batteri.<br>
Pris: 9.999,-
<br>
</div>
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>
Excuse the absolute mess of code, but i haven't had time to clean this up before losing my mind over this issue.
You haven't specified a pixel value. Try:
#media screen and (min-width:500px){
{body{background-color:#FF0000;}
}
To expand on the previous answer, you didn't specify any unit, it doesn't need to be pixels.
You could use absolute lengths ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, or ‘px’, font-relative lengths ‘em’, ‘ex’, ‘ch’, or ‘rem’ or the viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’ or ‘vmax’. And that's just lengths, there are many other units you can use in media-queries including pixel density, device orientation, device type, etc.
Related
I never finished my web-integrator education but i am now a mediagraphics intern and i offered to code a bit in css and html. So i am very rusty and this project has been just as much a refresher of knowledge as it has been a proper project. So be nice please.
I am making the site responsive however I am having a problem coding for the phone screen size.
To the right of my content the background image continues, allowing you to scroll sideways. I simply can't find out what's causing this. Images and everything are edited to fit the width there.
I have one suspicion, that I might have messed up completely with the width of the pixels. I have made it fit the screen but should i forget that and use the actual widths of the phone screen? Just seems so small and it appears to work fine with 1090px width here, it is just the background that push to the side.
This is my css code for the media query I am using for the phone.
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Splitters */
.splitter1 {
visibility: hidden;
height:0;
width:0;
z-index:1000;
}
.splitter1mobile {
visibility: visible;
height:250px;
width:1090px;
margin:0;
padding:0;
z-index:1000;
}
.splitter2 {
visibility: hidden;
height:0;
width: 0;
z-index:1000;
}
.splitter2mobile {
visibility:visible;
height:250px;
width:1090px;
margin:0;
padding:0;
z-index:1000;
}
.splitter3 {
visibility: hidden;
height:0;
width: 0;
z-index:1000;
}
.splitter3mobile {
visibility: visible;
height:250px;
width:1090px;
margin:0 0 7px 0;
padding:0;
z-index: 1000;
}
.splitter4 {
visibility: hidden;
width: 0;
height: 0;
}
.splitter4mobile {
visibility: visible;
height:250px;
width:1090px;
margin:-2px 0 0 0;
padding:0;
z-index: 1000;
}
.orangesplitter {
height:100%;
width:100%;
margin-top:-17px;
margin-bottom:-11px;
}
.greysplitter {
height:239px;
width:100%;
margin:-19px 0 26px 0;
}
footer {
width:86.5%;
}
.Element-header {
transform: translate3d(0,0,0);
}
.Element-header--fixed {
top: 0;
position: fixed;
}
/*------------- Body --------------*/
.fysphone {
margin-left:57px;
margin-top:112px;
visibility: visible;
width:56%;
height:45%;
}
.fysphone img {
visibility: visible;
width:100%;
height:500px;
}
.fysimgbox {
display:none;
}
.jonimgbox {
visibility: hidden;
width:0;
height:0;
}
.contentwrapper {
width:100%;
display:inline-block;
}
.textbox {
width:90%;
}
.jonimgboxphone {
margin-top:22px;
}
.jonnicephone {
margin:0 0 0 100px;
}
.jontitelphone {
margin-left:199px;
}
header {
transform: translate3d(0,0,0);
z-index: 1000;
padding:0;
margin:0;
width:1090px;
height:265px;
position:fixed;
box-shadow:0 5px 15px 0 #7d7b7c;
}
body{
padding:0;
margin:0 auto;
width:1090px;
height:8227px;
background-image: url(img/wallbgfadedphone.png);
background-repeat:repeat;
background-blend-mode: overlay;
}
.imgmbox {
margin-left:0;
margin-right:10px;
}
/*----- Google Maps -----*/
iframe {
margin-top:150px;
margin-right:20px;
width:500px;
height:350px;
}
.wrapper {
margin: 0 auto;
width:100%;
height: 8227px;
}
/*------------- Header ------------*/
/*------------- Header Navbar ------------*/
.Hnavbar {
margin-top:0;
height:101px;
width:100%;
box-shadow: inset 0 0 0 1000px rgba(125,123,124,.9);
background-image:url(img/wallbg.jpg);
}
.nav1 {
margin-left:-26px;
}
nav ul {
height:101px;
float:left;
margin:0;
width:100%;
}
nav ul li {
margin-left:30px;
margin-top:18px;
float:left;
height:30px;
list-style: none;
border-radius: 9px;
}
nav ul li a {
font-family:Exo;
color: #dedede;
padding:5px 23px 5px 23px;
border-top:1px solid #dedede;
border-bottom:1px solid #dedede;
text-decoration: none;
text-align: center;
font-size: 40px;
}
.fblink {
width:50px;
height:50px;
float:left;
margin-left:150px;
margin-top:15px;
display:none;
}
.fbicon:hover {
opacity:1.0;
}
/*** Content Block ***/
.contentblock {
width:100%;
height:1200px;
background-color:rgb(255,255,255,0.8);
display:inline-block;
opacity:0.9;
}
.contentblock1 {
width:100%;
height:1239px;
background-color:rgb(255,255,255,0.8);
display:flex;
opacity:0.9;
}
.contentblock2 {
display:inline-block;
width: 100%;
height:1971px;
background-color:rgb(255,255,255,0.8);
opacity:0.9;
margin-top:10px;
}
#contentblock3 {
width: 100%;
height:1120px;
background-color:rgb(255,255,255,0.8);
display:inline-block;
opacity:0.9;
}
/*** Anchor Menupoint Scrollpositioner ***/
.anchor {
display:none;
height:265px;
margin-top: -265px;
visibility:hidden;
}
/*** Om Text ***/
.textbox p {
font-family:Exo-Regular;
width:100%;
margin:0 auto 0 35px;
font-size:33px;
font-weight: 600;
color:#7d7b7c;
padding:0;
}
/*** Fys Text ***/
.fysbox {
font-family:Exo-Regular;
width:100%;
height:850px;
color:#7d7b7c;
padding:0;
}
.fysbox h2 {
font-size:40px;
margin-left:35px;
}
.fysbox p {
font-family:Exo-Regular;
width:90%;
margin:0 0 0 35px;
font-size:33px;
font-weight: 600;
color:#7d7b7c;
padding:0;
}
.fysbox ul li {
font-size:33px;
font-weight:600;
}
.textwrapper {
width:100%;
padding:20px;
}
/** Træning Text **/
.traeningbox p {
font-family:Exo-Regular;
width:100%;
margin:0 auto 0 35px;
font-size:33px;
font-weight:600;
color:#7d7b7c;
padding:0;
}
.traeningbox h2 {
font-size: 40px;
margin-left:35px;
}
.traeningbox {
width:90%;
}
/*---- Priser Text ----*/
.textboxpris {
float:left;
font-family:Exo-Regular;
width:350px;
margin:0 0 0 35px;
font-size:24px;
font-weight:600;
color:#7d7b7c;
padding:20px;
}
.textboxpris p {
font-size:33px;
}
.prish {
width:188px;
}
.pristext {
width:757px;
}
.textboxpris h2 {
font-size:40px;
}
.pristext {
font-size: 26px;
font-weight: 600;
margin-top:100px;
}
.prispunkt {
font-size:26px;
}
.textwrapperpris {
width:872px;
}
.textwrapperpris h2 {
}
.prisv {
float:left;
width:570px;
height:200px;
}
.prisimgbox {
visibility: hidden;
width:0;
height:0;
}
/*--- Kontakt text ---*/
.kontaktbox {
margin:0 0 0 98px;
float:left;
width:852px;
height:600px;
padding:0px;
font-family: Exo-Regular;
font-size:33px;
font-weight:600;
}
.kontaktbox h2 {
font-size: 40px;
}
iframe {
display:none;
}
.traeningimgbox {
visibility: hidden;
width:0;
height:0;
}
footer {
width:905px;
}
}
And this is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slagelse Sportsklinik</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<a name="top"></a>
<div class="wrapper">
<header>
<div class="Hlogobox">
<img src="img/logowhite.png" alt="">
</div>
<nav class="Hnavbar">
<ul>
<li class="nav1"><span>Home</span></li>
<li><span>Fysioterapi</span></li>
<li><span>Træning</span></li>
<li><span>Priser</span></li>
<li class="nav5"><span>Kontakt</span></li>
<a class="fblink" target="_blank" href="https://www.facebook.com/slagelsesportsklinik"><img class="fbicon" src="img/icons/facebook.png" alt=""></a>
</ul>
</nav>
</header>
<main>
<div class="contentblock1">
<div class="contentwrapper">
<div class="jonimgboxphone">
<img class="jontitelphone" src="img/jontitel.png" alt="">
<br>
<img class="jonnicephone" src="img/jonnice.png" alt="">
</div>
<div class="textbox">
<p>
<b>Slagelse Sportsklinik</b> startede i 2017 af fysioterapeut Jon Ahrensbøll med ønsket om at ville starte en klinik, der leverede hurtige og markante resultater, der skulle sikre hurtig tilbagevenden til idræt eller arbejde.
<br>
<br>
<span class="jonahrensboll"><b>Jon Ahrensbøll</b></span> har igennem 18 år arbejdet som fysioterapeut på forskellige klinikker med alle typer af patienter. De senere år har patientgruppen primært været idrætsfolk primært indenfor triatlon, løb og cykling. Jon Ahrensbøll er samtidigt tilknyttet Gørlev Fysioterapi og Idrætsklinik som fysioterapeut med fysioterapeutisk ansvar for både Vestsjællands Idrætsefterskole og Gørlev Idrætsefterskole.
</p>
</div>
<div class="jonimgbox">
<img class="jontitel" src="img/jontitel.png" alt="">
<img class="jonnice" src="img/jonnice.png" alt="">
</div>
</div>
</div>
<div class="orangesplitter">
<img class="splitter1" src="img/orangesplitter1.png" alt="">
<img class="splitter1mobile" src="img/orangesplitter1mobile.png" alt="">
</div>
<a name="fysmenu"></a>
<span class="anchor" id="section2"></span>
<div class="contentblock2">
<div class="totalwrap">
<div class="fysphone">
<img class="img" src="img/jonbrugerlaser.png" alt="">
</div>
<div class="fysbox">
<div class="textwrapper">
<h2>Fysioterapi</h2>
<p>
Hos Slagelse Sportsklinik udfører vi fysioterapeutiske behandlinger af høj kvalitet. Vi har en høj grad af information om både tests og behandling, og vi tillægger altid et holistisk perspektiv i vores behandlinger.
<br>
<br>
For at opnå størst mulig positiv effekt benytter vi forskellige fysioterapeutiske, osteopatiske og kiropraktiske manuelle teknikker, ligesom vi ofte inddrager forskellige former for træningsøvelser.
<br>
<br>
Udover manuelle teknikker og træningsøvelser benytter vi desuden bl.a.
</p>
<ul>
<li>IMS (Intra Muskulær Stimulation) dvs. behandling med nåle, hvorved bl.a. muskulatur afspændes hurtigt.</li>
<li>Kinesiotape, dvs. optapening med hyperelastisk tape, der på en gang støtter og bibeholder fuld funktion af både muskler og led.</li>
<li>High Power Laser, dvs. laserbehandling, der skaber en kemisk modulering af vævet, så opheling sker markant hurtigere</li>
</ul>
</div>
</div>
<div class="fysimgbox">
<img class="imgfys" src="img/jonbrugerlaser.png" alt="">
</div>
</div>
</div>
<div class="greysplitter"><img class="splitter2" src="img/greysplitter1.png" alt="">
<img class="splitter2mobile" src="img/greysplitter1mobile.png" alt="">
</div>
<a name="træningmenu"></a>
<span class="anchor" id="section2"></span>
<div class="contentblock3" id="contentblock3">
<div class="traeningbox">
<div class="textwrapper">
<h2>Træning</h2>
<p>
Hos Slagelse Sportsklinik tilbydes træning på små hold (max. 5 personer). Vi har forskellige former for holdtræning, og ens for dem alle er, at der er fokus på CORE, stabilitet og -ikke mindst- funktionalitet. Træningen er målrettet den enkelte deltager, således at alle uanset niveau vil blive udfordret.
<br>
<br>
Vi har valgt små hold ud fra ideen om, at på små hold er det intensiv, nærmest personlig træning samtidigt med, at man fortsat kan være social.
<br>
<br>
På alle hold benyttes styrke- og udspændingsøvelser hentet fra Pilates, Yoga og CORE, ligesom der benyttes træning i TRX, dvs. træning i slynger med egen kropsvægt som modstand.
</p>
</div>
</div>
<div class="traeningimgbox">
<img src="img/grittoneddown.png" alt="">
<img class="pushimg" src="img/stretch.png" alt="">
</div>
</div>
<div class="orangesplitter">
<img class="splitter3" src="img/orangesplitter2.png" alt="">
<img class="splitter3mobile" src="img/orangesplitter2mobile.png" alt="">
</div>
<a name="prismenu"></a>
<span class="anchor" id="section2"></span>
<div class="contentblock">
<div class="textboxpris">
<div class="textwrapperpris">
<h2>Priser</h2>
<p class="prisv">
Fysioterapeutisk behandling pr. gang <br><br>
Træning pr. gang <br><br>
Træningsklippekort - 10 gange <br><br>
Behandlingsklippekort - 10 gange <br><br>
</p>
<p class="prispunkt">
<b>•</b><br><br>
<b>•</b><br><br>
<b>•</b><br><br>
<b>•</b><br><br>
</p>
<p class="prish">
<b>kr. 275,00</b> <br><br>
<b>kr. 45,00 </b><br><br>
<b>kr. 400,00</b> <br><br>
<b>kr. 2500,00</b> <br><br>
</p>
<p class="pristext">
Slagelse Sportsklinik har <b>ikke</b> overenskomst med Den Offentlige Sygesikring, så tilskud hertil kan ikke opnås. Dette betyder samtidigt, at der ikke kræves henvisning fra egen læge for at kunne få behandling hos Slagelse Sportsklinik.
</p>
</div>
</div>
<div class="prisimgbox"><img src="img/transaction.png" alt="">
</div>
</div>
<div class="greysplitter">
<img class="splitter4" src="img/greysplitter2.png" alt="">
<img class="splitter4mobile" src="img/greysplitter2mobile.png" alt="">
</div>
<a name="kontaktmenu"></a>
<span class="anchor" id="section2"></span>
<div class="contentblock" id="contentblock5">
<div class="kontaktbox">
<h2>Kontakt</h2>
<p>
Du kan kontakte klinikken på følgende måder:
</p>
<ul>
<li><p><b>Telefon</b></p></li>
<li><p><b>Mail</b></p></li>
<li><p><b>Snailmail</b></p></li><br><br>
<li><p><b>Facebook</b></p></li>
</ul>
<ul>
<li><p>2844 0023</p></li>
<li><p>slagelsesportsklinik#gmail.com</p></li>
<li><p>Slagelse Sportsklinik <br>
Nytorv 4, 1. sal <br>
4200 Slagelse</p></li>
<li><a target="_blank" href="https://www.facebook.com/slagelsesportsklinik">www.facebook.com/slagelsesportsklinik</a></li>
</ul>
</div>
<iframe
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDXNF-E5Se1Suc6FWGmQWoH_bcpHoSwEEs
&q=Nytorv4+Slagelse,Slagelse+DK" allowfullscreen>
</iframe>
</div>
</main>
<footer>
<div class="footerleft">
<adress>Slagelse Sportsklinik</adress><br>
<adress>Nytorv 4, 1. Sal</adress><br>
<adress>4200 Slagelse</adress><br>
</div>
<div class="footerright">
<img class="footericon" src="img/icons/tlf.png" alt=""><adress>2844 0023</adress><br><br>
<img class="footericon" src="img/icons/mail.png" alt=""><adress>slagelsesportsklinik#gmail.com</adress><br><br>
<img class="footericon" src="img/icons/fbsort.png" alt=""><adress><a target="_blank" href="https://www.facebook.com/slagelsesportsklinik">www.facebook.com/slagelsesportsklinik</a></adress>
</div>
</footer>
</div>
</body>
</html>
Add to your container div, in this case wrapper, the following:
.wrapper {
overflow:hidden;
width:100%;
max-width:1200px; // or whatever you want
display:block;
margin: 0 auto;
}
This will contain everything inside your wrapper element and center it on the page for screen sizes greater than 1200px.
Also your header and body elements currently have fixed widths, you should remove the property from body, and give header a percentage-based width:
header {
width:100%;
}
It's been about 5 years since my intro to website design class and I just wanted to add a clickable image below my nav float left and when I added it, it took up the css properties of the nav left div since it was inside the div. So i put it in its own div and when i cleared both on it to bring it below the nav for some reason it seems connected to the sidebar div and it gets cleared too and is at the same height as the image for some reason and i don't know how to fix it. I have researched floating with css and can't seem to find my solution.
Thank you
image of the website issue => website
Below is the HTML for the complete page but the issues lies within the div newtab & div sidebar
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battle Ready</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="battlefield.css">
<link href="images/favicon.ico" rel="icon" type="image/x-icon"/>
</head>
<body>
<!--The fonts I used were verdana for the body and sidebar and table
headings, Agnes for the main titles under the banner, and BankGothic
Md BT for the navigation.-->
<script type="text/javascript">
<!--
alert("Welcome to BattleReady.com! This page is to inform you about
each of the playable kits on the videogame Battlefield 3 and how to
effectively use them. If you do not have the game, you should
definitely try it out!");
// -->
</script>
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Assault</li>
<li>Engineer</li>
<li>Support</li>
<li>Recon</li>
</ul>
</div>
<div id="newtab"
style="clear:both;">
<a href="images/BF3.jpg" target="_blank"><img
src="images/BF3_thumb.png" width="101" height="128" alt="Battlefield 3
Game Cover" style="width:101px;height:128px;border:0px;"></a>
</div>
<div id="sidebar">
<h3>Upcoming Events</h3>
<p class="events">With purchasing Battlefield Premium© you get
early access to future DLC. Coming out soon is DICE's new
expansion pack "After Math" which comes out December 4th.
For more information about Premium© and other upcoming
expansion packs, visit
<a href="http://battlelog.battlefield.com/bf3/premium/"
target="blank">Premium</a>.</p>
<h3>Social</h3>
<p class="events">• Dice's Battlefield 3 Twitter
will provide you more information
about any upcoming changes to the game.</p>
<p class="events">• Dice's Battlefield 3 <a
href="https://www.facebook.com/battlefield"
target="_blank">Facebook</a> will showcase community videos
and provide trailers and more information about the game.</p>
</div>
<div id="center">
<h2>What is Battle Ready?</h2>
<p>DICE's Battlefield 3 was released October 25, 2011. Heralded as
"The Call of Duty Killer" Battlefield 3 has lived up to the hype.
Whether you were
there at the midnight release of the game or you are about to
purchase it today the level of being ready for the battlefield is
determined by the skill of the player. This website will develop
your skills and help you to be battle ready when you go boots down
on the battlefield for the first time.</p>
<hr>
<h3>Battlefield 3: Why is it Special?</h3>
<p>So you may be asking yourself, "What makes Battlefield 3
different from any other generic FPS on the market?" and there are a
plethora of reasons of why Battlefield 3 is one of the best FPS's
on the market today. The answer to the question is simply four
things that Battlefield 3 has that other games don't have:</p>
<ul>
<li>Colossal-sized maps</li>
<li>Realistic destruction</li>
<li>All-terrain vehicle play</li>
<li>The game itself centers around teamwork</li>
</ul>
<p> The colossal size of the maps that the player gets to play on
for a variety of game modes
helps the player to be completely emerged in the battle and
helps give them the battlefield experience that cannot be obtained on
any other game. Destruction is it's finest on the game with
DICE's new game engine Frostbite 2.0 that will make you wonder
if you are still on a game or if it has become reality. The
variety of vehicles that the player gets to choose to from to operate
are jets, tanks, jeeps, and boats.</p>
<hr>
<h3>Battlefield 3 Expansion Packs</h3>
<p>Battlefield 3 will have a total of five multiplayer expansion
packs that will further enhance your multiplayer experience.
The first three expansion packs (Back to Karkand, Close Quarters,
and Armored Kill) have already been released leaving two more
for you to wait on in anticipation. With each expansion pack the
player gets not only maps, but also new weapons, vehicles, and
unique assignments that will reward the player with new weapon skins
as well as unlockable dog tags.</p>
<div id="gallery">
<ul>
<li><a href="images/BacktoKarkand1.jpg"
target="_blank"><img src="images/BacktoKarkand_thumb.png" width="128"
height="71"
alt="Back to Karkand thumb"><span><img
src="images/BacktoKarkand.jpg" width="500" height="265" alt="Back to
Karkand">
<br>Back to Karkand Expansion Pack</span></a></li>
<li><a href="images/Close_Quarters1.jpg" target="_blank">
<img src="images/close_quarters_thumb.png" width="128" height="76"
alt="Close Quarters thumb"><span><img
src="images/close_quarters.jpg" width="500" height="265" alt="Close
Quarters">
<br>Close Quarters Expansion Pack</span></a></li>
<li><a href="images/Armored_Kill1.jpg" target="_blank">
<img src="images/Armored_Kill_thumb.png" width="128" height="76"
alt="Armored Kill thumb"><span><img
src="images/Armored_Kill.jpg" width="500" height="265" alt="Armored
Kill">
<br>Armored Kill Expansion Pack</span></a></li>
<li><a href="images/Aftermath1.jpg" target="_blank"><img
src="images/Aftermath_thumb.png" width="128" height="76"
alt="Aftermath thumb">
<span><img src="images/Aftermath.jpg" width="500"
height="265" alt="Aftermath"><br>Aftermath Expansion Pack</span></a>
</li>
<li><a href="images/End_Game1.jpg" target="_blank"><img
src="images/End_Game_thumb.png" width="128" height="76" alt="End Game
thumb"><span>
<img src="images/End_Game.jpg" width="500" height="265"
alt="End Game"><br>End Game Expansion Pack</span></a></li>
</ul>
</div>
<div id="footer"> Copyright © 2012 Battle Ready<br>
Contact Us
</div>
</div>
</div>
</body>
</html>
CSS for Page:
/*I chose the color scheme of orange, blue, grey, and white as I
obtained those colors from the Battlefield 3 game cover. I chose
orange as the headers, blue as links visited and grey as the
backgrounds with white and black being the text color.*/
body { margin:0;
background-color: #000; }
#container { background-color: #444;
color: #fff;
min-width: 960px;
font-family: Verdana, Arial, sans-serif;
width:80%;
margin-left:auto;
margin-right:auto;
}
#header {border-bottom: 2px solid #000000;
height: 120px;
background-image: url(images/banner2.jpg);
background-position: bottom;
background-repeat:no-repeat;
padding: 0 20px; }
#nav { float: left;
width: 150px;}
#newtab {float:left;
width:101px;
}
#sidebar{ float: right;
clear:right;
width: 210px;
background-image: url(images/background.png);
background-position:bottom;
background-repeat:repeat;}
#sidebar a{ text-decoration:none;}
#sidebar a:link { color:#F63;}
#sidebar a:visited { color:#F03;}
#sidebar a:focus, #sidebar a:hover { color:#FF0;}
#sidebar a:active { color:#039;}
#center { margin: 0 210px 0 160px;
padding: 1px 10px 20px 10px;
background-color: #CCC;
color: #000; }
#footer { font-size: .70em;
text-align: center;
color: #f63;
background-color: #CCC;
padding-top: 10px;
clear: both;}
#footer a:link { color:#F63;}
#footer a:visited { color: #039; }
#footer a:focus, #footer a:hover { color: #FF0; }
#footer a:active { color: #F03;}
h1 { margin-top: 0;
font-size: 3em;
text-align: left;
text-shadow: 2px 2px 2px #000000;}
#nav ul { font-family: "BankGothic Md BT", arial, sans-serif;
margin-top: 20px;
list-style-type: none;
}
#nav a { text-decoration: none;
font-size: 1.2em;
border:1px solid #000;
padding:20px;
width:70px;
display:block;
background-color:#CCC;
margin-right:30px;
margin-left:-20px;
}
#nav a:link { color:#F63;}
#nav a:visited { color: #F03; }
#nav a:focus, #nav a:hover { color: #F63;
background-color:blue; }
#nav a:active { color: #093;}
#center p { margin: 20px; }
#center h2, #center h3 { font-family: "Imprint MT Shadow", Arial,
sans-serif;
color: #f63;
background-color: #CCC; }
#floatright { margin: 10px;
float: right; }
#sidebar h3 { padding-bottom: 2px;
margin: 10px;
font-size: .90em;
color: #039;
background-color: #CCC;
text-align:center;}
.events { font-size: .80em;
margin: 10px; }
#gallery {position:relative;}
#gallery ul {width:300px;
list-style-type:none;}
#gallery li {display:inline;
float:left;
padding:10px;}
#gallery img {border-style:none;
float:none;}
#gallery a {text-decoration:none;
color:#F63;
font-style:italic;}
#gallery span {display:none;}
#gallery a:hover span {display:block;
position:absolute;
top:10px;
left:340px;
text-align:center;}
#movie {text-align:center;}
table {width:75%;
margin:auto;
border-collapse:collapse;
border:outset 1px yellow;
color:#000;}
Caption {font-size:1.5em;
font-weight:bold;
color:#f63;}
th,td {border: 2px solid #039;}
thead {Background-color:#f63;
color:#fff;}
tbody td {vertical-align:top;
padding-left:5px;
padding-top:5px;}
tbody tr {background-color:#999;}
#title {text-align:center;}
I've been working on a landing page for a client and I've come across a problem when trying to keep my footer_content inside the footer
The all page is responsive but when it comes to the footer_content he just doesn't work. Right know I styled it back to px instead of % to have some functional work to show but if you guys could help m e make it responsive and block it inside the footer and would really appreciate it.
My code right now is:
<div class="foot">
<div class="foot_content">
<div class="foot_title">
<p style="font-size:18px; font-weight:bold; margin-left:auto; margin-right:auto">AS NOSSAS FUNCIONALIDADES<p>
<p style="font-size:12px; margin-left:auto; margin-right:auto; line-height:18px">Para o ajudar a encontrar os seus futuros clientes.<p>
</div>
<div class="foot_text_content">
<div class="foot_text_col_1">
<img src="img/pub.png" alt="publicidade" />
<p style="font-size:14px; font-weight:bold; margin-top:10px">GERIMOS A SUA PUBLICIDADE<p>
<div style="line-height:16px; margin-top:5px; font-size:14px">
<p>A nossa equipa de designers está<p>
<p>sempre pronta para dár resposta às<p>
<p>suas necessidades criativas.<p>
<p>Assim que resolvidas poderemos<p>
<p>ainda publicitá-las no nosso website.<p>
</div>
</div>
<div class="foot_text_col_2">
<img src="img/negocio.png" alt="negócio" />
<p style="font-size:13px; font-weight:bold; margin-top:10px">GERAMOS NEGÓCIOS<p>
<div style="line-height:16px; margin-top:5px; font-size:14px">
<p>O nosso website funciona como uma<p>
<p>rampa de lançamento para o seu negócio.<p>
<p>Através do “SEO” do nosso website,<p>
<p>garantimos que a sua publicidade<p>
<p>chegará a todos os seus clientes.<p>
</div>
</div>
<div class="foot_text_col_3">
<img src="img/success.png" alt="negócio" />
<p style="font-size:13px; font-weight:bold; margin-top:10px">GARANTIMOS SUCESSO<p>
<div style="line-height:16px; margin-top:5px; font-size:14px">
<p>Com todas estas ferramentas que<p>
<p>referimos, o seu sucesso será<p>
<p>garantido, resta-lhe apenas fechar<p>
<p>negócio.<p>
</div>
</div>
</div>
</div>
<div class="background">
<img src="img/foot_bg.png" />
</div>
and the css is
.foot {
position:absolute;
margin-bottom:auto;
bottom: 0;
width:100%;
height: 41.5%;
}
.background {
background: none repeat scroll 0 0;
height: 100%;
width: 100%;
bottom: 0;
margin-bottom:auto;
position:absolute;
}
.background img {
bottom: 0;
display: block;
left: 0;
margin: auto;
width:100%;
min-width:90%;
height: 100%;
min-height:41.5%;
right: 0;
top: 0;
z-index:-1;
}
.foot_content {
width:960px;
height:258px;
margin:auto;
bottom:20px;
left:0;
right:0;
position:absolute;
z-index:1;
}
.foot_title {
width:960px;
height:34px;
font-family: Arial, sans-serif;
text-align:center;
}
.foot_text_content {
width:960px;
height:193px;
margin-top:30px;
}
.foot_text_col_1 {
width:267px;
height:193px;
font-family: Arial, sans-serif;
text-align:center;
float:left;
}
.foot_text_col_2 {
width:267px;
height:193px;
font-family: Arial, sans-serif;
text-align:center;
float:left;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
position:absolute;
}
.foot_text_col_3 {
width:267px;
height:193px;
font-family: Arial, sans-serif;
text-align:center;
float:right;
}`
Thanks in advance
EDIT Fiddle link as requested https://jsfiddle.net/wppo1bvo/
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've looked through other answers on this site but am not able to find exactly what I need. I'm building a site which uses width as percentages on divs and tables. I figured this would help me keep the layout of the site static no matter what screen resolution the viewer is using. However, I notice that when I resize my window, 2 things are happening that I don't want:
1) The text elements are jumping to new lines and throwing off the whole layout. I'd really like to keep it from doing that but not sure if that goes against using the percentage thing.
2) I've used absolute positioning on some elements because they didn't really work in a table format (specifically the skills and languages portion on the right hand side--see screenshot below). But if I resize the window, they don't stay with everything else.. they just stay in one place. And I know that's what they're supposed to do but I'm just wondering if there's a way to get it to stay with everything else when resized and still be absolute (or fixed? static?).
The reason why I'm using percentages for width is because I want my site to fill the screen based on the resolution but also keep all content centered in the middle of that screen. If I resize the window, everything gets screwed up and even a nav bar which is floated to the right ends up on the other side of the screen over my logo. It's incredibly frustrating.
I don't know what the answer is but here's a screenshot of how the page looks on my browser (i.e. how it's supposed to look) and my code (below). I'd really appreciate any insight people can give me into how I should better design this site. I can't seem to do everything I want it to do and I know it's probably way simpler than I'm making it. Please let me know what you think. Thanks!
Pooja
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pooja's Designs :: Resume</title>
<style type="text/css">
body#home {
text-align:center;
margin:0px;
padding:0px;
width:100%;
height:100%;
font-family:Open Sans;
}
body#home a#nav-home,
body#resume a#nav-resume,
body#portfolio a#nav-portfolio,
body#contact a#nav-contact
{
color: #dfadec;
text-decoration:none;
}
#container {
background-color:#eae5e5;
width:100%;
text-align:left;
margin: 0 auto;
height:auto;
}
#main {
padding-top:40px !important;
padding-bottom:35px !important;
width:50%;
margin: 0 auto;
color:#4d4d4f;
}
#header {
border-top:solid 15px #4d4d4f;
font-size:30px;
color:#4d4d4f;
background-color:#FFF;
width:100%;
padding-bottom:45px;
}
#title {
padding-top:30px;
}
#footer {
color:#FFF;
font-size:12px;
background-color:#dfadec;
width:100%;
padding-bottom:45px;
padding-top:45px;
margin: 0 auto;
height: 100%;
border-top:solid white 3px;
}
#nav {
font-size:12px;
color:#CCC;
float:right;
margin-top:-18px;
}
#nav a:link {
color:#CCC;
text-decoration:none;
}
#nav a:hover {
color:#dfadec;
text-decoration:none;
}
#nav a:visited {
color:#CCC;
text-decoration:none;
}
h1 {
font-size:60px;
color:#4d4d4f;
margin-top:-150px;
}
h2 {
font-size:40px;
color:#4d4d4f;
font-weight:normal;
margin-top:-40px;
}
#resume-title {
color:#FFF;
letter-spacing:5px;
font-size:70px;
}
img#icon {
background-color:#4d4d4f;
padding:12px;
}
#prof_info {
width:115px;
height:115px;
background-color:#dfadec;
margin-top:30px;
}
#prof_info p {
color:#FFF;
font-size:16px;
padding-left:10px;
letter-spacing:0px;
vertical-align:middle;
padding-top:37px;
font-weight:600;
}
#work_exp {
width:115px;
height:115px;
background-color:#dfadec;
margin-top:30px;
}
#work_exp p {
color:#FFF;
font-size:16px;
padding-left:10px;
letter-spacing:0px;
vertical-align:middle;
padding-top:37px;
font-weight:600;
}
#education {
width:115px;
height:115px;
background-color:#dfadec;
margin-top:30px;
}
#education p {
color:#FFF;
font-size:16px;
padding-left:10px;
letter-spacing:0px;
vertical-align:middle;
padding-top:47px;
font-weight:600;
}
#contact {
width:45%;
margin: 0 auto;
}
#title-nav {
width:50%;
margin: 0 auto;
}
.position {
font-size:14px;
font-weight:600;
}
ul {
margin:0;
padding:0;
padding-left:20px;
}
ul li {
color:#dfadec;
}
</style>
</head>
<body id="home">
<div id="container">
<div id="header">
<div id="title-nav">
<div id="title">
<strong>Pooja's Designs</strong><br />
<span style="font-size:16px; color:#dfadec;">Web Development / Design</span>
</div>
<div id="nav">
<strong><a href="http://www.poojasdesigns.com/" id="nav-
home">HOME</a> | <a href="http://www.poojasdesigns.com/resume"
id="nav-resume">RESUME</a> | <a
href="http://www.poojasdesigns.com/portfolio" id="nav-
portfolio">PORTFOLIO</a> | CONTACT</strong>
</div>
</div>
</div>
<div id="main">
<div id="resume-title">
RESUME
</div>
<div style="border-bottom:solid #999 1px; width:72%; height:5px;"> </div>
<div style="position: absolute; left: 1040px; top: 273px;">
<img id="icon" src="exclamation.png" style="padding-left:17px; padding-right:17px;
padding-top:10px; padding-bottom:8px; background-color:#dfadec; vertical-align:middle;
margin-bottom:5px;" /><br />
Skills
<div style="border-bottom:solid #999 1px; width:200px; height:5px; margin
-bottom:15px;"> </div>
<span style="font-size:12px;">DREAMWEAVER<br />
PHOTOSHOP<br />
ILLUSTRATOR<br />
FLASH<br />
INDESIGN</span>
</div>
<div style="position: absolute; left: 1038px; top: 477px;">
<img id="icon" src="globe.png" style="padding:6px; padding-left:5px; background-
color:#dfadec; vertical-align:middle; margin-bottom:5px;" /><br />
Languages
<div style="border-bottom:solid #999 1px; width:200px; height:5px; margin-
bottom:15px;"> </div>
<span style="font-size:12px;">HTML<br />
CSS<br />
JAVASCRIPT<br />
JQUERY<br />
PHP</span>
</div>
<table width="70%">
<tr>
<td>
<div id="prof_info">
<p>Professional<br />
info</p>
</div>
</td>
<td style="padding-left:20px; font-size:12px; text-align:justify; line-height:18px;"
valign="bottom">
My objective is to secure the position of Web Developer/Designer in an established
organization which will enable me to use my talents, creativity and ability to the
maximum, and contribute to the growth of the organization, as well as myself. I am
fluent in English and Hindi, with some basic knowledge of Spanish.
</td>
</tr>
</table>
<div style="border-bottom:solid #999 1px; width:72%; height:5px; padding-
top:30px;"> </div>
<table width="70%">
<tr>
<td valign="top">
<div id="work_exp">
<p>Work<br />
experience</p>
</div>
</td>
<td style="padding-left:20px; padding-top:60px; font-size:12px; text-align:justify;
line-height:18px;">
<span class="position">Web Producer | Random House, Inc<br />
2011 - present</span><br /><br />
<ul>
<li><span style="color:#4d4d4f;">Create and manage content on the AtRandom website, as
well as author and imprint websites</span></li>
<li><span style="color:#4d4d4f;">Compile, code, and send out email newsletters (web and
mobile-responsive) using Emailvision, ExactTarget, and MailChimp</span></li>
<li><span style="color:#4d4d4f;">Manage email distribution lists (importing and
exporting subscribers)</span></li>
<li><span style="color:#4d4d4f;">Carry out website-related requests for colleagues, such
as uploading graphics to the live server and making changes to websites as
needed</span></li>
<li><span style="color:#4d4d4f;">Pull reports from Google Analytics and Omniture Site
Catalyst for newsletters and websites</span></li>
<li><span style="color:#4d4d4f;">Create and edit PDF documents of book excerpts to be
uploaded on Scribd</span></li>
<li><span style="color:#4d4d4f;">Upload book trailers to YouTube</span></li>
<li><span style="color:#4d4d4f;">Create giveaways on LibraryThing</span></li>
<li><span style="color:#4d4d4f;">Compile Google forms for giveaways and
contests</span></li>
</ul>
</td>
</tr>
</table>
<div style="border-bottom:solid #999 1px; width:72%; height:5px; padding-
top:30px;"> </div>
<table width="56%">
<tr>
<td valign="top">
<div id="education">
<p>Education</p>
</div>
</td>
<td style="padding-top:60px; font-size:12px; text-align:justify; line-height:18px;">
<span class="position">American Sentinel University<br />
2008 - 2010</span><br /><br />
Bachelor of Science, Web Design & Development<br /><br />
<span class="position">University of Kentucky<br />
2005 - 2007</span><br /><br />
General Studies
</td>
</tr>
</table>
</div>
<div id="footer">
<div id="contact">
<table width="100%" style="padding-left:10px;">
<tr>
<td>
<img id="icon" src="mail-icon.png" />
</td>
<td>
<strong>Contact</strong><br />
myemail at gmail dot com
</td>
<td>
<img id="icon" src="add-icon.png" />
</td>
<td style="padding-right:25px;">
<strong>Follow me</strong><br />
<a href="" target="_blank"><img
src="Pace_Social_Icon_Set/PNG/facebook.png" width="25" border="0" style="margin-left:-
8px;" /></a><a href="" target="_blank"><img
src="Pace_Social_Icon_Set/PNG/twitter.png" width="25" border="0" /></a><a
href="" target="_blank"><img
src="Pace_Social_Icon_Set/PNG/linkedin.png" width="30" border="0" /></a>
</td>
<td>
<img id="icon" src="call-icon.png" style="padding:8px; padding-left:12px; padding-
right:12px;" />
</td>
<td>
<strong>Call</strong><br />
C: 123.456.7890
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
A key concept for building responsive layouts is Absolute Positioning Inside Relative Positioning. Chris Coyier has a great article here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/. This concept allows you to position items absolutely inside a relatively position element.
I've applied this concept to your code so you can start to get the idea of what I'm talking about. However, with all the tables and inline styles, your markup still needs some major refactoring. See here: http://jsfiddle.net/meub/4pcx5/4/
Some key code in the fiddle:
#main {
padding-top:40px !important;
padding-bottom:35px !important;
width: 830px;
margin: 0 auto;
color:#4d4d4f;
/* Important! Lets you position elements absolutely INSIDE this div */
position: relative;
}
Some other important lessons to make your life easier in the future:
Don't use inline styles
Don't use tables for layout
Indent your code so it's easier to read (this is a good tool for messy code)
To leave everything in the center you need the body to be something like this:
body{
padding: 0 0 0 0;
border:0;
margin:0 auto;
width:100%;
}
and then you need a wrapper div, let's say:
.wrapper{
text-align:center;
margin:0 auto;
width:900px; //modify this to the size you want
}
then put everything inside that wrapper div, everything will be in the center of that wrapper div