I am currently building a new site in Joomla 3.6.5 using Twitter Bootstrap. My site is currently on my localhost and I have attached an image of what I currently have but I am now trying to add bootstrap code in order to make this responsive and I am struggling with the section (image shown below)
What I would like to do is to stack this on top of each for the mobile version but the background image (attached as well) needs to resize as the screen becomes smaller.
Also would appreciate any advice on how to tackle issues with tablet screen sizes as ideally would like all three to show side by side or on top of each other but i am guessing there will be a lot of space on a tablet screen size.
My current html is the following:
<div id="mainbox" class="span12">
<div class="box1 span4">
<div class="boxes-img1"><img src="images/pic1.png" alt="" border="0" /></div>
<div class="boxes1">20 MINUTES REPAIRS</div>
<div class="boxestext1">We have a 20 Minute Repairs Service and all Minor Repairs are diagnosed while you wait. Upgrades are also provided and completed within 20 minutes!</div>
<div class="boxes-link1">READ MORE</div>
</div>
<div class="box2 span4">
<div class="boxes-img2"><img src="images/pic2.png" alt="" border="0" /></div>
<div class="boxes2">WALK-IN REPAIRS</div>
<div class="boxestext2">We have a Walk-In Repairs Service and all faults are diagnosed while you wait. Please bear in mind all Major Faults can take up 24/48 hours.</div>
<div class="boxes-link2">
<div class="boxes-linktxt2">READ MORE</div>
</div>
</div>
<div class="box3 span4">
<div class="boxes-img3"><img src="images/pic3.png" alt="" border="0" /></div>
<div class="boxes3">BUY MOBILE PHONES</div>
<div class="boxestext3">All the latest models and great deals on Mobile Phones available, so visit our store today!</div>
<div class="boxes-link3">
<div class="boxes-linktxt3">READ MORE</div>
</div>
</div>
</div>
CSS:
#mainbox {
float: left;
position: relative;
background: url(../images/box.png) no-repeat;
height: 249px;
width: 100%;
}
div.box1{
position: relative;
}
div.boxes1 {
position:absolute;
top:65px;
left:0;
margin: 0 0 29px 39px;
text-decoration:none;
font-size: 24px;
font-family: 'Cabin-Bold'; /* no .ttf */
font-style:italic;
color:#fff;
width: 268px;
}
div.boxestext1 {
position:absolute;
top:115px;
left:0;
margin: 0 0 0 39px;
text-decoration:none;
font-size: 13px;
font-family: 'Open-Sans'; /* no .ttf */
color:#7A869B;
width: 268px;
}
div.boxes-img1 {
position:absolute;
top:-40px;
left:0;
margin: 0 0 14px 125px;
width: 268px;
}
div.boxes-link1 {
display:block;
background: url(../images/readmore.png) no-repeat;
margin: 0 0 14px 125px;
position:absolute;
top:221px;
left:0;
height: 37px;
width: 84px;
color:#FFF;
text-decoration:none;
font-size: 12px;
font-family: 'Cabin'; /* no .ttf */
padding: 10px 0 0 9px;
}
.boxes-link1:visited, .boxes-link1:hover, .boxes-link1:active {
display:block;
background: url(../images/readmoreover.png) no-repeat;
margin: 0 0 14px 125px;
position:absolute;
top:221px;
left:0;
height: 37px;
width: 84px;
color:#fc1300;
text-decoration:none;
font-size: 12px;
font-family: 'Cabin'; /* no .ttf */
padding: 10px 0 0 9px;
}
div.box2{
position: relative;
}
div.boxes2 {
position:absolute;
top:65px;
left: 310px;
margin: 0 0 29px 39px;
text-decoration:none;
font-size: 24px;
font-family: 'Cabin-Bold'; /* no .ttf */
font-style:italic;
color:#fff;
width: 268px;
}
div.boxestext2 {
position:absolute;
top:115px;
left: 310px;
margin: 0 0 0 39px;
text-decoration:none;
font-size: 13px;
font-family: 'Open-Sans'; /* no .ttf */
color:#7A869B;
width: 268px;
}
div.boxes-img2 {
position:absolute;
top:-40px;
left: 310px;
margin: 0 0 14px 125px;
width: 268px;
}
div.boxes-link2 {
position:absolute;
top:221px;
left:310px;
margin: 0 0 14px 125px;
height: 37px;
width: 268px;
background: url(../images/readmore.png) no-repeat;
}
div.boxes-linktxt2 {
margin: 10px 0 0 9px;
text-decoration:none;
font-size: 12px;
font-family: 'Cabin'; /* no .ttf */
color:#FFF;
}
/* 2 BOXES END */
div.box3{
position: relative;
}
div.boxes3 {
position:absolute;
top:65px;
right:0;
margin: 0 39px 29px 0;
text-decoration:none;
font-size: 24px;
font-family: 'Cabin-Bold'; /* no .ttf */
font-style:italic;
color:#fff;
width: 268px;
}
div.boxestext3 {
position:absolute;
top:115px;
right:0;
margin: 0 39px 0 0;
text-decoration:none;
font-size: 13px;
font-family: 'Open-Sans'; /* no .ttf */
color:#7A869B;
width: 268px;
}
div.boxes-img3 {
position:absolute;
top:-40px;
right:0;
margin: 0 -50px 14px 0;
width: 268px;
}
div.boxes-link3 {
position:absolute;
top:221px;
right:0;
margin: 0 -50px 14px 0;
height: 37px;
width: 268px;
background: url(../images/readmore.png) no-repeat;
}
div.boxes-linktxt3 {
margin: 10px 0 0 9px;
text-decoration:none;
font-size: 12px;
font-family: 'Cabin'; /* no .ttf */
color:#FFF;
}
Any help would be really appreciated.
i think that the above approach is completely wrong.
First of all you should use col-xx-xx grid style
Take a look at this Bootstrap Grid Options
using this grid style would solve your problems with viewports
As for the bg image in the #mainbox try using object-fit:cover;
making a web page and the main page is to wide and shows the scroll bars. have tried everything I can think of.
this is the url for the site www.sfbblag.com
here is the css`
/* start of Blaynes Code! */
html {
background: url(images/bg.png) no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
body{
margin: 0px;
padding: 0px;
}
#Content {
width:100%;
margin:0px auto;
text-align:left;
padding:15px;
border:1px dashed #333;
background-color:#eee;
}
#menu {
width: 100%;
height: 35px;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
}
#menu a {
text-decoration: none;
color:#F90;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color:#FFFFFF ;
background-color: #000000;
}
#menuside {
width: 100%;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
border-radius: 8px;
float:right;
}
#menuside ul {
padding: 8px 0px;
margin: 0px;
list-style-type: none;
margin: 0;
padding: 0;
}
#menuside li {
width:100%;
height:30px;
display: block;
text-align:left;
}
#menuside a {
text-decoration: none;
color:#F90;
padding: 8px 8px 8px 8px;
}
#menuside a:hover {
color:#FFFFFF ;
}
#header {
width:100%;
height:180px;
position:absolute;
text-align:center;
background-color: rgba(3, 3, 3, 0.9); /* Color white with alpha 0.9*/
position:fixed;
top: 0px;
float:left;
}
#header1 {
width:20%;
float:left;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
}
#header2 {
width:46%;
float:left;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
}
#header3 {
width:33%;
float: left;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
}
#header3a {
width:100%;
height:25%;
float:left;
color:#0000FF;
box-shadow: 10px 10px 5px #888888;
}
#header3b {
width:100%;
height:75%;
float:left;
box-shadow: 10px 10px 5px #888888;
}
#header4 {background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
width:100%;
float: left;
box-shadow: 10px 10px 5px #888888;
}
#clock { color:#ffffff;
font:Arial, Helvetica, sans-serif;
}
#navbar {
width:100%;
float:left;
height:10%;
color:#FFFFFF;
text-align:center;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
box-shadow: 10px 10px 5px #888888;
}
#contentholder {
box-shadow: 10px 10px 5px #888888;
width:50%;
height:60%;
position:fixed;
}
#contentleft {
display:inline;
width:20%;
float:left;
border:#0a61a6;
box-shadow: 10px 10px 5px #888888;
}
#contentleft1 {
height:40%;
}
#contentleft2 {
width:20%;
height:20%;
}
#contentleft3 {
height:20%;
width:100%;
}
#contentleft4 {
height:20%;
width:100%;
}
#containercenter {
box-shadow: 10px 10px 5px #888888;
height:100%;
display:inline;
width:50%;
float:left;
}
#containercenter1 {
color:#FFFFFF;
height:33%;
width:100%;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
padding-left:5px;
font-size: 14px;
font:"Times New Roman", Times, serif;
font-weight: bold;
text-align: center;
}
#containercenter2 {
height:33%;
width:100%;
background-color:#0a61a6;
font-size: 14px;
font:"Times New Roman", Times, serif;
font-weight: bold;
text-align: center;
top: 400px;
}
#containercenter3 {
height:33%;
width:100%;
background-color:#0a61a6;
}
#contentright {
box-shadow: 10px 10px 5px #888888;
float:left;
height:100%;
width:30%;
display:inline;
}
#contentright1 {
float:left;
height:25%;
width:100%;
text-align:center;
}
#contentright2 {
float:left;
height:25%;
width:100%;
margin-top: 20px;
}
#contentright3 {
float:left;
height:25%;
width:100%;
margin-top: 20px;
}
#contentright4 {
float:left;
height:25%;
width:100%;
margin-top: 20px;
margin-bottom: 20px;
}
#inputbox {
height: 33%;
}
#slider {
box-shadow: 10px 10px 5px #888888;
width:100%;
float:left;
}
#slider1 {
float:left;
width:33%;
display:inline;
}
#slider2 {
float:left;
width:33%;
display:inline;
}
#slider3 {
float:left;
width:33%;
display:inline;
}
#footer{
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
float:left;
width:100%;
height:5%;
}
#footermenu{
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
float:left;
width:100%;
height:5%;
}
/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
/*------------------------------------*\
NAV
\*------------------------------------*/
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left; /* Clear floats */
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#dfaa09;
background:#6b0c36;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#333;
}
#navContainer {
box-shadow: 10px 10px 5px #888888;
margin:0;
padding:0;
text-align:left;
width:50%;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: left;
text-shadow: 3px 2px 3px #333333;
}
#navContainer ul{
margin:0;
padding:0;
list-style:none;
}
#navContainer ul li {
position:relative;
}
#navContainer ul li span{
display:block;
background:url(images/blueVertNav/buttonLeft.png) top left no-repeat;
}
#navContainer ul li a{
text-decoration:none;
font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;
display:block;
padding:8px;
background:url(images/blueVertNav/buttonRight.png) top right no-repeat;
}
#navContainer ul li span:hover {
background:url(images/blueVertNav/hoverLeft.png) top left no-repeat;
}
#navContainer ul li a:hover{
background:url(images/blueVertNav/hoverRight.png) top right no-repeat;
}
#navContainer ul ul{
position:absolute;
display:none;
}
#navContainer ul ul li a{
background:#bec8cb;
}
#navContainer ul li:hover ul{
width:80%;
position:relitive;
display:block; left:100%;
top:0;
}
/* end of Blaynes Code! */
form {
background: #fafafa;
padding: 20px;
margin: 0 auto;
border: 1px solid #ffe2e3;
}
form div {
/* Float containment */
overflow: hidden;
}
/* Things are looking good now, onto the main input field
styling now! */
/*
Lets change the box model to make the label and input
contain into the 100% div.
You might want to specify the box sizing properties inside
`* {}` at the top.
Things are looking great now! Lets just spice it up a bit.
*/
form label, form input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
form label {
font-weight: bold;
background: linear-gradient(#f1f1f1, #e2e2e2);
padding: 5px 10px;
color: #444;
border: 1px solid #d4d4d4;
/* lets remove the right border */
border-right: 0;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
line-height: 1.5em;
width: 30%;
/* takes the width properly now and also the
spacing between the label and input field got removed. */
float: left;
text-align: center;
cursor: pointer;
}
/* The label is looking good now. Onto the input field! */
/*
Everything is broken now! But we can fix it. Lets see how.
*/
form input {
width: 70%;
padding: 5px;
border: 1px solid #d4d4d4;
border-bottom-right-radius: 5px;
border-top-right-radius: 4px;
line-height: 1.5em;
float: right;
/* some box shadow sauce :D */
box-shadow: inset 0px 2px 2px #ececec;
}
form input:focus {
/* No outline on focus */
outline: 0;
/* a darker border ? */
border: 1px solid #bbb;
}
/* Super! */
/*New additions to css main sheet*/
#board{
width:60%;
background-color: rgba(3, 3, 3, 0.7); /* Color white with alpha 0.9*/
outline-color: #000066;
color: #000000;
border: 4;
border-color: #000000;
box-shadow: 10px 10px 5px #888888;
}
#example4 {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
font-size: 9px;
font-weight: normal;
}
`
and here is the html
<!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>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Content-Script-Type" content="text/javascript">
<title>SFBBL AG TRUST</title>
<link rel="stylesheet" type="text/css" href="maintestafix.css"/>
<style type="text/css">
<!--
.style3 {color: #FFFFFF}
-->
</style>
</head>
<body>
<!-- start of Header -->
<div id="header">
<div id="header1">
<div align="left">
<p><img src="Switzerland Flag.png" width="15%" /> </p>
<p class="style3"> </p>
</div>
</div>
<div id="header2">
<div align="center">
<img src="images/01-SFBBL.png" width="100%" />
</div>
</div>
<div id="header3">
<div id="header3a">
<div id="clock" align="right" >
<script type="text/javascript">
document.write ('<p>Current time is: <span id="date-time">', new Date().toLocaleString(), '<\/span>.<\/p>')
if (document.getElementById) onload = function () {
setInterval ("document.getElementById ('date-time').firstChild.data = new Date().toLocaleString()", 50)
}
</script>
</div>
</div>
<div id="header3b">
<div align="center">
<img src="Trust_LH.jpg" width="30%" border="0" />
</div>
</div>
</div>
<div id="header4" >
<!-- Start of Top Menu -->
<div id="navbar">
<div id="menu">
<ul>
<li>Home</li>
<li>Bank Accounts</li>
<li>Credit Cards</li>
<li>Our Board</li>
<li>News</li>
<li>Products</li>
<li>Investments</li>
<li>Banking Options</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- End of Top Menu -->
</div>
</div>
<!-- End of Header -->
<div class="clear"></div>
<!-- Start of Main Content -->
<div id="content" >
<div id="contentleft">
<div id="contentleft1">
<img src="images/blueVertNav/spacer.png" />
<img src="images/blueVertNav/spacer.png" />
<div id="menuside">
<ul>
<li>Log in</li>
<li>Resources</li>
<li>Branches</li>
<li>Calculator</li>
<li>Talk to us</li>
</ul>
</div>
</div>
<div id="contentleft2">
<!-- Start FreeStockCharts.com WatchList Widget -->
<p width="100%" align="left">
<iframe width="160" height="120" scrolling="no" frameborder="0" style="border:none;" src="http://widgets.freestockcharts.com/WidgetServer/WatchListWidget.aspx?sym=DIA,NYSE,COMPQX,SPY&style=WLBlueStyle&w=160">
</iframe>
</p>
<!-- End FreeStockCharts.com WatchList Widget -->
</div>
<div id="contentleft3">
<!-- Start FreeStockCharts.com WatchList Widget -->
<p width="100%" align="left">
<iframe width="160" scrolling="no" frameborder="0" style="border:none;" src="http://widgets.freestockcharts.com/WidgetServer/WatchListWidget.aspx?sym=EUR/USD,USD/JPY,GBP/USD,USD/CAD,AUD/USD&style=WLBlueStyle&w=200">
</iframe>
</p>
<!-- End FreeStockCharts.com WatchList Widget -->
</div>
</div>
<div class="clear"></div>
<div id="containercenter" >
<div id="containercenter1">
<div>
<img src="images/blueVertNav/spacer.png" />
<img src="images/blueVertNav/spacer.png" />
</div>
<div align="center">
<p align="left">The purpose of SFBBL Trust AG is to provide creative, working solutions to qualified governments, projects, companies and individuals through the detailed comprehension and proper leveraging of usable assets, acquisition of adjustable collateral, debt reduction hedge strategies and opportunity analysis of changing market conditions, while furthering local and global communities to better living conditions.
</p>
</div>
<div>
<p align="left">Accounts, Cards and Payments<br />
Asset Management and Investments<br />
Private Client and Institutional Client Solution
</p>
</div>
<div><img src="images/blueVertNav/spacer.png" width="100%"/>
</div>
<div align="left">
<p><img src="images/blueVertNav/currentevents.png" width="100%" />
</p>
<p> </p>
<p>SFBBL is proud to announce our merger with Trust Bank, presently in eleven locations and expanding in Dubai, London and Vienna. Trust Bank has been an established fully operational Bank conducting full banking business for the last 20 years. SFBBL provides, The Private Client Premier Division which is the core focus of the addition of SFBBL, providing a select clientele with a niche portfolio of private banking solutions. Our premier services allow clients to access and securitize liquid capital as well as assets, internationally with great ease. Our account holders have access to a large number of private banking services including our three primary areas of service.
</p>
</div>
<div id="example4"><img src="images/blueVertNav/spacer.png"width="100%" />
</div>
<div><img src="images/blueVertNav/askusaquestion.png" width="100%" border="0" />
</div>
<div><img src="images/blueVertNav/spacer.png"width="100%" />
</div>
</div>
</div>
<div id="contentright">
<div id="contentright1">
<img src="images/blueVertNav/spacer.png" />
<img src="images/blueVertNav/spacer.png" />
<!-- Exchange Rates Script - EXCHANGERATEWIDGET.COM -->
<div style="width:100%;border:1px solid #040442;text-align:left;">
<div style="text-align:left;background-color:#0A61A6;width:100%;border-bottom:0px;height:16px; font-size:12px;font-weight:bold;padding:5px 0px;">
<div align="center"><span style="margin-left:2px;background-image:url(http://www.exchangeratewidget.com/flag.png); background-position: 0 -1232px; width:100%; height:15px; background-repeat:no-repeat;padding-left:5px;">
<a href="http://www.exchangeratewidget.com/" target="_blank" style="color:#FFFFFF; text-decoration:none;padding-left:22px;">
US Dollar Exchange Rates</a>
</span>
</div>
</div>
<script type="text/javascript" src="http://www.exchangeratewidget.com/converter.php?l=en&f=USD&t=EUR,GBP,JPY,CHF,CAD,AUD,CNY,ZAR,RUB,BRL,HKD,MXN,&a=1&d=0A61A6&n=FFFFFF&o=FCF4F4&v=5">
</script>
</div>
<!-- End of Exchange Rates Script -->
</div>
<div id="contentright2">
<!-- Currency Converter Script - EXCHANGERATEWIDGET.COM -->
<div style="width:100%;border:1px solid #0A61A6;"><div style="text-align:center;background-color:#0A61A6;width:100%;font-size:13px;font-weight:bold;height:18px;padding-top:2px;">
<div align="center">
Currency Converter
</div>
</div>
<script type="text/javascript" src="http://www.exchangeratewidget.com/converter.php?l=en&f=USD&t=EUR&a=1&d=0A61A6&n=FFFFFF&o=FAF2F2&v=1">
</script>
</div>
<!-- End of Currency Converter Script -->
<div id="contentright3">
<div align="center">
<img src="images/MrPrivateMortgage_DreamHome.jpg" width="95%" />
</div>
</div>
<div id="contentright4">
<div align="center"></div>
</div>
</div>
</div>
<!-- End of Main Content -->
</div>
<!-- Start of Pic Slider -->
<!-- End of Pic Slider -->
<div class="clear"></div>
<!-- Start of Stock ticker -->
<div id="footer">
<div align="center">
<!-- START Worden Top Gainers Ticker Widget -->
<script src="http://widgets.freestockcharts.com/js/jquery-1.3.1.min.js" type="text/javascript">
</script>
<script src="http://widgets.freestockcharts.com/script/WBIHorizontalTicker2.js?ver=12334" type="text/javascript">
</script> <link href="http://widgets.freestockcharts.com/WidgetServer/WBITickerblue.css" rel="stylesheet" type="text/css" />
<script>
var gainTicker = new WBIHorizontalTicker('gainers');
gainTicker.start();
</script>
<!-- End Scrolling Ticker Widget -->
</div>
</div>
<!-- End of Stock ticker -->
<div class="clear"></div>
<!-- Start of bottom menu -->
<div id="navbar">
<div id="menu">
<ul>
<li>Home</li>
<li>Privacy</li>
<li>Security</li>
<li>Copyright</li>
</ul>
</div>
</div>
<!-- End of bottom menu -->
<div id="header4" >
<p align="left" class="style3">
SFBBL is not a brick and mortar depository institution.
Our services are reserved for Private Banking clientele and qualified institutional investors.
SFBBL DOES NOT PROVIDE TAX ADVICE OF ANY KIND.
IT IS THE CUSTOMER'S RESPONSIBILITY TO COMPLY WITH THEIR COUNTRY'S TAX.
SFBBL IS A REGISTERED SWISS TRUST COMPANY. SFBBL IS NOT A REGISTERED BANK
</p>
</div>
<script>
var timeOnSlide = 3,
timeBetweenSlides = 2,
animationstring = 'animation',
animation = false,
keyframeprefix = '',
domPrefixes = 'Webkit Moz O Khtml'.split(' '),
pfx = '',
slidy = document.getElementById("slidy");
if (slidy.style.animationName !== undefined) { animation = true; }
if ( animation === false ) {
for ( var i = 0; i < domPrefixes.length; i++ ) {
if ( slidy.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
pfx = domPrefixes[ i ];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
} } }
if ( animation === false ) {
// animate using a JavaScript fallback, if you wish
} else {
var images = slidy.getElementsByTagName("img"),
firstImg = images[0],
imgWrap = firstImg.cloneNode(false);
slidy.appendChild(imgWrap);
var imgCount = images.length,
totalTime = (timeOnSlide + timeBetweenSlides) * (imgCount - 1),
slideRatio = (timeOnSlide / totalTime)*100,
moveRatio = (timeBetweenSlides / totalTime)*100,
basePercentage = 100/imgCount,
position = 0,
css = document.createElement("style");
css.type = "text/css";
css.innerHTML += "#slidy { text-align: left; margin: 0; font-size: 0; position: relative; width: " + (imgCount * 100) + "%; }";
css.innerHTML += "#slidy img { float: left; width: " + basePercentage + "%; }";
css.innerHTML += "#"+keyframeprefix+"keyframes slidy {";
for (i=0;i<(imgCount-1); i++) {
position+= slideRatio;
css.innerHTML += position+"% { left: -"+(i * 100)+"%; }";
position += moveRatio;
css.innerHTML += position+"% { left: -"+((i+1) * 100)+"%; }";
}
css.innerHTML += "}";
css.innerHTML += "#slidy { left: 0%; "+keyframeprefix+"transform: translate3d(0,0,0); "+keyframeprefix+"animation: "+totalTime+"s slidy infinite; }";
document.body.appendChild(css);
}
</script>
</body>
</html>
thanks in advance
you can use body{overflow-x: hidden;} in your CSS. However, I'd recommend restructuring your page so that the page isn't ~1500px wide.
Cheers!
Try to use this:
#content{
overflow-x: hidden;
}
#slider {
float: left;
overflow-x: hidden;
width: 100%;
}
#footer {
background-color: rgba(3, 3, 3, 0.7);
float: left;
height: 5%;
width: 99.9%;
}
Cheers!
Hi there I've been doing research on the site for some time now and i haven't been able to find an answer that correct my problem. I'm looking to expand my body div to fill 100% while maintaining my footer at the bottom of my page. As you'll see in my code the footer is a bit problematic since I'm using a "Banner" and below the contact info for the site. (See provided image).Anyway I've tried some solutions found on other questions but i haven't been able to apply the solution to my code correctly. If someone could point me in the right direction id deeply appreciate it. Also id like to maintain the code with html and css only if at all possible.
The page should not be scrollable on regular sized displays as i have very little content
to put on the website.Here i have provided a jsfiddle to further illustrate my problem. On it you'll see that what i want is my body(green) to dinamically change height to always fill the screen. taking into account that my footer(blue) should also be displayed on screen as well.
[My JSFiddle]http://jsfiddle.net/yuyocollores/3aJBP/2/
Here is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="dcterms.created" content="Fri, 30 May 2014 18:35:33 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Some Title</title>
<link href="gr.css" rel="stylesheet" type="text/css"></link>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
</head>
<body id="htmlbody">
<div id="container">
<div id="header">
<img src="images/bigLOGO.png" />
</div>
<div id="nav">
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
<div id="body">
<img src="images/homeCONTENT.png" id="homecontent">
<p id="hometext">
Some Slogan text
</p>
</div>
</div>
<div id="footerImageBanner">
<img src="images/LogoVersion2Small.png" />
</div>
<div id="footercontainer">
<p id="footertextsmall">
Address:
<span id="footertextsmall">Some address</span>
</p>
<p id="footertextsmall">
Copyright
<span id="footertextsmall">#2014</span>
</p>
<p id="footertextsmall">
Phone:
<span id="footertextsmall">(xxx)xxx-xxxx</span>
</p>
</div>
</body>
</html>
And here is my current CSS
#htmlbody{
margin:0px;
padding:0px;
background-color:#000000;
}
#container
{
width: 100%;
min-width:500px;
height: 100%;
margin: 0px;
padding: 0px;
overflow:hidden;
}
#header
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 100px;
background-image: url('images/headerBG.png');
background-size: auto;
display: block;
}
#header img
{
display: block;
margin-left: auto;
margin-right: auto;
}
#nav
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height: 54px;
background-image: url('images/navbarBG.png');
background-repeat: repeat-x;
text-align: center;
}
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
overflow: hidden;
display: inline-block;
vertical-align: middle;
}
#nav li
{
margin: 0px;
padding: 0px;
float: left;
}
#nav a
{
margin: 0px;
padding-right:6px;
padding-left:-3px;
width: 114px;
height: 50px;
background-image: url('images/btn.png');
background-repeat: no-repeat;
text-decoration: none;
text-transform: uppercase;
text-align:center;
color: #ffffff;
display: table-cell;
vertical-align: middle;
text-shadow: 2px 2px 2px #333333;
}
#nav a:hover
{
background-image:url('images/btnHover.png');
}
#body
{
margin: 0px;
padding: 0px;
width: 100%;
min-width:500px;
height:auto;
min-height:500px;
background-image: url('images/contentBG.png');
background-repeat: repeat;
overflow:auto;
}
#homecontent
{
width: 100%;
min-width:500px;
height: auto;
margin-top: 40px;
margin-bottom:0px;
}
#hometext
{
padding:0px;
margin-top:20px;
margin-bottom:0px;
text-transform: uppercase;
color: #cccccc;
text-shadow: 2px 2px 5px #000000;
font-size: 165%;
font: arial;
text-align: center;
}
#hometextsmall
{
color: #cc9966;
text-align: center;
font-size: x-large;
}
#contactcontent{
width:720px;
height:400px;
min-height:400px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
padding-bottom:10px;
padding-top:5px;
border-radius: 15px;
background-color:#666666;
}
#pagecontent
{
width:550px;
height:450px;
min-height:450px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
padding-left:15px;
padding-right:15px;
padding-bottom:10px;
padding-top:5px;
border-radius: 15px;
background-color:#666666;
}
#pagecontent ul {
list-style-type: none;
padding-left:20px;
margin: 0px;
}
#pagecontent ul li {
background-image: url(images/bullet.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
#pagecontenttext{
margin: 0px;
padding: 0px;
color: #131010;
font: arial;
font-size:18px;
}
#contact{
float:left;
display:block;
width:350px;
height:400px;
margin-left:auto;
margin-right:auto;
}
#footercontainer
{
margin:0px;
padding: 0px;
width: 100%;
height:auto;
display: table;
table-layout: fixed;
background-image: url('images/footerBG.png');
background-repeat: repeat;
}
#footercontainer p
{
margin:0px;
padding: 0px;
display: table-cell;
text-align: center;
margin: 0px;
padding: 0px;
vertical-align: top;
}
#footertextsmall
{
margin: 0px;
padding: 0px;
color: #ffffff;
text-align: center;
font-size:small;
}
#footerImageBanner
{
margin: 0px;
padding: 0px;
width: 100%;
height: 80px;
background-image: url('images/footerImgBG.png');
background-size: auto;
display: block;
}
#footerImageBanner img
{
display: block;
margin-left: auto;
margin-right: auto;
}
hey do you mean......
#container div{
background-color:#fff;
margin:10px;
}
http://jsfiddle.net/kisspa/QFN9U/
I'm new to creating websites and can't seem to find out why the alignment of my website doesn't work properly.
On all three of my computer monitors, the website looks fine:
http://www.spectanium.com
But I looked at it on my one friends computer and it looked wrong.
I have a main body and then space on both the right and left, but depending on the monitor I use, there has been varying space and it looks bad...
Can anyone take a look at my code and see what I'm doing wrong?
index.html -->
<html>
<head>
<title>Spectanium Studios</title>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<div id="header">
</div>
<div id="menu">
<ul>
Homepage<li>Products</li>
<li>About Us</li>
</ul>
</div>
<div id="content">
<div id="updatesCol">
<h2>Recent Updates</h2>
<h3> * Website Created *</h3>
<p></p>
<p style="font-size:small">Website is now done!</p>
</div>
<div id="contentCol">
<h2>Welcome to Spectanium!</h2>
<p>
<em>So far we have to do a few things before we are ready to roll!</em>
</p>
<h3>Game Stuff:</h3>
<ol>
<li>Finish the actual game.</li>
<li>Get final graphics.</li>
<li>Get final music.</li>
<li>Find out distribution method.</li>
</ol>
<h3>Website Stuff:</h3>
<ol>
<li>Write descriptions for about us.</li>
<li>Improve it</li>
<li>Make it pretty</li>
</ol>
</div>
<div style="clear: both;"></div>
</div>
<div id="footer">
<p></p>
<p> © 2014 Spectanium Studios</p>
</div>
</body>
</html>
default.css -->
body {
margin: 20px 0;
padding: 0;
background: black;
background-image:url('images/background.png');
background-size:100%;
background-repeat:repeat-y;
width:190%;
font: normal "Courier New", Courier, Courier, sans-serif;
}
h1, h2, h3 {
color: #B13413;
}
h2 {
font-size: 1.6em;
}
h3 {
margin: 0;
font-size: 1em;
}
p, ul, ol, blockquote {
margin-top: 0;
}
a:link {
border-bottom: 1px dotted #CCCCCC;
text-decoration: none;
color: #3284B5;
}
a:hover {
border: none;
}
img {
border: none;
}
/* Header */
#header {
width: 890px;
height: 273px;
margin: 4px 0 4px 300px;
background: url(images/header.png) no-repeat;
}
/* Menu */
#menu {
background: url(images/topborder.png) repeat-x;
width: 950px;
height: 41px;
margin: 0 auto;
margin-left:275px;
background-color: #a1a1a1;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
text-decoration:none;
}
#menu li {
display: inline;
text-decoration:none;
}
#menu a {
display: block;
float: left;
height: 28px;
padding: 15px 20px 0 20px;
text-decoration: none;
color: black;
font-weight:bold;
border-bottom: 0 dotted #DDDDDD;
}
#menu a:hover{
height:8px;
color: #B13413;
}
/* Content */
#content {
background: url(images/bottomborder.png) repeat-x;
width: 950px;
background-color: white;
margin-left:275px;
height: 1000px;
}
#updatesCol {
float: right;
width: 250px;
height:1000px;
border-left:1px black solid;
text-align:center;
}
#contentCol {
float: left;
width: 500px;
padding: 20px 0 0 0;
margin-left:25px;
}
/* Footer */
#footer {
width: 950px;
margin: 0 auto;
margin-left:275px;
padding: 10px 0;
font-size: smaller;
background: url(images/bottomborder.png) repeat-x;
clear:both;
}
#footer * {
color: #666666;
}
This is how it's displaying to me, running on 1920x1080.
http://s30.postimg.org/s3w6clowg/hello.jpg
Problem is your backgorund. It's set to repeat-y but the width it's 1450, so it will repeat-y but won't extend further than that.
Also it'll look a bit to the left because you set all the margins in pixels, like the header:
4px 0 4px 300px .
So no matter what it'll be pushed from the left to the right of 300px. If my resolution is high it'll show a huge gap on the RIGHT side of the page.
This is because you are using margin-left to align the whole website so when it scales up it is still aligned to the left. Use margin: 0 auto; to center your website. If you want the website to stay aligned to the left like it currently is however then use a percentage instead. You probably should also set a background color or having a repeating background to avoid the black background when the page is wider than your background image.
Try this.
body{
background-position-x:center;
}
body > div{
margin:auto !important;
}
Now the content is centered I assure you. But it won't feel centered as the blackened area in the background-image you are using is not centered horizontally. You can see the green line is longer than the red line. Correct that and you're good to go.
My suggestion is that you use an image on background which doesn't have blackened area and achieve that by css
You have specified a absolute margin-left which is causing the problem.
I changed some parts of your css file and it works fine for me.
basically replace absolute margins with
margin-left:auto
margin-right:auto
Changes in default.css
body {
margin: 20px 0;
padding: 0;
background: black;
background-image:url('http://www.spectanium.com/images/background.png');
background-size:100%;
background-repeat:repeat-y;
width:100%;
font: normal "Courier New", Courier, Courier, sans-serif;
}
#header {
width: 890px;
height: 280px;
margin-left:auto;
margin-right:auto;
background: url(http://www.spectanium.com/images/header.png) no-repeat;
}
#menu {
background: url(http://www.spectanium.com/images/topborder.png) repeat-x;
width: 950px;
height: 51px;
margin-left:auto;
margin-right:auto;
background-color: #a1a1a1;
}
#content {
background: url(images/bottomborder.png) repeat-x;
width: 950px;
background-color: white;
margin-left:auto;
margin-right:auto;
height: 1000px;
}
/* Footer */
#footer {
width: 950px;
margin: 0 auto;
margin-left:auto;
margin-right:auto;
padding: 10px 0;
font-size: smaller;
background: url(http://www.spectanium.com/images/bottomborder.png) repeat-x;
clear:both;
}
firstly I just would like to put out there I'm not very good at coding, and this is sorta a first for me. I'm having some trouble with the footer; the background of the footer, when it's too small for bigger computer screens, just repeats itself like this: http://prntscr.com/29fxeu
I was hoping to get the background so that it automatically adjusts to each screen width to fit the whole way across. Is that possible? I've got it up on JSFiddle here: http://jsfiddle.net/HXs2A/1/
And here's the HTML used: (forgive me if there's errors)
<body>
<!-- Footer border Start-->
<div id='footer-wrapper'>
<div style='clear:both;'/>
</div>
<!-- Footer border End-->
<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 1' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 2' preferred='yes'/>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='Column 3' preferred='yes'/>
</div>
<div style='clear: both;'/>
</div>
</div>
</body>
And the CSS:
#footer-wrapper {clear: both;width: 100%; height:4px; background: #46A28D;}
/*----- Three Column Widget (Green Border) STARTS-----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) repeat scroll 0 0 #222222;
}
#lower-wrapper {
background: none; repeat scroll 0 0 #222222;
margin:auto;
padding: 20px 0px 20px 0px;
width: 100%;
border:0;
}
#lowerbar-wrapper {
background: none; repeat scroll 0 0 #222222;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 30%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#46A28D;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0px !important;
padding: 0px;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}
Thanks!
to #lower
add
background-size: 100% 100%;
and remove height:120px; as it will force background to stretch on odd ratio screen.
You mean background-size? Following code change works for me (CSS3).
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
height:120px;
background: url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png);
background-size:100% 100%;
background-repeate: no-repeat;
}
See http://www.w3schools.com/css/css3_backgrounds.asp
However, older browsers might give different results.
#lower {
margin:auto;
padding: 0;
width: 100%;
height: 120px;
background: #222222 url(http://1.bp.blogspot.com/-p6zskT7-Xd0/UqN_39ROUYI/AAAAAAAADd0/sXrkWxgY9-M/s1600/footer.png) no-repeat;
background-size: cover;
}
*Note: When you assigning attributes to element in HTML use " instead of '
Right <div id="lower">
Wrong <div id='lower'>