Dollars BBS | Technology

feed-icon

Main

News

Animation

Art

Comics

Films

Food

Games

Literature

Music

Personal

Sports

Technology

Random

Dropdown HTML need HELP (4)

1 Name: Hako !dB/kTjoiFw : 2014-12-17 22:06 ID:qjF1WtVK (Image: 1026x770 png, 723 kb) [Del]

src/1418875614155.png: 1026x770, 723 kb
For all the ScriptKittens out there, I would like to ask for some help regarding in the dropdown menu using html and css. Well you see here in the picture, My page has this bar below the picture that contains buttons and two of them have dropdown menu on them, I used ul and li with a bunch of css coding to make them but I have some issues on using them, (I'll show you do code later on)

Well you see, I was planning to have a table below the selection bar to put up informations and all that, but whenever the mouse hovers in and the dropdown menu shows up, it affects the table below. its like the dropdown menu is a part of the bar and it somehow "push aside" the table below. And secondly, I cannot center the selection bar, so i just adjusted it with putting a few margin to the centered Image.


Well, here's the whole code of the HTML:


html lang="en">
head>
title>Sample HTML by Hako
style>

body {
background-image: url('background.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
/style>

/head>
body>
center>
img src="pict1.jpg" width= "927px" margin-bottom="0px">

ul>
style type="text/css">
ul{

margin-top: 0px;
margin-left: 20px;
padding: 0px;
list-style: none;
}
ul li{
float: left;
width: 232px;
text-align: center;
line-height: 21px;
}
ul li a{
font-size: 15px;
font-family: Calibri;
display: block;
padding: 10px 10px;
color: #333;
background: skyblue;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: aqua;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
/style>
/head>
body>

center>
div>
ul>
li>Home
li>About
/li>
li>
a href="#">AnimeList ▾
ul>
li>Ongoing
li>Completed
li>All
/ul>
/li>
li>Others &#9662
ul>
li>Forums
li>Chatrooms
li>AniWiki
/ul>
/li>
/ul>

/div>

div>

TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
TABLE margin-top "12px">
TR>

TD WIDTH="221" HEIGHT="300" BACKGROUND= "T1.png" Valign= "top">

FONT SIZE="+1" COLOR="yellow">Joe Burns at Work

/TR>
/TABLE>

/div>


/body>



/html>


(I just found out that this page recognize html coding even in the reps!!!)
Well Advance thanks for the reps.
And also It's amateur work, so dont bash me



Sayonnara!!

2 Name: dmdm : 2014-12-18 07:13 ID:ZDfGMR9R [Del]

There are so many things wrong here.
Get a new browser.
Where are your developer tools/firebug?
Why are you using a table to begin with?
Why are you using the center tag???

I will remake this entirely for you when I get home.

3 Name: Hako !dB/kTjoiFw : 2014-12-19 02:00 ID:qjF1WtVK [Del]

Well, just as I told you, this is an amateur work. I wrote the code in notepad, and im using the table since there isn't really other method that i Know of. and for the center tag, I just wrote it since i believed that it would center the ul and li. but it turns out to be a failure. I'm still learning, and im in a fresh start of htmls. thnks 4 the reps though

4 Name: Hako !dB/kTjoiFw : 2014-12-20 04:22 ID:qjF1WtVK (Image: 1026x770 png, 377 kb) [Del]

src/1419070955580.png: 1026x770, 377 kb
I'VE GOT IT... hehe I was so silly i didn't notice about the position: relative thingy whoohoo got it now. oh and thanks for those who reps!!