www.webdeveloper.com
Results 1 to 12 of 12

Thread: CSS + HTML = Vertical Select Menu?

  1. #1
    Join Date
    May 2003
    Posts
    599

    Question CSS + HTML = Vertical Select Menu?

    I'm using the following select menu:
    Code:
    <html>
    <body>
    <form name="form1">
    	<select name="bycategory">
    		<option value="" selected="true">- Select a Category -</option>
    		<option value="all">Default Category</option>
    		<option value="cat1">Category 1</option>
    		<option value="cat2">Category 2</option>
    	</select>
    	<input class="button" type="submit" name="submit" />
    </form>
    </body>
    </html>
    And I'm using the following CSS stylesheet:
    Code:
    /*** SCREEN PROPERTIES BEGIN ***/
    /* Other Media Device Properties (show/hide) */
    #printheader, #handheldheader, #printcenter, #handheldcenter, #print_subheader, #handheld_subheader {
    	display:none;
    }
    
    /* Main HTML Properties */
    html {
    	font-size:62.8%;
    	height:100%;
    }
    
    body {
    	font-family:arial,sans-serif;
    	font-size:1.2em;
    	margin:0px 0px 0px 2px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
    	color:#000000;
    	background-color:#ffffff;
    	height:100%;
    }
    
    p {
    	display:inline;
    }
    
    #breadcrumbs {
    	display:inline;
    }
    
    /* Wrapper Properties */
    #wrapper {
    	position:relative;
    	width:100%;
    	min-height:100%;
    }
    
    /* Header Properties */
    #screenheader {
    
    }
    
    #seal {
    	margin:0px 0px 0px 0px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
    }
    
    /* Left Column Properties */
    #screenleft {
    	position:absolute;
    	margin:0px 0px 0px -2px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
    	width:121px;
    	background-color:#660000;
    	color:#ffffff;
    	height:100%;
    	left:2px;
    	background-image:url(/newsite/images/gif/bottom.gif);
    	background-repeat:no-repeat;
    	background-position:left bottom;
    }
    
    /* Right Column Properties */
    #screenright {/*MASTER RIGHT COLUMN PROPERTY*/
    	position:absolute;
    	margin-top:-25px;
    	margin-right:0px;
    	right:0px;
    	width:240px;
    	height:100%;
    	background-image:url(/newsite/images/gif/rightline.gif);
    	background-repeat:repeat;
    	background-position:right bottom;
    }
    
    .screenright_module {
    	position:relative;
    	margin-right:0px;
    	margin-top:0px;
    	right:0px;
    	width:240px;
    }
    
    /* Center Column Properties */
    #screen_subheader {
    	clear:both;
    	font-size:1.3em;
    	font-style:normal;
    	font-weight:bold;
    	letter-spacing:normal;
    	text-decoration:none;
    	color:#333366;
    	width:100%;
    	background-image: url(/newsite/images/gif/line.gif);
    	background-repeat: no-repeat;
    	background-position: left bottom;
    }
    
    #content {/* TABULAR CONTENT */
    	position:relative;
    	margin:-20px 0px 0px 126px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
    	height:100%;
    }
    
    #content_modules {/* MAIN CONTENT */
    	position:relative;
    	margin:-20px 250px 0px 126px; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
    	height:100%;
    }
    
    /* Footer Properties */
    #screenfooter {
    	position:absolute;
    	margin-left:50%; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
    	bottom:-140px;
    	text-align:center;
    }
    
    /* Regular Links Properties */
    a:link {
    	text-decoration:underline;
    	color:#333366;
    }
    
    a:visited {
    	text-decoration:underline;
    	color:#333366;
    }
    
    a:active {
    	text-decoration:underline;
    	color:#333366;
    }
    
    a:hover {
    	text-decoration:none;
    	color:#660000;
    }
    
    a {
    	text-decoration:underline;
    	color:#333366;
    }
    
    img {
    	border:0px;
    }
    
    /* Small Link Properties */
    a.small:link {
    	font-family:verdana, arial, helvetica, sans-serif;
    	font-size:0.8em;
    	color:#333366;
    	text-decoration:underline;
    }
    
    a.small:visited {
    	font-family:verdana, arial, helvetica, sans-serif;
    	font-size:0.8em;
    	color:#333366;
    	text-decoration:underline;
    }
    
    a.small:active {
    	font-family:verdana, arial, helvetica, sans-serif;
    	font-size:0.8em;
    	color:#333366;
    	text-decoration:underline;
    }
    
    a.small:hover {
    	font-family:verdana, arial, helvetica, sans-serif;
    	font-size:0.8em;
    	color:#660000;
    	text-decoration:none;
    }
    
    a.small {
    	font-family:verdana, arial, helvetica, sans-serif;
    	font-size:0.8em;
    	color:#333366;
    	text-decoration:underline;
    }
    
    /* Tab Link Properties */
    a.tabs:link {
    	text-decoration:none;
    	color:#000033;
    }
    
    a.tabs:visited {
    	text-decoration:none;
    	color:#000033;
    }
    
    a.tabs:active {
    	text-decoration:none;
    	color:#660000;
    }
    
    a.tabs:hover {
    	text-decoration:none;
    	color:#660000;
    }
    
    a.tabs {
    	text-decoration:none;
    	color:#000033;
    }
    
    /* White Header Link Properties */
    a.white:link {
    	text-decoration:underline;
    	font-weight:bold;
    	color:#ffffff;
    }
    
    a.white:visited {
    	text-decoration:underline;
    	font-weight:bold;
    	color:#ffffff;
    }
    
    a.white:active {
    	text-decoration:underline;
    	font-weight:bold;
    	color:#ffffff;
    }
    
    a.white:hover {
    	text-decoration:none;
    	font-weight:bold;
    	color:#ffffff;
    }
    
    a.white {
    	text-decoration:underline;
    	font-weight:bold;
    	color:#ffffff;
    }
    
    /* Heading Properties */
    h1 {
    	display:inline;
    	font-size:1.3em;
    	font-style:normal;
    	font-weight:bold;
    	letter-spacing:normal;
    	text-decoration:none;
    	color:#333366;
    }
    
    h2 {
    	display:inline;
    	font-size:1.2em;
    	font-style:normal;
    	font-weight:bold;
    	letter-spacing:normal;
    	text-decoration:none;
    	color:#660000;
    }
    
    h3 {
    	display:inline;
    	font-size:1.2em;
    	font-style:normal;
    	font-weight:bold;
    	letter-spacing:normal;
    	text-decoration:none;
    	color:#000033;
    }
    
    h4 {
    	display:inline;
    	font-size:1.1em;
    	font-style:normal;
    	font-weight:bold;
    	letter-spacing:normal;
    	text-decoration:none;
    	color:#ff0000;
    }
    
    h5 {
    	display:inline;
    	font-size:1.0em;
    	font-style:normal;
    	font-weight:bold;
    	letter-spacing:normal;
    	text-decoration:none;
    	color:#000000;
    }
    
    h6 {
    	display:inline;
    	font-size:1.0em;
    	font-style:normal;
    	font-weight:bold;
    	letter-spacing:normal;
    	text-decoration:none;
    	color:#ffffff;
    }
    
    /* List-item Properties */
    ol { /* Ordered List (numbers) */
    }
    
    li { /* Unordered List (bullets) */
    	list-style-type:square;
    }
    
    /* Form Properties */
    .form {
    	display:inline;
    	border:collapse;
    	font-family:verdana, arial, helvetica, sans-serif;
    	color:#000000;
    	font-size:.8em;
    	font-weight:bold;
    	padding:1px;
    	vertical-align:top;
    }
    
    .textfield_bold {
    	font-size:1em;
    	font-weight:bold;
    }
    
    .textarea {
    	font-weight:normal;
    	font-size:1em;
    }
    
    .select, option {
    	font-weight:normal;
    	font-size:1em;
    }
    
    .filefield {
    	padding:0px;
    	font-weight:normal;
    }
    
    .gobutton,
    .imagefield {
    	border-width:0px;
    }
    
    .button {
    	width:auto;
    	height:20px;
    	padding:0px 0px;
    	margin:0; /*'margin-top' 'margin-right' 'margin-bottom' 'margin-left'*/
    	text-align:center;
    	cursor:pointer;
    }
    
    /* Horizontal Rule (line) Properties */
    .cranberryline  {
    	border-bottom:1px solid #660000;
    	height:1px;
    	color:#660000;
    }
    
    .navyblueline {
    	border-bottom:1px solid #000033;
    	height:1px;
    	color:#000033;
    }
    
    .medblueline {
    	border-bottom:1px solid #333366;
    	height:1px;
    	color:#333366;
    }
    
    /* Table Properties */
    td {
    	padding-left:5px;
    }
    
    .blackheader { /* Black header */
    	font-weight:bold;
    	color:#000000;
    }
    
    .whiteheader { /* White header */
    	font-weight:bold;
    	color:#FFFFFF;
    }
    
    table.navyblueborder, table.navyblueborder td { /* Navy blue border */
    	border-color:#000033;
    	border-style:solid;
    	border-width:1px;
    	border-collapse:collapse;
    }
    
    table.medblueborder, table.medblueborder td { /* Medium blue border */
    	border-color:#333366;
    	border-style:solid;
    	border-width:1px;
    	border-collapse:collapse;
    }
    
    table.ltblueborder, table.ltblueborder td { /* Light blue border */
    	border-color:#9999CC;
    	border-style:solid;
    	border-width:1px;
    	border-collapse:collapse;
    }
    
    table.iceblueborder, table.iceblueborder td { /* Medium blue border */
    	border-color:#CCCCFF;
    	border-style:solid;
    	border-width:1px;
    	border-collapse:collapse;
    }
    
    table.maroonborder, table.maroonborder td { /* Cranberry border */
    	border-color:#660000;
    	border-style:solid;
    	border-width:1px;
    	border-collapse:collapse;
    }
    
    table.blackborder, table.blackborder td { /* Black border */
    	border-color:#000000;
    	border-style:solid;
    	border-width:1px;
    	border-collapse:collapse;
    }
    
    /* Div Properties */
    .navybluebar { /* Navy blue div bar */
    	font-weight:bold;
    	color:#000000;
    	background-color:#000033;
    	text-indent:2px;
    }
    
    .medbluebar { /* Medium blue div bar */
    	font-weight:bold;
    	color:#000000;
    	background-color:#333366;
    	text-indent:2px;
    }
    
    .ltbluebar { /* Light blue div bar */
    	font-weight:bold;
    	color:#000000;
    	background-color:#9999CC;
    	text-indent:2px;
    }
    
    .icebluebar { /* Ice blue div bar */
    	font-weight:bold;
    	color:#000000;
    	background-color:#CCCCFF;
    	text-indent:2px;
    }
    /*** SCREEN PROPERTIES END ***/
    Which is resulting in a vertical select menu for some reason. I've tried commenting out different sections of the CSS stylehseet to find the source, but I've been unable to find it. So if anyone can see what I'm doing wrong, I'd love to get some help. Thanks.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    What's the problem?

  3. #3
    Join Date
    May 2003
    Posts
    599
    Why am I getting a vertical select menu, and how can I make it into a horizontal select menu?

  4. #4
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,634
    You're getting a vertical select menu because you're using a <select> form element. As far as I know, there is no way to make it horizontal. (If there is, it's probably a proprietary method for a given browser and not part of the CSS specification.)
    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

  5. #5
    Join Date
    Dec 2005
    Location
    Hoogland, the Netherlands
    Posts
    23

    Exclamation Horizontal css menus

    I have found a site with a large variety of menus using css only, including horizontal menus:
    http://www.cssplay.co.uk/menus

  6. #6
    Join Date
    May 2003
    Posts
    599
    Ok, I'm getting very confused now, and that's because I meant to say the opposite thing. (sorry) My menu is displaying the items across horizontally, like this:
    - Select Item - Item 1 Item 2 Item 3...

    And I want them to be vertically-displayed in the standard way, like this:
    - Select Item -
    Item 1
    Item 2
    Item 3...

    This is only happening in Firefox, not in IE. So is there something that I need to add to the code to get the form's select menu to display in the standard way? Thanks.

  7. #7
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Try taking the display:inline; off the form.

  8. #8
    Join Date
    May 2003
    Posts
    599
    Hi ray326,

    I already tried that, but it didn't change the form's select menu. I'm still checking into other possibilities. Thanks for your input.

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    It displays as a normal select in FF

  10. #10
    Join Date
    May 2003
    Posts
    599
    On my page, the select menu displays normally in IE, but not normally in FF. My site's on a test server, so I can't give you a URL for it. But that is what's happening.

  11. #11
    Join Date
    May 2003
    Posts
    599
    After further analysis, I figured out the problem. I had 2 media=screen stylesheets being used on the same page. And even though I had changed the properties in the main stylesheet, those same properties stayed the same in the other default stylesheet. Thanks for all of your help, and I hope that you all have a great week

    P.S. Go Hawks.

  12. #12
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The only way for that to occur is a float:left or display:inline applied to option
    Some other code must be doing it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles