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;
}
Related
I copied the "mega menu" navbar from W3Schools to a blank page and attached custom CSS, but as soon as I attach the bootstrap CSS file, the header layout is changed completely and the dropdown content doesn't show up anymore. I added two images below the snippet to show what exactly happens. I tried finding the CSS conflict with element inspector without success. I also tried different versions of bootstrap.css but all versions are causing the same navbar to become misplaced.
/* HEADER CSS */
/* Custom */
.navbar {
height:100px!important;
border-bottom:5px solid rgba(55,175,75,1.00)!important;
background-color:rgba(255,255,255,1.00)!important;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif"!important;
}
.brand {
margin-top:9px!important;
width:175px!important;
}
.brand-link {
background-color:rgba(255,255,255,0.00)!important;
}
.brand-link:hover {
background-color:rgba(255,255,255,0.00)!important;
}
.navlink {
margin-top:45px!important;
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,1.00)!important;
font-size:1.10em!important;
font-weight:300!important;
}
.navlink:hover {
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,0.35)!important;
}
.droplink {
}
.droplink:hover {
}
.dropbtn {
margin-top:45px!important;
background-color:rgba(255,255,255,1.00)!important;
color:rgba(55,175,75,1.00)!important;
cursor:pointer!important;
font-size:1.10em!important;
font-weight:300!important;
}
.dropdown-content {
margin-top:-2px!important;
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .header {
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .header-title {
margin-top:0!important;
margin-bottom:8px!important;
color:rgba(255,255,255,1.00)!important;
font-size:1.35em!important;
}
.dropdown-content .droprow {
background-color:rgba(55,175,75,1.00)!important;
}
.dropdown-content .dropcol {
background-color:rgba(55,175,75,1.00)!important;
}
/* Default */
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Naamloos document</title><h3></h3>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="navbar">
<a href="/index.htm" class="brand-link">
<img src="/img/brand.png" class="responsive brand" alt="navbar brand icon">
</a>
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div class="header">
<h2 class="header-title">Mega Menu</h2>
</div>
<div class="row droprow">
<div class="column dropcol">
<h3 class="header-title">Category 1</h3>
Link 1
Link 2
Link 3
</div>
<div class="column dropcol">
<h3 class="header-title">Category 2</h3>
Link 1
Link 2
Link 3
</div>
<div class="column dropcol">
<h3 class="header-title">Category 3</h3>
Link 1
Link 2
Link 3
</div>
<div class="column dropcol">
<h3 class="header-title">Category 4</h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Without any bootstrap CSS file attached (blue area is image), while mouse over dropdown button!
With bootstrap CSS file attached (blue area is image), also while mouse over dropdown button!
https://getbootstrap.com/docs/3.3/
Try Bootstrap 3 and check if that still happens to you.
Found the solution!
I completely removed the .navbar class and all corresponding CSS classes from the bootstrap.css file and replaced it with the W3Schools navbar CSS.
As this is a testing site I can do this, but I would not recommend it as a definitive solution. It may cause problems later (I haven't experienced any so far).
I'm trying to make the above text (home help customer etc) similar to the one below Home and all in green box with white text and hover effect but I am unable to add the green background and make the words display similar to the once below with a hover effect I have tried some things out but it did not help me out and also I have tried a lot to move the cart to the top right to make it look like a normal shopping website but it didn't work if you guys see any mistakes or suggestions to make it better I would really appreciate it as I am a beginner https://imgur.com/2Bhxzs2
Help fix the top header please refer the image link as it shows were exactly is the green box and all thank youthe image has the header of the website were there are different buttons like guest customer help etc and I am trying to make it like the one underneath in the green box with a hover effect
<html>
<head>
<title>Rajeshri Traders </title>
<link href="CSS/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="subheader">
<div class="container">
<p> CCTV Supplier</p>
Guest Consumer Download App
Help
</div>
</div>
<!--==main header==-->
<div id="main-header">
<!--logo-->
<div id="logo">
<span id="ist"></span><span id="iist"> Rajshri Traders</span>
</div>
<!--==search area==-->
<div id="search">
<form action="">
</form>
<input class="search-area" type="text" placeholder="Search here">
<input class="search-btn" type="submit" value="SEARCH">
<!--="user-menu"==-->
<div id="user menu">
</div>
<li>Cart
<li>Login
</div>
</div>
</div>
<!----=====navigation bar==--->
<div id="navigation">
<nav>
Home
New Arrivals
Products
Deals
Accesories
Order
</nav>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#wrapper {
font-family: tahoma;
}
/*logo styling*/
#main-header {
width: 100%;
height: 125px;
background: #93A7FF;
display: flex;
flex-wrap: no-wrap;
}
#main-header > div {
flex: 1 1 0;
}
#ist {
color: black;
font-size: 65px;
font-weight: bold;
margin-left: 15px;
font-family: fantasy;
}
#iist {
color: black;
font-size: 45px;
font-weight: bold;
margin-left: 15px;
font-family: fantasy;
}
/*searchinga area styling*/
#search {
padding: 20px;
margin-left: 50px;
text-align: center;
}
.search-area {
width: 350px;
height: 30px;
background: #fff;
border: none;
border-radius: 10px;
padding-left: 15px;
}
.search-btn {
width: 65px;
height: 34px;
border-radius: 10px;
border: none;
color: #fff;
background: brown;
margin-left: 15px;
}
/*this is for user menu styling*/
#user-menu {
margin-top: 20px;
margin-right: 20px;
text-align: right;
}
#unser-menu ul {
list-style-type: none;
width: 100%;
}
#user-menu li {
display: inline-block;
padding: 0px 10px;
}
#main-header > div {
flex: 1 1 0;
}
/*this style is for navigation bar */
#navigation{
width: 100%;
height: 35px;
background: #1aaa1a;
float: left;
box-shadow: 10px 14px 45px 3px #1aaa1a;
}
nav{
width: 1200px;
margin: 0 auto;
}
nav a{
margin-left: 35px;
color: white;
text-decoration: none;
}
nav a:hover{
color:#000;
transition: all .7s ease;
}
To give a background colour to your 'home, help, customer etc' text, you need to refer to the element in which they are all included. In this case, they are all contained within the .container class. So by adding styling to the .container class, you'll be adding styling to the div containing the text in question.
Simply add a background colour to the .container class like this:
.container {
background: #1aaa1a;
}
As for the hover effect, you can specify the effect you want for each link of the 'home, help, container etc'. For example, if you want to change the colour of the text when you hover on it, you can do something like this
.container a:hover {
color: black;
}
The .container a is how you reference the links contained in your .container class.
Alright.So you need to see what styling you have applied to the text in the green box. you need to copy the styling you use in #navigation which is the container for everything in the green box. You have included your links in the green box in a nav element, you have then styled the nav element as follows:
nav{
width: 1200px;
margin: 0 auto;
}
nav a{
margin-left: 35px;
color: white;
text-decoration: none;
}
nav a:hover{
color:#000;
transition: all .7s ease;
}
You need to style your links in the .container div in the same way. The easiest way to do this would be to include your home, help, customer links in a nav element as follows:
<div class="container">
<p> CCTV Supplier</p>
<nav>
Guest Consumer
Download App
Help
</nav>
</div>
Background
I am trying to make a template for a git repo web viewer so it better matches with the rest of my website. I am starting with the top navigation bar. I have been able to put the items I want: logo, menu item links, select menu for branch, and search box.
Problem
I placed the div container for the select menu first and the div container for the search box second. Yet, the two appear in reverse order. I want them back in the correct order as I placed them in the code.
Code
Note: for best results, use a wide window. I will work on responsiveness once this is working.
/*
* Add a black background color to the top navigation
*/
.topnav {
overflow: hidden;
background-color: #444;
}
/*
* Make a style for fixing the menu to the top.
*/
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
/*
* Style the links inside the navigation bar
*/
.topnav a {
float: left;
display: block;
color: #eee;
text-align: center;
padding: 12px 12px;
text-decoration: none;
font-size: 16pt;
}
/*
* Add an active class to highlight the current page
*/
.active {
background-color: #6666;
color: #eee;
}
/*
* Style image in topnav.
*/
.logo {
width: 20px;
height: 20px;
}
/*
* Style image in topnav.
*/
.topnav-image a {
float: left;
display: block;
color: #eee;
text-align: center;
text-decoration: none;
font-size: 16pt;
}
/*
* Right-aligned section inside the top navigation
*/
.topnav-right {
float: right;
}
/*
* Style the right aligned links inside the navigation bar
*/
.topnav-right a {
font-size: 16pt;
}
/*
* Hide the link that should open and close the topnav on
* small screens
*/
.topnav .icon {
display: none;
}
/*
* Change the color of links on hover
*/
/*
* Add a dark background on topnav links and the dropdown button on hover
*/
.topnav a:hover {
background-color: #555;
color: #fff;
}
.topnav .branch-container {
float: right;
}
.topnav .branch-container select {
padding: 5px;
margin: 4px;
border: none;
border-radius: 8px;
font-size: 16pt;
color: #eeeeee;
background-color: #666666;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin: 4px;
font-size: 16pt;
border: none;
border-radius: 8px;
background: #666666;
color: #eeeeee;
}
.topnav .search-container button {
/*float: right;*/
/*padding: 10px 10px;*/
display: none;
margin-top: 4px;
margin-right: 8px;
background: #ddd;
font-size: 16px;
border: none;
cursor: pointer;
background: #444;
color: #eee;
}
.topnav .search-container button:hover {
background: #666;
color: #eee;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: #eee;
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #eee;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #eee;
}
/*
* Format the footer.
*/
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #cccccc;
color: black;
}
/*
* Style the links inside the footer.
*/
.footer a {
float: left;
display: block;
color: black;
text-align: center;
padding: 8px 8px;
text-decoration: none;
font-size: 12pt;
}
/*
* Right-aligned section inside the footer.
*/
.footer-right {
float: right;
}
/*
* Hover effect of footer items.
*/
.footer a:hover {
background-color: #dddddd;
color: black;
}
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
/*
* Format the main content.
*/
.main {
/*padding: 16px;*/
margin-top: 70px;
margin-left: 16px;
margin-right: 16px;
margin-bottom: 50px;
}
h1.title {
font-weight: normal;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Repos: Ali Kakakhel</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
</head>
<body>
<div class="fixed">
<nav class="topnav" id="mytopnav">
<div class="topnav-image">
<img src="https://git-scm.com/images/logos/downloads/Git-Icon-1788C.png" class="logo">
</div>
RepoName
<div class="topnav-right">
About
Summary
Refs
Log
Tree
Commit
Diff
Stats
<div class="branch-container">
<select>
<option value="Master">Master</option>
<option value="Branch1">Branch1</option>
<option value="Branch2">Branch2</option>
<option value="Branch3">Branch3</option>
</select>
</div>
<div class="search-container">
<form action="/action_page.php">
<input type="text" id="SearchInput" placeholder="Search...">
<button type="submit" id="SearchButton" onclick="javascript:alert('Hello World!')"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
</nav>
</div>
<div class="main">
<h1 class="title">Title</h1>
<p>
Far far away, behind the word mountains, far from the countries
Vokalia and Consonantia, there live the blind texts. Separated they
live in Bookmarksgrove right at the coast of the Semantics, a large
language ocean. A small river named Duden flows by their place and
supplies it with the necessary regelialia. It is a paradisematic
country, in which roasted parts of sentences fly into your mouth.
</p>
</div>
<div class="footer" id="myfooter">
<a>Description</a>
<div class="footer-right">
<a>Owner</a>
</div>
</div>
<script>
var input = document.getElementById("SearchInput");
input.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("SearchButton").click();
}
});
</script>
</body>
</html>
I used a border to figure out that my wrapper is only wrapping my Header and I'm stumped as to why...I want to wrap the Header, all the way down to the footer... Anyone have any pointers?
I've seen a lot of articles say to specify a width and the height is set to auto if not stated, too, right?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title>Personal Transportation/Errands Services</title>
</head>
<body>
<header>
<div id="headleft">
<img src="images/new logo flattened.jpg" />
</div>
<div id="headright">
(717)***-****
<br />
********#yahoo.com
</div>
</header>
<nav>
Home
Contact
</nav>
<article>
Test
</article>
<aside>
<img src="images/car 1.png" id="car" />
</aside>
<footer>
Ftest
</footer>
</body>
</html>
/* Makeshift CSS Reset */
{
margin: 0;
padding: 0;
}
/* Tell the browser to render HTML 5 elements as block */
footer, header, aside, nav, article {
display: block;
}
body{
width:940px;
height: 100%;
margin:0 auto;
border-style: solid;
border-width: 3px;
}
header {
background-color: #1a8cff;
}
nav {
width: 100%;
float: left;
text-align: right;
background-color: #ff7f00;
font-family: bold 'Oswald', sans-serif;
color: #ffffff;
letter-spacing: 1px;
}
a {
text-decoration: none;
}
/* unvisited link */
a:link {
color: #FFFFFF;
}
/* visited link */
a:visited {
color: #FFFFFF;
}
/* mouse over link */
a:hover {
color: #FFFF00;
}
/* selected link */
a:active {
color: #FFFF00;
}
#headleft {
display:inline;
background-color: #1a8cff;
width: 100%;
}
#headright {
height: 87px;
padding-top: 37.5px;
vertical-align: middle;
display: inline;
float: right;
background-color: #1a8cff;
border-style: solid;
border-width: 3px;
}
body {
margin: 0 auto;
width: 1000px;
font: 13px/22px Helvetica, Arial, sans-serif;
background-color: white;
background-size: 100%;
}
article{
float: left;
}
aside{
float: right;
}
footer{
float:left;
background-color: #1a8cff;
width: 100%;
}
you need to clear your floated elements, you can use a clearfix or an empty div set to clear:both.
FIDDLE
You could also use a wrapper inside the body that wraps every element on the page and set that to overflow: hidden
ALT FIDDLE
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>