Weebly Menus and logos
So I have been reading everywhere that I can think of online to fix an issue with logo and navigation being on the same line. And yes I have attempted the other articles on Stackoverflow.
I have changed lines of code, added lines of code and it moves things around but refuses to put them on the same lines.
The code is this:
/* LOGO & MENU */
#header{
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.navContainer{
width: 500px;
height: auto;
background: url('navbg.jpg') repeat;
text-align: right;
display: inline;
overflow: hidden;
}
.logo {
width: 200px;
min-height: 20px;
height: auto;
margin: none;
float: left;
display: inline;
}
span.wsite-logo {line-height: 1;}
#logo, #logo a, #wsite-title {
color: #2a2a2a !important;
text-decoration: none !important;
font-family: "Open Sans", sans-serif;
font-size: 44px;
font-weight: lighter;
font-weight: 300;
line-height: 1;
}
/* Navigation Menu */
#navigation{
float: right;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
height: 100px;
display:inline;
overflow: hidden;
}
#navigation a, #icontent #navigation li:last-child a{
display:inline-block;
text-decoration:none;
line-height: 1;
padding: 20px 16px;
border-right: 1px solid #eee;
}
#navigation li:last-child a, #icontent #navigation span:last-child li a{border-right: none;}
#navigation ul{margin: 0; list-style: none;}
#navigation li{display:inline;}
#weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 0; }
#weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
#weebly-menus .weebly-menu li { width: 162px; text-align: left; margin-top: 2px;}
#weebly-menus .weebly-menu li a {
border: none;
display: block;
background-color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: normal;
line-height:1;
padding: 5px 0px;
color: #000;
font-family: Helvetica, sans-serif;
width: 160px;
height: auto;
border: 1px solid #eee;
}
#weebly-menus .weebly-menu-wrap, #wsite-menus .wsite-menu-wrap {
z-index: 5000;
margin: 0;
postiion: relative !important;
}
Please help. I am wanting to learn more but do you ever get to the point where your brain is just fried from trying different what you hope are solutions, and it turns out not to work. THAT IS WHERE I AM RIGHT NOW!!!!
The link to the site is this :Site preview
Also I am having trouble putting simple text to the right of the navigation.
The HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1024">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class='tall-header wsite-theme-light'>
<div class="note" style="text-align: center;"><p>This gap is here to allow you to see the text tool bar for the header bar below. When site is published, the gap will disappear</p></div>
<div id="wrapper">
<div id="bar">
<div class="frame clearfix">
<div class="bar-text"><p>{call:text}</p></div>
<div id="search-button"><i class="af-search"></i></div>
<div class="social-frame">{social}</div>
<div class="search-bar">{search}</div>
</div>
</div>
<header id="header">
<div class="navContainer clearfix">
<div class="logo med-padding">{logo}</div>
<nav><div id="navigation">{menu}</div></nav>
</div>
<div class="sliderContainer">
<div id="tall-header-image" class="wsite-header"></div>
</div>
</header>
<div id="main" role="main">
<div class="frame">
<div class="content large-padding">{content}</div>
</div>
</div>
<footer>
<div id="footer" class="large-padding clearfix">
<div class="frame">
<div class="note" style="text-align: center;"><p>Drag & drop footer content here</p></div>
<div id="footer-content" class="med-padding">{bottom:content} </div>
<div id="footer-content" class="med-padding" style="display:none;">{footer}</div>
</div>
</div>
<div id="footer-bottom" class="feature small-padding">
<div class="frame">
<div class="copyright"><p>{copyright:text}</p></div>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="/files/theme/basic-header.js"></script>
</body>
</html>
Place the span.wsite-logo class directly under the nav tag, after that change the span class in a div class and add a float: left to the class .wsite-logo.
remove logo div class logo med-padding.
Some advice that worked!!
Line 120 of css, in the #navigation, change text align right to center to move it horizontally, or add margin-top: 3%; to move it vertically, or both, or various other combinations.
navigation {
text-align: center;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
float: none;
margin-top: 3%;
Related
I'm confused how to center vertically a search bar div area, I've used margin auto and it didn't worked.
Here's the full code
.search{
float: right;
width: 200px;
padding: 15px 15px;
margin: auto 0;
background-color: green;
}
Here's the problem
How do I vertical center the search bar div within the navbar?
I made with flexbox. You should learn flexbox
body{
font-family: sans-serif;
margin: 0;
padding: 0;
}
.navbar{
background-color: #343D46;
position: absolute;
width: 100%;
text-align: center;
display:flex;
align-items:center;
justify-content:space-between;
}
.navbar a{
display: inline-block;
float: left;
font-size: 19px;
text-decoration: none;
padding: 15px 15px;
}
.navbar a:hover{
background-color: green;
}
.dropdown{
}
.search{
float: right;
width: 200px;
padding: 15px 15px;
margin: auto 0;
background-color: green;
}
.search input{
float: right;
border: none;
outline: none;
background: none;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navbar">
<div>
Lorem
Ipsum
Dolor
</div>
<div class="dropdown">
</div>
<div class="search">
<input type="text" name="search" placeholder="search">
</div>
</div>
</body>
</html>
I want to create a homepage where you see an image at first with the actual navigation bar on the bottom of the browser. When you scroll down the navigation should stick to the top when it reaches the top of the browser.
I got 1 Logo on the left of the screen and the navigation on the right. The navigation should have a background as a bar across the screen and the logo should overlap this. When I scroll down i first want the logo (which is for example 250px high) to stick to the top and then when i further scroll down i want the navigation + background (about 100px) also to stick to the top. I don't know why the white space is generated either. Between the first and the second picture there should only be about 100px (the height of the grey bar(navigation bar). With this code everything except the background bar works..
#charset "utf-8";
*{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.top-container{
position: absolute;
width: 100%;
}
.stopleft{
padding-top: 34%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: left;
}
.stopright{
padding-top: 44.2%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: right;
}
.whiteBarSmall{
width: 100%;
padding-top: 5%;
background-color: #fff;
position: absolute;
}
.logo{
position: sticky;
top: 0;
width: 50%;
float: left;
}
.navigation{
margin: 0px 0px 0px 0px;
border: solid 0px #000;
position: sticky;
top: 0;
width: 50%;
float: right;
}
.navigation ul{
height: 100px;
}
.button{
list-style: none;
margin: 25px 20px 25px 20px;
float: right;
}
.navBackground{
border: solid 0px #000;
position: sticky;
top: 0;
width: 100%;
padding-top: 5%;
background-color: #a7a7a7;
float: right;
z-index: -1;
}
.whiteBarLarge{
width: 100%;
padding-top: 10%;
background-color: #fff;
}
.indexImage{
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
footer{
width: 100%;
padding-top: 2.5%;
background-color: #a7a7a7;
}
.navigation a:link {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:visited {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:focus {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:hover {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:active {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="description" content="…." />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="pics/favicon.ico" />
<link rel="stylesheet" href="styles/basics.css" type="text/css" />
<link rel="stylesheet" href="styles/index.css" type="text/css" />
<link rel="stylesheet" href="styles/links.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Volkhov" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
</div>
<div class="stopleft"></div>
<div class="stopright"></div>
<div class="logo"><img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" width="50%" /></div>
<div class="navigation">
<ul>
<li class="button">Über uns</li>
<li class="button">Kontakt</li>
<li class="button">Preise</li>
<li class="button">Blog</li>
<li class="button">Galerie</li>
</ul>
</div>
<div class="navBackground"></div>
<div class="indexImage">
<img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
</div>
<div class="whiteBarLarge">
</div>
<div class="indexImage">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
</div>
<div class="whiteBarLarge"></div>
<footer></footer>
</body>
</html>
I am having a lot of trouble with this bar...
Hope someone can help me. Thanks!
Is that what you want?
#charset "utf-8";
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #808080;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
/* height: 1500px; */ /* Used in this example to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="navbar">
<img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" class-="logo" height=50 width=50 style="float: left">
Galerie
Blog
Preise
Contact
Über uns
</div>
<div class="main">
<div class="top-container">
<img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
</div>
<div class="indexImage">
<img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
</div>
<div class="whiteBarLarge">
</div>
<div class="indexImage">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
</div>
<div class="whiteBarLarge"></div>
<footer></footer>
</div>
</body>
</html>
I'm building a website for my DofE expedition but am having some trouble making things work properly. The text that is currently floating on the right of the main container should be sat next to the navigation section but ma attempts to make it do so have been thus far unsuccessful. Any ideas on this?
If it helps, i'd like it to look something like this : W3schools CSS Help Code
#charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
body {
background-color: #EEE;
}
#header {
background-color: #66CCFF;
margin: auto;
text-align:center;
font-family: Helvetica;
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: Helvetica;
}
.main {
font-family: Helvetica;
width: 70%;
margin-left: auto;
float: right;
background-color:#f2f2f2;
clear: left;
display: inline;
/*margin: 1px;*/
}
#main2 {
width: 799px;
font-family: Helvetica;
width: 50%;
display: inline;
background-color:#f2f2f2;
/*margin: 1px;*/
}
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
}
#nav li a:hover {
color: red;
}
#nav li {
text-decoration: none;
display: block;
padding: 5px;
margin: 5px;
margin-left: 0px;
background-color: #dddddd;
width: 25%;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
fl
}
#content {
padding:10px;
}
#footer{
clear: both;
color: white;
background-color: grey;
text-align: right;
padding: 0.5px;
}
#footer-margin{
margin: 5px;
}
img {
/*margin-left: auto;
margin-right: auto;*/
text-align:center;
border-style: solid;
border-width: 1px;
border-color: black;
clear: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!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>DofE:Expedition Aim</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "container"><!--start container-->
<div id = "header">
<h1>DofE Expedition Aim</h1>
</div>
<div id = "content">
<div id = "nav"><!-- start nav tag -->
<ul>
<li>Home</li>
<li>Our Aim</li>
<li>How we acheived it</li>
<li>Extra info (tbd)</li>
</ul>
</div><!-- nav close tag -->
<div class = "clearfix">
<div class = "main">
<p>This page shows what happened on out DofE expedition and the things that we did when not on expedition.</p>
<p>This includes doing map work, fitness and orginising and running events localy.</p>
<p>On the following pages, you can find the various evidence to show you what we did and how it benefited us. (or didn't)</p>
</div><!-- "main" end tag -->
<!--<div id = "main2">
<p>This is a test of a second column that should float to the right of the other.</p>
</div>-->
</div>
<!-- <div id = "img.1">
<img src="logo.jpg" alt="DofE Logo goes here" height="100" width="73">
</div>-->
</div>
<div id = "footer">
<div id = "footer-margin">
<p>Copyright © Dom Brown 2017</p>
</div>
</div>
</div>
</body>
</html>
You'll need to play with the padding and such, but this will get the nav and main content side by side. Basically you had your clearfix container wrapping around just the nav, which was full width. Also I applied float: left; to both nav and main.
#charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
body {
background-color: #EEE;
}
#header {
background-color: #66CCFF;
margin: auto;
text-align:center;
font-family: Helvetica;
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
font-family: Helvetica;
}
.main {
font-family: Helvetica;
width: 70%;
margin-left: auto;
float: left;
background-color:#f2f2f2;
display: inline;
/*margin: 1px;*/
}
#main2 {
width: 799px;
font-family: Helvetica;
width: 50%;
display: inline;
background-color:#f2f2f2;
/*margin: 1px;*/
}
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
width: 25%;
float: left;
}
#nav li a:hover {
color: red;
}
#nav li {
text-decoration: none;
display: block;
padding: 5px;
margin: 5px;
margin-left: 0px;
background-color: #dddddd;
}
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#content {
padding:10px;
}
#footer{
clear: both;
color: white;
background-color: grey;
text-align: right;
padding: 0.5px;
}
#footer-margin{
margin: 5px;
}
img {
/*margin-left: auto;
margin-right: auto;*/
text-align:center;
border-style: solid;
border-width: 1px;
border-color: black;
clear: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
<!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>DofE:Expedition Aim</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id = "container"><!--start container-->
<div id = "header">
<h1>DofE Expedition Aim</h1>
</div>
<div id = "content" class="clearfix">
<div id = "nav"><!-- start nav tag -->
<ul>
<li>Home</li>
<li>Our Aim</li>
<li>How we acheived it</li>
<li>Extra info (tbd)</li>
</ul>
</div><!-- nav close tag -->
<div class = "main">
<p>This page shows what happened on out DofE expedition and the things that we did when not on expedition.</p>
<p>This includes doing map work, fitness and orginising and running events localy.</p>
<p>On the following pages, you can find the various evidence to show you what we did and how it benefited us. (or didn't)</p>
</div><!-- "main" end tag -->
<!--<div id = "main2">
<p>This is a test of a second column that should float to the right of the other.</p>
</div>-->
<!-- <div id = "img.1">
<img src="logo.jpg" alt="DofE Logo goes here" height="100" width="73">
</div>-->
</div>
<div id = "footer">
<div id = "footer-margin">
<p>Copyright © Dom Brown 2017</p>
</div>
</div>
</div>
</body>
</html>
Set your css like this
#nav{
padding: 3px;
font-family: Helvetica;
list-style-type: none;
position: absolute;
width: 100%;
}
I'm having issues with clearing floats (could be something else?). I want to make the #newsbar div cleared from the previous floats. So, it's width can expand 100% across the page/browser
I think I've done what I can, and am becoming real frustrated with this. This is what it looks like currently:
Current output:
http://postimg.org/image/l2rxf4603/
If someone can look over my HTML and CSS, I'd much appreciate it. Thanks!
HTML & CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rob's BBC</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1" />
<style type="text/css">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image:url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
.break {
clear: both;
}
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" alt="bbclogo" height="28" />
</div> <!-- logodiv -->
<div id="signindiv">
<img src="images/signinlogo.png" alt="signinlogo" />
<p>Sign In</p>
</div> <!-- signindiv -->
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div> <!-- topmenudiv -->
<div id="searchdiv">
<input type="text" placeholder="search" />
</div> <!-- searchdiv -->
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
</div>
</div> <!-- newsbar -->
</div> <!-- fixedwidth -->
</div> <!-- topbar -->
</div> <!-- container -->
</body>
</html>
JsFiddle: http://jsfiddle.net/1f030av9/
Ok, no floating problem, you just have to get the <div> outside of it's parent ( another <div> with classname "fixedwidth"). Also removed some paddings in order to make the search bar not go to the 2nd line.
Changed css:
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
Became:
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed line padding-right: 22px; from #searchdiv input
Here's a fiddle.
Your <div class="fixedwidth"> is set to a width of 1050px; and your div class="newsbar"> is a child of class="fixedwidth". You've set 'newsbar' to 100% but it cannot override the attributes of the parent div class="fixedwidth"
your fiddle
It works for me
It is stretching to 100%
with slight edits not relating to your issue though
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
clear:both;
}
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed padding-right too from #searchdiv input too
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>