I am having a little trouble getting my navigation bar styled how I want. For some reason my navigation bar lost its bottom border, when I try to CSS the navigation background it has no effect, and if I use margins(bottom ones) then the Wowslider goes crazy, and when it is changing images it goes super large.
It must be in my css, but I will post both my HTML and CSS. What I want the navigation bar to look like is
but I need to get the above issues addressed first (not even sure that type of nav bar is possible)
HTML
<?php include 'header.php';?>
<div class="logo"> Darthvix Custom Sabers specializes in custom lightsabers and conversions to create a unique lightsaber specific to you're desires.<P></P></div>
<!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/dsc01061.jpg" alt="DSC01061" title="DSC01061" id="wows1_0"/></li>
<li><img src="data1/images/dsc01069.jpg" alt="DSC01069" title="DSC01069" id="wows1_1"/></li>
<li><img src="data1/images/dsc01114.jpg" alt="DSC01114" title="DSC01114" id="wows1_2"/></li>
<li><img src="data1/images/dsc01140.jpg" alt="DSC01140" title="DSC01140" id="wows1_3"/></li>
<li><img src="data1/images/dsc01273.jpg" alt="DSC01273" title="DSC01273" id="wows1_4"/></li>
<li><img src="data1/images/dsc01285.jpg" alt="DSC01285" title="DSC01285" id="wows1_5"/></li>
</ul></div>
<div class="ws_bullets"><div>
<img src="data1/tooltips/dsc01061.jpg" alt="DSC01061"/>1
<img src="data1/tooltips/dsc01069.jpg" alt="DSC01069"/>2
<img src="data1/tooltips/dsc01114.jpg" alt="DSC01114"/>3
<img src="data1/tooltips/dsc01140.jpg" alt="DSC01140"/>4
<img src="data1/tooltips/dsc01273.jpg" alt="DSC01273"/>5
<img src="data1/tooltips/dsc01285.jpg" alt="DSC01285"/>6
</div></div><span class="wsl">slideshow by WOWSlider.com v5.6m</span>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
<?php include 'footer.php';?>
</body>
</html>
CSS
body {
width:100%;
overflow-x:hidden;
/* This image will be displayed fullscreen */
background:url('../images/background.jpg') no-repeat center center;
/* The Magic */
background-size:4000px 4000px;
}
div.entire {
width:85%;
background-color: #383838;
margin:auto;
color:#33FF00 ;
min-height:100%;
}
a {
color: #33FF00;
}
a.visited, a.hover {
color: #33FF00 ;
}
div.logo {
font-size:150%;
text-align:center;
}
div.wowslider {
width:100%;
}
#navbar {
background-color:#505050;
}
#menu {
width: 100%;
margin: 0 0 2em 0;
padding: 0;
list-style: none;
border-bottom: 1px solid #ccc;
border-top: 3px solid #ccc;
font-size: 150%;
box-shadow: 8px 8px 8px #888888;
background-color:#505050;
}
#menu a {
text-shadow: 3px 3px black;
}
#menu li {
float: left;
}
#menu li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: white;
border-right: 4px solid #ccc;
}
#menu li a:hover {
color: white;
background:url('../images/navbackground.jpg'); }
div.footer {
border-top: 1px solid white;
background-color: #404040 ;
width:100%;
height:auto !important;
margin:auto;
clear:both;
}
#about {
width:60%;
font-size:130%;
}
div.buildlog {
font-size:220%;
font-weight:bold;
}
.build {
font-size:170%;
font-weight:bold;
}
.builds {
font-size:130%;
}
div.forsalepics img {
width:20%;
height:30%;
margin:2%;
border: 3px solid white;
}
div.servicewidth {
width:60%;
}
div.services, div.payment {
font-size:170%;
font-weight: bold;
}
I fixed it, had some of the nav bar code in the wrong place !!!
Related
I am a beginner in coding, and I have to create a website for a school project. I tried to resolve the problem myself but it just don't work.
I wanted to add a search bar to my website so I followed a tutorial, and it worked on a blank new html page, but when I copied paste on my html page project I have this lightgray frame that comes around the search bar , where does it come from and what to delete/change ? thank you :)
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 01-mars-2017, 14:52:23
Author : jonathan
*/
/* syling my paragraphs */
div {
font-family:Times New Roman;
}
body {
font-family: Arial;
background-color: white;
}
p {
color: darkgreen;
font-size:30px;
font-family:Arial;
}
.highlight {
color:darkgray;
}
/* styling navigation */
#search {
width: 200px;
padding: 7px;
}
#submit {
padding: 7px;
background: #669999;
color: white;
margin-letf: -5px;
cursor: pointer
}
#submit:hover {
background:#333;
transition: all 0.40s;
}
.header-logo {
display:block;
height:240px;
width:240px;
background:url(images/wolf.png) no-repeat;
text-indent:50%;
white-space: nowrap;
overflow: hidden;
margin: 0 auto;
}
nav {
border-bottom:2px solid black;
border-bottom-color: #669999;
}
li{
display:inline-block;
text-align: center;
margin-right:20px;
}
nav a:link, nav a:visited {
color:gray;
font-size:15px;
text-decoration: none;
}
nav a:hover {
background-color: #99ddff;
}
nav a:active {
background-color: yellow
}
/* Bordered form */
form {
border: 3px solid #f1f1f1;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Extra style for the cancel button (red) */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the avatar image inside this container */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 40%;
border-radius: 50%;
}
/* Add padding to containers */
.container {
padding: 16px;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title> HTML by Jo</title>
<meta charset="UTF-8">
<meta name="description" content="I by mistake deleted all the files
so i'm starting all over again">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="wolf.css">
</head>
<body>
<!-- navigation -->
<header>
<h1>
<a class="header-logo" href="http://localhost:8383/Grey%20wolf/index.html"></a>
</h1>
</header>
<nav>
<div style="text-align:center">
<ul>
<li>Login</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul></div>
<form action="https://google.com">
<input type="text" placeholder="Search..." maxlength="20" id="search">
<input type="submit" value="Go!" id="submit">
</form>
</nav>
<!-- the content -->
<div>TODO write content</div>
<p>Here is a paragraph.</p>
<p class="highlight">Another paragraph.</p>
<h3 class="highlight">this is a heading h3</h3>
link to codeacademy
</body>
</html>
Your form has this property set there:
form{
border: 3px solid #f1f1f1;
}
To fix it change it to:
form{
border: 0;
}
or try using the parent element which is the better way to go,
nav form{
border: 0;
}
thanks for your answers it works :)
I tried to modify the different borders but I have actually not seen that one :/
and now I try to add pictures but the browser doesn't show them what should I do ?
I place this before a paragraph :
<img src="images/model1.jpg" alt="model women 1">
<img src="images/model2.jpg" alt="model women 2">
<img src="images/model3.jpg" alt="model women 3">
Have you even taken a look to your CSS? It's fairly commented
/* Bordered form */
form {
border: 3px solid #f1f1f1;
}
It appears to be the border of nav. Try the following CSS:
nav {
border-bottom: none;
}
I have this page with a sidebar and I want the content in the sidebar to move down with the page but only if you scroll past it. So If you are at the top of the page it would be at the top of the sidebar but if you are at the bottom it would be at the top of the screen. How would you do that? I tried using position: fixedbut that just moves it with the screen no matter what and I only want it to move if the top reaches it.
Gif of Webpage with sidebar content that has the position fixed:
Here's the CSS of the content:
#content-list {position: fixed;}
#content-list ul {padding: 0px; list-style: none;}
#content-list li { padding-bottom: 25px; }
Here's the HTML of the content:
<div class="sidebar">
<nav id="content-list">
Page Content:
<ul>
<li>Quick Description</li>
<li>Help Menu</li>
</ul>
</nav>
</div>
EDIT
I would like to be able to do this using only CSS/HTML if possible (No javascript etc.)
Full demo:
/* imports a Google font */
#import url(https://fonts.googleapis.com/css?family=Oswald);
#import url(https://fonts.googleapis.com/css?family=Lora);
/* creates an 800px-wide space centered on the page, to constrain line width. it also specifies a default typeface and line height for the entire body of the document */
body {
background: #551A8B;
margin: 0;
color: white;
}
#body {
text-align: center;
display: table;
position: absolute;
height: 100%;
width: 100%;
font-size: 150%;
}
#main {
display: table-cell;
vertical-align: middle;
line-height: 150%;
font-family: Lora;
padding: 0px;
margin: 0px;
box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
}
.content {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: left;
}
.sidebar {
display: table-cell;
vertical-align: top;
width: 10%;
padding: 10px 10px 0px 20px;
font-family: Oswald;
font-size: 80%;
text-align: left;
background: #450A7B;
box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
}
#content-list {
position: fixed;
}
#content-list ul {
padding: 0px;
list-style: none;
}
#content-list li {
padding-bottom: 25px;
}
#title {
display: table-row;
vertical-align: top;
height: 10%;
padding: 0px;
font-family: Oswald;
background-color: #35006B;
font-size: 120%;
}
#footer {
display: table-row;
vertical-align: bottom;
background-color: #35006B;
overflow: hidden;
white-space: nowrap;
line-height: 20%;
height: 10%;
}
a:link {
color: #FFE303;
text-decoration: underline;
}
a:visited {
color: #E3701A;
text-decoration: underline;
}
a:hover {
color: blue;
text-decoration: underline;
}
h2 {
font-family: Oswald;
}
/* Setup the dropdown menu at the top of the screen */
.menu ul {
padding: 0px;
margin: 0px;
white-space: nowrap;
}
.menu li {
display: inline-block;
width: 25%;
background: #35006B
}
.menu li > ul {
display: none;
}
.menu li:hover {
background: #25005B
}
.menu li:hover > ul {
position: absolute;
display: inline;
box-shadow: 5px 5px 10px black;
-moz-box-shadow: 5px 5px 10px black;
-webkit-box-shadow: 5px 5px 10px black;
margin-top: 40px;
margin-left: -100px;
font-size: 80%;
width: 200px;
}
.menu li li {
display: block;
padding: 10% 75% 10% 10%;
margin: 0px;
}
.menu a {
text-decoration: none;
color: #FFE303;
}
/* Set images to a certain size */
.large-image {
width: 50%
}
.small-image {
width: 25%
}
#links {
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>NecroTheif: Maze Generator Project</title>
<link type="text/css" rel="stylesheet" href="../styles.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta charset="utf-8">
</head>
<body>
<div id="body">
<div id="title">
<h1>Maze Generator</h1>
<ul class="menu">
<a href="#">
<li>
Features
<ul>
<a href="about.html">
<li>About</li>
</a>
<a href="generation.html">
<li>Generating Mazes</li>
</a>
<a href="editing.html">
<li>Editing Mazes</li>
</a>
<a href="settings.html">
<li>Settings</li>
</a>
<a href="saveopen.html">
<li>Save/Open</li>
</a>
</ul>
</li>
</a>
<a href="MazeCreator.exe">
<li>Download</li>
</a>
<a href="api.html">
<li>API</li>
</a>
</ul>
</div>
<div>
<div class="sidebar">
</div>
<div id="main">
<h2 id="quick-description">Quick Description</h2>
<img class="large-image" src="https://i.gyazo.com/93f60cc74d13175ce5aee548cc020b10.png" alt="Picture of the maze creator program." />
<p class="content">The maze creator program is a program that allows you to create mazes of any size with ease. You can create mazes either by using an algorithm to generate them or building them yourself in the creator (You can even combine the two by generating
a maze and then editing it!). You then can save these files as .maz files to be loaded into games or to be edited later in the maze creator!</p>
<h2 id="help-menu">Help Menu</h2>
<img class="small-image" src="https://i.gyazo.com/55ec91a6523562ca82341510c7bdde43.png" alt="Picture of the top of the help menu." />
<img class="small-image" src="https://i.gyazo.com/d121313f333eba42faa37220aa599bb7.png" alt="Picture of the bottom of the help menu." />
<p class="content">This menu in the maze creator shows the basic controls of the creator. Open it by clicking Help or pressing Ctrl+H</p>
</div>
<div class="sidebar">
<nav id="content-list">
Page Content:
<ul>
<a href="#quick-description">
<li>Quick Description</li>
</a>
<a href="#help-menu">
<li>Help Menu</li>
</a>
</ul>
</nav>
</div>
</div>
<div id="footer">
<div id="links">
Main Page
</div>
<p>Developer: Andrew Wetmore (aka NecroTheif)</p>
<p>Last Updated: 11/03/15</p>
</div>
</div>
</body>
</html>
The term for this is 'Sticky sidebar', so you want it to always stick to the top of the page when the user scrolls.
There's millions of plugins for it, I'm particularly fond of this one:
DEMO: http://spoiledmilk.com/demos/sticky-sidebar/
This article explains in detail how to implement it and what it does exactly.
As #Manoj says in a comment this can be done using
position: sticky; position: -webkit-sticky;
Sadly this only works in Firefox and Safari (For now, see here for more info). I went with that and for browsers that don't support it I used this simple javascript (Which does not require JQuery and in my opinion creates a "cleaner" look than most complicated sticky sidebars) and anything I wanted to be sticky was of class "sticky"
// Try to give it sticky position first
function loadStickies(){
var sticky = document.getElementById("content-list");
sticky.style.position = "-webkit-sticky";
sticky.style.position = "sticky";
positionStickies();
}
// If giving it sticky position didn't work do it manually
function positionStickies() {
var sticky = document.getElementById("content-list");
if(sticky.style.position !== "sticky" && sticky.style.position !== "-webkit-sticky"){
if (document.documentElement.scrollTop > sticky.parentNode.offsetTop || document.body.scrollTop > sticky.parentNode.offsetTop)
sticky.style.position = "fixed";
else
sticky.style.position = "relative";
}
}
window.onload = loadStickies;
window.onresize = positionStickies;
window.onscroll = positionStickies;
window.onclick = click;
EDIT
To make the script work in IE and Firefox you must use document.documentElement as well as document.body.
Complete Demo:
// Try to give it sticky position first
function loadStickies(){
var sticky = document.getElementById("content-list");
sticky.style.position = "-webkit-sticky";
sticky.style.position = "sticky";
positionStickies();
}
// If giving it sticky position didn't work do it manually
function positionStickies() {
var sticky = document.getElementById("content-list");
if(sticky.style.position !== "sticky" && sticky.style.position !== "-webkit-sticky"){
if (document.documentElement.scrollTop > sticky.parentNode.offsetTop || document.body.scrollTop > sticky.parentNode.offsetTop)
sticky.style.position = "fixed";
else
sticky.style.position = "relative";
}
}
window.onload = loadStickies;
window.onresize = positionStickies;
window.onscroll = positionStickies;
window.onclick = click;
/* imports a Google font */
#import url(https://fonts.googleapis.com/css?family=Oswald);
#import url(https://fonts.googleapis.com/css?family=Lora);
/* creates an 800px-wide space centered on the page, to constrain line width. it also specifies a default typeface and line height for the entire body of the document */
body {
background: #551A8B;
margin: 0;
color: white;
}
#body {
text-align: center;
display: table;
position: absolute;
height: 100%;
width: 100%;
font-size: 150%;
}
#main {
display: table-cell;
vertical-align: middle;
line-height: 150%;
font-family: Lora;
padding: 0;
margin: 0px;
box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
}
.content {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
text-align: left;
}
.sidebar {
display: table-cell;
vertical-align: top;
width: 150px;
padding: 10px 10px 0px 20px;
font-family: Oswald;
font-size: 80%;
text-align: left;
background: #450A7B;
box-shadow: 0px 0px 10px black inset;
-webkit-box-shadow: 0px 0px 10px black inset;
-moz-box-shadow: 0px 0px 10px black inset;
}
#content-list {
top: 0; padding-top:10px;
}
#content-list ul {
padding: 0px;
list-style: none;
}
#content-list li {
padding-bottom: 25px;
}
#title {
display: table-row;
vertical-align: top;
height: 10%;
padding: 0px;
font-family: Oswald;
background-color: #35006B;
font-size: 120%;
}
#footer {
display: table-row;
vertical-align: bottom;
background-color: #35006B;
overflow: hidden;
white-space: nowrap;
line-height: 20%;
height: 10%;
}
a:link {
color: #FFE303;
text-decoration: underline;
}
a:visited {
color: #E3701A;
text-decoration: underline;
}
a:hover {
color: blue;
text-decoration: underline;
}
h2 {
font-family: Oswald;
}
/* Setup the dropdown menu at the top of the screen */
.menu ul {
padding: 0px;
margin: 0px;
white-space: nowrap;
}
.menu li {
display: inline-block;
width: 25%;
background: #35006B
}
.menu li > ul {
display: none;
}
.menu li:hover {
background: #25005B
}
.menu li:hover > ul {
position: absolute;
display: inline;
box-shadow: 5px 5px 10px black;
-moz-box-shadow: 5px 5px 10px black;
-webkit-box-shadow: 5px 5px 10px black;
margin-top: 40px;
margin-left: -100px;
font-size: 80%;
width: 200px;
}
.menu li li {
display: block;
padding: 10% 75% 10% 10%;
margin: 0px;
}
.menu a {
text-decoration: none;
color: #FFE303;
}
/* Set images to a certain size */
.large-image {
width: 50%
}
.small-image {
width: 25%
}
#links {
padding: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>NecroTheif: Maze Generator Project</title>
<link type="text/css" rel="stylesheet" href="../styles.css" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta charset="utf-8">
</head>
<body>
<div id="body">
<div id="title">
<h1>Maze Generator</h1>
<ul class="menu">
<a href="#">
<li>
Features
<ul>
<a href="about.html">
<li>About</li>
</a>
<a href="generation.html">
<li>Generating Mazes</li>
</a>
<a href="editing.html">
<li>Editing Mazes</li>
</a>
<a href="settings.html">
<li>Settings</li>
</a>
<a href="saveopen.html">
<li>Save/Open</li>
</a>
</ul>
</li>
</a>
<a href="MazeCreator.exe">
<li>Download</li>
</a>
<a href="api.html">
<li>API</li>
</a>
</ul>
</div>
<div>
<div class="sidebar">
</div>
<div id="main">
<h2 id="quick-description">Quick Description</h2>
<img class="large-image" src="https://i.gyazo.com/93f60cc74d13175ce5aee548cc020b10.png" alt="Picture of the maze creator program." />
<p class="content">The maze creator program is a program that allows you to create mazes of any size with ease. You can create mazes either by using an algorithm to generate them or building them yourself in the creator (You can even combine the two by generating
a maze and then editing it!). You then can save these files as .maz files to be loaded into games or to be edited later in the maze creator!</p>
<h2 id="help-menu">Help Menu</h2>
<img class="small-image" src="https://i.gyazo.com/55ec91a6523562ca82341510c7bdde43.png" alt="Picture of the top of the help menu." />
<img class="small-image" src="https://i.gyazo.com/d121313f333eba42faa37220aa599bb7.png" alt="Picture of the bottom of the help menu." />
<p class="content">This menu in the maze creator shows the basic controls of the creator. Open it by clicking Help or pressing Ctrl+H</p>
</div>
<div class="sidebar">
<nav id="content-list">
Page Content:
<ul>
<a href="#quick-description">
<li>Quick Description</li>
</a>
<a href="#help-menu">
<li>Help Menu</li>
</a>
</ul>
</nav>
</div>
</div>
<div id="footer">
<div id="links">
Main Page
</div>
<p>Developer: Andrew Wetmore (aka NecroTheif)</p>
<p>Last Updated: 11/03/15</p>
</div>
</div>
</body>
</html>
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!
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;
}
As I am transitioning from using template layouts to writing my own css scripts, I have run into many issues, but there's one preventing me from continuing. I have successfully created a 3 column layout with floating divs, however upon browser re-size the right column overlays the middle div. I have imported the script found on Div sections shifts when i resize the window with no success. Basically I want the layout to behave like the current one, at http://www.allstarselectric.com , but using %. I am using % for cross resolution support, so is there a workaround/solution, or are pixels absolutely necessary? Any help would be greatly appreciated.
CSS:
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
color: #666;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 1.7em;
background-color: #4a4d51;
background-image: url(images/templatemo_body.jpg);
background-repeat: repeat-x;
background-position: top
}
.content{
position: fixed;
width: 100%;
height: 100%;
background-image: url(images/templatemo_body.jpg);
}
.contentbody{
float: left;
width: 70%;
height: 100%;
}
.wrapper {
width:100%
}
.sidebar{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar li{
list-style-type:none;
margin:0;
padding:0;
}
.sidebar2{
float: left;
width: 15%;
height: 100%;
border: 0px solid #BBB;
background-color:#dddddd;
}
.sidebar2 li{
list-style-type:none;
text-align: center;
margin:0;
padding:0;
}
.chromestyle{
width: 100%;
font-weight: bold;
}
.chromestyle:after{ /*Adds margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*Affects the background/menustyle*/
.chromestyle ul{
border: 0px solid #BBB;
width: 730px;
height: 45px;
background: url(imgs/navm.jpg) center center no-repeat; /*THEME CHANGE HERE*/
padding: 0 15px;
margin: 0;
text-align: left; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
/*Affects menu text*/
.chromestyle ul li a{
float: left;
display: block;
color: #000;
padding: 8px 20px;
margin: 0 1px 0 0;
text-decoration: none;
border: none;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
color: #fff;
background: #ff0011
center center repeat-x; /*THEME CHANGE HERE*/
}
.current { color: #fff; background: ; }
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: #d5a30b;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #F0F0F0;
}
HTML:
<html>
<head>
<title>Allstars Electric</title>
<meta name="keywords" content="electricians," />
<meta name="description" content="Electrical Contractor DFW" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/drop.js">
</script>
<style type="text/css">
<!--
.style2 {color: #FFFF00}
.style3 {
font-size: 36px
}
-->
</style>
<SCRIPT LANGUAGE="JavaScript">
<!--
function JumpToIt(list) {
var newPage = list.options[list.selectedIndex].value
if (newPage != "None") {
location.href=newPage
}
}
//-->
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="sidebar" id="sidebar"><li>home</li></div>
<div class="contentbody">
<center>
<div class="chromestyle" id="chromemenu">
<ul>
<li>Home</li>
<li>Special Offers</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
<li>Themes</li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
1
2
3
4
5
</div>
<!--2nd drop down menu -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
Electrical
Heating & Air Conditioning
</div>
<!--3rd drop down menu -->
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
Dark
Light
</div>
<!-- Dropdown End -->
<br><tr>text/other</br></tr>
</center>
</body>
</div>
</div>
<div class="sidebar2" id="sidebar2"><li>Home</li>
<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>
</div>
</body>
</html>
In your CSS, you have a fixed width set for .chromestyle ul. Change that width to a %, and that should fix your problem.
The first answer to the article you linked provides you with the most reasonable solution: "You can wrap around the two divs with another div of a minimum width you want the page to be viewed in." There isn't much point in trying to fit a page to a 320x240 browser; scroll bars can't be avoided in that kind of resolution.
Something like this
.foowrap { min-width: 550px; width: 100%; overflow:auto; }
.foo { width:30%; float:left; }
<div class="foowrap">
<div class="foo">bar</div>
<div class="foo">baz</div>
<div class="foo">bum</div>
</div>
Then make sure that the total minimum width of the divs inside (class foo in the example) is not more than the min-width you set. Watch out for borders especially.
By the way, you have two </body> and you're using <center>, both of which are things you should avoid. This bit doesn't make much sense either: <br><tr>text/other</br></tr>